@norith/glimmer-component 1.0.0

package/test/ember/integration/components/glimmer-component-test.js

@@ -0,0 +1,288 @@
+import GlimmerComponent from '@norith/glimmer-component';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, clearRender, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { getOwner } from '@ember/application';
+import { set, computed } from '@ember/object';
+
+import { gte } from 'ember-compatibility-helpers';
+
+module('Integration | Component | @glimmer/component', function (hooks) {
+  let InstrumentedComponent;
+
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function (assert) {
+    InstrumentedComponent = class extends GlimmerComponent {
+      constructor() {
+        super(...arguments);
+        assert.step('constructor');
+      }
+
+      willDestroy() {
+        assert.step('willDestroy');
+      }
+    };
+  });
+
+  test('it can render with curlies (no args)', async function (assert) {
+    this.owner.register('component:under-test', InstrumentedComponent);
+
+    await render(hbs`{{under-test}}`);
+
+    assert.verifySteps(['constructor'], 'initial setup steps');
+
+    await clearRender();
+
+    assert.verifySteps(['willDestroy'], 'post destroy steps');
+  });
+
+  test('it can render and update with curlies (args)', async function (assert) {
+    this.owner.register('component:under-test', InstrumentedComponent);
+    this.owner.register('template:components/under-test', hbs`<p>{{@text}}</p>`);
+
+    this.set('text', 'hello!');
+    await render(hbs`{{under-test text=this.text}}`);
+
+    assert.dom('p').hasText('hello!');
+    assert.verifySteps(['constructor'], 'initial render steps');
+
+    this.set('text', 'hello world!');
+
+    assert.dom('p').hasText('hello world!');
+    assert.verifySteps([], 'no rerender steps');
+
+    this.set('text', 'hello!');
+
+    assert.dom('p').hasText('hello!');
+    assert.verifySteps([], 'no rerender steps');
+
+    await clearRender();
+
+    assert.verifySteps(['willDestroy'], 'post destroy steps');
+  });
+
+  test('it can render with angles (no args)', async function (assert) {
+    this.owner.register('component:under-test', InstrumentedComponent);
+
+    await render(hbs`<UnderTest />`);
+
+    assert.verifySteps(['constructor'], 'initial render steps');
+
+    await clearRender();
+
+    assert.verifySteps(['willDestroy'], 'post destroy steps');
+  });
+
+  test('it can render and update with angles (args)', async function (assert) {
+    this.owner.register('component:under-test', InstrumentedComponent);
+    this.owner.register('template:components/under-test', hbs`<p>{{@text}}</p>`);
+
+    this.set('text', 'hello!');
+    await render(hbs`<UnderTest @text={{this.text}} />`);
+
+    assert.dom('p').hasText('hello!');
+    assert.verifySteps(['constructor'], 'initial render steps');
+
+    this.set('text', 'hello world!');
+
+    assert.dom('p').hasText('hello world!');
+    assert.verifySteps([], 'no rerender steps');
+
+    this.set('text', 'hello!');
+
+    assert.dom('p').hasText('hello!');
+    assert.verifySteps([], 'no rerender steps');
+
+    await clearRender();
+
+    assert.verifySteps(['willDestroy'], 'post destroy steps');
+  });
+
+  test('it can use args in component', async function (assert) {
+    this.owner.register(
+      'component:under-test',
+      class extends GlimmerComponent {
+        get text() {
+          return this.args.text.toUpperCase();
+        }
+      }
+    );
+    this.owner.register('template:components/under-test', hbs`<p>{{this.text}}</p>`);
+
+    this.set('text', 'hello!');
+    await render(hbs`<UnderTest @text={{this.text}} />`);
+    assert.dom('p').hasText('HELLO!');
+  });
+
+  test('it can use args in constructor', async function (assert) {
+    this.owner.register(
+      'component:under-test',
+      class extends GlimmerComponent {
+        constructor() {
+          super(...arguments);
+
+          this.text = this.args.text.toUpperCase();
+        }
+      }
+    );
+    this.owner.register('template:components/under-test', hbs`<p>{{this.text}}</p>`);
+
+    this.set('text', 'hello!');
+    await render(hbs`<UnderTest @text={{this.text}} />`);
+    assert.dom('p').hasText('HELLO!');
+  });
+
+  test('it can use get/set to recompute for changes', async function (assert) {
+    this.owner.register(
+      'component:under-test',
+      class extends GlimmerComponent {
+        constructor() {
+          super(...arguments);
+
+          this.count = 0;
+        }
+
+        increment() {
+          set(this, 'count', this.count + 1);
+        }
+      }
+    );
+    this.owner.register(
+      'template:components/under-test',
+      hbs`<p>Count: {{this.count}}</p><button data-test="increment" onclick={{action this.increment}}>Increment</button>`
+    );
+
+    await render(hbs`<UnderTest />`);
+    assert.dom('p').hasText('Count: 0');
+
+    await click('button[data-test=increment]');
+    assert.dom('p').hasText('Count: 1');
+
+    await click('button[data-test=increment]');
+    assert.dom('p').hasText('Count: 2');
+  });
+
+  test('does not update for non-tracked property changes', async function (assert) {
+    this.owner.register(
+      'component:under-test',
+      class extends GlimmerComponent {
+        constructor() {
+          super(...arguments);
+
+          this._count = 0;
+        }
+
+        get count() {
+          return this._count;
+        }
+
+        set count(value) {
+          this._count = value;
+        }
+
+        increment() {
+          this.count++;
+        }
+      }
+    );
+    this.owner.register(
+      'template:components/under-test',
+      hbs`<p>Count: {{this.count}}</p><button data-test="increment" onclick={{action this.increment}}>Increment</button>`
+    );
+
+    await render(hbs`<UnderTest />`);
+    assert.dom('p').hasText('Count: 0');
+
+    await click('button[data-test=increment]');
+    assert.dom('p').hasText('Count: 0');
+
+    await click('button[data-test=increment]');
+    assert.dom('p').hasText('Count: 0');
+  });
+
+  test('it has an owner', async function (assert) {
+    this.owner.register(
+      'component:under-test',
+      class extends GlimmerComponent {
+        get environment() {
+          return getOwner(this).resolveRegistration('config:environment').environment;
+        }
+      }
+    );
+    this.owner.register(
+      'template:components/under-test',
+      hbs`<p>Environment: {{this.environment}}</p>`
+    );
+    await render(hbs`<UnderTest />`);
+    assert.dom('p').hasText('Environment: test');
+  });
+
+  test('computed properties can depend on args', async function (assert) {
+    this.owner.register(
+      'component:under-test',
+      class extends InstrumentedComponent {
+        @computed('args.text')
+        get text() {
+          return this.args.text;
+        }
+      }
+    );
+    this.owner.register('template:components/under-test', hbs`<p>{{this.text}}</p>`);
+
+    this.set('text', 'hello!');
+    await render(hbs`<UnderTest @text={{this.text}}/>`);
+
+    assert.dom('p').hasText('hello!');
+    assert.verifySteps(['constructor'], 'initial render steps');
+
+    this.set('text', 'hello world!');
+
+    assert.dom('p').hasText('hello world!');
+    assert.verifySteps([], 'no rerender steps');
+
+    this.set('text', 'hello!');
+
+    assert.dom('p').hasText('hello!');
+    assert.verifySteps([], 'no rerender steps');
+
+    await clearRender();
+
+    assert.verifySteps(['willDestroy'], 'post destroy steps');
+  });
+
+  if (gte('3.13.0-alpha.0')) {
+    test('args autotrack correctly', async function (assert) {
+      this.owner.register(
+        'component:under-test',
+        class extends InstrumentedComponent {
+          get text() {
+            return this.args.text;
+          }
+        }
+      );
+      this.owner.register('template:components/under-test', hbs`<p>{{this.text}}</p>`);
+
+      this.set('text', 'hello!');
+      await render(hbs`<UnderTest @text={{this.text}}/>`);
+
+      assert.dom('p').hasText('hello!');
+      assert.verifySteps(['constructor'], 'initial render steps');
+
+      this.set('text', 'hello world!');
+
+      assert.dom('p').hasText('hello world!');
+      assert.verifySteps([], 'no rerender steps');
+
+      this.set('text', 'hello!');
+
+      assert.dom('p').hasText('hello!');
+      assert.verifySteps([], 'no rerender steps');
+
+      await clearRender();
+
+      assert.verifySteps(['willDestroy'], 'post destroy steps');
+    });
+  }
+});

package/test/ember/test-helper.js

@@ -0,0 +1,12 @@
+import Application from '../app';
+import config from '../config/environment';
+import { setApplication } from '@ember/test-helpers';
+import { start } from 'ember-qunit';
+import { setup } from 'qunit-dom';
+import * as QUnit from 'qunit';
+
+setup(QUnit.assert);
+
+setApplication(Application.create(config.APP));
+
+start();

package/test/index.ts

@@ -0,0 +1 @@
+import './interactive';

package/test/interactive/args-test.ts

@@ -0,0 +1,49 @@
+import Component from '@norith/glimmer-component';
+import { tracked } from '@norith/glimmer-tracking';
+
+import { setComponentTemplate, precompileTemplate } from '@norith/glimmer-core';
+import { test, render, settled } from '@norith/glimmer-core/test/utils';
+
+QUnit.module('[@glimmer/component] Component Arguments', () => {
+  test('Getters that depend on `args` re-render correctly', async function (assert) {
+    assert.expect(2);
+
+    let parent: ParentComponent;
+
+    class ParentComponent extends Component {
+      @tracked firstName = 'Tom';
+      @tracked status = 'is dope';
+
+      constructor(owner: object, args: {}) {
+        super(owner, args);
+        parent = this;
+      }
+    }
+
+    class ChildComponent extends Component<{ firstName: string }> {
+      get name(): string {
+        return `${this.args.firstName} Dale`;
+      }
+    }
+
+    setComponentTemplate(
+      precompileTemplate(
+        '<ChildComponent @firstName={{this.firstName}} @status={{this.status}} />',
+        { strictMode: true, scope: { ChildComponent } }
+      ),
+      ParentComponent
+    );
+
+    setComponentTemplate(
+      precompileTemplate('{{this.name}} {{@status}}', { strictMode: true }),
+      ChildComponent
+    );
+
+    assert.equal(await render(ParentComponent), 'Tom Dale is dope');
+
+    parent!.firstName = 'Thom';
+    parent!.status = 'is dank';
+
+    assert.equal(await settled(), 'Thom Dale is dank');
+  });
+});

package/test/interactive/index.ts

@@ -0,0 +1,2 @@
+import './args-test';
+import './lifecycle-hook-test';

package/test/interactive/lifecycle-hook-test.ts

@@ -0,0 +1,99 @@
+import Component from '@norith/glimmer-component';
+import { tracked } from '@norith/glimmer-tracking';
+
+import { test, render, settled } from '@norith/glimmer-core/test/utils';
+import { setComponentTemplate, precompileTemplate } from '@norith/glimmer-core';
+
+QUnit.module('[@glimmer/component] Lifecycle Hooks', () => {
+  test('Lifecycle hook ordering', async function (assert) {
+    assert.expect(2);
+
+    let invocations: [string, string][] = [];
+    let component1: Component1;
+
+    abstract class HookLoggerComponent extends Component<{ name: string }> {
+      constructor(owner: object, args: { name: string }) {
+        super(owner, args);
+        invocations.push([this.args.name, 'constructor']);
+      }
+
+      willDestroy(): void {
+        invocations.push([this.args.name, 'willDestroy']);
+      }
+    }
+
+    class Component1 extends HookLoggerComponent {
+      @tracked firstName = 'Chirag';
+      @tracked showChildren = true;
+
+      constructor(owner: object, args: { name: string }) {
+        super(owner, args);
+        component1 = this;
+      }
+    }
+    class Component2 extends HookLoggerComponent {}
+    class Component3 extends HookLoggerComponent {}
+    class Component4 extends HookLoggerComponent {}
+    class Component5 extends HookLoggerComponent {}
+
+    setComponentTemplate(
+      precompileTemplate(
+        `
+          {{#if this.showChildren}}
+            <Component2 @name="component2" @firstName={{this.firstName}} />
+            <Component3 @name="component3"/>
+          {{/if}}
+        `,
+        {
+          strictMode: true,
+          scope: { Component2, Component3 },
+        }
+      ),
+      Component1
+    );
+
+    setComponentTemplate(
+      precompileTemplate(
+        `
+          {{@firstName}}
+          <Component4 @name="component4"/>
+          <Component5 @name="component5"/>
+        `,
+        {
+          strictMode: true,
+          scope: { Component4, Component5 },
+        }
+      ),
+      Component2
+    );
+
+    const emptyTemplate = precompileTemplate('');
+
+    setComponentTemplate(emptyTemplate, Component3);
+    setComponentTemplate(emptyTemplate, Component4);
+    setComponentTemplate(emptyTemplate, Component5);
+
+    await render(Component1, { args: { name: 'component1' } });
+
+    assert.deepEqual(invocations, [
+      ['component1', 'constructor'],
+      ['component2', 'constructor'],
+      ['component4', 'constructor'],
+      ['component5', 'constructor'],
+      ['component3', 'constructor'],
+    ]);
+
+    invocations = [];
+
+    component1!.showChildren = false;
+
+    await settled();
+
+    assert.deepEqual(invocations, [
+      ['component2', 'willDestroy'],
+      ['component4', 'willDestroy'],
+      ['component5', 'willDestroy'],
+      ['component3', 'willDestroy'],
+    ]);
+  });
+});

package/types/@ember/component.d.ts

@@ -0,0 +1,11 @@
+declare module '@ember/component' {
+  export function setComponentManager<T>(managerId: string, baseClass: T): T;
+  export function setComponentManager<T>(managerFactory: (owner: unknown) => {}, baseClass: T): T;
+  export function capabilities(
+    version: string,
+    opts?: {
+      destructor?: boolean;
+      asyncLifecycleCallbacks?: boolean;
+    }
+  ): unknown;
+}

package/types/ember/index.d.ts

@@ -0,0 +1,9 @@
+declare module 'ember' {
+  function meta(obj: object): Meta;
+  function destroy(obj: object);
+}
+
+declare class Meta {
+  setSourceDestroying();
+  setSourceDestroyed();
+}

package/types/ember-compatibility-helpers.d.ts

@@ -0,0 +1 @@
+export function gte(version: string): boolean;