diff --git a/test-app/tests/integration/components/basic-dropdown-test.js b/test-app/tests/integration/components/basic-dropdown-test.js index 89574db9..61876ac4 100644 --- a/test-app/tests/integration/components/basic-dropdown-test.js +++ b/test-app/tests/integration/components/basic-dropdown-test.js @@ -11,6 +11,7 @@ import { waitUntil, find, settled, + pauseTest } from '@ember/test-helpers'; let deprecations = []; @@ -1397,6 +1398,55 @@ module('Integration | Component | basic-dropdown', function (hooks) { wormhole.remove(); }); + test('Shadow dom: Its `toggle` action opens and closes the dropdown with renderInPlace', async function (assert) { + + await render(hbs` + + + Click me + + + + + + `); + + assert + .dom('#dropdown-is-opened', this.element.getRootNode()) + .doesNotExist('The dropdown is closed'); + + const triggerElement = find('[data-shadow]')?.shadowRoot.querySelector( + '.ember-basic-dropdown-trigger', + ); + + await click(triggerElement); + + assert + .dom('.ember-basic-dropdown-content', find('[data-shadow]').shadowRoot) + .exists('The dropdown is rendered'); + + + assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown is opened'); + + await click(find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened')); + + assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown stays opened when clicking content'); + + await click(triggerElement); + + assert + .dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot) + .doesNotExist('The dropdown is closed again'); + + await click(triggerElement); + + assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown is opened 2d time'); + + await click(find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened')); + + assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown stays opened when clicking content after 2d open'); + }); + test('Shadow dom: Its `toggle` action opens and closes the dropdown when wormhole is inside shadow dom', async function (assert) { await render(hbs` @@ -1406,7 +1456,7 @@ module('Integration | Component | basic-dropdown', function (hooks) { - +
`);