Skip to content

Commit 3d232d1

Browse files
alcpereiraalcpereira
authored
fix: compare options not passed to check element in storybook runner (#796)
* fix: compare options not passed to check element in storybook runner * chore: add changeset
1 parent 937d1f6 commit 3d232d1

File tree

6 files changed

+48
-18
lines changed

6 files changed

+48
-18
lines changed

‎.changeset/ten-wolves-itch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@wdio/visual-service": patch
3+
---
4+
5+
Fix compareOptions not passed from config to the storybook runner tests

‎packages/visual-service/src/storybook/Types.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Folders } from 'webdriver-image-comparison'
1+
import type { CheckElementMethodOptions, Folders } from 'webdriver-image-comparison'
22

33
export interface StorybookData {
44
id: string;
@@ -32,6 +32,7 @@ export type Stories = { [key: string]: StorybookData };
3232
export type CreateTestFileOptions = {
3333
additionalSearchParams: URLSearchParams;
3434
clip: boolean;
35+
compareOptions: CheckElementMethodOptions,
3536
clipSelector: string;
3637
directoryPath: string,
3738
folders: Folders,
@@ -53,6 +54,7 @@ export type CreateTestContent = {
5354
additionalSearchParams: URLSearchParams;
5455
clip: boolean;
5556
clipSelector: string;
57+
compareOptions: CheckElementMethodOptions,
5658
folders: Folders;
5759
framework: string;
5860
skipStories: string[] | RegExp;
@@ -64,6 +66,7 @@ export type CreateItContent = {
6466
additionalSearchParams: URLSearchParams;
6567
clip: boolean;
6668
clipSelector: string;
69+
compareOptions: CheckElementMethodOptions,
6770
folders: Folders;
6871
framework: string;
6972
skipStories: string[] | RegExp;

‎packages/visual-service/src/storybook/launcher.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { rmdirSync } from 'node:fs'
22
import logger from '@wdio/logger'
33
import { SevereServiceError } from 'webdriverio'
44
import type { Capabilities } from '@wdio/types'
5-
import type { ClassOptions } from 'webdriver-image-comparison'
5+
import type { ClassOptions, CheckElementMethodOptions } from 'webdriver-image-comparison'
66
import { BaseClass } from 'webdriver-image-comparison'
77
import {
88
createStorybookCapabilities,
@@ -52,6 +52,22 @@ export default class VisualLauncher extends BaseClass {
5252
capabilities.length = 0
5353
log.info('Clearing the current capabilities.')
5454

55+
// Get compare options from config
56+
const compareOptions: CheckElementMethodOptions = {
57+
blockOutSideBar: this.#options.blockOutSideBar,
58+
blockOutStatusBar: this.#options.blockOutStatusBar,
59+
blockOutToolBar: this.#options.blockOutToolBar,
60+
ignoreAlpha: this.#options.ignoreAlpha,
61+
ignoreAntialiasing: this.#options.ignoreAntialiasing,
62+
ignoreColors: this.#options.ignoreColors,
63+
ignoreLess: this.#options.ignoreLess,
64+
ignoreNothing: this.#options.ignoreNothing,
65+
rawMisMatchPercentage: this.#options.rawMisMatchPercentage,
66+
returnAllCompareData: this.#options.returnAllCompareData,
67+
saveAboveTolerance: this.#options.saveAboveTolerance,
68+
scaleImagesToSameSize: this.#options.scaleImagesToSameSize,
69+
}
70+
5571
// Determine some run options
5672
// --version
5773
const versionOption = this.#options?.storybook?.version
@@ -88,6 +104,7 @@ export default class VisualLauncher extends BaseClass {
88104
additionalSearchParams,
89105
clip,
90106
clipSelector,
107+
compareOptions,
91108
directoryPath: tempDir,
92109
folders: this.folders,
93110
framework,

‎packages/visual-service/src/storybook/utils.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export function getArgvValue<ParseFuncReturnType>(
153153
* Creates a it function for the test file
154154
* @TODO: improve this
155155
*/
156-
export function itFunction({ additionalSearchParams, clip, clipSelector, folders: { baselineFolder }, framework, skipStories, storyData, storybookUrl }: CreateItContent) {
156+
export function itFunction({ additionalSearchParams, clip, clipSelector, compareOptions, folders: { baselineFolder }, framework, skipStories, storyData, storybookUrl }: CreateItContent) {
157157
const { id } = storyData
158158
const screenshotType = clip ? 'n element' : ' viewport'
159159
const DEFAULT_IT_TEXT = 'it'
@@ -173,7 +173,8 @@ export function itFunction({ additionalSearchParams, clip, clipSelector, folders
173173

174174
// Setup the folder structure
175175
const { category, component } = extractCategoryAndComponent(id)
176-
const methodOptions = {
176+
const checkMethodOptions = {
177+
...compareOptions,
177178
baselineFolder: join(baselineFolder, `./${category}/${component}/`),
178179
}
179180

@@ -186,8 +187,8 @@ export function itFunction({ additionalSearchParams, clip, clipSelector, folders
186187
additionalSearchParams: new URLSearchParams('${additionalSearchParams.toString()}'),
187188
});
188189
${clip
189-
? `await expect($('${clipSelector}')).toMatchElementSnapshot('${id}-element', ${JSON.stringify(methodOptions)})`
190-
: `await expect(browser).toMatchScreenSnapshot('${id}', ${JSON.stringify(methodOptions)})`}
190+
? `await expect($('${clipSelector}')).toMatchElementSnapshot('${id}-element', ${JSON.stringify(checkMethodOptions)})`
191+
: `await expect(browser).toMatchScreenSnapshot('${id}', ${JSON.stringify(checkMethodOptions)})`}
191192
});
192193
`
193194
return it
@@ -211,11 +212,11 @@ export function writeTestFile(directoryPath: string, fileID: string, testContent
211212
* Create the test content
212213
*/
213214
export function createTestContent(
214-
{ additionalSearchParams, clip, clipSelector, folders, framework, skipStories, stories, storybookUrl }: CreateTestContent,
215+
{ additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, skipStories, stories, storybookUrl }: CreateTestContent,
215216
// For testing purposes only
216217
itFunc = itFunction
217218
): string {
218-
const itFunctionOptions = { additionalSearchParams, clip, clipSelector, folders, framework, skipStories, storybookUrl }
219+
const itFunctionOptions = { additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, skipStories, storybookUrl }
219220

220221
return stories.reduce((acc, storyData) => acc + itFunc({ ...itFunctionOptions, storyData }), '')
221222
}
@@ -318,14 +319,14 @@ function filterStories(storiesJson: Stories): StorybookData[] {
318319
* Create the test files
319320
*/
320321
export function createTestFiles(
321-
{ additionalSearchParams, clip, clipSelector, directoryPath, folders, framework, numShards, skipStories, storiesJson, storybookUrl }: CreateTestFileOptions,
322+
{ additionalSearchParams, clip, clipSelector, compareOptions, directoryPath, folders, framework, numShards, skipStories, storiesJson, storybookUrl }: CreateTestFileOptions,
322323
// For testing purposes only
323324
createTestCont = createTestContent,
324325
createFileD = createFileData,
325326
writeTestF = writeTestFile
326327
) {
327328
const fileNamePrefix = 'visual-storybook'
328-
const createTestContentData = { additionalSearchParams, clip, clipSelector, folders, framework, skipStories, stories: storiesJson, storybookUrl }
329+
const createTestContentData = { additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, skipStories, stories: storiesJson, storybookUrl }
329330

330331
if (numShards === 1) {
331332
const testContent = createTestCont(createTestContentData)

‎packages/visual-service/tests/storybook/__snapshots__/utils.test.ts.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ exports[`Storybook utils > itFunction > generates correct mocha test code with n
125125
storybookUrl: 'http://storybook.com/',
126126
additionalSearchParams: new URLSearchParams('foo=bar'),
127127
});
128-
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"baselineFolder":"baseline/category/component/"})
128+
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
129129
});
130130
"
131131
`;
@@ -139,7 +139,7 @@ exports[`Storybook utils > itFunction > generates correct mocha test code with s
139139
storybookUrl: 'http://storybook.com/',
140140
additionalSearchParams: new URLSearchParams('foo=bar'),
141141
});
142-
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"baselineFolder":"baseline/category/component/"})
142+
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
143143
});
144144
"
145145
`;
@@ -153,7 +153,7 @@ exports[`Storybook utils > itFunction > generates correct test code with Jasmine
153153
storybookUrl: 'http://storybook.com/',
154154
additionalSearchParams: new URLSearchParams('foo=bar'),
155155
});
156-
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"baselineFolder":"baseline/category/component/"})
156+
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
157157
});
158158
"
159159
`;
@@ -167,7 +167,7 @@ exports[`Storybook utils > itFunction > generates correct test code with Jasmine
167167
storybookUrl: 'http://storybook.com/',
168168
additionalSearchParams: new URLSearchParams('foo=bar'),
169169
});
170-
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"baselineFolder":"baseline/category/component/"})
170+
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
171171
});
172172
"
173173
`;
@@ -181,7 +181,7 @@ exports[`Storybook utils > itFunction > generates correct test code with for a c
181181
storybookUrl: 'http://storybook.com/',
182182
additionalSearchParams: new URLSearchParams('foo=bar'),
183183
});
184-
await expect($('#id')).toMatchElementSnapshot('category-component--story1-element', {"baselineFolder":"baseline/category/component/"})
184+
await expect($('#id')).toMatchElementSnapshot('category-component--story1-element', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
185185
});
186186
"
187187
`;
@@ -195,7 +195,7 @@ exports[`Storybook utils > itFunction > generates correct test code with for a c
195195
storybookUrl: 'http://storybook.com/',
196196
additionalSearchParams: new URLSearchParams('foo=bar'),
197197
});
198-
await expect($('#id')).toMatchElementSnapshot('category-component--story1-element', {"baselineFolder":"baseline/category/component/"})
198+
await expect($('#id')).toMatchElementSnapshot('category-component--story1-element', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
199199
});
200200
"
201201
`;
@@ -209,7 +209,7 @@ exports[`Storybook utils > itFunction > generates correct test code with mocha f
209209
storybookUrl: 'http://storybook.com/',
210210
additionalSearchParams: new URLSearchParams('foo=bar'),
211211
});
212-
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"baselineFolder":"baseline/category/component/"})
212+
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
213213
});
214214
"
215215
`;
@@ -223,7 +223,7 @@ exports[`Storybook utils > itFunction > generates correct test code with mocha f
223223
storybookUrl: 'http://storybook.com/',
224224
additionalSearchParams: new URLSearchParams('foo=bar'),
225225
});
226-
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"baselineFolder":"baseline/category/component/"})
226+
await expect(browser).toMatchScreenSnapshot('category-component--story1', {"ignoreLess":true,"baselineFolder":"baseline/category/component/"})
227227
});
228228
"
229229
`;

‎packages/visual-service/tests/storybook/utils.test.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,7 @@ describe('Storybook utils', () => {
277277
const commonSetup = (framework: string, skipStories: string[] | RegExp, clip: boolean = false) => ({
278278
clip,
279279
clipSelector: '#id',
280+
compareOptions: { ignoreLess: true },
280281
folders: { baselineFolder: 'baseline' },
281282
framework,
282283
skipStories,
@@ -405,6 +406,9 @@ describe('Storybook utils', () => {
405406
const testArgs = {
406407
clip: false,
407408
clipSelector: '#selector',
409+
compareOptions: {
410+
ignoreColors: true
411+
},
408412
folders: {
409413
actualFolder: 'actual',
410414
baselineFolder: 'baseline',

0 commit comments

Comments
 (0)