Skip to content

Commit c695fba

Browse files
wswebcreationwswebcreation
committed
chore: refactor checkAppElement and checkAppScreen
1 parent 220fd6a commit c695fba

8 files changed

Lines changed: 127 additions & 1053 deletions

File tree

‎packages/image-comparison-core/src/commands/__snapshots__/saveAppElement.test.ts.snap‎

Lines changed: 0 additions & 512 deletions
Large diffs are not rendered by default.

‎packages/image-comparison-core/src/commands/__snapshots__/saveAppScreen.test.ts.snap‎

Lines changed: 0 additions & 448 deletions
Large diffs are not rendered by default.

‎packages/image-comparison-core/src/commands/checkAppElement.test.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,48 @@ vi.mock('./saveAppElement.js', () => ({
3131
fileName: 'test-element.png'
3232
})
3333
}))
34+
vi.mock('../helpers/utils.js', () => ({
35+
extractCommonCheckVariables: vi.fn().mockImplementation((params) => ({
36+
actualFolder: params.folders.actualFolder,
37+
baselineFolder: params.folders.baselineFolder,
38+
diffFolder: params.folders.diffFolder,
39+
browserName: params.instanceData.browserName,
40+
deviceName: params.instanceData.deviceName,
41+
deviceRectangles: params.instanceData.deviceRectangles,
42+
isAndroid: params.instanceData.isAndroid,
43+
isMobile: params.instanceData.isMobile,
44+
isAndroidNativeWebScreenshot: params.instanceData.nativeWebScreenshot,
45+
autoSaveBaseline: params.wicOptions.autoSaveBaseline,
46+
savePerInstance: params.wicOptions.savePerInstance,
47+
})),
48+
buildBaseExecuteCompareOptions: vi.fn().mockImplementation((params) => ({
49+
compareOptions: {
50+
wic: params.isElementScreenshot ? {
51+
...params.wicCompareOptions,
52+
blockOutSideBar: false,
53+
blockOutStatusBar: false,
54+
blockOutToolBar: false,
55+
} : params.wicCompareOptions,
56+
method: params.methodCompareOptions,
57+
},
58+
devicePixelRatio: params.devicePixelRatio,
59+
deviceRectangles: params.commonCheckVariables.deviceRectangles,
60+
fileName: params.fileName,
61+
folderOptions: {
62+
autoSaveBaseline: params.commonCheckVariables.autoSaveBaseline,
63+
actualFolder: params.commonCheckVariables.actualFolder,
64+
baselineFolder: params.commonCheckVariables.baselineFolder,
65+
diffFolder: params.commonCheckVariables.diffFolder,
66+
browserName: params.commonCheckVariables.browserName,
67+
deviceName: params.commonCheckVariables.deviceName,
68+
isMobile: params.commonCheckVariables.isMobile,
69+
savePerInstance: params.commonCheckVariables.savePerInstance,
70+
},
71+
isAndroid: params.commonCheckVariables.isAndroid,
72+
isAndroidNativeWebScreenshot: params.commonCheckVariables.isAndroidNativeWebScreenshot,
73+
...params.additionalProperties,
74+
})),
75+
}))
3476

3577
describe('checkAppElement', () => {
3678
let executeImageCompareSpy: ReturnType<typeof vi.fn>

‎packages/image-comparison-core/src/commands/checkAppElement.ts‎

Lines changed: 15 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { methodCompareOptions } from '../helpers/options.js'
22
import type { ImageCompareResult } from '../methods/images.interfaces.js'
33
import { executeImageCompare } from '../methods/images.js'
4+
import { extractCommonCheckVariables, buildBaseExecuteCompareOptions } from '../helpers/utils.js'
45
import type { InternalCheckElementMethodOptions } from './check.interfaces.js'
56
import type { WicElement } from './element.interfaces.js'
67
import saveAppElement from './saveAppElement.js'
@@ -20,18 +21,8 @@ export default async function checkAppElement(
2021
testContext,
2122
}: InternalCheckElementMethodOptions
2223
): Promise<ImageCompareResult | number> {
23-
// 1. Set some vars
24-
const {
25-
browserName,
26-
deviceName,
27-
deviceRectangles,
28-
isAndroid,
29-
isMobile,
30-
nativeWebScreenshot: isAndroidNativeWebScreenshot,
31-
platformName,
32-
} = instanceData
33-
const { autoSaveBaseline, savePerInstance, isHybridApp } = checkElementOptions.wic
34-
const { actualFolder, baselineFolder, diffFolder } = folders
24+
// 1. Extract common variables
25+
const commonCheckVariables = extractCommonCheckVariables({ folders, instanceData, wicOptions: checkElementOptions.wic })
3526

3627
// 2. Save the element and return the data
3728
const { devicePixelRatio, fileName } = await saveAppElement({
@@ -46,39 +37,22 @@ export default async function checkAppElement(
4637
// @TODO: This is something for the future, to allow ignore regions on the element itself.
4738
// This will become a feature request
4839

49-
// 3a. Determine the options
40+
// 3. Determine the options
5041
const compareOptions = methodCompareOptions(checkElementOptions.method)
51-
const executeCompareOptions = {
52-
compareOptions: {
53-
wic: {
54-
...checkElementOptions.wic.compareOptions,
55-
// No need to block out anything on the app for element screenshots
56-
blockOutSideBar: false,
57-
blockOutStatusBar: false,
58-
blockOutToolBar: false,
59-
},
60-
method: compareOptions,
61-
},
42+
const executeCompareOptions = buildBaseExecuteCompareOptions({
43+
commonCheckVariables,
44+
wicCompareOptions: checkElementOptions.wic.compareOptions,
45+
methodCompareOptions: compareOptions,
6246
devicePixelRatio,
63-
deviceRectangles,
6447
fileName,
65-
folderOptions: {
66-
autoSaveBaseline,
67-
actualFolder,
68-
baselineFolder,
69-
diffFolder,
70-
browserName,
71-
deviceName,
72-
isMobile,
73-
savePerInstance,
74-
},
75-
isAndroid,
76-
isAndroidNativeWebScreenshot,
77-
isHybridApp,
78-
platformName,
79-
}
48+
isElementScreenshot: true, // This will automatically set blockOut* options to false
49+
additionalProperties: {
50+
isHybridApp: checkElementOptions.wic.isHybridApp,
51+
platformName: instanceData.platformName,
52+
}
53+
})
8054

81-
// 3b Now execute the compare and return the data
55+
// 4. Now execute the compare and return the data
8256
return executeImageCompare({
8357
options: executeCompareOptions,
8458
testContext,

‎packages/image-comparison-core/src/commands/checkAppScreen.test.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,43 @@ vi.mock('./saveAppScreen.js', () => ({
3939
fileName: 'test-screen.png'
4040
})
4141
}))
42+
vi.mock('../helpers/utils.js', () => ({
43+
extractCommonCheckVariables: vi.fn().mockImplementation((params) => ({
44+
actualFolder: params.folders.actualFolder,
45+
baselineFolder: params.folders.baselineFolder,
46+
diffFolder: params.folders.diffFolder,
47+
browserName: params.instanceData.browserName,
48+
deviceName: params.instanceData.deviceName,
49+
deviceRectangles: params.instanceData.deviceRectangles,
50+
isAndroid: params.instanceData.isAndroid,
51+
isMobile: params.instanceData.isMobile,
52+
isAndroidNativeWebScreenshot: params.instanceData.nativeWebScreenshot,
53+
autoSaveBaseline: params.wicOptions.autoSaveBaseline,
54+
savePerInstance: params.wicOptions.savePerInstance,
55+
})),
56+
buildBaseExecuteCompareOptions: vi.fn().mockImplementation((params) => ({
57+
compareOptions: {
58+
wic: params.wicCompareOptions,
59+
method: params.methodCompareOptions,
60+
},
61+
devicePixelRatio: params.devicePixelRatio,
62+
deviceRectangles: params.commonCheckVariables.deviceRectangles,
63+
fileName: params.fileName,
64+
folderOptions: {
65+
autoSaveBaseline: params.commonCheckVariables.autoSaveBaseline,
66+
actualFolder: params.commonCheckVariables.actualFolder,
67+
baselineFolder: params.commonCheckVariables.baselineFolder,
68+
diffFolder: params.commonCheckVariables.diffFolder,
69+
browserName: params.commonCheckVariables.browserName,
70+
deviceName: params.commonCheckVariables.deviceName,
71+
isMobile: params.commonCheckVariables.isMobile,
72+
savePerInstance: params.commonCheckVariables.savePerInstance,
73+
},
74+
isAndroid: params.commonCheckVariables.isAndroid,
75+
isAndroidNativeWebScreenshot: params.commonCheckVariables.isAndroidNativeWebScreenshot,
76+
ignoreRegions: params.additionalProperties?.ignoreRegions || [],
77+
})),
78+
}))
4279

4380
describe('checkAppScreen', () => {
4481
let executeImageCompareSpy: ReturnType<typeof vi.fn>

‎packages/image-comparison-core/src/commands/checkAppScreen.ts‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { screenMethodCompareOptions } from '../helpers/options.js'
2-
import type { ImageCompareOptions, ImageCompareResult } from '../methods/images.interfaces.js'
2+
import type { ImageCompareResult } from '../methods/images.interfaces.js'
33
import { executeImageCompare } from '../methods/images.js'
44
import { determineDeviceBlockOuts, determineIgnoreRegions } from '../methods/rectangles.js'
5+
import { extractCommonCheckVariables, buildBaseExecuteCompareOptions } from '../helpers/utils.js'
56
import type { InternalCheckScreenMethodOptions } from './check.interfaces.js'
67
import saveAppScreen from './saveAppScreen.js'
78
import type { ElementIgnore } from './element.interfaces.js'
@@ -20,7 +21,8 @@ export default async function checkAppScreen(
2021
testContext,
2122
}: InternalCheckScreenMethodOptions
2223
): Promise<ImageCompareResult | number> {
23-
// 1. Set some vars
24+
// 1. Set some variables
25+
const commonCheckVariables = extractCommonCheckVariables({ folders, instanceData, wicOptions: checkScreenOptions.wic })
2426
const saveAppScreenOptions = {
2527
wic: checkScreenOptions.wic,
2628
method:{
@@ -39,9 +41,6 @@ export default async function checkAppScreen(
3941
]
4042

4143
}
42-
const { isAndroid, isMobile, deviceRectangles, browserName, deviceName, nativeWebScreenshot: isAndroidNativeWebScreenshot } = instanceData
43-
const { actualFolder, baselineFolder, diffFolder } = folders
44-
const { autoSaveBaseline, savePerInstance, compareOptions } = checkScreenOptions.wic
4544

4645
// 2. Take the actual screenshot and retrieve the needed data
4746
const { devicePixelRatio, fileName } = await saveAppScreen({
@@ -53,41 +52,37 @@ export default async function checkAppScreen(
5352
tag,
5453
})
5554

56-
// 3. Determine the ignore regions
55+
// 3. Determine the ignore regions and compare options
5756
const ignoreRegions = await determineIgnoreRegions(browserInstance, screenCompareOptions.ignore || [])
5857
const deviceIgnoreRegions = await determineDeviceBlockOuts({
59-
isAndroid,
58+
isAndroid: commonCheckVariables.isAndroid,
6059
screenCompareOptions,
6160
instanceData,
6261
})
63-
64-
// 4a. Determine the compare options
6562
const methodCompareOptions = screenMethodCompareOptions(checkScreenOptions.method)
66-
67-
const executeCompareOptions: ImageCompareOptions = {
68-
compareOptions: {
69-
wic: compareOptions,
70-
method: methodCompareOptions,
71-
},
63+
const baseExecuteCompareOptions = buildBaseExecuteCompareOptions({
64+
commonCheckVariables,
65+
wicCompareOptions: checkScreenOptions.wic.compareOptions,
66+
methodCompareOptions,
7267
devicePixelRatio,
73-
deviceRectangles,
7468
fileName,
75-
folderOptions: {
76-
autoSaveBaseline,
77-
actualFolder,
78-
baselineFolder,
79-
diffFolder,
80-
browserName,
81-
deviceName,
82-
isMobile,
83-
savePerInstance,
84-
},
85-
ignoreRegions: [...ignoreRegions, ...deviceIgnoreRegions],
86-
isAndroid,
87-
isAndroidNativeWebScreenshot,
69+
additionalProperties: {
70+
ignoreRegions: [...ignoreRegions, ...deviceIgnoreRegions],
71+
}
72+
})
73+
74+
// 4. Now execute the compare and return the data
75+
const executeCompareOptions = {
76+
compareOptions: baseExecuteCompareOptions.compareOptions,
77+
devicePixelRatio: baseExecuteCompareOptions.devicePixelRatio,
78+
deviceRectangles: baseExecuteCompareOptions.deviceRectangles,
79+
fileName: baseExecuteCompareOptions.fileName,
80+
folderOptions: baseExecuteCompareOptions.folderOptions,
81+
ignoreRegions: baseExecuteCompareOptions.ignoreRegions,
82+
isAndroid: baseExecuteCompareOptions.isAndroid,
83+
isAndroidNativeWebScreenshot: baseExecuteCompareOptions.isAndroidNativeWebScreenshot,
8884
}
8985

90-
// 4b Now execute the compare and return the data
9186
return executeImageCompare({
9287
isViewPortScreenshot: true,
9388
isNativeContext,

‎packages/image-comparison-core/src/commands/saveAppElement.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@ export default async function saveAppElement(
2323
): Promise<ScreenshotOutput> {
2424
// 1. Set some variables
2525
const resizeDimensions: ResizeDimensions = saveElementOptions.method.resizeDimensions || DEFAULT_RESIZE_DIMENSIONS
26-
const {
27-
devicePixelRatio,
28-
isIOS,
29-
} = instanceData
26+
const { devicePixelRatio, isIOS } = instanceData
3027

3128
// 2. Take the screenshot
3229
const base64Image: string = await takeBase64ElementScreenshot({
@@ -37,17 +34,15 @@ export default async function saveAppElement(
3734
resizeDimensions,
3835
})
3936

40-
// 3. The after the screenshot methods
37+
// 3. Return the data
4138
const afterOptions = buildAfterScreenshotOptions({
4239
base64Image,
4340
folders,
4441
tag,
4542
isNativeContext,
46-
instanceData: instanceData as any, // Use instanceData as enrichedInstanceData for app commands
47-
enrichedInstanceData: instanceData as any,
43+
instanceData: instanceData,
4844
wicOptions: saveElementOptions.wic
4945
})
5046

51-
// 4. Return the data
5247
return afterScreenshot(browserInstance, afterOptions)
5348
}

‎packages/image-comparison-core/src/commands/saveAppScreen.ts‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,13 @@ export default async function saveAppScreen(
1919
}: InternalSaveScreenMethodOptions
2020
): Promise<ScreenshotOutput> {
2121
// 1. Set some variables
22-
const {
23-
addIOSBezelCorners,
24-
} = saveScreenOptions.wic
25-
const {
26-
deviceName,
27-
devicePixelRatio,
28-
deviceRectangles: { screenSize },
29-
isIOS,
30-
} = instanceData
22+
const { addIOSBezelCorners } = saveScreenOptions.wic
23+
const { deviceName, devicePixelRatio, deviceRectangles: { screenSize }, isIOS } = instanceData
3124

32-
// 2. Take the screenshot
25+
// 2a. Take the screenshot
3326
let base64Image: string = await takeBase64Screenshot(browserInstance)
3427

35-
// 3. We only need to use the `makeCroppedBase64Image` for iOS and when `addIOSBezelCorners` is true
28+
// 2b. We only need to use the `makeCroppedBase64Image` for iOS and when `addIOSBezelCorners` is true
3629
if (isIOS && addIOSBezelCorners) {
3730
base64Image = await makeCroppedBase64Image({
3831
addIOSBezelCorners,
@@ -52,17 +45,15 @@ export default async function saveAppScreen(
5245
})
5346
}
5447

55-
// 4. The after the screenshot methods
48+
// 3. Return the data
5649
const afterOptions = buildAfterScreenshotOptions({
5750
base64Image,
5851
folders,
5952
tag,
6053
isNativeContext,
6154
instanceData,
62-
enrichedInstanceData: instanceData as any,
6355
wicOptions: saveScreenOptions.wic
6456
})
6557

66-
// 5. Return the data
6758
return afterScreenshot(browserInstance, afterOptions)
6859
}

0 commit comments

Comments
 (0)