Skip to content

Commit 4ecc8f2

Browse files
author
shleewhite
committed
feat: convert rest of stepper tests to gts
1 parent 30a2310 commit 4ecc8f2

File tree

3 files changed

+201
-129
lines changed

3 files changed

+201
-129
lines changed

‎showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs‎ renamed to ‎showcase/tests/integration/components/hds/stepper/nav-panel-test.gts‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,45 +10,53 @@ import { render } from '@ember/test-helpers';
1010
// Because of how the `panel` subcomponent is built,
1111
// it's practically impossible to test in isolation, so in our tests
1212
// in this file it will be wrapped inside its parent component.
13-
import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
14-
import Panel from "@hashicorp/design-system-components/components/hds/stepper/nav/panel";
13+
import Nav from '@hashicorp/design-system-components/components/hds/stepper/nav/index';
14+
import Panel from '@hashicorp/design-system-components/components/hds/stepper/nav/panel';
15+
16+
const createNavPanel = async (options: {
17+
currentStep?: number;
18+
isNavInteractive?: boolean;
19+
}) => {
20+
return await render(
21+
<template>
22+
<Nav
23+
@ariaLabel="Sample stepper"
24+
@currentStep={{options.currentStep}}
25+
@isInteractive={{options.isNavInteractive}}
26+
as |S|
27+
>
28+
<S.Step />
29+
<S.Panel>
30+
<div id="test-panel-content">Test</div>
31+
</S.Panel>
32+
</Nav>
33+
</template>,
34+
);
35+
};
1536

1637
module('Integration | Component | hds/stepper/nav/panel', function (hooks) {
1738
setupRenderingTest(hooks);
1839

19-
hooks.beforeEach(function () {
20-
this.set('createNavPanel', async (args = {}) => {
21-
this.currentStep = args.currentStep ?? undefined;
22-
this.isNavInteractive = args.isNavInteractive ?? undefined;
23-
return await render(<template>
24-
<Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
25-
<S.Step></S.Step>
26-
<S.Panel>
27-
<div id="test-panel-content">Test</div>
28-
</S.Panel>
29-
</Nav>
30-
</template>);
31-
});
32-
});
33-
3440
// CLASSES
3541

3642
test('it should render the component with a CSS class that matches the component name', async function (assert) {
37-
await render(<template><Panel data-test="panel-1" /></template>);
43+
await render(
44+
<template><Panel @currentStep={{1}} data-test="panel-1" /></template>,
45+
);
3846
assert.dom('[data-test="panel-1"]').hasClass('hds-stepper-nav__panel');
3947
});
4048

4149
// VISIBILITY
4250

4351
test('it sets the panel content to not visible when the @currentStep argument does not match the panel index in the @panelIds argument', async function (assert) {
44-
await this.createNavPanel({ currentStep: 1 });
52+
await createNavPanel({ currentStep: 1 });
4553
assert.dom('.hds-stepper-nav__panel').hasAttribute('hidden');
4654
assert.dom('#test-panel-content').doesNotExist();
4755
assert.dom('.hds-stepper-nav__panel').hasAttribute('aria-labelledby');
4856
});
4957

5058
test('it sets the panel content to visible when the @currentStep argument matches the panel index in the @panelIds argument', async function (assert) {
51-
await this.createNavPanel({ currentStep: 0 });
59+
await createNavPanel({ currentStep: 0 });
5260
assert.dom('.hds-stepper-nav__panel').hasNoAttribute('hidden');
5361
assert.dom('#test-panel-content').exists();
5462
assert.dom('.hds-stepper-nav__panel').hasAttribute('aria-labelledby');
@@ -57,12 +65,12 @@ module('Integration | Component | hds/stepper/nav/panel', function (hooks) {
5765
// INTERACTIVITY
5866

5967
test('it sets the panel to interactive when the @isNavInteractive argument is not provided', async function (assert) {
60-
await this.createNavPanel({ currentStep: 0 });
68+
await createNavPanel({ currentStep: 0 });
6169
assert.dom('.hds-stepper-nav__panel').hasAttribute('role', 'tabpanel');
6270
});
6371

6472
test('it sets the panel to non-interactive when the @isNavInteractive argument is provided', async function (assert) {
65-
await this.createNavPanel({ isNavInteractive: false });
73+
await createNavPanel({ isNavInteractive: false });
6674
assert.dom('.hds-stepper-nav__panel').hasNoAttribute('role');
6775
});
6876
});

‎showcase/tests/integration/components/hds/stepper/nav-step-test.gjs‎ renamed to ‎showcase/tests/integration/components/hds/stepper/nav-step-test.gts‎

Lines changed: 54 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,63 @@ import { render } from '@ember/test-helpers';
1010
// Because of how the `step` subcomponent is built,
1111
// it's practically impossible to test in isolation, so in our tests
1212
// in this file it will be wrapped inside its parent comoponent.
13-
import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
14-
import Step from "@hashicorp/design-system-components/components/hds/stepper/nav/step";
13+
import Nav from '@hashicorp/design-system-components/components/hds/stepper/nav/index';
14+
import Step from '@hashicorp/design-system-components/components/hds/stepper/nav/step';
15+
import type { HdsStepperTitleTags } from '@hashicorp/design-system-components/components/hds/stepper/types';
16+
17+
const createNavStep = async (options: {
18+
title?: string;
19+
description?: string;
20+
currentStep?: number;
21+
stepNumber?: number;
22+
isNavInteractive?: boolean;
23+
titleTag?: HdsStepperTitleTags;
24+
}) => {
25+
const currentStep = options.currentStep ?? 0;
26+
27+
return await render(
28+
<template>
29+
<Nav
30+
@ariaLabel="Sample stepper"
31+
@currentStep={{currentStep}}
32+
@isInteractive={{options.isNavInteractive}}
33+
as |S|
34+
>
35+
<S.Step @titleTag={{options.titleTag}}>
36+
<:title>{{options.title}}</:title>
37+
<:description>{{options.description}}</:description>
38+
</S.Step>
39+
<S.Panel />
40+
</Nav>
41+
</template>,
42+
);
43+
};
1544

1645
module('Integration | Component | hds/stepper/nav/step', function (hooks) {
1746
setupRenderingTest(hooks);
1847

19-
hooks.beforeEach(function () {
20-
this.set('createNavStep', async (args = {}) => {
21-
this.title = args.title ?? undefined;
22-
this.description = args.description ?? undefined;
23-
this.currentStep = args.currentStep ?? undefined;
24-
this.stepNumber = args.stepNumber ?? undefined;
25-
this.isNavInteractive = args.isNavInteractive ?? undefined;
26-
this.titleTag = args.titleTag ?? undefined;
27-
return await render(<template>
28-
<Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
29-
<S.Step @stepNumber={{this.stepNumber}} @titleTag={{this.titleTag}}>
30-
<:title>{{this.title}}</:title>
31-
<:description>{{this.description}}</:description>
32-
</S.Step>
33-
<S.Panel />
34-
</Nav>
35-
</template>);
36-
});
37-
});
38-
3948
// CLASSES
4049

4150
test('it should render the component with a CSS class that matches the component name', async function (assert) {
42-
await render(<template><Step id="test-stepper-nav-step" /></template>);
51+
await render(
52+
<template>
53+
<Step id="test-stepper-nav-step" @currentStep={{0}} />
54+
</template>,
55+
);
4356
assert.dom('#test-stepper-nav-step').hasClass('hds-stepper-nav__step');
4457
});
4558

4659
// STEP NUMBER
4760

4861
test('it sets the step number automatically based on the step ids provided', async function (assert) {
49-
await this.createNavStep();
62+
await createNavStep({});
5063
assert.dom('.hds-stepper-indicator-step__text').hasText('1');
5164
});
5265

5366
// NAV INTERACTIVE
5467

5568
test('it sets the step to interactive when the @isNavInteractive argument is not provided to the parent', async function (assert) {
56-
await this.createNavStep();
69+
await createNavStep({});
5770
assert.dom('.hds-stepper-nav__step').hasAttribute('role', 'presentation');
5871
assert
5972
.dom('.hds-stepper-nav__step')
@@ -67,7 +80,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
6780
});
6881

6982
test('it sets the step to non-interactive when the @isNavInteractive argument is provided to the parent', async function (assert) {
70-
await this.createNavStep({ isNavInteractive: false });
83+
await createNavStep({ isNavInteractive: false });
7184
assert.dom('.hds-stepper-nav__step').hasNoAttribute('role');
7285
assert
7386
.dom('.hds-stepper-nav__step')
@@ -85,10 +98,11 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
8598
test('it sets the step to incomplete when the @currentStep is less than the nodeIndex and @isNavInteractive is true', async function (assert) {
8699
await render(
87100
<template>
88-
<Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{true}}>
101+
<Step @currentStep={{2}} @isNavInteractive={{true}}>
89102
<:title>Title</:title>
90103
<:description>Description</:description>
91-
</Step></template>,
104+
</Step>
105+
</template>,
92106
);
93107
assert
94108
.dom('.hds-stepper-nav__step')
@@ -104,7 +118,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
104118
});
105119

106120
test('it sets the step to complete when the @currentStep is greater than the nodeIndex and @isNavInteractive is true', async function (assert) {
107-
await this.createNavStep({ currentStep: 1 });
121+
await createNavStep({ currentStep: 1 });
108122
assert
109123
.dom('.hds-stepper-nav__step')
110124
.hasClass('hds-stepper-nav__step--complete');
@@ -119,7 +133,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
119133
});
120134

121135
test('it sets the step to active when the @currentStep is equal to the nodeIndex and @isNavInteractive is true', async function (assert) {
122-
await this.createNavStep({ currentStep: 0 });
136+
await createNavStep({ currentStep: 0 });
123137
assert
124138
.dom('.hds-stepper-nav__step')
125139
.hasClass('hds-stepper-nav__step--active');
@@ -138,10 +152,11 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
138152
test('it sets the step to incomplete when the @currentStep is less than the nodeIndex and @isNavInteractive is false', async function (assert) {
139153
await render(
140154
<template>
141-
<Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{false}}>
155+
<Step @currentStep={{2}} @isNavInteractive={{false}}>
142156
<:title>Title</:title>
143157
<:description>Description</:description>
144-
</Step></template>,
158+
</Step>
159+
</template>,
145160
);
146161
assert
147162
.dom('.hds-stepper-nav__step')
@@ -154,7 +169,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
154169
});
155170

156171
test('it sets the step to complete when the @currentStep is greater than the nodeIndex and @isNavInteractive is false', async function (assert) {
157-
await this.createNavStep({ currentStep: 1, isNavInteractive: false });
172+
await createNavStep({ currentStep: 1, isNavInteractive: false });
158173
assert
159174
.dom('.hds-stepper-nav__step')
160175
.hasClass('hds-stepper-nav__step--complete');
@@ -166,7 +181,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
166181
});
167182

168183
test('it sets the step to active when the @currentStep is equal to the nodeIndex and @isNavInteractive is false', async function (assert) {
169-
await this.createNavStep({ currentStep: 0, isNavInteractive: false });
184+
await createNavStep({ currentStep: 0, isNavInteractive: false });
170185
assert
171186
.dom('.hds-stepper-nav__step')
172187
.hasClass('hds-stepper-nav__step--active');
@@ -180,31 +195,31 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
180195
// TITLE TAG
181196

182197
test('it renders a div when the @titleTag argument is not provided', async function (assert) {
183-
await this.createNavStep();
198+
await createNavStep({});
184199
assert.dom('.hds-stepper-nav__step-title').hasTagName('div');
185200
});
186201

187202
test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
188-
await this.createNavStep({ titleTag: 'h2' });
203+
await createNavStep({ titleTag: 'h2' });
189204
assert.dom('.hds-stepper-nav__step-title').hasTagName('h2');
190205
});
191206

192207
// TITLE
193208

194209
test('it renders the title when the title contextual component block is used', async function (assert) {
195-
await this.createNavStep({ title: 'Test' });
210+
await createNavStep({ title: 'Test' });
196211
assert.dom('.hds-stepper-nav__step-title').containsText('Test');
197212
});
198213

199214
// DESCRIPTION
200215

201216
test('it does not render the description when the description contextual component block is not used', async function (assert) {
202-
await render(<template><Step></Step></template>);
217+
await render(<template><Step @currentStep={{0}} /></template>);
203218
assert.dom('.hds-stepper-nav__step-description').doesNotExist();
204219
});
205220

206221
test('it renders the description when the description contextual component block is used', async function (assert) {
207-
await this.createNavStep({ description: 'Test' });
222+
await createNavStep({ description: 'Test' });
208223
assert.dom('.hds-stepper-nav__step-description').exists();
209224
assert.dom('.hds-stepper-nav__step-description').containsText('Test');
210225
});

0 commit comments

Comments
 (0)