Skip to content

Commit 316a3a4

Browse files
author
shleewhite
committed
feat: convert SideNav tests to gts
1 parent dc36fbe commit 316a3a4

File tree

11 files changed

+879
-527
lines changed

11 files changed

+879
-527
lines changed

‎showcase/tests/integration/components/hds/side-nav/base-test.gjs‎ renamed to ‎showcase/tests/integration/components/hds/side-nav/base-test.gts‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,41 @@
44
*/
55

66
import { module, test } from 'qunit';
7-
import { setupRenderingTest } from 'showcase/tests/helpers';
87
import { render } from '@ember/test-helpers';
9-
import Base from "@hashicorp/design-system-components/components/hds/side-nav/base";
8+
9+
import { HdsSideNavBase } from '@hashicorp/design-system-components/components';
10+
11+
import { setupRenderingTest } from 'showcase/tests/helpers';
1012

1113
module('Integration | Component | hds/side-nav/base', function (hooks) {
1214
setupRenderingTest(hooks);
1315

1416
test('it should render the component with a CSS class that matches the component name', async function (assert) {
15-
await render(<template><Base id="test-side-nav" /></template>);
17+
await render(<template><HdsSideNavBase id="test-side-nav" /></template>);
1618
assert.dom('#test-side-nav').hasClass('hds-side-nav');
1719
});
1820

1921
// CONTENT
2022

2123
test('it renders content passed to the named blocks', async function (assert) {
22-
await render(<template>
23-
<Base>
24-
<:root>
25-
<span id="test-side-nav-root" />
26-
</:root>
27-
<:header>
28-
<span id="test-side-nav-header" />
29-
</:header>
30-
<:body>
31-
<span id="test-side-nav-body" />
32-
</:body>
33-
<:footer>
34-
<span id="test-side-nav-footer" />
35-
</:footer>
36-
</Base>
37-
</template>);
24+
await render(
25+
<template>
26+
<HdsSideNavBase>
27+
<:root>
28+
<span id="test-side-nav-root" />
29+
</:root>
30+
<:header>
31+
<span id="test-side-nav-header" />
32+
</:header>
33+
<:body>
34+
<span id="test-side-nav-body" />
35+
</:body>
36+
<:footer>
37+
<span id="test-side-nav-footer" />
38+
</:footer>
39+
</HdsSideNavBase>
40+
</template>,
41+
);
3842
assert.dom('#test-side-nav-root').exists();
3943
assert.dom('#test-side-nav-header').exists();
4044
assert.dom('#test-side-nav-body').exists();

‎showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs‎ renamed to ‎showcase/tests/integration/components/hds/side-nav/header/home-link-test.gts‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
* Copyright (c) HashiCorp, Inc.
33
* SPDX-License-Identifier: MPL-2.0
44
*/
5-
65
import { module, test } from 'qunit';
7-
import { setupRenderingTest } from 'showcase/tests/helpers';
86
import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
9-
import HomeLink from "@hashicorp/design-system-components/components/hds/side-nav/header/home-link";
7+
8+
import { HdsSideNavHeaderHomeLink } from '@hashicorp/design-system-components/components';
9+
10+
import { setupRenderingTest } from 'showcase/tests/helpers';
1011

1112
module('Integration | Component | hds/side-nav/home-link', function (hooks) {
1213
setupRenderingTest(hooks);
@@ -17,7 +18,13 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
1718

1819
test('it should render the component with a CSS class that matches the component name', async function (assert) {
1920
await render(
20-
<template><HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-home-link" /></template>,
21+
<template>
22+
<HdsSideNavHeaderHomeLink
23+
@icon="hashicorp"
24+
@ariaLabel="Hashicorp"
25+
id="test-home-link"
26+
/>
27+
</template>,
2128
);
2229
assert.dom('#test-home-link').hasClass('hds-side-nav__home-link');
2330
});
@@ -26,7 +33,14 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
2633

2734
test('it renders the passed in args', async function (assert) {
2835
await render(
29-
<template><HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" @href="https://www.hashicorp.com/" id="test-home-link" /></template>,
36+
<template>
37+
<HdsSideNavHeaderHomeLink
38+
@icon="hashicorp"
39+
@ariaLabel="Hashicorp"
40+
@href="https://www.hashicorp.com/"
41+
id="test-home-link"
42+
/>
43+
</template>,
3044
);
3145
assert.dom('.hds-icon-hashicorp').exists();
3246
assert
@@ -37,7 +51,14 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
3751

3852
test('it renders the logo with a custom passed in color', async function (assert) {
3953
await render(
40-
<template><HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" /></template>,
54+
<template>
55+
<HdsSideNavHeaderHomeLink
56+
@icon="boundary"
57+
@ariaLabel="Boundary"
58+
@color="var(--token-color-boundary-brand)"
59+
@href="#"
60+
/>
61+
</template>,
4162
);
4263
assert
4364
.dom('.hds-icon-boundary')
@@ -53,7 +74,12 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
5374
setupOnerror(function (error) {
5475
assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
5576
});
56-
await render(<template><HomeLink @icon="hashicorp" /></template>);
77+
await render(
78+
<template>
79+
{{! @glint-expect-error - testing invalid component usage }}
80+
<HdsSideNavHeaderHomeLink @icon="hashicorp" />
81+
</template>,
82+
);
5783
assert.throws(function () {
5884
throw new Error(errorMessage);
5985
});

‎showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs‎ renamed to ‎showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gts‎

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
*/
55

66
import { module, test } from 'qunit';
7-
import { setupRenderingTest } from 'showcase/tests/helpers';
87
import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
9-
import IconButton from "@hashicorp/design-system-components/components/hds/side-nav/header/icon-button";
8+
9+
import { HdsSideNavHeaderIconButton } from '@hashicorp/design-system-components/components';
10+
11+
import { setupRenderingTest } from 'showcase/tests/helpers';
1012

1113
module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
1214
setupRenderingTest(hooks);
@@ -17,7 +19,13 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
1719

1820
test('it should render the component with a CSS class that matches the component name', async function (assert) {
1921
await render(
20-
<template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-icon-button" /></template>,
22+
<template>
23+
<HdsSideNavHeaderIconButton
24+
@icon="search"
25+
@ariaLabel="Search"
26+
id="test-side-nav-icon-button"
27+
/>
28+
</template>,
2129
);
2230
assert
2331
.dom('#test-side-nav-icon-button')
@@ -28,7 +36,13 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
2836

2937
test('it renders the passed in args', async function (assert) {
3038
await render(
31-
<template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" /></template>,
39+
<template>
40+
<HdsSideNavHeaderIconButton
41+
@icon="search"
42+
@ariaLabel="Search"
43+
id="test-side-nav-button"
44+
/>
45+
</template>,
3246
);
3347
assert.dom('.hds-icon-search').exists();
3448
});
@@ -37,14 +51,27 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
3751

3852
test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
3953
await render(
40-
<template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" /></template>,
54+
<template>
55+
<HdsSideNavHeaderIconButton
56+
@icon="search"
57+
@ariaLabel="Search"
58+
id="test-side-nav-button"
59+
/>
60+
</template>,
4161
);
4262
assert.dom('#test-side-nav-button').hasTagName('button');
4363
});
4464

4565
test('it should render a <a> link if @href is passed', async function (assert) {
4666
await render(
47-
<template><IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-side-nav-button" /></template>,
67+
<template>
68+
<HdsSideNavHeaderIconButton
69+
@icon="search"
70+
@ariaLabel="Search"
71+
@href="https://www.hashicorp.com/"
72+
id="test-side-nav-button"
73+
/>
74+
</template>,
4875
);
4976
assert
5077
.dom('#test-side-nav-button')
@@ -54,7 +81,14 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
5481

5582
test('it should render a <a> link if @route is passed', async function (assert) {
5683
await render(
57-
<template><IconButton @icon="search" @ariaLabel="Search" @route="page-utilities.interactive" id="test-side-nav-button" /></template>,
84+
<template>
85+
<HdsSideNavHeaderIconButton
86+
@icon="search"
87+
@ariaLabel="Search"
88+
@route="page-utilities.interactive"
89+
id="test-side-nav-button"
90+
/>
91+
</template>,
5892
);
5993
assert
6094
.dom('#test-side-nav-button')
@@ -71,7 +105,12 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
71105
setupOnerror(function (error) {
72106
assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
73107
});
74-
await render(<template><IconButton @icon="search" /></template>);
108+
await render(
109+
<template>
110+
{{! @glint-expect-error - testing invalid component usage }}
111+
<HdsSideNavHeaderIconButton @icon="search" />
112+
</template>,
113+
);
75114
assert.throws(function () {
76115
throw new Error(errorMessage);
77116
});

‎showcase/tests/integration/components/hds/side-nav/header/index-test.gjs‎ renamed to ‎showcase/tests/integration/components/hds/side-nav/header/index-test.gts‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,37 @@
44
*/
55

66
import { module, test } from 'qunit';
7-
import { setupRenderingTest } from 'showcase/tests/helpers';
87
import { render } from '@ember/test-helpers';
9-
import Header from "@hashicorp/design-system-components/components/hds/side-nav/header/index";
8+
9+
import { HdsSideNavHeader } from '@hashicorp/design-system-components/components';
10+
11+
import { setupRenderingTest } from 'showcase/tests/helpers';
1012

1113
module('Integration | Component | hds/side-nav/header', function (hooks) {
1214
setupRenderingTest(hooks);
1315

1416
test('it should render the component with a CSS class that matches the component name', async function (assert) {
15-
await render(<template><Header id="test-side-nav-header" /></template>);
17+
await render(
18+
<template><HdsSideNavHeader id="test-side-nav-header" /></template>,
19+
);
1620
assert.dom('#test-side-nav-header').hasClass('hds-side-nav-header');
1721
});
1822

1923
// CONTENT
2024

2125
test('it renders passed in content', async function (assert) {
22-
await render(<template>
23-
<Header>
24-
<:logo>
25-
<div id="test-side-nav-logo"></div>
26-
</:logo>
27-
<:actions>
28-
<div id="test-side-nav-actions"></div>
29-
</:actions>
30-
</Header>
31-
</template>);
26+
await render(
27+
<template>
28+
<HdsSideNavHeader>
29+
<:logo>
30+
<div id="test-side-nav-logo"></div>
31+
</:logo>
32+
<:actions>
33+
<div id="test-side-nav-actions"></div>
34+
</:actions>
35+
</HdsSideNavHeader>
36+
</template>,
37+
);
3238
assert.dom('#test-side-nav-logo').exists();
3339
assert.dom('#test-side-nav-actions').exists();
3440
});

0 commit comments

Comments
 (0)