Skip to content

Commit ca4ce22

Browse files
didoodidoo
committedMar 10, 2025
added integration tests for Layout::Flex and Layout::Flex::Item components
1 parent 2cbd883 commit ca4ce22

File tree

2 files changed

+279
-0
lines changed

2 files changed

+279
-0
lines changed
 

‎showcase/tests/integration/components/hds/layout/flex/index-test.js

+101
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,105 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
1515
await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
1616
assert.dom('#test-layout-flex').hasClass('hds-layout-flex');
1717
});
18+
19+
// CONTENT
20+
21+
test('it should render the yielded content', async function (assert) {
22+
await render(
23+
hbs`<Hds::Layout::Flex id="test-layout-flex"><pre>test</pre></Hds::Layout::Flex>`
24+
);
25+
assert.dom('#test-layout-flex > pre').exists().hasText('test');
26+
});
27+
test('it should render the `Item` yielded contextual component', async function (assert) {
28+
await render(
29+
hbs`<Hds::Layout::Flex id="test-layout-flex" as |LF|><LF.Item><pre>test</pre></LF.Item></Hds::Layout::Flex>`
30+
);
31+
assert
32+
.dom('#test-layout-flex > .hds-layout-flex-item > pre')
33+
.exists()
34+
.hasText('test');
35+
});
36+
37+
// TAG
38+
39+
test('it should render with a "div" element if @tag is not declared', async function (assert) {
40+
await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
41+
assert.dom('#test-layout-flex').hasTagName('div');
42+
});
43+
test('it should render with the correct @tag declared', async function (assert) {
44+
await render(
45+
hbs`<Hds::Layout::Flex id="test-layout-flex" @tag="section" />`
46+
);
47+
assert.dom('#test-layout-flex').hasTagName('section');
48+
});
49+
50+
// DIRECTION
51+
52+
test('it should render the element with `row` direction if no @direction is declared', async function (assert) {
53+
await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
54+
assert.dom('#test-layout-flex').hasClass('hds-layout-flex--direction-row');
55+
});
56+
test('it should render the correct CSS class if the @direction prop is declared', async function (assert) {
57+
await render(
58+
hbs`<Hds::Layout::Flex id="test-layout-flex" @direction="column" />`
59+
);
60+
assert
61+
.dom('#test-layout-flex')
62+
.hasClass('hds-layout-flex--direction-column');
63+
});
64+
65+
// JUSTIFY / ALIGN / WRAP / IS-INLINE
66+
67+
test('it should render the element without specific classes if no @justify/@align/@wrap/@isInline are declared', async function (assert) {
68+
await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
69+
assert
70+
.dom('#test-layout-flex')
71+
.doesNotHaveClass(/hds-layout-flex--justify-content-/);
72+
assert
73+
.dom('#test-layout-flex')
74+
.doesNotHaveClass(/hds-layout-flex--align-items-/);
75+
assert
76+
.dom('#test-layout-flex')
77+
.doesNotHaveClass('.hds-layout-flex--has-wrapping');
78+
assert
79+
.dom('#test-layout-flex')
80+
.doesNotHaveClass('.hds-layout-flex--is-inline');
81+
});
82+
test('it should render the correct CSS classes if the @justify/@align/@wrap/@isInline props are declared', async function (assert) {
83+
await render(
84+
hbs`<Hds::Layout::Flex id="test-layout-flex" @justify="space-between" @align="stretch" @wrap={{true}} @isInline={{true}} />`
85+
);
86+
assert
87+
.dom('#test-layout-flex')
88+
.hasClass('hds-layout-flex--justify-content-space-between');
89+
assert
90+
.dom('#test-layout-flex')
91+
.hasClass('hds-layout-flex--align-items-stretch');
92+
assert.dom('#test-layout-flex').hasClass('hds-layout-flex--has-wrapping');
93+
assert.dom('#test-layout-flex').hasClass('hds-layout-flex--is-inline');
94+
});
95+
96+
// GAP
97+
98+
test('it should render the element without `gap` class if no @gap is declared', async function (assert) {
99+
await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
100+
assert.dom('#test-layout-flex').doesNotHaveClass(/hds-layout-flex--gap-/);
101+
assert
102+
.dom('#test-layout-flex')
103+
.doesNotHaveClass(/hds-layout-flex--row-gap-/);
104+
assert
105+
.dom('#test-layout-flex')
106+
.doesNotHaveClass(/hds-layout-flex--column-gap-/);
107+
});
108+
test('it should render the correct CSS class if the @gap prop is declared as single value', async function (assert) {
109+
await render(hbs`<Hds::Layout::Flex id="test-layout-flex" @gap="24" />`);
110+
assert.dom('#test-layout-flex').hasClass('hds-layout-flex--gap-24');
111+
});
112+
test('it should render the correct CSS class if the @gap prop is declared as a couple of values', async function (assert) {
113+
await render(
114+
hbs`<Hds::Layout::Flex id="test-layout-flex" @gap={{array "4" "48"}} />`
115+
);
116+
assert.dom('#test-layout-flex').hasClass('hds-layout-flex--row-gap-4');
117+
assert.dom('#test-layout-flex').hasClass('hds-layout-flex--column-gap-48');
118+
});
18119
});

‎showcase/tests/integration/components/hds/layout/flex/item-test.js

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import { module, test } from 'qunit';
7+
import { setupRenderingTest } from 'ember-qunit';
8+
import { render } from '@ember/test-helpers';
9+
import { hbs } from 'ember-cli-htmlbars';
10+
11+
module('Integration | Component | hds/layout/flex/item', function (hooks) {
12+
setupRenderingTest(hooks);
13+
14+
test('it should render the component with a CSS class that matches the component name', async function (assert) {
15+
await render(hbs`<Hds::Layout::Flex::Item id="test-layout-flex-item" />`);
16+
assert.dom('#test-layout-flex-item').hasClass('hds-layout-flex-item');
17+
});
18+
19+
// CONTENT
20+
21+
test('it should render the yielded content', async function (assert) {
22+
await render(
23+
hbs`<Hds::Layout::Flex::Item id="test-layout-flex-item"><pre>test</pre></Hds::Layout::Flex::Item>`
24+
);
25+
assert.dom('#test-layout-flex-item > pre').exists().hasText('test');
26+
});
27+
test('it should render as yielded contextual component', async function (assert) {
28+
await render(
29+
hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item"><pre>test</pre></LF.Item></Hds::Layout::Flex>`
30+
);
31+
assert.dom('#test-layout-flex-item > pre').exists().hasText('test');
32+
});
33+
34+
// TAG
35+
36+
test('it should render with a "div" element if @tag is not declared', async function (assert) {
37+
await render(
38+
hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" /></Hds::Layout::Flex>`
39+
);
40+
assert.dom('#test-layout-flex-item').hasTagName('div');
41+
});
42+
test('it should render with the correct @tag declared', async function (assert) {
43+
await render(
44+
hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" @tag="span" /></Hds::Layout::Flex>`
45+
);
46+
assert.dom('#test-layout-flex-item').hasTagName('span');
47+
});
48+
49+
// BASIS / GROW / SHRINK
50+
51+
test('it should render the element without specific classes or inline styles if no @basis/@grow/@shrink are declared', async function (assert) {
52+
await render(
53+
hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" /></Hds::Layout::Flex>`
54+
);
55+
assert
56+
.dom('#test-layout-flex-item')
57+
.doesNotHaveClass(/hds-layout-flex-item--grow-/);
58+
assert
59+
.dom('#test-layout-flex-item')
60+
.doesNotHaveClass(/hds-layout-flex-item--shrink-/);
61+
assert.dom('#test-layout-flex-item').doesNotHaveAttribute('style');
62+
});
63+
test('it should render the correct CSS class if the @basis prop is declared as 0', async function (assert) {
64+
await render(
65+
hbs`<Hds::Layout::Flex as |LF|>
66+
<LF.Item id="test-layout-flex-item-1" @basis={{0}} />
67+
</Hds::Layout::Flex>`
68+
);
69+
assert
70+
.dom('#test-layout-flex-item-1')
71+
.doesNotHaveAttribute('style')
72+
.hasClass('hds-layout-flex-item--basis-0');
73+
});
74+
test('it should render the correct inline styles if the @basis prop is declared as string', async function (assert) {
75+
await render(
76+
hbs`<Hds::Layout::Flex as |LF|>
77+
<LF.Item id="test-layout-flex-item-1" @basis="5%" />
78+
<LF.Item id="test-layout-flex-item-2" @basis="100px" />
79+
<LF.Item id="test-layout-flex-item-3" @basis="auto" />
80+
<LF.Item id="test-layout-flex-item-4" @basis="max-content" />
81+
</Hds::Layout::Flex>`
82+
);
83+
assert
84+
.dom('#test-layout-flex-item-1')
85+
.hasAttribute('style', 'flex-basis: 5%;')
86+
.hasStyle({ flexBasis: '5%' });
87+
assert
88+
.dom('#test-layout-flex-item-2')
89+
.hasAttribute('style', 'flex-basis: 100px;')
90+
.hasStyle({ flexBasis: '100px' });
91+
assert
92+
.dom('#test-layout-flex-item-3')
93+
.hasAttribute('style', 'flex-basis: auto;')
94+
.hasStyle({ flexBasis: 'auto' });
95+
assert
96+
.dom('#test-layout-flex-item-4')
97+
.hasAttribute('style', 'flex-basis: max-content;')
98+
.hasStyle({ flexBasis: 'max-content' });
99+
});
100+
test('it should render the correct CSS class if the @grow/@shrink props are declared as boolean or 0/1', async function (assert) {
101+
await render(
102+
hbs`<Hds::Layout::Flex as |LF|>
103+
<LF.Item id="test-layout-flex-item-1" @grow={{false}} @shrink={{false}} />
104+
<LF.Item id="test-layout-flex-item-2" @grow={{0}} @shrink={{0}} />
105+
<LF.Item id="test-layout-flex-item-3" @grow={{true}} @shrink={{true}} />
106+
<LF.Item id="test-layout-flex-item-4" @grow={{1}} @shrink={{1}} />
107+
</Hds::Layout::Flex>`
108+
);
109+
assert
110+
.dom('#test-layout-flex-item-1')
111+
.doesNotHaveAttribute('style')
112+
.hasClass('hds-layout-flex-item--grow-0')
113+
.hasClass('hds-layout-flex-item--shrink-0');
114+
assert
115+
.dom('#test-layout-flex-item-2')
116+
.doesNotHaveAttribute('style')
117+
.hasClass('hds-layout-flex-item--grow-0')
118+
.hasClass('hds-layout-flex-item--shrink-0');
119+
assert
120+
.dom('#test-layout-flex-item-3')
121+
.doesNotHaveAttribute('style')
122+
.hasClass('hds-layout-flex-item--grow-1')
123+
.hasClass('hds-layout-flex-item--shrink-1');
124+
assert
125+
.dom('#test-layout-flex-item-4')
126+
.doesNotHaveAttribute('style')
127+
.hasClass('hds-layout-flex-item--grow-1')
128+
.hasClass('hds-layout-flex-item--shrink-1');
129+
});
130+
test('it should render the correct inline styles if the @grow/@shrink props are declared as strings/numbers', async function (assert) {
131+
await render(
132+
hbs`<Hds::Layout::Flex as |LF|>
133+
<LF.Item id="test-layout-flex-item-1" @grow="0" @shrink="0" />
134+
<LF.Item id="test-layout-flex-item-2" @grow="1" @shrink="1" />
135+
<LF.Item id="test-layout-flex-item-3" @grow={{2}} @shrink={{2}} />
136+
<LF.Item id="test-layout-flex-item-4" @grow="initial" @shrink="initial" />
137+
</Hds::Layout::Flex>`
138+
);
139+
assert
140+
.dom('#test-layout-flex-item-1')
141+
.hasAttribute('style', 'flex-grow: 0; flex-shrink: 0;')
142+
.hasStyle({ flexGrow: '0', flexShrink: '0' });
143+
assert
144+
.dom('#test-layout-flex-item-2')
145+
.hasAttribute('style', 'flex-grow: 1; flex-shrink: 1;')
146+
.hasStyle({ flexGrow: '1', flexShrink: '1' });
147+
assert
148+
.dom('#test-layout-flex-item-3')
149+
.hasAttribute('style', 'flex-grow: 2; flex-shrink: 2;')
150+
.hasStyle({ flexGrow: '2', flexShrink: '2' });
151+
assert
152+
.dom('#test-layout-flex-item-4')
153+
.hasAttribute('style', 'flex-grow: initial; flex-shrink: initial;')
154+
// grow=0 and shrink=1 are the CSS defaults (initial)
155+
.hasStyle({ flexGrow: '0', flexShrink: '1' });
156+
});
157+
158+
// ENABLE COLLAPSE BELOW CONTENT SIZE
159+
160+
test('it should render the element without specific classes if no @enableCollapseBelowContentSize is declared', async function (assert) {
161+
await render(
162+
hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" /></Hds::Layout::Flex>`
163+
);
164+
assert
165+
.dom('#test-layout-flex-item')
166+
.doesNotHaveClass(
167+
'.hds-layout-flex-item--enable-collapse-below-content-size'
168+
);
169+
});
170+
test('it should render the correct CSS class if the @enableCollapseBelowContentSize prop is declared', async function (assert) {
171+
await render(
172+
hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" @enableCollapseBelowContentSize={{true}} /></Hds::Layout::Flex>`
173+
);
174+
assert
175+
.dom('#test-layout-flex-item')
176+
.hasClass('hds-layout-flex-item--enable-collapse-below-content-size');
177+
});
178+
});

0 commit comments

Comments
 (0)
Failed to load comments.