diff --git a/tests/integration/components/container-query/tagName-test.js b/tests/integration/components/container-query/tagName-test.js new file mode 100644 index 00000000..389eb9fe --- /dev/null +++ b/tests/integration/components/container-query/tagName-test.js @@ -0,0 +1,222 @@ +import { set } from '@ember/object'; +import { render, settled } from '@ember/test-helpers'; +import setupContainerQueryTest from 'dummy/tests/helpers/container-query'; +import resizeContainer from 'dummy/tests/helpers/resize-container'; +import { hbs } from 'ember-cli-htmlbars'; +import { setupRenderingTest } from 'ember-qunit'; +import { module, test } from 'qunit'; + +module('Integration | Component | container-query', function(hooks) { + setupRenderingTest(hooks); + setupContainerQueryTest(hooks); + + + module('When @tagName is undefined', function(hooks) { + hooks.beforeEach(async function() { + await render(hbs` +
+ +

{{CQ.features.small}}

+

{{CQ.features.medium}}

+

{{CQ.features.large}}

+ +

{{CQ.features.short}}

+

{{CQ.features.tall}}

+ +

{{CQ.features.ratio-type-A}}

+

{{CQ.features.ratio-type-B}}

+

{{CQ.features.ratio-type-C}}

+ +

{{CQ.dimensions.width}} x {{CQ.dimensions.height}}

+

{{CQ.dimensions.aspectRatio}}

+
+
+ `); + }); + + + test('The component has the
tag', async function(assert) { + assert.dom('[data-test-container-query]') + .hasTagName('div', 'Tag name is correct.'); + }); + + + test('The component continues to have the
tag when it is resized', async function(assert) { + await resizeContainer(500, 300); + + assert.dom('[data-test-container-query]') + .hasTagName('div', 'Tag name is correct.'); + + + await resizeContainer(800, 400); + + assert.dom('[data-test-container-query]') + .hasTagName('div', 'Tag name is correct.'); + + + await resizeContainer(1000, 600); + + assert.dom('[data-test-container-query]') + .hasTagName('div', 'Tag name is correct.'); + }); + }); + + + module('When @tagName is passed', function(hooks) { + hooks.beforeEach(async function() { + await render(hbs` +
+ +

{{CQ.features.small}}

+

{{CQ.features.medium}}

+

{{CQ.features.large}}

+ +

{{CQ.features.short}}

+

{{CQ.features.tall}}

+ +

{{CQ.features.ratio-type-A}}

+

{{CQ.features.ratio-type-B}}

+

{{CQ.features.ratio-type-C}}

+ +

{{CQ.dimensions.width}} x {{CQ.dimensions.height}}

+

{{CQ.dimensions.aspectRatio}}

+
+
+ `); + }); + + + test('The component has the correct tag', async function(assert) { + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.'); + }); + + + test('The component continues to have the correct tag when it is resized', async function(assert) { + await resizeContainer(500, 300); + + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.'); + + + await resizeContainer(800, 400); + + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.'); + + + await resizeContainer(1000, 600); + + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.'); + }); + }); + + + module('When @tagName is updated', function(hooks) { + hooks.beforeEach(async function() { + this.tagName = 'section'; + + await render(hbs` +
+ +

{{CQ.features.small}}

+

{{CQ.features.medium}}

+

{{CQ.features.large}}

+ +

{{CQ.features.short}}

+

{{CQ.features.tall}}

+ +

{{CQ.features.ratio-type-A}}

+

{{CQ.features.ratio-type-B}}

+

{{CQ.features.ratio-type-C}}

+ +

{{CQ.dimensions.width}} x {{CQ.dimensions.height}}

+

{{CQ.dimensions.aspectRatio}}

+
+
+ `); + + set(this, 'tagName', 'article'); + + await settled(); + }); + + + test('The component doesn\'t update the tag', async function(assert) { + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.') + .doesNotHaveTagName('article', 'Tag name did not change.'); + }); + + + test('The component continues to not update the tag when it is resized', async function(assert) { + await resizeContainer(500, 300); + + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.') + .doesNotHaveTagName('article', 'Tag name did not change.'); + + + await resizeContainer(800, 400); + + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.') + .doesNotHaveTagName('article', 'Tag name did not change.'); + + + await resizeContainer(1000, 600); + + assert.dom('[data-test-container-query]') + .hasTagName('section', 'Tag name is correct.') + .doesNotHaveTagName('article', 'Tag name did not change.'); + }); + }); +}); \ No newline at end of file