Skip to content

Commit c7738df

Browse files
author
shleewhite
committed
feat: convert SideNav tests to gts
1 parent 6eacbcc commit c7738df

File tree

9 files changed

+398
-208
lines changed

9 files changed

+398
-208
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/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)