diff --git a/tests/acceptance/visual-test.ts b/tests/acceptance/visual-test.ts index 6953164..2f5aaf8 100644 --- a/tests/acceptance/visual-test.ts +++ b/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); diff --git a/tests/helpers/wait-calcite-ready.ts b/tests/helpers/wait-calcite-ready.ts new file mode 100644 index 0000000..eff0e04 --- /dev/null +++ b/tests/helpers/wait-calcite-ready.ts @@ -0,0 +1,26 @@ +type GenericCalciteElement = Element & { + componentOnReady?: () => Promise; +}; + +export default async function waitCalciteReady() { + const existingTagNames = [...document.querySelectorAll('*')].map((o) => o.tagName); + const uniqTagNames = Object.keys( + existingTagNames.reduce>(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(tagName)].map((e) => + e.componentOnReady?.(), + ), + ); + }), + ); +} diff --git a/tests/integration/components/lang-switcher-test.ts b/tests/integration/components/lang-switcher-test.ts index 32035c3..ee7d647 100644 --- a/tests/integration/components/lang-switcher-test.ts +++ b/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``); - 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“'); }); }); diff --git a/tests/integration/components/settings-form/text-test.ts b/tests/integration/components/settings-form/text-test.ts index b9436e0..9f79136 100644 --- a/tests/integration/components/settings-form/text-test.ts +++ b/tests/integration/components/settings-form/text-test.ts @@ -1,6 +1,6 @@ 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 { @@ -8,7 +8,6 @@ const { } = 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 diff --git a/tests/integration/components/settings-form/type-select-test.ts b/tests/integration/components/settings-form/type-select-test.ts index 940e279..230bd04 100644 --- a/tests/integration/components/settings-form/type-select-test.ts +++ b/tests/integration/components/settings-form/type-select-test.ts @@ -1,6 +1,6 @@ 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 { @@ -8,7 +8,6 @@ const { } = 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``); - 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'); }); }); diff --git a/tests/integration/components/ui/file-upload-test.ts b/tests/integration/components/ui/file-upload-test.ts index 7546a0e..3b76be6 100644 --- a/tests/integration/components/ui/file-upload-test.ts +++ b/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) {