Skip to content

Commit 8e0bcd6

Browse files
rezrahrezrah
authored
fix visual testing generate script (#60)
1 parent 7d4d117 commit 8e0bcd6

15 files changed

+110
-92
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ module.exports = {
9595
project: 'tsconfig.json'
9696
},
9797
files: ['**/*.{ts,tsx}'],
98-
extends: ['plugin:@typescript-eslint/recommended'],
98+
extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
9999
rules: {
100100
'no-shadow': 'off',
101101
'@typescript-eslint/no-shadow': 'error',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"start:css-types": "tcm -w -p 'src/**/*.css' .",
4444
"test": "jest",
4545
"test:visual": "scripts/playwright/run-visual-tests",
46-
"test:visual:generate": "ts-node scripts/playwright/playwright.generate-tests.ts",
46+
"test:visual:generate": "npm run build:docs && ts-node scripts/playwright/playwright.generate-tests.ts",
4747
"test:visual:update-snapshots": "scripts/playwright/update-visual-snapshots"
4848
},
4949
"peerDependencies": {

‎scripts/playwright/playwright.generate-tests.ts‎

Lines changed: 94 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,111 @@
1-
/* eslint import/no-nodejs-modules: ["error", {"allow": ["path", "fs"]}] */
2-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
3-
// @ts-ignore due to this being a build artifact
4-
// eslint-disable-next-line import/no-unresolved
5-
import {stories} from '../../docs/public/storybook/stories'
6-
import fs from 'fs'
7-
import path from 'path'
8-
import prettier from 'prettier'
9-
import prettierOptions from '../../.prettierrc'
1+
;(function () {
2+
/* eslint import/no-nodejs-modules: ["error", {"allow": ["path", "fs"]}] */
3+
// eslint-disable-next-line @typescript-eslint/no-var-requires
4+
const {stories} = require('../../docs/public/storybook/stories')
5+
// eslint-disable-next-line @typescript-eslint/no-var-requires
6+
const fs = require('fs')
7+
// eslint-disable-next-line @typescript-eslint/no-var-requires
8+
const path = require('path')
9+
// eslint-disable-next-line @typescript-eslint/no-var-requires
10+
const prettier = require('prettier')
11+
// eslint-disable-next-line @typescript-eslint/no-var-requires
12+
const prettierOptions = require('../../.prettierrc')
1013

11-
const port = 6006
12-
13-
/**
14-
* Manual lookup for tests that need animation or side-effects to complete before tests start
15-
*/
16-
const waitForTimeoutLookup = {
17-
'components-faq-fixtures--all-open': 250, // for the animation
18-
'components-river--video': 1000 // video is slow to load
19-
}
20-
21-
const categorisedStories = Object.keys(stories).reduce((acc, key) => {
22-
const {id, story: storyName, importPath} = stories[key]
14+
type Stories = {
15+
[key: string]: {
16+
id: string
17+
title: string
18+
name: string
19+
importPath: string
20+
kind: string
21+
story: string
22+
parameters: {
23+
__id: string
24+
docsOnly: boolean
25+
fileName: string
26+
}
27+
}
28+
}
2329

24-
const groupName = importPath.split('/')[2]
25-
const storyFolder = importPath.substring(0, importPath.lastIndexOf('/'))
30+
const port = 6006
2631

27-
if (!acc[groupName]) {
28-
acc[groupName] = {}
32+
/**
33+
* Manual lookup for tests that need animation or side-effects to complete before tests start
34+
*/
35+
const waitForTimeoutLookup = {
36+
'components-faq-fixtures--all-open': 250, // for the animation
37+
'components-river--video': 1000 // video is slow to load
2938
}
3039

31-
if (!acc[groupName].stories) {
32-
acc[groupName].stories = []
33-
}
40+
const categorisedStories = Object.keys(stories as Stories).reduce((acc, key) => {
41+
const {id, story: storyName, importPath} = stories[key]
3442

35-
if (!acc[groupName].storyFolder) {
36-
acc[groupName].storyFolder = path.resolve('.', storyFolder)
37-
}
43+
const groupName = importPath.split('/')[2]
44+
const storyFolder = importPath.substring(0, importPath.lastIndexOf('/'))
45+
46+
if (!acc[groupName]) {
47+
acc[groupName] = {}
48+
}
3849

39-
acc[groupName].stories.push({
40-
id,
41-
storyName,
42-
timeout: waitForTimeoutLookup[key] ? waitForTimeoutLookup[key] : undefined
43-
})
50+
if (!acc[groupName].stories) {
51+
acc[groupName].stories = []
52+
}
4453

45-
return acc
46-
}, {})
54+
if (!acc[groupName].storyFolder) {
55+
acc[groupName].storyFolder = path.resolve('.', storyFolder)
56+
}
4757

48-
for (const key of Object.keys(categorisedStories)) {
49-
const {stories: componentStories, storyFolder} = categorisedStories[key]
58+
acc[groupName].stories.push({
59+
id,
60+
storyName,
61+
timeout: waitForTimeoutLookup[key] ? waitForTimeoutLookup[key] : undefined
62+
})
5063

51-
const content = `
52-
/*
53-
* Do not modify this file directly.
54-
* This file was generated by: ${path.basename(__filename)}.
55-
* Regenerate using: npm run test:visual:generate
56-
*/
57-
import {test, expect} from '@playwright/test'
64+
return acc
65+
}, {})
5866

59-
// eslint-disable-next-line i18n-text/no-en
60-
test.describe('Visual Comparison: ${key}', () => {
67+
for (const key of Object.keys(categorisedStories)) {
68+
const {stories: componentStories, storyFolder} = categorisedStories[key]
6169

62-
${componentStories.reduce((acc, {id, storyName, timeout}) => {
63-
return (acc += `
64-
test('${storyName}', async ({page}) => {
65-
await page.goto('http://localhost:${port}/iframe.html?args=&id=${id}&viewMode=story')
70+
const content = `
71+
/*
72+
* Do not modify this file directly.
73+
* This file was generated by: ${path.basename(__filename)}.
74+
* Regenerate using: npm run test:visual:generate
75+
*/
76+
import {test, expect} from '@playwright/test'
77+
78+
// eslint-disable-next-line i18n-text/no-en
79+
test.describe('Visual Comparison: ${key}', () => {
80+
81+
${componentStories.reduce((acc, {id, storyName, timeout}) => {
82+
return (acc += `
83+
test('${storyName}', async ({page}) => {
84+
await page.goto('http://localhost:${port}/iframe.html?args=&id=${id}&viewMode=story')
85+
86+
${timeout ? `await page.waitForTimeout(${timeout})` : ''}
87+
expect(await page.screenshot()).toMatchSnapshot()
88+
})
6689
67-
${timeout ? `await page.waitForTimeout(${timeout})` : ''}
68-
expect(await page.screenshot()).toMatchSnapshot()
69-
})
70-
71-
`)
72-
}, '')}
90+
`)
91+
}, '')}
92+
93+
})
7394
74-
})
75-
76-
`
77-
const final = prettier.format(content, {parser: 'typescript', ...prettierOptions})
78-
const dest = `${path.resolve(__dirname, storyFolder)}/${key}.visual.spec.ts`
95+
`
96+
const final = prettier.format(content, {parser: 'typescript', ...prettierOptions})
97+
const dest = `${path.resolve(__dirname, storyFolder)}/${key}.visual.spec.ts`
7998

80-
try {
81-
fs.writeFileSync(dest, final, {
82-
encoding: 'utf8'
83-
})
84-
// eslint-disable-next-line no-console
85-
console.log('Wrote:', dest)
86-
} catch (err) {
87-
if (err instanceof Error) {
88-
throw new Error(err.message, err)
99+
try {
100+
fs.writeFileSync(dest, final, {
101+
encoding: 'utf8'
102+
})
103+
// eslint-disable-next-line no-console
104+
console.log('Wrote:', dest)
105+
} catch (err) {
106+
if (err instanceof Error) {
107+
throw new Error(err.message, err)
108+
}
89109
}
90110
}
91-
}
111+
})()

‎src/Accordion/Accordion.visual.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

‎src/Button/Button.visual.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

‎src/ExpandableArrow/ExpandableArrow.visual.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

‎src/FAQ/FAQ.visual.spec.ts‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

@@ -27,22 +28,8 @@ test.describe('Visual Comparison: FAQ', () => {
2728
expect(await page.screenshot()).toMatchSnapshot()
2829
})
2930

30-
test('Large Heading', async ({page}) => {
31-
await page.goto('http://localhost:6006/iframe.html?args=&id=components-faq-fixtures--large-heading&viewMode=story')
32-
33-
expect(await page.screenshot()).toMatchSnapshot()
34-
})
35-
36-
test('Large Heading Left Aligned', async ({page}) => {
37-
await page.goto(
38-
'http://localhost:6006/iframe.html?args=&id=components-faq-fixtures--large-heading-left-aligned&viewMode=story'
39-
)
40-
41-
expect(await page.screenshot()).toMatchSnapshot()
42-
})
43-
44-
test('With Groups', async ({page}) => {
45-
await page.goto('http://localhost:6006/iframe.html?args=&id=components-faq-fixtures--with-groups&viewMode=story')
31+
test('Groups', async ({page}) => {
32+
await page.goto('http://localhost:6006/iframe.html?args=&id=components-faq-fixtures--groups&viewMode=story')
4633

4734
expect(await page.screenshot()).toMatchSnapshot()
4835
})

‎src/Heading/Heading.visual.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

‎src/Hero/Hero.visual.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

‎src/InlineLink/InlineLink.visual.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
* Do not modify this file directly.
33
* This file was generated by: playwright.generate-tests.ts.
4+
* Regenerate using: npm run test:visual:generate
45
*/
56
import {test, expect} from '@playwright/test'
67

0 commit comments

Comments
 (0)