bugfix: Waited for dynamic import to resolve (#2100)

* refactor: Added failing tests * bugfix: Waited for dynamic import to resolve * chore: Added lockfile --------- Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>
RobbieTheWagner · Aug 6, 2024 · 6aafbf4 · 6aafbf4
1 parent 2df2cc4
commit 6aafbf4
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/ember-flatpickr/package.json b/ember-flatpickr/package.json
@@ -41,7 +41,8 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.3",
-    "@ember/test-helpers": "~3.3.0",
+    "@ember/test-helpers": "^3.3.0",
+    "@ember/test-waiters": "^3.1.0",
     "@embroider/addon-shim": "^1.8.7"
   },
   "devDependencies": {

diff --git a/ember-flatpickr/src/components/ember-flatpickr.ts b/ember-flatpickr/src/components/ember-flatpickr.ts
@@ -4,6 +4,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { scheduleOnce } from '@ember/runloop';
+import { waitForPromise } from '@ember/test-waiters';
 import type { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import type { BaseOptions as FlatpickrOptions } from 'flatpickr/dist/types/options';
 import flatpickr from 'flatpickr';
@@ -133,8 +134,10 @@ export default class EmberFlatpickr extends Component<EmberFlatpickrArgs> {
       Object.entries(rest).filter((entry) => entry[1] !== undefined),
     );
 
-    if (typeof this.args.locale === 'string' && this.args.locale !== "en") {
-      await import(`flatpickr/dist/l10n/${this.args.locale}.js`);
+    if (typeof this.args.locale === 'string' && this.args.locale !== 'en') {
+      await waitForPromise(
+        import(`flatpickr/dist/l10n/${this.args.locale}.js`),
+      );
     }
 
     this.flatpickrRef = flatpickr(element, {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test-app/tests/integration/components/ember-flatpickr-test.js b/test-app/tests/integration/components/ember-flatpickr-test.js
@@ -6,8 +6,8 @@ import {
   render,
   find,
   findAll,
+  settled,
   triggerEvent,
-  waitFor,
 } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import {
@@ -431,7 +431,7 @@ module('Integration | Component | ember flatpickr', function (hooks) {
     assert.strictEqual(enabledDays[1].textContent, '25');
   });
 
-  test('locale works correctly', async function (assert) {
+  test('locale as object works correctly', async function (assert) {
     assert.expect(1);
 
     this.set('dateValue', '2080-12-01T16:16:22.585Z');
@@ -463,7 +463,6 @@ module('Integration | Component | ember flatpickr', function (hooks) {
     this.set('dateValue', '2080-12-01T16:16:22.585Z');
     this.set('maxDate', '2080-12-31T16:16:22.585Z');
     this.set('minDate', '2080-12-01T16:16:22.585Z');
-
     this.set('locale', 'fr');
 
     await render(hbs`<EmberFlatpickr
@@ -475,8 +474,6 @@ module('Integration | Component | ember flatpickr', function (hooks) {
       placeholder="Pick date"
     />`);
 
-    await waitFor('.flatpickr-current-month .flatpickr-monthDropdown-month');
-
     assert.strictEqual(
       find(
         '.flatpickr-current-month .flatpickr-monthDropdown-month',
@@ -486,7 +483,7 @@ module('Integration | Component | ember flatpickr', function (hooks) {
     );
   });
 
-  test('onLocaleUpdated fired', async function (assert) {
+  test('onLocaleUpdated (locale as object)', async function (assert) {
     assert.expect(1);
 
     this.set('dateValue', '2080-12-01T16:16:22.585Z');
@@ -504,6 +501,38 @@ module('Integration | Component | ember flatpickr', function (hooks) {
     />`);
 
     this.set('locale', langs.ru);
+    await settled();
+
+    await openFlatpickr();
+
+    assert.strictEqual(
+      find(
+        '.flatpickr-current-month .flatpickr-monthDropdown-month',
+      ).textContent.trim(),
+      'Декабрь',
+      'Russian locale applied successfully',
+    );
+  });
+
+  test('onLocaleUpdated (locale as string)', async function (assert) {
+    assert.expect(1);
+
+    this.set('dateValue', '2080-12-01T16:16:22.585Z');
+    this.set('maxDate', '2080-12-31T16:16:22.585Z');
+    this.set('minDate', '2080-12-01T16:16:22.585Z');
+    this.set('locale', 'fr');
+
+    await render(hbs`<EmberFlatpickr
+      @date={{this.dateValue}}
+      @locale={{this.locale}}
+      @maxDate={{this.maxDate}}
+      @minDate={{this.minDate}}
+      @onChange={{null}}
+      placeholder="Pick date"
+    />`);
+
+    this.set('locale', 'ru');
+    await settled();
 
     await openFlatpickr();