<commit_before>import { Controller } from 'ember-runtime';
import { Component } from 'ember-glimmer';
import { moduleFor, ApplicationTestCase } from 'internal-test-helpers';

moduleFor('Application Lifecycle - Component Context', class extends ApplicationTestCase {
  ['@test Components with a block should have the proper content when a template is provided'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>
        {{#my-component}}{{text}}{{/my-component}}
      </div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        text: 'inner'
      }),
      template: `{{text}}-{{yield}}`
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'inner-outer', 'The component is composed correctly');
    });
  }

  ['@test Components with a block should yield the proper content without a template provided'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>
        {{#my-component}}{{text}}{{/my-component}}
      </div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        text: 'inner'
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'outer', 'The component is composed correctly');
    });
  }
  ['@test Components without a block should have the proper content when a template is provided'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component}}</div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        text: 'inner'
      }),
      template: '{{text}}'
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'inner', 'The component is composed correctly');
    });
  }

  ['@test Components without a block should have the proper content'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component}}</div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        didInsertElement() {
          this.$().html('Some text inserted by jQuery');
        }
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'Some text inserted by jQuery', 'The component is composed correctly');
    });
  }

  ['@test properties of a component without a template should not collide with internal structures [DEPRECATED]'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component data=foo}}</div>`
    );

    this.add('controller:application', Controller.extend({
      'text': 'outer',
      'foo': 'Some text inserted by jQuery'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        didInsertElement() {
          this.$().html(this.get('data'));
        }
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'Some text inserted by jQuery', 'The component is composed correctly');
    });
  }

  ['@test attrs property of a component without a template should not collide with internal structures'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component attrs=foo}}</div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer',
      'foo': 'Some text inserted by jQuery'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        didInsertElement() {
          // FIXME: I'm unsure if this is even the right way to access attrs
          this.$().html(this.get('attrs.attrs').value);
        }
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'Some text inserted by jQuery', 'The component is composed correctly');
    });
  }

  ['@test Components trigger actions in the parents context when called from within a block'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>
        {{#my-component}}
          <a href='#' id='fizzbuzz' {{action 'fizzbuzz'}}>Fizzbuzz</a>
        {{/my-component}}
      </div>
    `);

    this.add('controller:application', Controller.extend({
      actions: {
        fizzbuzz() {
          assert.ok(true, 'action triggered on parent');
        }
      }
    }));
    this.addComponent('my-component', { ComponentClass: Component.extend({}) });

    return this.visit('/').then(() => {
      this.$('#fizzbuzz', '#wrapper').click();
    });
  }
<commit_msg>remove jquery from component context tests<commit_after>import { Controller } from 'ember-runtime';
import { Component } from 'ember-glimmer';
import { moduleFor, ApplicationTestCase } from 'internal-test-helpers';

moduleFor('Application Lifecycle - Component Context', class extends ApplicationTestCase {
  ['@test Components with a block should have the proper content when a template is provided'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>
        {{#my-component}}{{text}}{{/my-component}}
      </div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        text: 'inner'
      }),
      template: `{{text}}-{{yield}}`
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'inner-outer', 'The component is composed correctly');
    });
  }

  ['@test Components with a block should yield the proper content without a template provided'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>
        {{#my-component}}{{text}}{{/my-component}}
      </div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        text: 'inner'
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'outer', 'The component is composed correctly');
    });
  }
  ['@test Components without a block should have the proper content when a template is provided'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component}}</div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        text: 'inner'
      }),
      template: '{{text}}'
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'inner', 'The component is composed correctly');
    });
  }

  ['@test Components without a block should have the proper content'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component}}</div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        didInsertElement() {
          this.element.innerHTML = 'Some text inserted';
        }
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'Some text inserted', 'The component is composed correctly');
    });
  }

  ['@test properties of a component without a template should not collide with internal structures [DEPRECATED]'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component data=foo}}</div>`
    );

    this.add('controller:application', Controller.extend({
      'text': 'outer',
      'foo': 'Some text inserted'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        didInsertElement() {
          this.element.innerHTML = this.get('data');
        }
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'Some text inserted', 'The component is composed correctly');
    });
  }

  ['@test attrs property of a component without a template should not collide with internal structures'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>{{my-component attrs=foo}}</div>
    `);

    this.add('controller:application', Controller.extend({
      'text': 'outer',
      'foo': 'Some text inserted'
    }));
    this.addComponent('my-component', {
      ComponentClass: Component.extend({
        didInsertElement() {
          // FIXME: I'm unsure if this is even the right way to access attrs
          this.element.innerHTML = this.get('attrs.attrs').value;
        }
      })
    });

    return this.visit('/').then(() => {
      let text = this.$('#wrapper').text().trim();
      assert.equal(text, 'Some text inserted', 'The component is composed correctly');
    });
  }

  ['@test Components trigger actions in the parents context when called from within a block'](assert) {
    this.addTemplate('application', `
      <div id='wrapper'>
        {{#my-component}}
          <a href='#' id='fizzbuzz' {{action 'fizzbuzz'}}>Fizzbuzz</a>
        {{/my-component}}
      </div>
    `);

    this.add('controller:application', Controller.extend({
      actions: {
        fizzbuzz() {
          assert.ok(true, 'action triggered on parent');
        }
      }
    }));
    this.addComponent('my-component', { ComponentClass: Component.extend({}) });

    return this.visit('/').then(() => {
      this.$('#fizzbuzz', '#wrapper').click();
    });
  }

{'fraction_non_alphanumeric': 0.17866588304437261, 'fraction_numerical': 0.0, 'mean_word_length': 2.923904688700999, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5208628', 'n_tokens_mistral': 2875, 'n_tokens_neox': 2835, 'n_words': 676}