From 3c13c47f5a19ac701fd514e95fea6d729bc1a3a8 Mon Sep 17 00:00:00 2001
From: Josemar Luedke <josemarluedke@gmail.com>
Date: Mon, 10 Feb 2025 10:22:45 -0800
Subject: [PATCH] chore: update tests to gts on
utilities,notifications,forms,buttons,status,collections
---
...on-group-test.ts => button-group-test.gts} | 75 +++--
.../{buttons-test.ts => buttons-test.gts} | 48 ++-
.../buttons/{chip-test.ts => chip-test.gts} | 53 ++--
...e-button-test.ts => close-button-test.gts} | 55 +++-
...-button-test.ts => toggle-button-test.gts} | 48 ++-
.../{dropdown-test.ts => dropdown-test.gts} | 89 +++---
.../{listbox-test.ts => listbox-test.gts} | 293 +++++++++---------
...-select-test.ts => native-select-test.gts} | 158 +++++-----
...ard-test.ts => notification-card-test.gts} | 134 ++++----
...st.ts => notifications-container-test.gts} | 43 ++-
.../progress-bar-test.gts} | 120 +++++--
...llapsible-test.ts => collapsible-test.gts} | 54 ++--
.../utilities/visually-hidden-test.gts | 26 ++
.../utilities/visually-hidden-test.ts | 25 --
14 files changed, 697 insertions(+), 524 deletions(-)
rename test-app/tests/integration/components/buttons/{button-group-test.ts => button-group-test.gts} (65%)
rename test-app/tests/integration/components/buttons/{buttons-test.ts => buttons-test.gts} (76%)
rename test-app/tests/integration/components/buttons/{chip-test.ts => chip-test.gts} (75%)
rename test-app/tests/integration/components/buttons/{close-button-test.ts => close-button-test.gts} (55%)
rename test-app/tests/integration/components/buttons/{toggle-button-test.ts => toggle-button-test.gts} (65%)
rename test-app/tests/integration/components/collections/{dropdown-test.ts => dropdown-test.gts} (81%)
rename test-app/tests/integration/components/collections/{listbox-test.ts => listbox-test.gts} (72%)
rename test-app/tests/integration/components/forms/{native-select-test.ts => native-select-test.gts} (61%)
rename test-app/tests/integration/components/notifications/{notification-card-test.ts => notification-card-test.gts} (67%)
rename test-app/tests/integration/components/notifications/{notifications-container-test.ts => notifications-container-test.gts} (78%)
rename test-app/tests/integration/components/{buttons/progress-bar-test.ts => status/progress-bar-test.gts} (68%)
rename test-app/tests/integration/components/utilities/{collapsible-test.ts => collapsible-test.gts} (77%)
create mode 100644 test-app/tests/integration/components/utilities/visually-hidden-test.gts
delete mode 100644 test-app/tests/integration/components/utilities/visually-hidden-test.ts
diff --git a/test-app/tests/integration/components/buttons/button-group-test.ts b/test-app/tests/integration/components/buttons/button-group-test.gts
similarity index 65%
rename from test-app/tests/integration/components/buttons/button-group-test.ts
rename to test-app/tests/integration/components/buttons/button-group-test.gts
index d9f75500..b58febc8 100644
--- a/test-app/tests/integration/components/buttons/button-group-test.ts
+++ b/test-app/tests/integration/components/buttons/button-group-test.gts
@@ -1,9 +1,11 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { ButtonGroup } from '@frontile/buttons';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
module(
'Integration | Component | ButtonGroup | @frontile/buttons',
@@ -61,10 +63,12 @@ module(
test('it renders', async function (assert) {
await render(
- hbs`<ButtonGroup data-test-id="group" as |g|>
- <g.Button data-test-id="button">Button</g.Button>
- <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
- </ButtonGroup>`
+ <template>
+ <ButtonGroup data-test-id="group" as |g|>
+ <g.Button data-test-id="button">Button</g.Button>
+ <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+ </ButtonGroup>
+ </template>
);
assert.dom('[data-test-id="group"]').exists();
@@ -75,12 +79,13 @@ module(
module('Style classes', () => {
module('@appearance', () => {
test('it adds class for default appearance', async function (assert) {
- this.set('appearance', '');
await render(
- hbs`<ButtonGroup data-test-id="group" @appearance={{this.appearance}} as |g|>
- <g.Button data-test-id="button">Button</g.Button>
- <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
- </ButtonGroup>`
+ <template>
+ <ButtonGroup data-test-id="group" as |g|>
+ <g.Button data-test-id="button">Button</g.Button>
+ <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+ </ButtonGroup>
+ </template>
);
assert
@@ -92,12 +97,18 @@ module(
});
test('it adds class for outlined appearance', async function (assert) {
- this.set('appearance', 'outlined');
+ const appearance = cell<'outlined'>('outlined');
await render(
- hbs`<ButtonGroup data-test-id="group" @appearance={{this.appearance}} as |g|>
- <g.Button data-test-id="button">Button</g.Button>
- <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
- </ButtonGroup>`
+ <template>
+ <ButtonGroup
+ data-test-id="group"
+ @appearance={{appearance.current}}
+ as |g|
+ >
+ <g.Button data-test-id="button">Button</g.Button>
+ <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+ </ButtonGroup>
+ </template>
);
assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -109,17 +120,24 @@ module(
module('@intent', () => {
test('it adds class for the an intent', async function (assert) {
- this.set('intent', 'primary');
+ const intent = cell<'primary' | 'danger'>('primary');
await render(
- hbs`<ButtonGroup data-test-id="group" @intent={{this.intent}} as |g|>
- <g.Button data-test-id="button">Button</g.Button>
- <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
- </ButtonGroup>`
+ <template>
+ <ButtonGroup
+ data-test-id="group"
+ @intent={{intent.current}}
+ as |g|
+ >
+ <g.Button data-test-id="button">Button</g.Button>
+ <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+ </ButtonGroup>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('intent-primary');
assert.dom('[data-test-id="toggle"]').hasClass('intent-primary');
- this.set('intent', 'danger');
+ intent.current = 'danger';
+ await settled();
assert.dom('[data-test-id="button"]').hasClass('intent-danger');
assert.dom('[data-test-id="toggle"]').hasClass('intent-danger');
});
@@ -127,17 +145,20 @@ module(
module('@size', () => {
test('it adds class for the an intent', async function (assert) {
- this.set('size', 'sm');
+ const size = cell<'sm' | 'lg'>('sm');
await render(
- hbs`<ButtonGroup data-test-id="group" @size={{this.size}} as |g|>
- <g.Button data-test-id="button">Button</g.Button>
- <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
- </ButtonGroup>`
+ <template>
+ <ButtonGroup data-test-id="group" @size={{size.current}} as |g|>
+ <g.Button data-test-id="button">Button</g.Button>
+ <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+ </ButtonGroup>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('btn-sm');
assert.dom('[data-test-id="toggle"]').hasClass('toggle-button-sm');
- this.set('size', 'lg');
+ size.current = 'lg';
+ await settled();
assert.dom('[data-test-id="button"]').hasClass('btn-lg');
assert.dom('[data-test-id="toggle"]').hasClass('toggle-button-lg');
});
diff --git a/test-app/tests/integration/components/buttons/buttons-test.ts b/test-app/tests/integration/components/buttons/buttons-test.gts
similarity index 76%
rename from test-app/tests/integration/components/buttons/buttons-test.ts
rename to test-app/tests/integration/components/buttons/buttons-test.gts
index 0d98de8e..4d912a31 100644
--- a/test-app/tests/integration/components/buttons/buttons-test.ts
+++ b/test-app/tests/integration/components/buttons/buttons-test.gts
@@ -1,9 +1,9 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { Button } from '@frontile/buttons';
registerCustomStyles({
button: tv({
@@ -44,7 +44,11 @@ module(
setupRenderingTest(hooks);
test('it renders', async function (assert) {
- await render(hbs`<Button data-test-id="button">My Button</Button>`);
+ await render(
+ <template>
+ <Button data-test-id="button">My Button</Button>
+ </template>
+ );
assert.dom('[data-test-id="button"]').hasText('My Button');
assert.dom('[data-test-id="button"]').hasAttribute('type', 'button');
@@ -52,7 +56,9 @@ module(
test('it accepts @type argument', async function (assert) {
await render(
- hbs`<Button @type="submit" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @type="submit" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').hasAttribute('type', 'submit');
@@ -61,7 +67,11 @@ module(
module('Style classes', () => {
module('@appearance', () => {
test('it adds class for default appearance', async function (assert) {
- await render(hbs`<Button data-test-id="button">My Button</Button>`);
+ await render(
+ <template>
+ <Button data-test-id="button">My Button</Button>
+ </template>
+ );
assert
.dom('[data-test-id="button"]')
@@ -73,7 +83,9 @@ module(
test('it adds class for outlined appearance', async function (assert) {
await render(
- hbs`<Button @appearance="outlined" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @appearance="outlined" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -84,7 +96,9 @@ module(
test('it adds class for minimal appearance', async function (assert) {
await render(
- hbs`<Button @appearance="minimal" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @appearance="minimal" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -97,7 +111,9 @@ module(
test('it adds class for custom appearance', async function (assert) {
await render(
- hbs`<Button @appearance="custom" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @appearance="custom" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -112,7 +128,9 @@ module(
module('@intent', () => {
test('it adds class for the an intent', async function (assert) {
await render(
- hbs`<Button @intent="primary" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @intent="primary" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('intent-primary');
@@ -122,7 +140,9 @@ module(
module('sizes', () => {
test('it adds class size xs"', async function (assert) {
await render(
- hbs`<Button @size="xs" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @size="xs" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('btn-xs');
@@ -130,7 +150,9 @@ module(
test('it adds class size xl', async function (assert) {
await render(
- hbs`<Button @size="xl" data-test-id="button">My Button</Button>`
+ <template>
+ <Button @size="xl" data-test-id="button">My Button</Button>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('btn-xl');
@@ -140,9 +162,11 @@ module(
test('it yields classNames when renderless', async function (assert) {
await render(
- hbs`<Button @isRenderless={{true}} as |btn|>
+ <template>
+ <Button @isRenderless={{true}} as |btn|>
<div data-test-id="my-div">{{btn.classNames}}</div>
- </Button>`
+ </Button>
+ </template>
);
assert
.dom('[data-test-id="my-div"]')
diff --git a/test-app/tests/integration/components/buttons/chip-test.ts b/test-app/tests/integration/components/buttons/chip-test.gts
similarity index 75%
rename from test-app/tests/integration/components/buttons/chip-test.ts
rename to test-app/tests/integration/components/buttons/chip-test.gts
index 68180925..450d6094 100644
--- a/test-app/tests/integration/components/buttons/chip-test.ts
+++ b/test-app/tests/integration/components/buttons/chip-test.gts
@@ -1,9 +1,9 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { Chip } from '@frontile/buttons';
registerCustomStyles({
chip: tv({
@@ -49,7 +49,11 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
- await render(hbs`<Chip data-test-id="button">My Chip</Chip>`);
+ await render(
+ <template>
+ <Chip data-test-id="button">My Chip</Chip>
+ </template>
+ );
assert.dom('[data-test-id="button"]').hasText('My Chip');
});
@@ -57,7 +61,11 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
module('Style classes', () => {
module('@appearance', () => {
test('it adds class for default appearance', async function (assert) {
- await render(hbs`<Chip data-test-id="button">My Chip</Chip>`);
+ await render(
+ <template>
+ <Chip data-test-id="button">My Chip</Chip>
+ </template>
+ );
assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-outlined');
assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-faded');
@@ -66,7 +74,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
test('it adds class for outlined appearance', async function (assert) {
await render(
- hbs`<Chip @appearance="outlined" data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @appearance="outlined" data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-default');
@@ -76,29 +86,23 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
test('it adds class for faded appearance', async function (assert) {
await render(
- hbs`<Chip @appearance="faded" data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @appearance="faded" data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-default');
assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-outlined');
assert.dom('[data-test-id="button"]').hasClass('chip-faded');
});
-
- test('it adds class for custom appearance', async function (assert) {
- await render(
- hbs`<Chip @appearance="custom" data-test-id="button">My Chip</Chip>`
- );
-
- assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-default');
- assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-outlined');
- assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-faded');
- });
});
module('@intent', () => {
test('it adds class for the an intent', async function (assert) {
await render(
- hbs`<Chip @intent="primary" data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @intent="primary" data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('intent-primary');
@@ -108,7 +112,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
module('@size', () => {
test('it adds class size sm"', async function (assert) {
await render(
- hbs`<Chip @size="sm" data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @size="sm" data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('chip-sm');
@@ -116,7 +122,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
test('it adds class size lg', async function (assert) {
await render(
- hbs`<Chip @size="lg" data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @size="lg" data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('chip-lg');
@@ -126,7 +134,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
module('@withDot', () => {
test('it adds dot when argument is passed in', async function (assert) {
await render(
- hbs`<Chip @withDot={{true}} data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @withDot={{true}} data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"] .chip-dot').exists();
@@ -135,8 +145,11 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
module('@onClose', () => {
test('adds close button when onClose argument is passed in', async function (assert) {
+ const onClose = () => {};
await render(
- hbs`<Chip @onClose={{true}} data-test-id="button">My Chip</Chip>`
+ <template>
+ <Chip @onClose={{onClose}} data-test-id="button">My Chip</Chip>
+ </template>
);
assert.dom('[data-test-id="button"] .chip-close-button').exists();
diff --git a/test-app/tests/integration/components/buttons/close-button-test.ts b/test-app/tests/integration/components/buttons/close-button-test.gts
similarity index 55%
rename from test-app/tests/integration/components/buttons/close-button-test.ts
rename to test-app/tests/integration/components/buttons/close-button-test.gts
index 5f8829d9..50b8cdff 100644
--- a/test-app/tests/integration/components/buttons/close-button-test.ts
+++ b/test-app/tests/integration/components/buttons/close-button-test.gts
@@ -1,9 +1,11 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render, RenderingTestContext } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { CloseButton } from '@frontile/buttons';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
registerCustomStyles({
closeButton: tv({
@@ -24,7 +26,7 @@ registerCustomStyles({
defaultVariants: {
size: 'md'
}
- })
+ } as never)
});
module(
@@ -32,18 +34,27 @@ module(
function (hooks) {
setupRenderingTest(hooks);
- test('it renders title', async function (this: RenderingTestContext, assert) {
- await render(hbs`<CloseButton @title={{this.title}} />`);
+ test('it renders title', async function (assert) {
+ const title = cell('');
+ await render(
+ <template>
+ <div data-test-element><CloseButton @title={{title.current}} /></div>
+ </template>
+ );
+
+ assert.dom('[data-test-element]').hasText('Close');
- assert.equal(this.element.textContent?.trim(), 'Close');
+ title.current = 'Fechar Menu';
+ await settled();
- this.set('title', 'Fechar Menu');
- assert.equal(this.element.textContent?.trim(), 'Fechar Menu');
+ assert.dom('[data-test-element]').hasText('Fechar Menu');
});
test('it allows to yield', async function (assert) {
await render(
- hbs`<CloseButton><div class="icon">Here is my icon</div></CloseButton>`
+ <template>
+ <CloseButton><div class="icon">Here is my icon</div></CloseButton>
+ </template>
);
assert.dom('.close-button .icon').exists();
@@ -52,34 +63,44 @@ module(
test('it yields the icon classes', async function (assert) {
await render(
- hbs`<CloseButton as |class|><div class="icon">{{class}}</div></CloseButton>`
+ <template>
+ <CloseButton as |class|><div
+ class="icon"
+ >{{class}}</div></CloseButton>
+ </template>
);
assert.dom('.close-button .icon').hasText('close-button__icon');
});
test('it adds size classes', async function (assert) {
- await render(hbs`<CloseButton @size={{this.size}} />`);
+ const size = cell<undefined | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>();
+ await render(<template><CloseButton @size={{size.current}} /></template>);
assert.dom('.close-button').hasClass('close-button--md');
- this.set('size', 'xs');
+ size.current = 'xs';
+ await settled();
assert.dom('.close-button').hasClass('close-button--xs');
- this.set('size', 'sm');
+ size.current = 'sm';
+ await settled();
assert.dom('.close-button').hasClass('close-button--sm');
- this.set('size', 'md');
+ size.current = 'md';
+ await settled();
assert.dom('.close-button').hasClass('close-button--md');
- this.set('size', 'lg');
+ size.current = 'lg';
+ await settled();
assert.dom('.close-button').hasClass('close-button--lg');
- this.set('size', 'xl');
+ size.current = 'xl';
+ await settled();
assert.dom('.close-button').hasClass('close-button--xl');
});
test('it allows to pass @class for component curlying', async function (assert) {
- await render(hbs`<CloseButton @class="some-class" />`);
+ await render(<template><CloseButton @class="some-class" /></template>);
assert.dom('.close-button').hasClass('some-class');
});
}
diff --git a/test-app/tests/integration/components/buttons/toggle-button-test.ts b/test-app/tests/integration/components/buttons/toggle-button-test.gts
similarity index 65%
rename from test-app/tests/integration/components/buttons/toggle-button-test.ts
rename to test-app/tests/integration/components/buttons/toggle-button-test.gts
index 2cc0a323..941fccae 100644
--- a/test-app/tests/integration/components/buttons/toggle-button-test.ts
+++ b/test-app/tests/integration/components/buttons/toggle-button-test.gts
@@ -1,9 +1,11 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { ToggleButton } from '@frontile/buttons';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
module(
'Integration | Component | ToggleButton | @frontile/buttons',
@@ -39,7 +41,9 @@ module(
test('it renders', async function (assert) {
await render(
- hbs`<ToggleButton data-test-id="button">My ToggleButton</ToggleButton>`
+ <template>
+ <ToggleButton data-test-id="button">My ToggleButton</ToggleButton>
+ </template>
);
assert.dom('[data-test-id="button"]').hasText('My ToggleButton');
@@ -47,13 +51,19 @@ module(
module('@isSelected', () => {
test('adds aria-pressed', async function (assert) {
- this.set('isSelected', false);
+ const isSelected = cell(false);
await render(
- hbs`<ToggleButton @isSelected={{this.isSelected}} data-test-id="button">My ToggleButton</ToggleButton>`
+ <template>
+ <ToggleButton
+ @isSelected={{isSelected.current}}
+ data-test-id="button"
+ >My ToggleButton</ToggleButton>
+ </template>
);
assert.dom('[data-test-id="button"]').hasAria('pressed', 'false');
- this.set('isSelected', true);
+ isSelected.current = true;
+ await settled();
assert.dom('[data-test-id="button"]').hasAria('pressed', 'true');
});
@@ -61,11 +71,19 @@ module(
module('@onChange', () => {
test('calls onChange argument', async function (assert) {
- this.set('onChange', (val: boolean) => {
+ const onChange = (val: boolean) => {
assert.equal(val, true);
- });
+ };
await render(
- hbs`<ToggleButton @isSelected={{false}} @onChange={{this.onChange}} data-test-id="button">My ToggleButton</ToggleButton>`
+ <template>
+ <ToggleButton
+ @isSelected={{false}}
+ @onChange={{onChange}}
+ data-test-id="button"
+ >
+ My ToggleButton
+ </ToggleButton>
+ </template>
);
await click('[data-test-id="button"]');
@@ -77,7 +95,11 @@ module(
module('@intent', () => {
test('it adds class for the an intent', async function (assert) {
await render(
- hbs`<ToggleButton @intent="primary" data-test-id="button">My ToggleButton</ToggleButton>`
+ <template>
+ <ToggleButton @intent="primary" data-test-id="button">
+ My ToggleButton
+ </ToggleButton>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('intent-primary');
@@ -87,7 +109,9 @@ module(
module('@size', () => {
test('it adds class size sm"', async function (assert) {
await render(
- hbs`<ToggleButton @size="sm" data-test-id="button">My ToggleButton</ToggleButton>`
+ <template>
+ <ToggleButton @size="sm" data-test-id="button">My ToggleButton</ToggleButton>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('toggle-button-sm');
@@ -95,7 +119,9 @@ module(
test('it adds class size lg', async function (assert) {
await render(
- hbs`<ToggleButton @size="lg" data-test-id="button">My ToggleButton</ToggleButton>`
+ <template>
+ <ToggleButton @size="lg" data-test-id="button">My ToggleButton</ToggleButton>
+ </template>
);
assert.dom('[data-test-id="button"]').hasClass('toggle-button-lg');
diff --git a/test-app/tests/integration/components/collections/dropdown-test.ts b/test-app/tests/integration/components/collections/dropdown-test.gts
similarity index 81%
rename from test-app/tests/integration/components/collections/dropdown-test.ts
rename to test-app/tests/integration/components/collections/dropdown-test.gts
index dcf03e08..723d4c30 100644
--- a/test-app/tests/integration/components/collections/dropdown-test.ts
+++ b/test-app/tests/integration/components/collections/dropdown-test.gts
@@ -1,9 +1,11 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, render, triggerKeyEvent } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { Dropdown } from '@frontile/collections';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
module(
'Integration | Component | Dropdown | @frontile/collections',
@@ -24,17 +26,17 @@ module(
test('it renders the trigger and menu when opened', async function (assert) {
const clickedOn: string[] = [];
- this.set('onAction', function (key: string) {
+ const onAction = (key: string) => {
clickedOn.push(key);
- });
+ };
await render(
- hbs`
+ <template>
<Dropdown as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
<d.Menu
- @onAction={{this.onAction}}
+ @onAction={{onAction}}
@intent="primary"
@disableTransitions={{true}}
as |Item|
@@ -42,7 +44,8 @@ module(
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -60,18 +63,16 @@ module(
test('it renders accessibility attributes', async function (assert) {
await render(
- hbs`
+ <template>
<Dropdown as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
- <d.Menu
- @disableTransitions={{true}}
- as |Item|
- >
+ <d.Menu @disableTransitions={{true}} as |Item|>
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
assert
@@ -92,52 +93,52 @@ module(
});
test('it shows backdrop when @backdrop=none', async function (assert) {
- this.set('backdrop', 'none');
+ const backdrop = cell<'none' | 'faded'>('none');
await render(
- hbs`
+ <template>
<Dropdown as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
<d.Menu
- @backdrop={{this.backdrop}}
+ @backdrop={{backdrop.current}}
@disableTransitions={{true}}
as |Item|
>
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
await click('[data-test-id="dropdown-trigger"]');
assert.dom('.overlay__backdrop').doesNotExist();
- this.set('backdrop', 'faded');
+ backdrop.current = 'faded';
+ await settled();
assert.dom('.overlay__backdrop').exists();
});
test('on item click, closes menu, calls @didClose', async function (assert) {
let calledClosed = false;
- this.set('didClose', () => {
+ const didClose = () => {
calledClosed = true;
- });
+ };
await render(
- hbs`
- <Dropdown @didClose={{this.didClose}} as |d|>
+ <template>
+ <Dropdown @didClose={{didClose}} as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
- <d.Menu
- @disableTransitions={{true}}
- as |Item|
- >
+ <d.Menu @disableTransitions={{true}} as |Item|>
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -151,18 +152,16 @@ module(
test('on item click, does not close menu when @closeOnItemSelect=false', async function (assert) {
await render(
- hbs`
+ <template>
<Dropdown @closeOnItemSelect={{false}} as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
- <d.Menu
- @disableTransitions={{true}}
- as |Item|
- >
+ <d.Menu @disableTransitions={{true}} as |Item|>
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -175,24 +174,22 @@ module(
test('clicking outside closes menu', async function (assert) {
let calledClosed = false;
- this.set('didClose', () => {
+ const didClose = () => {
calledClosed = true;
- });
+ };
await render(
- hbs`
+ <template>
<div id="outside" tabindex="0"></div>
- <Dropdown @didClose={{this.didClose}} as |d|>
+ <Dropdown @didClose={{didClose}} as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
- <d.Menu
- @disableTransitions={{true}}
- as |Item|
- >
+ <d.Menu @disableTransitions={{true}} as |Item|>
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -206,18 +203,16 @@ module(
test('on pressing arrow up/down key, opens the menu', async function (assert) {
await render(
- hbs`
+ <template>
<Dropdown as |d|>
<d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
- <d.Menu
- @disableTransitions={{true}}
- as |Item|
- >
+ <d.Menu @disableTransitions={{true}} as |Item|>
<Item @key="profile">My Profile</Item>
<Item @key="settings">Settings</Item>
</d.Menu>
- </Dropdown>`
+ </Dropdown>
+ </template>
);
assert.dom('[data-test-id="listbox"]').doesNotExist();
diff --git a/test-app/tests/integration/components/collections/listbox-test.ts b/test-app/tests/integration/components/collections/listbox-test.gts
similarity index 72%
rename from test-app/tests/integration/components/collections/listbox-test.ts
rename to test-app/tests/integration/components/collections/listbox-test.gts
index bd615211..d1a73fc8 100644
--- a/test-app/tests/integration/components/collections/listbox-test.ts
+++ b/test-app/tests/integration/components/collections/listbox-test.gts
@@ -1,10 +1,13 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, render, triggerKeyEvent, fillIn } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
import { modifier } from 'ember-modifier';
+import { Listbox, type ListboxSignature } from '@frontile/collections';
+import { array } from '@ember/helper';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
module(
'Integration | Component | Listbox | @frontile/collections',
@@ -13,15 +16,15 @@ module(
test('it render static items', async function (assert) {
const clickedOn: string[] = [];
- this.set('onAction', function (key: string) {
+ const onAction = (key: string) => {
clickedOn.push(key);
- });
+ };
await render(
- hbs`
+ <template>
<Listbox
@selectionMode="none"
- @onAction={{this.onAction}}
+ @onAction={{onAction}}
@disabledKeys={{(array "item-3" "item-4")}}
as |l|
>
@@ -48,7 +51,8 @@ module(
>
Item 5
</l.Item>
- </Listbox>`
+ </Listbox>
+ </template>
);
assert.dom('[data-test-id="listbox"]').exists();
@@ -92,26 +96,25 @@ module(
});
test('it render dynamic items without yield of item selectionMode = single / multiple', async function (assert) {
- this.set('selectionMode', 'single');
- this.set('allowEmpty', false);
- this.set('animals', ['cheetah', 'crocodile', 'elephant']);
- let selectedKeys: string[] = [];
-
- this.set('selectedKeys', []);
- this.set('onSelectionChange', (keys: string[]) => {
- this.set('selectedKeys', keys);
- selectedKeys = keys;
- });
+ const selectionMode = cell<'single' | 'multiple' | 'none'>('single');
+ const allowEmpty = cell(false);
+ const animals = ['cheetah', 'crocodile', 'elephant'];
+ const selectedKeys = cell<string[]>([]);
+
+ const onSelectionChange = (keys: string[]) => {
+ selectedKeys.current = keys;
+ };
await render(
- hbs`
- <Listbox
- @allowEmpty={{this.allowEmpty}}
- @selectionMode={{this.selectionMode}}
- @items={{this.animals}}
- @selectedKeys={{this.selectedKeys}}
- @onSelectionChange={{this.onSelectionChange}}
- />`
+ <template>
+ <Listbox
+ @allowEmpty={{allowEmpty.current}}
+ @selectionMode={{selectionMode.current}}
+ @items={{animals}}
+ @selectedKeys={{selectedKeys.current}}
+ @onSelectionChange={{onSelectionChange}}
+ />
+ </template>
);
assert.dom('[data-test-id="listbox"]').exists();
@@ -123,16 +126,16 @@ module(
// Selection Mode single
await click('[data-key="cheetah"]');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'cheetah');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'cheetah');
assert.dom('[data-key="cheetah"]').hasAttribute('data-selected', 'true');
assert
.dom('[data-key="cheetah"] [data-test-id="listbox-item-selected-icon"]')
.exists('should render icon on selected item');
await click('[data-key="crocodile"]');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'crocodile');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'crocodile');
assert
.dom('[data-key="crocodile"]')
.hasAttribute('data-selected', 'true');
@@ -140,83 +143,89 @@ module(
// Toggle when allowEmpty = false
await click('[data-key="crocodile"]');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'crocodile');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'crocodile');
// Toggle when allowEmpty = true
- this.set('allowEmpty', true);
+ allowEmpty.current = true;
+ await settled();
await click('[data-key="crocodile"]');
- assert.equal(selectedKeys.length, 0);
+ assert.equal(selectedKeys.current.length, 0);
// Selection Mode multiple
- this.set('selectionMode', 'multiple');
- this.set('selectedKeys', []);
- selectedKeys = [];
+ selectionMode.current = 'multiple';
+ selectedKeys.current = [];
+ selectedKeys.current = [];
+ await settled();
await click('[data-key="elephant"]');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'elephant');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'elephant');
assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
await click('[data-key="crocodile"]');
- assert.equal(selectedKeys.length, 2);
- assert.equal(selectedKeys[1], 'crocodile');
+ assert.equal(selectedKeys.current.length, 2);
+ assert.equal(selectedKeys.current[1], 'crocodile');
assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
assert
.dom('[data-key="crocodile"]')
.hasAttribute('data-selected', 'true');
// Toggle when allowEmpty = false
- this.set('allowEmpty', false);
+ allowEmpty.current = false;
+ await settled();
await click('[data-key="crocodile"]');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'elephant');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'elephant');
assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
assert
.dom('[data-key="crocodile"]')
.hasAttribute('data-selected', 'false');
await click('[data-key="elephant"]');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'elephant');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'elephant');
assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
// Toggle when allowEmpty = true
- this.set('allowEmpty', true);
+ allowEmpty.current = true;
+ await settled();
await click('[data-key="elephant"]');
- assert.equal(selectedKeys.length, 0);
+ assert.equal(selectedKeys.current.length, 0);
});
test('it render dynamic items yielding of item', async function (assert) {
- this.set('selectionMode', 'single');
- this.set('allowEmpty', false);
- this.set('animals', [
+ const animals = [
{ key: 'cheetah-key', value: 'cheetah-value' },
{ key: 'crocodile-key', value: 'crocodile-value' },
{ key: 'elephant-key', value: 'elephant-value' }
- ]);
+ ];
- this.set('selectedKeys', []);
- this.set('onSelectionChange', (keys: string[]) => {
- this.set('selectedKeys', keys);
- });
+ const selectionMode = cell<'single' | 'multiple' | 'none'>('single');
+ const allowEmpty = cell(false);
+ const selectedKeys = cell<string[]>([]);
+
+ const onSelectionChange = (keys: string[]) => {
+ selectedKeys.current = keys;
+ };
await render(
- hbs`
- <Listbox
- @allowEmpty={{this.allowEmpty}}
- @selectionMode={{this.selectionMode}}
- @items={{this.animals}}
- @selectedKeys={{this.selectedKeys}}
- @onSelectionChange={{this.onSelectionChange}}
- >
- <:item as |o|>
- <o.Item @key={{o.item.key}}>
- {{o.item.value}}
- </o.Item>
- </:item>
- </Listbox>`
+ <template>
+ <Listbox
+ @allowEmpty={{allowEmpty.current}}
+ @selectionMode={{selectionMode.current}}
+ @items={{animals}}
+ @selectedKeys={{selectedKeys.current}}
+ @onSelectionChange={{onSelectionChange}}
+ >
+ <:item as |o|>
+ <o.Item @key={{o.item.key}}>
+ {{o.item.value}}
+ </o.Item>
+ </:item>
+ </Listbox>
+ </template>
);
assert.dom('[data-test-id="listbox"]').exists();
@@ -231,28 +240,28 @@ module(
});
test('keyboard navigation works', async function (assert) {
- this.set('selectionMode', 'single');
- this.set('allowEmpty', false);
- this.set('animals', ['cheetah', 'crocodile', 'elephant']);
- let selectedKeys: string[] = [];
-
- this.set('selectedKeys', []);
- this.set('onSelectionChange', (keys: string[]) => {
- this.set('selectedKeys', keys);
- selectedKeys = keys;
- });
+ const animals = ['cheetah', 'crocodile', 'elephant'];
+
+ const selectionMode = cell<'single' | 'multiple' | 'none'>('single');
+ const allowEmpty = cell(false);
+ const selectedKeys = cell<string[]>([]);
+
+ const onSelectionChange = (keys: string[]) => {
+ selectedKeys.current = keys;
+ };
await render(
- hbs`
- <Listbox
- @isKeyboardEventsEnabled={{true}}
- @allowEmpty={{this.allowEmpty}}
- @selectionMode={{this.selectionMode}}
- @items={{this.animals}}
- @selectedKeys={{this.selectedKeys}}
- @onSelectionChange={{this.onSelectionChange}}
- @autoActivateMode="none"
- />`
+ <template>
+ <Listbox
+ @isKeyboardEventsEnabled={{true}}
+ @allowEmpty={{allowEmpty.current}}
+ @selectionMode={{selectionMode.current}}
+ @items={{animals}}
+ @selectedKeys={{selectedKeys.current}}
+ @onSelectionChange={{onSelectionChange}}
+ @autoActivateMode="none"
+ />
+ </template>
);
assert.dom('[data-test-id="listbox"]').exists();
@@ -287,8 +296,8 @@ module(
// select active item
await triggerKeyEvent('[data-test-id="listbox"]', 'keypress', 'Enter');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'cheetah');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'cheetah');
// search
await triggerKeyEvent('[data-test-id="listbox"]', 'keypress', 'E');
@@ -317,15 +326,15 @@ module(
test('it render item with blocks', async function (assert) {
const clickedOn: string[] = [];
- this.set('onAction', function (key: string) {
+ const onAction = (key: string) => {
clickedOn.push(key);
- });
+ };
await render(
- hbs`
+ <template>
<Listbox
@selectionMode="none"
- @onAction={{this.onAction}}
+ @onAction={{onAction}}
@disabledKeys={{(array "item-3" "item-4")}}
as |l|
>
@@ -346,7 +355,8 @@ module(
<div data-test-id="end">End content</div>
</:end>
</l.Item>
- </Listbox>`
+ </Listbox>
+ </template>
);
assert.dom('[data-test-id="listbox"]').exists();
@@ -369,38 +379,36 @@ module(
});
test('automatically activate first item', async function (assert) {
- this.set('autoActivateMode', 'first');
- this.set('animals', ['cheetah', 'crocodile', 'elephant']);
+ const animals = cell<string[]>(['cheetah', 'crocodile', 'elephant']);
await render(
- hbs`
- <Listbox
- @items={{this.animals}}
- @autoActivateMode={{this.autoActivateMode}}
- />`
+ <template>
+ <Listbox @items={{animals.current}} @autoActivateMode="first" />
+ </template>
);
assert.dom('[data-key="cheetah"]').hasAttribute('data-active', 'true');
- this.set('animals', ['crocodile', 'elephant']);
+ animals.current = ['crocodile', 'elephant'];
+ await settled();
assert.dom('[data-key="crocodile"]').hasAttribute('data-active', 'true');
});
test('it calls onActiveItemChange when a new item is activated', async function (assert) {
const activeItems: string[] = [];
- this.set('onActiveItemChange', (key?: string) => {
+ const onActiveItemChange = (key?: string) => {
activeItems.push(key || '');
- });
- this.set('autoActivateMode', 'first');
- this.set('animals', ['cheetah', 'crocodile', 'elephant']);
+ };
+ const animals = ['cheetah', 'crocodile', 'elephant'];
await render(
- hbs`
- <Listbox
- @items={{this.animals}}
- @autoActivateMode={{this.autoActivateMode}}
- @isKeyboardEventsEnabled={{true}}
- @onActiveItemChange={{this.onActiveItemChange}}
- />`
+ <template>
+ <Listbox
+ @items={{animals}}
+ @autoActivateMode="first"
+ @isKeyboardEventsEnabled={{true}}
+ @onActiveItemChange={{onActiveItemChange}}
+ />
+ </template>
);
assert.dom('[data-key="cheetah"]').hasAttribute('data-active', 'true');
@@ -411,26 +419,24 @@ module(
});
test('it adds keyboard events to element passed in args', async function (assert) {
- this.set('elementToAddKeyboardEvents', undefined);
+ const elementToAddKeyboardEvents = cell<HTMLElement>(undefined);
- this.set(
- 'modifier',
- modifier((element: HTMLElement) => {
- this.set('elementToAddKeyboardEvents', element);
- })
- );
+ const myModifier = modifier((element: HTMLElement) => {
+ elementToAddKeyboardEvents.current = element;
+ });
- this.set('animals', ['cheetah', 'crocodile', 'elephant']);
+ const animals = ['cheetah', 'crocodile', 'elephant'];
await render(
- hbs`
- <input type="text" data-test-input {{this.modifier}} />
- <Listbox
- @items={{this.animals}}
- @autoActivateMode="none"
- @isKeyboardEventsEnabled={{true}}
- @elementToAddKeyboardEvents={{this.elementToAddKeyboardEvents}}
- />`
+ <template>
+ <input type="text" data-test-input {{myModifier}} />
+ <Listbox
+ @items={{animals}}
+ @autoActivateMode="none"
+ @isKeyboardEventsEnabled={{true}}
+ @elementToAddKeyboardEvents={{elementToAddKeyboardEvents.current}}
+ />
+ </template>
);
assert.dom('[data-key="cheetah"]').hasAttribute('data-active', 'false');
@@ -502,17 +508,18 @@ module(
}) as never
});
- this.set('appearance', '');
- this.set('intent', '');
- this.set('selectedKeys', ['item-5']);
- this.set('disabledKeys', ['item-6']);
+ const appearance =
+ cell<ListboxSignature<unknown>['Args']['appearance']>();
+ const intent = cell<ListboxSignature<unknown>['Args']['intent']>();
+ const selectedKeys = ['item-5'];
+ const disabledKeys = ['item-6'];
await render(
- hbs`
+ <template>
<Listbox
- @selectedKeys={{this.selectedKeys}}
- @disabledKeys={{this.disabledKeys}}
- @appearance={{this.appearance}}
- @intent={{this.intent}}
+ @selectedKeys={{selectedKeys}}
+ @disabledKeys={{disabledKeys}}
+ @appearance={{appearance.current}}
+ @intent={{intent.current}}
as |l|
>
<l.Item @key="item-1">Item 1</l.Item>
@@ -521,7 +528,8 @@ module(
<l.Item @key="item-4" @withDivider={{true}}>Item 4</l.Item>
<l.Item @key="item-5">Item 5</l.Item>
<l.Item @key="item-6">Item 6</l.Item>
- </Listbox>`
+ </Listbox>
+ </template>
);
// no appearance or intent set
@@ -529,8 +537,9 @@ module(
assert.dom('[data-key="item-1"]').hasClass('intent-default');
// appearance and intent set
- this.set('appearance', 'faded');
- this.set('intent', 'warning');
+ appearance.current = 'faded';
+ intent.current = 'warning';
+ await settled();
assert.dom('[data-key="item-1"]').hasClass('appearance-faded');
assert.dom('[data-key="item-1"]').hasClass('intent-warning');
diff --git a/test-app/tests/integration/components/forms/native-select-test.ts b/test-app/tests/integration/components/forms/native-select-test.gts
similarity index 61%
rename from test-app/tests/integration/components/forms/native-select-test.ts
rename to test-app/tests/integration/components/forms/native-select-test.gts
index 0ef70ec6..fb416387 100644
--- a/test-app/tests/integration/components/forms/native-select-test.ts
+++ b/test-app/tests/integration/components/forms/native-select-test.gts
@@ -1,11 +1,14 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import {
selectOptionByKey,
toggleOptionByKey
} from '@frontile/forms/test-support';
+import { cell } from 'ember-resources';
+import { NativeSelect } from '@frontile/forms';
+import { array } from '@ember/helper';
+import { settled } from '@ember/test-helpers';
module(
'Integration | Component | NativeSelect | @frontile/forms',
@@ -32,21 +35,19 @@ module(
test('it render static items', async function (assert) {
let selectedKeys: string[] = [];
- this.set('onSelectionChange', function (keys: string[]) {
+ const onSelectionChange = (keys: string[]) => {
selectedKeys = keys;
- });
+ };
await render(
- hbs`
+ <template>
<NativeSelect
- @onSelectionChange={{this.onSelectionChange}}
+ @onSelectionChange={{onSelectionChange}}
@disabledKeys={{(array "item-3" "item-4")}}
@allowEmpty={{true}}
as |l|
>
- <l.Item
- @key="item-1"
- >
+ <l.Item @key="item-1">
Item 1
</l.Item>
<l.Item @key="item-2">Item 2</l.Item>
@@ -55,7 +56,8 @@ module(
<l.Item @key="item-5">
Item 5
</l.Item>
- </NativeSelect>`
+ </NativeSelect>
+ </template>
);
assert.dom('[data-test-id="native-select"]').exists();
@@ -83,26 +85,25 @@ module(
});
test('it render dynamic items without yield of item selectionMode = single / multiple', async function (assert) {
- this.set('selectionMode', 'single');
- this.set('allowEmpty', false);
- this.set('animals', ['cheetah', 'crocodile', 'elephant']);
- let selectedKeys: string[] = [];
+ const selectionMode = cell<'single' | 'multiple'>('single');
+ const allowEmpty = cell(false);
+ const animals = ['cheetah', 'crocodile', 'elephant'];
+ const selectedKeys = cell<string[]>([]);
- this.set('selectedKeys', []);
- this.set('onSelectionChange', (keys: string[]) => {
- this.set('selectedKeys', keys);
- selectedKeys = keys;
- });
+ const onSelectionChange = (keys: string[]) => {
+ selectedKeys.current = keys;
+ };
await render(
- hbs`
- <NativeSelect
- @allowEmpty={{this.allowEmpty}}
- @selectionMode={{this.selectionMode}}
- @items={{this.animals}}
- @selectedKeys={{this.selectedKeys}}
- @onSelectionChange={{this.onSelectionChange}}
- />`
+ <template>
+ <NativeSelect
+ @allowEmpty={{allowEmpty.current}}
+ @selectionMode={{selectionMode.current}}
+ @items={{animals}}
+ @selectedKeys={{selectedKeys.current}}
+ @onSelectionChange={{onSelectionChange}}
+ />
+ </template>
);
assert.dom('[data-test-id="native-select"]').exists();
@@ -114,73 +115,76 @@ module(
// Selection Mode single
await selectOptionByKey('[data-test-id="native-select"]', 'cheetah');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'cheetah');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'cheetah');
await selectOptionByKey('[data-test-id="native-select"]', 'crocodile');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'crocodile');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'crocodile');
- // Slect empty option when allowEmpty = true
- this.set('allowEmpty', true);
+ // Slect empty option when allowEmpty = true
+ allowEmpty.current = true;
+ await settled();
await selectOptionByKey('[data-test-id="native-select"]', '');
- assert.equal(selectedKeys.length, 0);
+ assert.equal(selectedKeys.current.length, 0);
// Selection Mode multiple
- this.set('selectionMode', 'multiple');
- this.set('selectedKeys', []);
- selectedKeys = [];
+ selectionMode.current = 'multiple';
+ selectedKeys.current = [];
+ await settled();
await selectOptionByKey('[data-test-id="native-select"]', 'elephant');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'elephant');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'elephant');
await selectOptionByKey('[data-test-id="native-select"]', 'crocodile');
- assert.equal(selectedKeys.length, 2);
+ assert.equal(selectedKeys.current.length, 2);
- assert.ok(selectedKeys.includes('elephant'));
- assert.ok(selectedKeys.includes('crocodile'));
+ assert.ok(selectedKeys.current.includes('elephant'));
+ assert.ok(selectedKeys.current.includes('crocodile'));
await toggleOptionByKey('[data-test-id="native-select"]', 'crocodile');
- assert.equal(selectedKeys.length, 1);
- assert.equal(selectedKeys[0], 'elephant');
+ assert.equal(selectedKeys.current.length, 1);
+ assert.equal(selectedKeys.current[0], 'elephant');
await toggleOptionByKey('[data-test-id="native-select"]', 'elephant');
- assert.equal(selectedKeys.length, 0);
+ assert.equal(selectedKeys.current.length, 0);
});
test('it render dynamic items yielding of item', async function (assert) {
- this.set('selectionMode', 'single');
- this.set('allowEmpty', false);
- this.set('animals', [
+ const animals = [
{ key: 'cheetah-key', value: 'cheetah-value' },
{ key: 'crocodile-key', value: 'crocodile-value' },
{ key: 'elephant-key', value: 'elephant-value' }
- ]);
+ ];
+
+ const selectionMode = cell<'single' | 'multiple'>('single');
+ const allowEmpty = cell(false);
+ const selectedKeys = cell<string[]>([]);
- this.set('selectedKeys', []);
- this.set('onSelectionChange', (keys: string[]) => {
- this.set('selectedKeys', keys);
- });
+ const onSelectionChange = (keys: string[]) => {
+ selectedKeys.current = keys;
+ };
await render(
- hbs`
- <NativeSelect
- @allowEmpty={{this.allowEmpty}}
- @selectionMode={{this.selectionMode}}
- @items={{this.animals}}
- @selectedKeys={{this.selectedKeys}}
- @onSelectionChange={{this.onSelectionChange}}
- >
- <:item as |o|>
- <o.Item @key={{o.item.key}}>
- {{o.item.value}}
- </o.Item>
- </:item>
- </NativeSelect>`
+ <template>
+ <NativeSelect
+ @allowEmpty={{allowEmpty.current}}
+ @selectionMode={{selectionMode.current}}
+ @items={{animals}}
+ @selectedKeys={{selectedKeys.current}}
+ @onSelectionChange={{onSelectionChange}}
+ >
+ <:item as |o|>
+ <o.Item @key={{o.item.key}}>
+ {{o.item.value}}
+ </o.Item>
+ </:item>
+ </NativeSelect>
+ </template>
);
assert.dom('[data-test-id="native-select"]').exists();
@@ -196,18 +200,18 @@ module(
test('it renders named blocks startContent and endContent', async function (assert) {
const classes = { innerContainer: 'input-container' };
- this.set('animals', ['tiger']);
- this.set('classes', classes);
+ const animals = ['tiger'];
await render(
- hbs`
- <NativeSelect
- @items={{this.animals}}
- @placeholder="Select an animal"
- @classes={{this.classes}}
- >
- <:startContent>Start</:startContent>
- <:endContent>End</:endContent>
- </NativeSelect>`
+ <template>
+ <NativeSelect
+ @items={{animals}}
+ @placeholder="Select an animal"
+ @classes={{classes}}
+ >
+ <:startContent>Start</:startContent>
+ <:endContent>End</:endContent>
+ </NativeSelect>
+ </template>
);
assert.dom('.input-container div:first-child').exists();
diff --git a/test-app/tests/integration/components/notifications/notification-card-test.ts b/test-app/tests/integration/components/notifications/notification-card-test.gts
similarity index 67%
rename from test-app/tests/integration/components/notifications/notification-card-test.ts
rename to test-app/tests/integration/components/notifications/notification-card-test.gts
index b4cbeff4..2fccf669 100644
--- a/test-app/tests/integration/components/notifications/notification-card-test.ts
+++ b/test-app/tests/integration/components/notifications/notification-card-test.gts
@@ -1,11 +1,16 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, triggerEvent } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-import { Notification, NotificationsService } from '@frontile/notifications';
+import {
+ Notification,
+ NotificationCard,
+ type NotificationsService
+} from '@frontile/notifications';
import sinon from 'sinon';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
registerCustomStyles({
notificationCard: tv({
@@ -47,26 +52,22 @@ registerCustomStyles({
})
});
-declare module '@ember/test-helpers' {
- interface TestContext {
- notification?: Notification;
- }
-}
-
module(
'Integration | Component | @frontile/notifications/NotificationCard',
function (hooks) {
setupRenderingTest(hooks);
- const template = hbs`
- <NotificationCard
- data-test-notification
- @notification={{this.notification}}
- />`;
+ const notification = cell<Notification>(new Notification({}, ''));
+ const template = <template>
+ <NotificationCard
+ data-test-notification
+ @placement="top-right"
+ @notification={{notification.current}}
+ />
+ </template>;
test('it renders the notification content & close button', async function (assert) {
- this;
- this.set('notification', new Notification({}, 'My message'));
+ notification.current = new Notification({}, 'My message');
await render(template);
@@ -77,7 +78,7 @@ module(
});
test('it renders the correct appearance', async function (assert) {
- this.set('notification', new Notification({}, 'My message'));
+ notification.current = new Notification({}, 'My message');
await render(template);
@@ -85,44 +86,38 @@ module(
.dom('[data-test-notification]')
.hasClass('notification-card--info');
- this.set(
- 'notification',
- new Notification({}, 'My message', {
- appearance: 'success'
- })
- );
+ notification.current = new Notification({}, 'My message', {
+ appearance: 'success'
+ });
+ await settled();
+
assert
.dom('[data-test-notification]')
.hasClass('notification-card--success');
- this.set(
- 'notification',
- new Notification({}, 'My message', {
- appearance: 'warning'
- })
- );
+ notification.current = new Notification({}, 'My message', {
+ appearance: 'warning'
+ });
+ await settled();
+
assert
.dom('[data-test-notification]')
.hasClass('notification-card--warning');
- this.set(
- 'notification',
- new Notification({}, 'My message', {
- appearance: 'error'
- })
- );
+ notification.current = new Notification({}, 'My message', {
+ appearance: 'error'
+ });
+ await settled();
+
assert
.dom('[data-test-notification]')
.hasClass('notification-card--error');
});
test('it does not render close button when allowClosing=false', async function (assert) {
- this.set(
- 'notification',
- new Notification({}, 'My message', {
- allowClosing: false
- })
- );
+ notification.current = new Notification({}, 'My message', {
+ allowClosing: false
+ });
await render(template);
@@ -134,17 +129,16 @@ module(
test('it calls remove function from service on close-btn click', async function (assert) {
assert.expect(1);
- this.set(
- 'notification',
- new Notification({}, 'My message', { transitionDuration: 1 })
- );
+ notification.current = new Notification({}, 'My message', {
+ transitionDuration: 1
+ });
const service = this.owner.lookup(
'service:notifications'
) as NotificationsService;
- sinon.stub(service, 'remove').callsFake((n: Notification): void => {
- assert.equal(n, this.notification);
+ sinon.stub(service, 'remove').callsFake((n?: Notification): void => {
+ assert.equal(n, notification.current);
});
await render(template);
@@ -157,33 +151,30 @@ module(
test('it renders and calls custom actions', async function (assert) {
assert.expect(5);
- this.set(
- 'notification',
- new Notification({}, 'My message', {
- transitionDuration: 1,
- customActions: [
- {
- label: 'Undo',
- onClick: () => {
- assert.ok(true);
- }
- },
- {
- label: 'Ok',
- onClick: () => {
- assert.ok(true);
- }
+ notification.current = new Notification({}, 'My message', {
+ transitionDuration: 1,
+ customActions: [
+ {
+ label: 'Undo',
+ onClick: () => {
+ assert.ok(true);
}
- ]
- })
- );
+ },
+ {
+ label: 'Ok',
+ onClick: () => {
+ assert.ok(true);
+ }
+ }
+ ]
+ });
const service = this.owner.lookup(
'service:notifications'
) as NotificationsService;
- sinon.stub(service, 'remove').callsFake((n: Notification): void => {
- assert.equal(n, this.notification);
+ sinon.stub(service, 'remove').callsFake((n?: Notification): void => {
+ assert.equal(n, notification.current);
});
await render(template);
@@ -214,13 +205,12 @@ module(
test('it pauses/resumes the timer on mouseenter/mouseleave', async function (assert) {
assert.expect(2);
- this.set(
- 'notification',
- new Notification({}, 'My message', { transitionDuration: 1 })
- );
+ notification.current = new Notification({}, 'My message', {
+ transitionDuration: 1
+ });
// @ts-ignore
- this.notification.timer = {
+ notification.current.timer = {
pause() {
assert.ok('should have paused');
},
diff --git a/test-app/tests/integration/components/notifications/notifications-container-test.ts b/test-app/tests/integration/components/notifications/notifications-container-test.gts
similarity index 78%
rename from test-app/tests/integration/components/notifications/notifications-container-test.ts
rename to test-app/tests/integration/components/notifications/notifications-container-test.gts
index 6d33bd63..48f94163 100644
--- a/test-app/tests/integration/components/notifications/notifications-container-test.ts
+++ b/test-app/tests/integration/components/notifications/notifications-container-test.gts
@@ -1,13 +1,16 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import {
- NotificationsService,
- NotificationOptions
+ NotificationsContainer,
+ type NotificationsService,
+ type NotificationOptions,
+ type NotificationsContainerSignature
} from '@frontile/notifications';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
registerCustomStyles({
notificationsContainer: tv({
@@ -38,11 +41,15 @@ module(
preserve: true
};
- const template = hbs`
- <NotificationsContainer
- @placement={{this.placement}}
- data-test-notifications
- />`;
+ const placement =
+ cell<NotificationsContainerSignature['Args']['placement']>();
+
+ const template = <template>
+ <NotificationsContainer
+ @placement={{placement.current}}
+ data-test-notifications
+ />
+ </template>;
test('it does not render if there are no notifications', async function (assert) {
await render(template);
@@ -70,7 +77,7 @@ module(
options
);
- this.set('placement', undefined);
+ placement.current = undefined;
await render(template);
@@ -78,32 +85,38 @@ module(
.dom('[data-test-notifications]')
.hasClass('notifications-container--bottom-right');
- this.set('placement', 'top-left');
+ placement.current = 'top-left';
+ await settled();
assert
.dom('[data-test-notifications]')
.hasClass('notifications-container--top-left');
- this.set('placement', 'top-center');
+ placement.current = 'top-center';
+ await settled();
assert
.dom('[data-test-notifications]')
.hasClass('notifications-container--top-center');
- this.set('placement', 'top-right');
+ placement.current = 'top-right';
+ await settled();
assert
.dom('[data-test-notifications]')
.hasClass('notifications-container--top-right');
- this.set('placement', 'bottom-left');
+ placement.current = 'bottom-left';
+ await settled();
assert
.dom('[data-test-notifications]')
.hasClass('notifications-container--bottom-left');
- this.set('placement', 'bottom-center');
+ placement.current = 'bottom-center';
+ await settled();
assert
.dom('[data-test-notifications]')
.hasClass('notifications-container--bottom-center');
- this.set('placement', 'bottom-right');
+ placement.current = 'bottom-right';
+ await settled();
assert
.dom('[data-test-notifications]')
.hasClass('notifications-container--bottom-right');
diff --git a/test-app/tests/integration/components/buttons/progress-bar-test.ts b/test-app/tests/integration/components/status/progress-bar-test.gts
similarity index 68%
rename from test-app/tests/integration/components/buttons/progress-bar-test.ts
rename to test-app/tests/integration/components/status/progress-bar-test.gts
index 13fb9577..e1b5958f 100644
--- a/test-app/tests/integration/components/buttons/progress-bar-test.ts
+++ b/test-app/tests/integration/components/status/progress-bar-test.gts
@@ -1,9 +1,10 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
import { registerCustomStyles } from '@frontile/theme';
import { tv } from 'tailwind-variants';
+import { ProgressBar } from '@frontile/status';
+import { hash } from '@ember/helper';
registerCustomStyles({
progressBar: tv({
@@ -47,12 +48,14 @@ registerCustomStyles({
});
module(
- 'Integration | Component | ProgressBar | @frontile/progress-bar',
+ 'Integration | Component | ProgressBar | @frontile/status',
function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
- await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+ await render(
+ <template><ProgressBar data-test-id="progress-bar" /></template>
+ );
assert.dom('[data-test-id="progress-bar"]').exists();
assert.dom('[data-test-id="progress-bar"] [role="progressbar"]').exists();
});
@@ -61,7 +64,9 @@ module(
module('intent', () => {
test('it adds class for the intent', async function (assert) {
await render(
- hbs`<ProgressBar @intent="primary" data-test-id="progress-bar" />`
+ <template>
+ <ProgressBar @intent="primary" data-test-id="progress-bar" />
+ </template>
);
assert
@@ -70,7 +75,9 @@ module(
});
test('it adds class for the default intent', async function (assert) {
- await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+ await render(
+ <template><ProgressBar data-test-id="progress-bar" /></template>
+ );
assert
.dom('[data-test-id="progress-bar"] > div.pb-base')
@@ -80,7 +87,9 @@ module(
module('sizes', () => {
test('it adds class for default size"', async function (assert) {
- await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+ await render(
+ <template><ProgressBar data-test-id="progress-bar" /></template>
+ );
assert
.dom('[data-test-id="progress-bar"] > div.pb-base')
@@ -89,7 +98,9 @@ module(
test('it adds class size xs"', async function (assert) {
await render(
- hbs`<ProgressBar @size="xs" data-test-id="progress-bar" />`
+ <template>
+ <ProgressBar @size="xs" data-test-id="progress-bar" />
+ </template>
);
assert
@@ -99,7 +110,9 @@ module(
test('it adds class size lg', async function (assert) {
await render(
- hbs`<ProgressBar @size="lg" data-test-id="progress-bar" />`
+ <template>
+ <ProgressBar @size="lg" data-test-id="progress-bar" />
+ </template>
);
assert
@@ -110,7 +123,9 @@ module(
module('radius', () => {
test('it adds class default radius size sm"', async function (assert) {
- await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+ await render(
+ <template><ProgressBar data-test-id="progress-bar" /></template>
+ );
assert
.dom('[data-test-id="progress-bar"] > div.pb-base')
@@ -119,7 +134,9 @@ module(
test('it adds class radius size lg"', async function (assert) {
await render(
- hbs`<ProgressBar @radius="lg" data-test-id="progress-bar" />`
+ <template>
+ <ProgressBar @radius="lg" data-test-id="progress-bar" />
+ </template>
);
assert
@@ -129,7 +146,9 @@ module(
test('it adds class radius full', async function (assert) {
await render(
- hbs`<ProgressBar @radius="full" data-test-id="progress-bar" />`
+ <template>
+ <ProgressBar @radius="full" data-test-id="progress-bar" />
+ </template>
);
assert
@@ -141,7 +160,12 @@ module(
module('is-indeterminate', () => {
test('it adds class for indeterminate state "', async function (assert) {
await render(
- hbs`<ProgressBar @isIndeterminate={{true}} data-test-id="progress-bar" />`
+ <template>
+ <ProgressBar
+ @isIndeterminate={{true}}
+ data-test-id="progress-bar"
+ />
+ </template>
);
assert
@@ -156,7 +180,9 @@ module(
module('progress value', () => {
test('it renders value and arias', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar" @progress={{50}} />`
+ <template>
+ <ProgressBar data-test-id="progress-bar" @progress={{50}} />
+ </template>
);
const selector = '[data-test-id="progress-bar"] div.pb-progress';
@@ -172,7 +198,14 @@ module(
test('it interpolates values', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar" @progress={{20}} @minValue={{10}} @maxValue={{30}} />`
+ <template>
+ <ProgressBar
+ data-test-id="progress-bar"
+ @progress={{20}}
+ @minValue={{10}}
+ @maxValue={{30}}
+ />
+ </template>
);
const selector = '[data-test-id="progress-bar"] div.pb-progress';
@@ -189,7 +222,13 @@ module(
module('progress label', () => {
test('it renders label and arias', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar" @progress={{50}} @label="Progress" />`
+ <template>
+ <ProgressBar
+ data-test-id="progress-bar"
+ @progress={{50}}
+ @label="Progress"
+ />
+ </template>
);
assert
@@ -206,7 +245,14 @@ module(
test('it renders value label', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar" @progress={{50}} @label="Progress" @valueLabel="value 2/4" />`
+ <template>
+ <ProgressBar
+ data-test-id="progress-bar"
+ @progress={{50}}
+ @label="Progress"
+ @valueLabel="value 2/4"
+ />
+ </template>
);
assert
.dom('[data-test-id="progress-bar"] div.pb-label > div')
@@ -215,10 +261,14 @@ module(
test('it formats value label', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar"
- @progress={{50}} @label="Progress"
- @formatOptions={{(hash style='currency' currency='USD')}}
- />`
+ <template>
+ <ProgressBar
+ data-test-id="progress-bar"
+ @progress={{50}}
+ @label="Progress"
+ @formatOptions={{(hash style="currency" currency="USD")}}
+ />
+ </template>
);
assert
.dom('[data-test-id="progress-bar"] div.pb-label > div')
@@ -227,13 +277,16 @@ module(
test('it formats value label interpolated', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar"
- @progress={{20}}
- @label="Progress"
- @minValue={{10}}
- @maxValue={{30}}
- @formatOptions={{(hash style='currency' currency='USD')}}
- />`
+ <template>
+ <ProgressBar
+ data-test-id="progress-bar"
+ @progress={{20}}
+ @label="Progress"
+ @minValue={{10}}
+ @maxValue={{30}}
+ @formatOptions={{(hash style="currency" currency="USD")}}
+ />
+ </template>
);
assert
.dom('[data-test-id="progress-bar"] div.pb-label > div')
@@ -242,11 +295,14 @@ module(
test('it hides value label if showValueLabel false', async function (assert) {
await render(
- hbs`<ProgressBar data-test-id="progress-bar"
- @progress={{20}}
- @label="Progress"
- @showValueLabel={{false}}
- />`
+ <template>
+ <ProgressBar
+ data-test-id="progress-bar"
+ @progress={{20}}
+ @label="Progress"
+ @showValueLabel={{false}}
+ />
+ </template>
);
assert
.dom('[data-test-id="progress-bar"] div.pb-label > div')
diff --git a/test-app/tests/integration/components/utilities/collapsible-test.ts b/test-app/tests/integration/components/utilities/collapsible-test.gts
similarity index 77%
rename from test-app/tests/integration/components/utilities/collapsible-test.ts
rename to test-app/tests/integration/components/utilities/collapsible-test.gts
index 09c5e411..67abdf50 100644
--- a/test-app/tests/integration/components/utilities/collapsible-test.ts
+++ b/test-app/tests/integration/components/utilities/collapsible-test.gts
@@ -1,7 +1,8 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, settled } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { Collapsible } from '@frontile/utilities';
+import { cell } from 'ember-resources';
module(
'Integration | Component | @frontile/utilities/Collapsible',
@@ -9,14 +10,13 @@ module(
setupRenderingTest(hooks);
test('renders content and starts closed', async function (assert) {
- this.set('isOpen', false);
+ const isOpen = cell(false);
await render(
- hbs`<Collapsible
- @isOpen={{this.isOpen}}
- data-test-id="collapsible"
- >
+ <template>
+ <Collapsible @isOpen={{isOpen.current}} data-test-id="collapsible">
Content
- </Collapsible>`
+ </Collapsible>
+ </template>
);
assert.dom('[data-test-id=collapsible]').hasText('Content');
@@ -26,14 +26,13 @@ module(
});
test('renders content and starts open', async function (assert) {
- this.set('isOpen', true);
+ const isOpen = cell(true);
await render(
- hbs`<Collapsible
- @isOpen={{this.isOpen}}
- data-test-id="collapsible"
- >
+ <template>
+ <Collapsible @isOpen={{isOpen.current}} data-test-id="collapsible">
Content
- </Collapsible>`
+ </Collapsible>
+ </template>
);
assert.dom('[data-test-id=collapsible]').hasText('Content');
@@ -47,17 +46,16 @@ module(
});
test('expands content when opened; closes content when closed', async function (assert) {
- this.set('isOpen', false);
+ const isOpen = cell(false);
await render(
- hbs`<Collapsible
- @isOpen={{this.isOpen}}
- data-test-id="collapsible"
- >
+ <template>
+ <Collapsible @isOpen={{isOpen.current}} data-test-id="collapsible">
Content
- </Collapsible>`
+ </Collapsible>
+ </template>
);
- this.set('isOpen', true);
+ isOpen.current = true;
await settled();
assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
@@ -69,7 +67,7 @@ module(
.dom('[data-test-id=collapsible]')
.doesNotHaveStyle({ height: '0px' });
- this.set('isOpen', false);
+ isOpen.current = false;
await settled();
assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '0' });
@@ -78,15 +76,17 @@ module(
});
test('renders initial height when set', async function (assert) {
- this.set('isOpen', false);
+ const isOpen = cell(false);
await render(
- hbs`<Collapsible
- @isOpen={{this.isOpen}}
+ <template>
+ <Collapsible
+ @isOpen={{isOpen.current}}
@initialHeight="2px"
data-test-id="collapsible"
>
Content
- </Collapsible>`
+ </Collapsible>
+ </template>
);
assert.dom('[data-test-id=collapsible]').hasText('Content');
@@ -94,7 +94,7 @@ module(
assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
assert.dom('[data-test-id=collapsible]').hasStyle({ overflow: 'hidden' });
- this.set('isOpen', true);
+ isOpen.current = true;
await settled();
assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
@@ -106,7 +106,7 @@ module(
.dom('[data-test-id=collapsible]')
.doesNotHaveStyle({ height: '2px' });
- this.set('isOpen', false);
+ isOpen.current = false;
await settled();
assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
diff --git a/test-app/tests/integration/components/utilities/visually-hidden-test.gts b/test-app/tests/integration/components/utilities/visually-hidden-test.gts
new file mode 100644
index 00000000..fdc7c246
--- /dev/null
+++ b/test-app/tests/integration/components/utilities/visually-hidden-test.gts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { VisuallyHidden } from '@frontile/utilities';
+
+module(
+ 'Integration | Component | @frontile/utilities/VisuallyHidden',
+ function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ await render(
+ <template>
+ <VisuallyHidden data-test-id="my-element">
+ This text will be visually hidden
+ </VisuallyHidden>
+ </template>
+ );
+
+ assert
+ .dom('[data-test-id="my-element"]')
+ .hasText('This text will be visually hidden');
+ assert.dom('[data-test-id="my-element"]').hasClass('sr-only');
+ });
+ }
+);
diff --git a/test-app/tests/integration/components/utilities/visually-hidden-test.ts b/test-app/tests/integration/components/utilities/visually-hidden-test.ts
deleted file mode 100644
index 39f420c2..00000000
--- a/test-app/tests/integration/components/utilities/visually-hidden-test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, RenderingTestContext } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module(
- 'Integration | Component | @frontile/utilities/VisuallyHidden',
- function (hooks) {
- setupRenderingTest(hooks);
-
- test('it renders', async function (this: RenderingTestContext, assert) {
- await render(hbs`
- <VisuallyHidden data-test-id="my-element">
- This text will be visually hidden
- </VisuallyHidden>
- `);
-
- assert.equal(
- this.element.textContent?.trim(),
- 'This text will be visually hidden'
- );
- assert.dom('[data-test-id="my-element"]').hasClass('sr-only');
- });
- }
-);