bugfix: Waited for dynamic import to resolve

[ijlee2]

Background

After updating ember-flatpickr from version 4.0.0 to 8.0.0, several rendering and application tests, which assert that the flatpickr calendar works (e.g. the user can see the correct date initially, they can click the input to open the calendar and select a date), became flaky.

I believe the reason is, we need translations for Germany to exist (for these assertions to pass) and have been passing the argument @locale="de". Since ember-flatpickr@>=7.1.0 uses dynamic import to load the translations, tests can fail when loading takes a while. We can see this issue happen by throttling the network when running the tests for ember-flatpickr.

Solution

Wrap the dynamic import() with waitForPromise() from @ember/test-waiters, so that tests know when they can resume with the next step.

[ijlee2]

I removed waitFor() to see if the test can pass without it, and to document how consuming projects may have to write their tests.

[ijlee2]

I believe we need to call settled() after updating the value of @locale using this.set().

[RobbieTheWagner]

@ijlee2 can you please explain what this is doing? I would have thought awaiting the import would be enough.

[ijlee2]

await import is an asynchronous task that is pure JavaScript, so Ember tests can't know when translations are available (when the component is in a settled state), without using waitFor() or waitUntil() from @ember/test-helpers, for example.

I think the tests in this repo might have been passing, because the time to dynamically load the French translations has been short. On the other hand, tests in my production project have sometimes failed, because it can take a while to render a page.

By wrapping the dynamic import with waitForPromise(), projects that consume ember-flatpickr don't need to write additional code such as waitFor() or waitUntil() in their tests.

module('Integration | Component | appointment-form/date', function (hooks) {
  setupRenderingTest(hooks);

  test('We can show the current date', async function (assert) {
    await render(hbs`
      <AppointmentForm::Date
        @date={{this.date}}
      />
    `);
-     await waitUntilDateRenders(); // a test helper that uses waitUntil()

    assert.dom('[data-test-field="Date"]').hasValue('06.08.2024');
  });

  test('We can update the date', async function (assert) {
    await render(hbs`
      <AppointmentForm::Date
        @date={{this.date}}
      />
    `);

    await click('[data-test-field="Date"]');
-     await waitUntilCalendarAppears(); // a test helper that uses waitUntil()
    const dates = getAvailableDates();
    await click(dates[3]);

    assert.dom('[data-test-field="Date"]').hasValue('09.08.2024');
  });
});

[RobbieTheWagner]

Thank you for that explanation!