Skip to content

Commit c525c6d

Browse files
davidornelas11davidornelas11
committed
test(unity-react-core): update accessibility tests
1 parent f15006f commit c525c6d

File tree

3 files changed

+60
-100
lines changed

3 files changed

+60
-100
lines changed

‎packages/unity-react-core/tests/accessibility.spec.mjs‎

Lines changed: 58 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const timestamp = new Date().toISOString().replace(/:/g, "-");
1717

1818
test.describe("Storybook Accessibility Tests with Siteimprove", () => {
1919
let storyIndex;
20+
let storiesToTestArray = [];
2021

2122
test.beforeAll(async () => {
2223
try {
@@ -27,132 +28,91 @@ test.describe("Storybook Accessibility Tests with Siteimprove", () => {
2728
);
2829
}
2930
storyIndex = await response.json();
31+
32+
// Filter stories to test and store them
33+
storiesToTestArray = Object.entries(storyIndex.entries).filter(([key]) =>
34+
storiesToTest.some(story => key.includes(story))
35+
);
3036
} catch (error) {
3137
console.error("Error fetching storybook index:", error);
3238
}
3339
});
3440

35-
test(
36-
"Components should pass Siteimprove accessibility tests",
37-
async ({ browser, page }) => {
41+
for (const storyToTest of storiesToTest) {
42+
test(`${storyToTest} should pass accessibility tests`, async ({ page }) => {
3843
if (!storyIndex) {
39-
console.error(
40-
"Skipping test because storybook index could not be fetched"
41-
);
44+
test.skip("Storybook index could not be fetched");
4245
return;
4346
}
4447

45-
const accessibilityViolations = [];
46-
const reportFilePath = path.join(
47-
reportDir,
48-
`siteimprove-report-${timestamp}.json`
48+
const storyEntry = storiesToTestArray.find(([key]) =>
49+
key.includes(storyToTest)
4950
);
5051

51-
const allResults = [];
52+
if (!storyEntry) {
53+
test.skip(`Story ${storyToTest} not found in storybook index`);
54+
return;
55+
}
5256

53-
let count = 0;
54-
const stories = Object.entries(storyIndex.entries).filter(([key]) =>
55-
storiesToTest.some(story => key.includes(story))
56-
);
57-
const totalStories = stories.length;
57+
const [storyId, story] = storyEntry;
58+
const encodedStoryId = encodeURIComponent(story.id);
59+
const storyUrl = `${STORYBOOK_URL}/iframe.html?id=${encodedStoryId}&viewMode=story`;
5860

59-
for (const [storyId, story] of stories) {
60-
const encodedStoryId = encodeURIComponent(story.id);
61-
const storyUrl = `${STORYBOOK_URL}/iframe.html?id=${encodedStoryId}&viewMode=story`;
61+
console.log(`Testing: ${story.title}`);
6262

63-
count++;
64-
console.log(`Testing (${count}/${totalStories}): ${story.title}`);
63+
try {
64+
await page.goto(storyUrl);
6565

66-
const context = await browser.newContext();
67-
const page = await context.newPage();
66+
const document = await page.evaluateHandle(() => window.document);
67+
const alfaPage = await Playwright.toPage(document);
6868

69-
try {
70-
await page.goto(storyUrl);
69+
const alfaResult = await Audit.run(alfaPage, {
70+
rules: { include: Rules.wcag21aaFilter },
71+
});
7172

72-
const document = await page.evaluateHandle(() => window.document);
73-
const alfaPage = await Playwright.toPage(document);
73+
Logging.fromAudit(alfaResult).print();
7474

75-
const alfaResult = await Audit.run(alfaPage, {
76-
rules: { include: Rules.wcag21aaFilter },
77-
});
75+
const failingRules = alfaResult.resultAggregates.filter(
76+
aggregate => aggregate.failed > 0
77+
);
7878

79-
Logging.fromAudit(alfaResult).print();
79+
const violations = Logging.fromAudit(alfaResult).toJSON().logs[1].logs;
8080

81-
const failingRules = alfaResult.resultAggregates.filter(
82-
aggregate => aggregate.failed > 0
81+
// Save individual report in local development
82+
if (!process.env.CI && violations.length > 0) {
83+
const individualReportPath = path.join(
84+
reportDir,
85+
`${storyToTest}-${timestamp}.json`
8386
);
84-
85-
const violations =
86-
Logging.fromAudit(alfaResult).toJSON().logs[1].logs;
87-
88-
if (failingRules.size > 0) {
89-
console.log(
90-
`Found ${violations.length} violations in ${story.title}`
91-
);
92-
93-
const result = {
94-
component: story.title,
95-
storyId: storyId,
96-
url: storyUrl,
97-
violations: violations,
98-
};
99-
100-
accessibilityViolations.push(result);
101-
allResults.push(result);
102-
} else {
103-
allResults.push({
104-
component: story.title,
105-
storyId: storyId,
106-
url: storyUrl,
107-
violations: [],
108-
});
109-
}
110-
} catch (error) {
111-
console.error(`Error testing ${story.title}:`, error);
112-
accessibilityViolations.push({
113-
component: story.title,
114-
storyId: storyId,
115-
error: error.message,
116-
});
117-
118-
allResults.push({
87+
fs.writeFileSync(individualReportPath, JSON.stringify({
11988
component: story.title,
12089
storyId: storyId,
12190
url: storyUrl,
122-
error: error.message,
123-
});
124-
} finally {
125-
await context.close();
91+
violations: violations,
92+
}, null, 2));
93+
console.log(`Saved report for ${story.title} to: ${individualReportPath}`);
12694
}
127-
}
12895

129-
// Save the full report as JSON only in local development
130-
if (!process.env.CI) {
131-
fs.writeFileSync(reportFilePath, JSON.stringify(allResults, null, 2));
132-
console.log(`Saved detailed JSON report to: ${reportFilePath}`);
133-
}
96+
if (failingRules.size > 0) {
97+
console.error(`Found ${violations.length} violations in ${story.title}`);
13498

135-
if (accessibilityViolations.length > 0) {
136-
console.error("Accessibility violations found:");
99+
// Create a detailed error message
100+
const violationSummary = violations.map(v =>
101+
`- ${v.message || 'Accessibility violation'}`
102+
).join('\n');
137103

138-
const totalViolations = accessibilityViolations.reduce(
139-
(acc, result) =>
140-
acc + (result.violations ? result.violations.length : 0),
141-
0
142-
);
104+
expect(
105+
violations.length,
106+
`Accessibility violations found in ${story.title}:\n${violationSummary}`
107+
).toBe(0);
108+
} else {
109+
console.log(`✅ No accessibility violations found in ${story.title}`);
110+
}
143111

144-
console.error(
145-
`\nTotal components with issues: ${accessibilityViolations.length}`
146-
);
147-
console.error(`Total violations: ${totalViolations}`);
148-
149-
expect(
150-
accessibilityViolations.length,
151-
`The test found ${accessibilityViolations.length} components with accessibility issues`
152-
).toBe(0);
153-
} else {
154-
console.log("No accessibility violations found! 🎉");
112+
} catch (error) {
113+
console.error(`Error testing ${story.title}:`, error);
114+
throw new Error(`Failed to test ${story.title}: ${error.message}`);
155115
}
156-
}
157-
);
116+
});
117+
}
158118
});

‎packages/unity-react-core/tests/dataLayer.spec.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ for (const config of testUrls) {
3030

3131
await page.waitForSelector('[data-testid="accordion-opener"]');
3232

33-
const openers = await page.$$('[data-testid="accordion-opener"]');
33+
const openers = await page.getByTestId('accordion-opener').all();
3434
expect(openers.length).toBeGreaterThan(0);
3535

3636
const dataLayerInit = await page.evaluate(() => Array.isArray(window.dataLayer));

‎packages/unity-react-core/tests/stories-to-test.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const storiesToTest = [
44
"components-article--news",
55
"components-article--event",
66
"components-card--default",
7-
// "components-card-carousel--three-item-carousel", // This story fails. TODO: Fix
7+
// "components-card-carousel--three-item-carousel", // This story fails. TODO: Fix accessibility errors
88
"components-image-gallery-carousel--image-gallery-carousel-default",
99
"components-testimonial-carousel--testimonial-carousel-default",
1010
"components-list--unordered-list",

0 commit comments

Comments
 (0)