Try fixing tests

tests/acceptance/visual-test.ts

@@ -7,6 +7,7 @@ import percySnapshot from '@percy/ember';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import mockFontManager from 'text2stl/tests/helpers/mock-font-manager';
 import mockGtag from 'text2stl/tests/helpers/mock-gtag';
+import waitCalciteReady from 'text2stl/tests/helpers/wait-calcite-ready';
 
 module('Acceptance | visual', function (hooks) {
   setupApplicationTest(hooks);
@@ -22,6 +23,7 @@ module('Acceptance | visual', function (hooks) {
       const settingsQP = settings.serialize();
       // Load test settings through QP
       await visit(`/en-us/generator?modelSettings=${settingsQP}`);
+      await waitCalciteReady();
 
       await new Promise(function (resolve) {
         setTimeout(resolve, 250);

tests/helpers/wait-calcite-ready.ts

@@ -0,0 +1,26 @@
+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 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?.(),
+        ),
+      );
+    }),
+  );
+}

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

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

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

@@ -1,14 +1,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click } from '@ember/test-helpers';
+import { render, click, waitUntil } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import config from 'text2stl/config/environment';
 const {
   APP: { textMakerDefault },
 } = config;
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import { ModelType } from 'text2stl/services/text-maker';
-import wait from 'text2stl/tests/helpers/wait';
 
 import fillCalciteInput from 'text2stl/tests/helpers/fill-calcite-input';
 
@@ -101,7 +100,8 @@ module('Integration | Component | settings-form/text', function (hooks) {
     await click(
       '[data-test-settings-text-alignment] calcite-radio-button[data-test-value="right"]',
     );
-    await wait(250);
+
+    await waitUntil(() => model.alignment === 'right');
     assert.strictEqual(model.alignment, 'right', 'model.alignment was updated');
 
     assert

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

@@ -1,14 +1,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click } from '@ember/test-helpers';
+import { render, click, waitUntil } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import config from 'text2stl/config/environment';
 const {
   APP: { textMakerDefault },
 } = config;
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import { ModelType } from 'text2stl/services/text-maker';
-import wait from 'text2stl/tests/helpers/wait';
 
 module('Integration | Component | settings-form/select-type', function (hooks) {
   setupRenderingTest(hooks);
@@ -21,8 +20,6 @@ module('Integration | Component | settings-form/select-type', function (hooks) {
     this.set('model', model);
 
     await render(hbs`<SettingsForm::TypeSelect @model={{this.model}} />`);
-    await wait();
-
     assert.dom('calcite-segmented-control').exists('It render type selector');
     assert.dom('calcite-segmented-control-item').exists({ count: 4 });
 
@@ -31,6 +28,7 @@ module('Integration | Component | settings-form/select-type', function (hooks) {
       .hasAttribute('data-test-checked', '', 'Correct type is checked');
 
     await click(`calcite-segmented-control-item[data-test-type="${ModelType.TextWithSupport}"]`);
+    await waitUntil(() => model.type === ModelType.TextWithSupport);
     assert.strictEqual(model.type, ModelType.TextWithSupport, 'It change model type');
   });
 
@@ -46,7 +44,7 @@ module('Integration | Component | settings-form/select-type', function (hooks) {
     await click(
       `calcite-segmented-control-item[data-test-type="${ModelType.VerticalTextWithSupport}"]`,
     );
-    await wait();
+    await waitUntil(() => model.text === 'some multiline text');
     assert.strictEqual(model.text, 'some multiline text', 'text was updated');
   });
 });

tests/integration/components/ui/file-upload-test.ts

@@ -1,8 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, triggerEvent, find } from '@ember/test-helpers';
+import { render, triggerEvent, find, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import wait from 'text2stl/tests/helpers/wait';
+// import wait from 'text2stl/tests/helpers/wait';
 
 const validFile = new Blob(['foo', 'bar'], { type: 'my/mime_type' });
 const invalidFile = new Blob(['foo', 'bar'], { type: 'another/mime_type' });
@@ -38,11 +38,9 @@ module('Integration | Component | ui/file-upload', function (hooks) {
 
     assert.dom('[data-test-main]').doesNotHaveAttribute('selected');
     await triggerEvent('[data-test-main]', 'dragover');
-    await wait();
-    assert.dom('[data-test-main]').hasAttribute('selected');
+    await waitFor('[data-test-main][selected]');
     await triggerEvent('[data-test-main]', 'dragleave');
-    await wait();
-    assert.dom('[data-test-main]').doesNotHaveAttribute('selected');
+    await waitFor('[data-test-main]:not([selected])');
   });
 
   test('it handles file change for valid or invalid file type', async function (assert) {