try to fix failing test

tests/helpers/wait-calcite-ready.ts

@@ -2,25 +2,70 @@ type GenericCalciteElement = Element & {
   componentOnReady?: () => Promise<void>;
 };
 
-export default async function waitCalciteReady() {
-  const existingTagNames = [...document.querySelectorAll('*')].map((o) => o.tagName);
-  const uniqTagNames = Object.keys(
-    existingTagNames.reduce<Record<string, true>>(function (acc, name) {
-      acc[name] = true;
-      return acc;
-    }, {}),
-  );
+const MAX_TIMEOUT = 5000;
+const TIME_SINCE_LAST_MUTATION = 1000;
+
+export default async function waitCalciteReady(
+  opt: { timeout: number } = { timeout: MAX_TIMEOUT },
+) {
+  const start = new Date();
+
+  // This does not seems to work as expected
+  await waitAllCalciteComponentReady();
+  // Use some workaround based on mutation observer to wait for page mutation end.
+  await uiSettled(opt.timeout);
 
+  console.log('waitCalciteReady DONE', new Date().getTime() - start.getTime());
+}
+
+async function waitAllCalciteComponentReady() {
+  const existingTagNames = [...document.querySelectorAll('*')].map((o) => o.tagName);
+  const uniqTagNames = [...new Set([...existingTagNames]).values()];
   const calciteComponentName = uniqTagNames.filter((name) => name.startsWith('CALCITE'));
 
   await Promise.all(
     calciteComponentName.map(async (tagName) => {
       await customElements.whenDefined(tagName.toLowerCase());
       await Promise.all(
-        [...document.querySelectorAll<GenericCalciteElement>(tagName)].map((e) =>
-          e.componentOnReady?.(),
-        ),
+        [...document.querySelectorAll<GenericCalciteElement>(tagName)].map(async (e) => {
+          await e.componentOnReady?.();
+        }),
       );
     }),
   );
 }
+
+// Inspired from https://github.com/CrowdStrike/ember-url-hash-polyfill/blob/main/addon/index.ts ^^
+async function uiSettled(timeout: number) {
+  const timeStarted = new Date().getTime();
+  let lastMutationAt = new Date().getTime();
+
+  const observer = new MutationObserver(() => {
+    lastMutationAt = new Date().getTime();
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  /**
+   * Wait for DOM mutations to stop until MAX_TIMEOUT
+   */
+  await new Promise((resolve) => {
+    function requestTimeCheck() {
+      requestAnimationFrame(() => {
+        const timeSinceLastMutation = new Date().getTime() - lastMutationAt;
+
+        if (new Date().getTime() - timeStarted >= timeout) {
+          return resolve(null);
+        }
+
+        if (timeSinceLastMutation >= TIME_SINCE_LAST_MUTATION) {
+          return resolve(null);
+        }
+
+        requestTimeCheck();
+      });
+    }
+
+    requestTimeCheck();
+  });
+}

tests/integration/components/lang-switcher-test.ts

@@ -2,13 +2,14 @@ import Component from '@glimmer/component';
 import Service from '@ember/service';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, settled, waitFor } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setComponentTemplate } from '@ember/component';
 import config from 'text2stl/config/environment';
 const {
   APP: { availableLanguages },
 } = config;
+import waitCalciteReady from 'text2stl/tests/helpers/wait-calcite-ready';
 
 import type IntlService from 'ember-intl/services/intl';
 
@@ -37,6 +38,8 @@ module('Integration | Component | lang-switcher', function (hooks) {
     this.owner.register('component:link-to', MyLinkTo);
 
     await render(hbs`<LangSwitcher class="my-custom-class" />`);
+    await waitCalciteReady();
+
     assert
       .dom('calcite-segmented-control')
       .exists('it renders a calcite-segmented-control')
@@ -48,18 +51,21 @@ module('Integration | Component | lang-switcher', function (hooks) {
 
     assert
       .dom('calcite-segmented-control-item[data-test-lang="en-us"]')
-      .hasAttribute('checked', '', 'Current locale is "selected“');
+      .hasAttribute('checked', '', 'Current locale (EN) is "selected“');
 
     assert
       .dom('calcite-segmented-control-item[data-test-lang="fr-fr"]')
-      .doesNotHaveAttribute('checked', 'Other button is not "selected“');
+      .doesNotHaveAttribute('checked', 'FR is not "selected“');
 
     (this.owner.lookup('service:intl') as IntlService).locale = ['fr-fr'];
     await settled();
-    await waitFor('calcite-segmented-control-item[data-test-lang="fr-fr"][checked]');
+    await waitCalciteReady();
 
+    assert
+      .dom('calcite-segmented-control-item[data-test-lang="fr-fr"]')
+      .hasAttribute('checked', '', 'Current locale (FR) is "selected“');
     assert
       .dom('calcite-segmented-control-item[data-test-lang="en-us"]')
-      .doesNotHaveAttribute('checked', 'Other button is not "selected“');
+      .doesNotHaveAttribute('checked', 'EN is not "selected“');
   });
 });

tests/integration/components/settings-form/font-test.ts

@@ -5,6 +5,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setComponentTemplate } from '@ember/component';
 import { tracked } from '@glimmer/tracking';
 import templateOnly from '@ember/component/template-only';
+import waitCalciteReady from 'text2stl/tests/helpers/wait-calcite-ready';
 
 module('Integration | Component | settings-form/font', function (hooks) {
   setupRenderingTest(hooks);
@@ -39,6 +40,8 @@ module('Integration | Component | settings-form/font', function (hooks) {
     assert.dom('[data-mocked-font-picker]').exists('It renders font picker');
 
     await click('[data-test-custom-checkbox]');
+    await waitCalciteReady();
+
     assert.verifySteps([]);
 
     assert.dom('[data-test-custom-font-upload]').exists('Custom font upload is now rendered');
@@ -81,6 +84,8 @@ module('Integration | Component | settings-form/font', function (hooks) {
 
     // Switch back to custom font
     await click('[data-test-custom-checkbox]');
+    await waitCalciteReady();
+
     assert.dom('[data-test-custom-font-upload]').exists('Custom font upload is now rendered');
     assert.dom('[data-mocked-font-picker]').doesNotExist('It no longer renders font picker');
     assert.strictEqual(model.customFont, fontFile, 'model.customFont was update with font file');

tests/integration/components/settings-form/handle-test.ts

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, waitFor } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import config from 'text2stl/config/environment';
 const {
@@ -9,6 +9,7 @@ const {
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import { ModelType } from 'text2stl/services/text-maker';
 import fillCalciteInput from 'text2stl/tests/helpers/fill-calcite-input';
+import waitCalciteReady from 'text2stl/tests/helpers/wait-calcite-ready';
 
 module('Integration | Component | advanced-settings-form/handle', function (hooks) {
   setupRenderingTest(hooks);
@@ -29,7 +30,7 @@ module('Integration | Component | advanced-settings-form/handle', function (hook
       .doesNotExist('it does not render handle settings when handle-type is "none"');
 
     await click('[data-test-handle-type-item] [data-test-value="hole"]');
-    await waitFor('[data-test-handle-position]', { timeout: 1000 });
+    await waitCalciteReady();
 
     assert.dom('[data-test-handle-position]').exists('it show handle-position input');
     assert.dom('[data-test-settings-handle-size]').exists('it show handle-size input');

tests/integration/components/settings-form/text-test.ts

@@ -101,7 +101,7 @@ module('Integration | Component | settings-form/text', function (hooks) {
       '[data-test-settings-text-alignment] calcite-radio-button[data-test-value="right"]',
     );
 
-    await waitUntil(() => model.alignment === 'right');
+    await waitUntil(() => model.alignment === 'right', { timeout: 5000 });
     assert.strictEqual(model.alignment, 'right', 'model.alignment was updated');
 
     assert

tests/integration/components/settings-form/type-select-test.ts

@@ -44,7 +44,7 @@ module('Integration | Component | settings-form/select-type', function (hooks) {
     await click(
       `calcite-segmented-control-item[data-test-type="${ModelType.VerticalTextWithSupport}"]`,
     );
-    await waitUntil(() => model.text === 'some multiline text', { timeout: 1000 });
+    await waitUntil(() => model.text === 'some multiline text', { timeout: 5000 });
     assert.strictEqual(model.text, 'some multiline text', 'text was updated');
   });
 });