Skip to content

Commit e44fe00

Browse files
nicolechungnicolechung
committed
test: Update tests with new assertions
Hopefully I included all the new related tests - there should be a @Label or :label - there should not be a @Label AND :label - didn't test for @hint/:hint as this is similar
1 parent c8a8d76 commit e44fe00

8 files changed

+251
-90
lines changed

‎test-app/tests/integration/components/checkbox-field-test.gts

+34-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { module, test } from 'qunit';
77
import CheckboxField from '@crowdstrike/ember-toucan-core/components/form/fields/checkbox';
88
import { setupRenderingTest } from 'test-app/tests/helpers';
99

10-
module('Integration | Component | Fields | Checkbox', function (hooks) {
10+
module('Integration | Component | Fields | CheckboxField', function (hooks) {
1111
setupRenderingTest(hooks);
1212

1313
test('it renders', async function (assert) {
@@ -45,6 +45,18 @@ module('Integration | Component | Fields | Checkbox', function (hooks) {
4545
assert.dom('[data-hint]').hasText('Hint text');
4646
});
4747

48+
test('it renders with a hint and label block', async function (assert) {
49+
await render(<template>
50+
<CheckboxField data-checkbox>
51+
<:label>label block content</:label>
52+
<:hint>hint block content</:hint>
53+
</CheckboxField>
54+
</template>);
55+
56+
assert.dom('[data-hint]').hasText('hint block content');
57+
assert.dom('[data-label]').hasText('label block content');
58+
});
59+
4860
test('it renders with an error', async function (assert) {
4961
await render(<template>
5062
<CheckboxField
@@ -219,14 +231,32 @@ module('Integration | Component | Fields | Checkbox', function (hooks) {
219231

220232
setupOnerror((e: Error) => {
221233
assert.ok(
222-
e.message.includes('A "@label" argument is required'),
234+
e.message.includes(
235+
'Assertion Failed: You need either :label or @label'
236+
),
237+
'Expected assertion error message'
238+
);
239+
});
240+
241+
await render(<template><CheckboxField /></template>);
242+
});
243+
244+
test('it throws an assertion error if both `@label` and `:label` are provided', async function (assert) {
245+
assert.expect(1);
246+
247+
setupOnerror((e: Error) => {
248+
assert.ok(
249+
e.message.includes(
250+
'Assertion Failed: You can have :label or @label, but not both'
251+
),
223252
'Expected assertion error message'
224253
);
225254
});
226255

227256
await render(<template>
228-
{{! @glint-expect-error: we are not providing @label, so this is expected }}
229-
<CheckboxField />
257+
<CheckboxField @label="Label">
258+
<:label>label block content</:label>
259+
</CheckboxField>
230260
</template>);
231261
});
232262

‎test-app/tests/integration/components/checkbox-group-field-test.gts

+39-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
22
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
33

4-
import { click, render } from '@ember/test-helpers';
4+
import { click, render, setupOnerror } from '@ember/test-helpers';
55
import { module, test } from 'qunit';
66

77
import CheckboxGroupField from '@crowdstrike/ember-toucan-core/components/form/fields/checkbox-group';
@@ -115,14 +115,14 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) {
115115

116116
test('it renders with a hint and label block', async function (assert) {
117117
await render(<template>
118-
<CheckboxGroupField @label="Label" @name="group" @hint="Hint text">
119-
<:label>Extra label content</:label>
120-
<:hint>Extra hint content</:hint>
118+
<CheckboxGroupField @name="group">
119+
<:label><span data-label>label block content</span></:label>
120+
<:hint><span data-hint>hint block content</span></:hint>
121121
</CheckboxGroupField>
122122
</template>);
123123

124-
assert.dom('[data-hint]').hasText('Hint text Extra hint content');
125-
assert.dom('[data-label]').hasText('Label Extra label content');
124+
assert.dom('[data-label]').hasText('label block content');
125+
assert.dom('[data-hint]').hasText('hint block content');
126126
});
127127

128128
test('it default-checks the checkbox with the matching `@value`', async function (assert) {
@@ -231,4 +231,37 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) {
231231
assert.dom('[data-checkbox-2]').isChecked();
232232
});
233233

234+
test('it throws an assertion error if no `@label` or `:label` is provided', async function (assert) {
235+
assert.expect(1);
236+
237+
setupOnerror((e: Error) => {
238+
assert.ok(
239+
e.message.includes(
240+
'Assertion Failed: You need either :label or @label'
241+
),
242+
'Expected assertion error message'
243+
);
244+
});
245+
246+
await render(<template><CheckboxGroupField @name="group" /></template>);
247+
});
248+
249+
test('it throws an assertion error if both `@label` and `:label` are provided', async function (assert) {
250+
assert.expect(1);
251+
252+
setupOnerror((e: Error) => {
253+
assert.ok(
254+
e.message.includes(
255+
'Assertion Failed: You can have :label or @label, but not both'
256+
),
257+
'Expected assertion error message'
258+
);
259+
});
260+
261+
await render(<template>
262+
<CheckboxGroupField @label="Label" @name="group">
263+
<:label>Label</:label>
264+
</CheckboxGroupField>
265+
</template>);
266+
});
234267
});

‎test-app/tests/integration/components/fieldset-test.gts

+23-7
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ module('Integration | Component | Fieldset', function (hooks) {
4444

4545
test('it renders with hint and label blocks', async function (assert) {
4646
await render(<template>
47-
<Fieldset @label="Label" @hint="Hint text" data-fieldset>
48-
<:label>Extra label content</:label>
49-
<:hint>Extra hint content</:hint>
47+
<Fieldset data-fieldset>
48+
<:label><span data-label>label block content</span></:label>
49+
<:hint><span data-hint>hint block content</span></:hint>
5050
</Fieldset>
5151
</template>);
5252

53-
assert.dom('[data-hint]').hasText('Hint text Extra hint content');
54-
assert.dom('[data-label]').hasText('Label Extra label content');
53+
assert.dom('[data-hint]').hasText('hint block content');
54+
assert.dom('[data-label]').hasText('label block content');
5555
});
5656

5757
test('it renders with an error', async function (assert) {
@@ -131,14 +131,30 @@ module('Integration | Component | Fieldset', function (hooks) {
131131

132132
setupOnerror((e: Error) => {
133133
assert.ok(
134-
e.message.includes('A "@label" argument is required'),
134+
e.message.includes('Assertion Failed: You need either :label or @label'),
135135
'Expected assertion error message'
136136
);
137137
});
138138

139139
await render(<template>
140-
{{! @glint-expect-error: we are not providing @label, so this is expected }}
141140
<Fieldset />
142141
</template>);
143142
});
143+
144+
test('it throws an assertion error if `@label` and `:label` is provided', async function (assert) {
145+
assert.expect(1);
146+
147+
setupOnerror((e: Error) => {
148+
assert.ok(
149+
e.message.includes('Assertion Failed: You can have :label or @label, but not both'),
150+
'Expected assertion error message'
151+
);
152+
});
153+
154+
await render(<template>
155+
<Fieldset @label="Label">
156+
<:label>Hi</:label>
157+
</Fieldset>
158+
</template>);
159+
});
144160
});

‎test-app/tests/integration/components/file-input-field-test.gts

+39-24
Original file line numberDiff line numberDiff line change
@@ -91,40 +91,26 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
9191
/>
9292
</template>);
9393

94-
// For the file input field component, the only aria-describedby
95-
// value should be the errorId. This is due to the way the component
96-
// is structured, where the label+hint are rendered inside of the
97-
// wrapping <label> element
98-
const hint = find('[data-hint]');
99-
100-
assert.dom(hint).hasText('Hint text');
94+
assert.dom('[data-hint]').hasText('Hint text');
10195
});
10296

10397
test('it renders with a hint and label block', async function (assert) {
10498
await render(<template>
10599
<FileInputField
106100
@deleteLabel="Delete File"
107-
@label="Label"
108101
@trigger="Select Files"
109-
@hint="Hint text"
110102
@onChange={{onChange}}
111103
data-file-input-field
112104
>
113-
<:label>Extra label content</:label>
114-
<:hint>Extra hint content</:hint>
105+
<:label><span data-label>label block content</span></:label>
106+
<:hint><span data-hint>hint block content</span></:hint>
115107
</FileInputField>
116108
</template>);
117109

118-
// For the file input field component, the only aria-describedby
119-
// value should be the errorId. This is due to the way the component
120-
// is structured, where the label+hint are rendered inside of the
121-
// wrapping <label> element
122-
const hint = find('[data-hint]');
123-
const label = find('[data-label]');
124-
125-
assert.dom(hint).hasText('Hint text Extra hint content');
126-
assert.dom(label).hasText('Label Extra label content');
110+
assert.dom('[data-hint]').hasText('hint block content');
111+
assert.dom('[data-label]').hasText('label block content');
127112
});
113+
128114
test('it renders with an error', async function (assert) {
129115
await render(<template>
130116
<FileInputField
@@ -444,19 +430,48 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
444430
assert.dom('[data-root-field="selector"]').exists();
445431
});
446432

447-
test('it throws an assertion error if no @label is provided', async function (assert) {
433+
test('it throws an assertion error if there is no @label or :label', async function (assert) {
448434
assert.expect(1);
449435

450436
setupOnerror((e: Error) => {
451437
assert.ok(
452-
e.message.includes('A "@label" argument is required'),
438+
e.message.includes(
439+
'Assertion Failed: You need either :label or @label'
440+
),
453441
'Expected assertion error message'
454442
);
455443
});
456444

457445
await render(<template>
458-
{{! @glint-expect-error: we are not providing @label, so this is expected }}
459-
<FileInputField @onChange={{onChange}} />
446+
<FileInputField
447+
@deleteLabel="Delete file"
448+
@trigger="Select Files"
449+
@onChange={{onChange}}
450+
/>
451+
</template>);
452+
});
453+
454+
test('it throws an assertion error if both `@label` and `:label` are provided', async function (assert) {
455+
assert.expect(1);
456+
457+
setupOnerror((e: Error) => {
458+
assert.ok(
459+
e.message.includes(
460+
'Assertion Failed: You can have :label or @label, but not both'
461+
),
462+
'Expected assertion error message'
463+
);
464+
});
465+
466+
await render(<template>
467+
<FileInputField
468+
@deleteLabel="Delete file"
469+
@trigger="Select Files"
470+
@label="Label"
471+
@onChange={{onChange}}
472+
>
473+
<:label>Hello</:label>
474+
</FileInputField>
460475
</template>);
461476
});
462477

‎test-app/tests/integration/components/input-field-test.gts

+24-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
21
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
32
import { fillIn, find, render, setupOnerror } from '@ember/test-helpers';
43
import { module, test } from 'qunit';
@@ -28,19 +27,33 @@ module('Integration | Component | Fields | Input', function (hooks) {
2827
assert.dom(input).hasNoClass('shadow-error-outline');
2928
});
3029

31-
test('it encourages @label via assert', async function (assert) {
30+
test('it throws an assertion error if no `@label` or `:label` is provided', async function (assert) {
3231
assert.expect(1);
3332

3433
setupOnerror((e: Error) => {
3534
assert.strictEqual(
3635
e.message,
37-
'Assertion Failed: input field requires a label',
36+
'Assertion Failed: You need either :label or @label',
37+
'Expected an error message if @label is not provided'
38+
);
39+
});
40+
await render(<template><InputField type="text" /></template>);
41+
});
42+
43+
test('it throws an assertion error if both `@label` and `:label` are provided', async function (assert) {
44+
assert.expect(1);
45+
46+
setupOnerror((e: Error) => {
47+
assert.strictEqual(
48+
e.message,
49+
'Assertion Failed: You can have :label or @label, but not both',
3850
'Expected an error message if @label is not provided'
3951
);
4052
});
4153
await render(<template>
42-
{{! @glint-expect-error: should have an error here for missing @label }}
43-
<InputField type="text" />
54+
<InputField @label="Label" type="text">
55+
<:label>Hello</:label>
56+
</InputField>
4457
</template>);
4558
});
4659

@@ -112,24 +125,16 @@ module('Integration | Component | Fields | Input', function (hooks) {
112125

113126
test('it renders a hint and label block', async function (assert) {
114127
await render(<template>
115-
<InputField
116-
@label="Label"
117-
type="text"
118-
@hint="Hint text visible here"
119-
data-input
120-
>
121-
<:label>Extra label content</:label>
122-
<:hint>Extra hint content</:hint>
128+
<InputField type="text" data-input>
129+
<:label><span data-label>label block content</span></:label>
130+
<:hint><span data-hint>hint block content</span></:hint>
123131
</InputField>
124132
</template>);
125133

126-
const label = '[data-label]';
127-
const hint = '[data-hint]';
128-
129-
assert.dom(label).hasText('Label Extra label content');
130-
assert.dom(hint).hasText('Hint text visible here Extra hint content');
131-
134+
assert.dom('[data-label]').hasText('label block content');
135+
assert.dom('[data-hint]').hasText('hint block content');
132136
});
137+
133138
test('it sets aria-describedby when both a hint and error are provided using the hint and error ids', async function (assert) {
134139
await render(<template>
135140
<InputField

0 commit comments

Comments
 (0)