Skip to content

Commit f5ad47d

Browse files
cdransfcaseyisonit
cdransf
and
caseyisonit
committed
chore(testing): review and complete test suites (#6178)
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
1 parent 63a0728 commit f5ad47d

13 files changed

Lines changed: 1167 additions & 156 deletions

File tree

‎2nd-gen/packages/swc/components/asset/test/asset.test.ts‎

Lines changed: 156 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,15 @@ export const OverviewTest: Story = {
4747

4848
await step('renders slotted content when no variant is set', async () => {
4949
const img = asset.querySelector('img');
50-
expect(asset.variant).toBeUndefined();
51-
expect(img).toBeTruthy();
52-
expect(img?.getAttribute('alt')?.length).toBeGreaterThan(0);
50+
expect(
51+
asset.variant,
52+
'variant when not set'
53+
).toBeUndefined();
54+
expect(img, 'slotted img element is rendered').toBeTruthy();
55+
expect(
56+
img?.getAttribute('alt')?.length,
57+
'slotted img has a non-empty alt attribute'
58+
).toBeGreaterThan(0);
5359
});
5460
},
5561
};
@@ -69,21 +75,82 @@ export const DefaultLabelFallbackTest: Story = {
6975
await step('file variant falls back to default aria-label', async () => {
7076
const fileAsset = assets.find(
7177
(a) => a.getAttribute('variant') === 'file'
72-
) as Asset;
73-
const svg = fileAsset.shadowRoot?.querySelector('svg');
74-
expect(svg?.getAttribute('aria-label')).toBe('File');
78+
) as Asset | null;
79+
expect(fileAsset, 'file asset is rendered').toBeTruthy();
80+
const svg = fileAsset?.shadowRoot?.querySelector('svg');
81+
expect(svg, 'file asset has an SVG in shadow DOM').toBeTruthy();
82+
expect(
83+
svg?.getAttribute('aria-label'),
84+
'file asset SVG aria-label'
85+
).toBe('File');
7586
});
7687

7788
await step('folder variant falls back to default aria-label', async () => {
7889
const folderAsset = assets.find(
7990
(a) => a.getAttribute('variant') === 'folder'
80-
) as Asset;
81-
const svg = folderAsset.shadowRoot?.querySelector('svg');
82-
expect(svg?.getAttribute('aria-label')).toBe('Folder');
91+
) as Asset | null;
92+
expect(folderAsset, 'folder asset is rendered').toBeTruthy();
93+
const svg = folderAsset?.shadowRoot?.querySelector('svg');
94+
expect(svg, 'folder asset has an SVG in shadow DOM').toBeTruthy();
95+
expect(
96+
svg?.getAttribute('aria-label'),
97+
'folder asset SVG defaults to "Folder" aria-label'
98+
).toBe('Folder');
8399
});
84100
},
85101
};
86102

103+
// ──────────────────────────────────────────────────────────────
104+
// TEST: Properties / Attributes
105+
// ──────────────────────────────────────────────────────────────
106+
107+
export const LabelMutationTest: Story = {
108+
render: () => html`
109+
<swc-asset variant="file"></swc-asset>
110+
`,
111+
play: async ({ canvasElement, step }) => {
112+
const asset = await getComponent<Asset>(canvasElement, 'swc-asset');
113+
114+
await step(
115+
'SVG aria-label reflects default "File" when label is empty',
116+
async () => {
117+
const svg = asset.shadowRoot?.querySelector('svg');
118+
expect(svg, 'SVG is rendered initially').toBeTruthy();
119+
expect(
120+
svg?.getAttribute('aria-label'),
121+
'SVG aria-label defaults to "File" when no label is set'
122+
).toBe('File');
123+
}
124+
);
125+
126+
await step(
127+
'SVG aria-label updates when label property is set',
128+
async () => {
129+
asset.label = 'Q4 Budget Report';
130+
await asset.updateComplete;
131+
const svg = asset.shadowRoot?.querySelector('svg');
132+
expect(
133+
svg?.getAttribute('aria-label'),
134+
'SVG aria-label after label update'
135+
).toBe('Q4 Budget Report');
136+
}
137+
);
138+
139+
await step(
140+
'SVG aria-label reverts to default when label is cleared',
141+
async () => {
142+
asset.label = '';
143+
await asset.updateComplete;
144+
const svg = asset.shadowRoot?.querySelector('svg');
145+
expect(
146+
svg?.getAttribute('aria-label'),
147+
'SVG aria-label reverts to "File" when label is cleared'
148+
).toBe('File');
149+
}
150+
);
151+
},
152+
};
153+
87154
// ──────────────────────────────────────────────────────────────
88155
// TEST: Variants / States
89156
// ──────────────────────────────────────────────────────────────
@@ -101,8 +168,74 @@ export const VariantsTest: Story = {
101168
(item) => item.getAttribute('variant') === 'folder'
102169
);
103170

104-
expect(fileAsset).toBeTruthy();
105-
expect(folderAsset).toBeTruthy();
171+
expect(fileAsset, 'file variant asset is rendered').toBeTruthy();
172+
expect(folderAsset, 'folder variant asset is rendered').toBeTruthy();
173+
});
174+
},
175+
};
176+
177+
export const VariantMutationTest: Story = {
178+
render: () => html`
179+
<swc-asset></swc-asset>
180+
`,
181+
play: async ({ canvasElement, step }) => {
182+
const asset = await getComponent<Asset>(canvasElement, 'swc-asset');
183+
184+
await step('initially renders slot when no variant is set', async () => {
185+
expect(asset.variant, 'variant is initially undefined').toBeUndefined();
186+
const svg = asset.shadowRoot?.querySelector('svg');
187+
expect(svg, 'no SVG is rendered when variant is not set').toBeNull();
188+
});
189+
190+
await step('renders file SVG after variant is set to "file"', async () => {
191+
asset.variant = 'file';
192+
await asset.updateComplete;
193+
expect(
194+
asset.getAttribute('variant'),
195+
'variant attribute is "file" after mutation'
196+
).toBe('file');
197+
const svg = asset.shadowRoot?.querySelector('svg');
198+
expect(svg, 'file SVG is rendered after variant mutation').toBeTruthy();
199+
expect(
200+
svg?.getAttribute('aria-label'),
201+
'file SVG has default "File" aria-label'
202+
).toBe('File');
203+
});
204+
205+
await step(
206+
'renders folder SVG after variant is set to "folder"',
207+
async () => {
208+
asset.variant = 'folder';
209+
await asset.updateComplete;
210+
expect(
211+
asset.getAttribute('variant'),
212+
'variant attribute is "folder" after mutation'
213+
).toBe('folder');
214+
const svg = asset.shadowRoot?.querySelector('svg');
215+
expect(
216+
svg,
217+
'folder SVG is rendered after variant mutation'
218+
).toBeTruthy();
219+
expect(
220+
svg?.getAttribute('aria-label'),
221+
'folder SVG has default "Folder" aria-label'
222+
).toBe('Folder');
223+
}
224+
);
225+
226+
await step('reverts to slot content when variant is cleared', async () => {
227+
asset.variant = undefined;
228+
await asset.updateComplete;
229+
expect(
230+
asset.variant,
231+
'variant is undefined after clearing'
232+
).toBeUndefined();
233+
expect(
234+
asset.hasAttribute('variant'),
235+
'variant attribute is absent after clearing'
236+
).toBe(false);
237+
const svg = asset.shadowRoot?.querySelector('svg');
238+
expect(svg, 'no SVG is rendered after variant is cleared').toBeNull();
106239
});
107240
},
108241
};
@@ -123,8 +256,14 @@ export const InvalidVariantWarningTest: Story = {
123256
asset.variant = 'not-a-variant' as Asset['variant'];
124257
await asset.updateComplete;
125258

126-
expect(warnCalls.length).toBeGreaterThan(0);
127-
expect(String(warnCalls[0]?.[1] || '')).toContain('variant');
259+
expect(
260+
warnCalls.length,
261+
'at least one warning is emitted for invalid variant'
262+
).toBeGreaterThan(0);
263+
expect(
264+
String(warnCalls[0]?.[1] || ''),
265+
'warning message references variant'
266+
).toContain('variant');
128267
})
129268
);
130269
},
@@ -142,7 +281,10 @@ export const ValidVariantNoWarningTest: Story = {
142281
asset.variant = 'folder';
143282
await asset.updateComplete;
144283

145-
expect(warnCalls.length).toBe(0);
284+
expect(
285+
warnCalls.length,
286+
'no warnings are emitted for valid variant'
287+
).toBe(0);
146288
})
147289
);
148290
},

‎2nd-gen/packages/swc/components/avatar/stories/avatar.stories.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ argTypes.decorative = {
5050
/**
5151
* An avatar displays a circular profile image representing a person or entity.
5252
*/
53-
export const meta: Meta = {
53+
const meta: Meta = {
5454
title: 'Avatar',
5555
component: 'swc-avatar',
5656
args,
@@ -67,11 +67,7 @@ export const meta: Meta = {
6767
tags: ['migrated'],
6868
};
6969

70-
export default {
71-
...meta,
72-
title: 'Avatar',
73-
excludeStories: ['meta'],
74-
} as Meta;
70+
export default meta;
7571

7672
// ────────────────────
7773
// HELPERS

‎2nd-gen/packages/swc/components/avatar/test/avatar.test.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,9 @@ import {
2323
getComponents,
2424
withWarningSpy,
2525
} from '../../../utils/test-utils.js';
26-
import {
26+
import meta, {
2727
Decorative,
2828
Disabled,
29-
meta,
3029
Overview,
3130
Sizes,
3231
} from '../stories/avatar.stories.js';

‎2nd-gen/packages/swc/components/badge/stories/badge.stories.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ argTypes['icon-slot'] = {
8484
* Choose one style consistently within a product - `outline` and `subtle` fill draw similar attention levels.
8585
* Reserve bold fill for high-attention badging only.
8686
*/
87-
export const meta: Meta = {
87+
const meta: Meta = {
8888
title: 'Badge',
8989
component: 'swc-badge',
9090
args,
@@ -106,11 +106,7 @@ export const meta: Meta = {
106106
tags: ['migrated'],
107107
};
108108

109-
export default {
110-
...meta,
111-
title: 'Badge',
112-
excludeStories: ['meta'],
113-
} as Meta;
109+
export default meta;
114110

115111
// ────────────────────
116112
// HELPERS

0 commit comments

Comments
 (0)