TypeScript test-helpers.render函數代碼示例

  test('property rendering', async function(assert) {
    const time = new Date().getTime();
    const actor = 'John Appleseed';
    const title = 'Last Modified';

    this.set('time', time);
    this.set('actor', actor);
    this.set('title', title);

    await render(hbs`{{last-saved-by time=time actor=actor}}`);

    assert.ok(this.element.textContent!.includes(moment(time).fromNow()), 'it shows the last saved time from now');
    assert.ok(this.element.textContent!.includes(actor), 'it shows the actor attribute');

    await render(hbs`{{last-saved-by time=time title=title}}`);

    assert.ok(this.element.textContent!.includes('Last Modified'), 'it shows the passed in title');
    assert.ok(!this.element.textContent!.includes('Last Saved:'), 'it does not show the default title');

    await render(hbs`
      {{#last-saved-by time=time title=title actor=actor as |ls|}}
        <div class="yielded-title">{{ls.title}}</div>
        <div class="yielded-actor">{{ls.actor}}</div>
      {{/last-saved-by}}
    `);

    assert.equal(find('.yielded-title')!.textContent!.trim(), title, 'block usage yields the title');
    assert.equal(find('.yielded-actor')!.textContent!.trim(), actor, 'block usage yields the actor');
  });

test('DOM interactions', async () => {
    await render(hbs`<div class="message">Hello, world</div>`);

    await click('.message');
    await doubleClick('.message');
    await tap('.message');
    await focus('.message');
    await blur('.message');
    await triggerEvent('.message', 'custom-event');
    await triggerKeyEvent('.message', 'keydown', 'Enter', { ctrlKey: true });
    await fillIn('.message', 'content');

    const messageElement = find('.message')!;
    await click(messageElement);
    await doubleClick(messageElement);
    await tap(messageElement);
    await focus(messageElement);
    await blur(messageElement);
    await triggerEvent(messageElement, 'custom-event');
    await triggerKeyEvent(messageElement, 'keydown', 'Enter', { ctrlKey: true });
    await fillIn(messageElement, 'content');
    await typeIn(messageElement, 'content');

    const allMessages = findAll('.message');
    for (const element of allMessages) {
        await click(element);
    }

    const root = getRootElement();
    await click(root);
});

  test('onTypeahead', async function(this: ITestWithMirageContext, assert) {
    const apiHandler = getMirageHandle(this, '/api/v1/autocomplete/datasets', 'get');
    assert.expect(6);

    containerComponentTest(this, async (component: IContainerStub) => {
      // dont return anything with less than 3
      const results1 = await component.onTypeahead('h');
      assert.equal(results1.length, 0);

      // return list
      const results2 = await component.onTypeahead('hol');
      assert.ok(results2.length > 0);

      // cache return
      const results3 = await component.onTypeahead('hol');
      assert.ok(results3.length > 0);
      assert.equal(apiHandler.numberOfCalls, 1, 'cached return');

      // debounce
      component.onTypeahead('hola');
      component.onTypeahead('hola ');
      const results4 = await component.onTypeahead('hola nacho');
      assert.ok(results4.length > 0);
      assert.equal(apiHandler.numberOfCalls, 2, 'App debounces calls');
    });

    await render(hbs`
      {{#search/containers/search-box  as |keyword placeholder onTypeahead onSearch|}}
        {{container-stub onTypeahead=(action onTypeahead)}}
      {{/search/containers/search-box}}
    `);
  });

  test('component yielding with a urn', async function(assert) {
    assert.expect(1);

    const { server }: any = this;
    const upstreamCount = 3;

    server.createList('datasetView', upstreamCount);

    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{#datasets/containers/dataset-lineage-upstreams urn=urn as |container|}}
        <ul class="container-list">
          {{#each container.upstreams}}
            <li></li>
          {{/each}}
        </ul>
      {{/datasets/containers/dataset-lineage-upstreams}}
    `);

    assert.equal(
      findAll('.container-list li')!.length,
      upstreamCount,
      'expect component to yield each upstream dataset'
    );
  });

  @test async 'it renders when used in {{inline-form}}'(assert: Assert) {
    // Set any properties with this.set('myProperty', 'value');
    // Handle any actions with this.set('myAction', function(val) { ... });

    await render(hbs`{{x-foo}}`);

    assert.equal(('' + this.element.textContent).trim(), '');
  }

      hooks.beforeEach(async function(this: TestContext) {
        this.set('someUrl', 'https://i.imgur.com/gCyUdeb.gifv');

        await render(hbs`
                     {{chat-history/message/embedded-resource
                      url=someUrl}}
                     `);
      });

  @test async 'it renders when used in {{inline-form}}'(assert: Assert) {
    // Set any properties with this.set('myProperty', 'value');
    // Handle any actions with this.set('myAction', function(val) { ... });

    await render(hbs`{{no-service-injected}}`);

    assert.equal(('' + this.element.textContent).trim(), 'Is the resize service automatically injected? false');
  }

  test('component rendering', async function(assert) {
    assert.expect(1);

    await render(hbs`
      {{datasets/dataset-fabric-switcher}}
    `);

    assert.ok(this.element.querySelector('.dataset-fabric-switcher'), 'expected component class exists in DOM');
  });

  @test
  async 'it renders when used in {{inline-form}}'(assert: Assert) {
    // Set any properties with this.set('myProperty', 'value');
    // Handle any actions with this.set('myAction', function(val) { ... });

    await render(hbs`{{ember-oembed src='http://soundcloud.com/forss/flickermood'}}`);

    assert.equal(('' + this.element.textContent).trim(), '');
  }