Skip to content

Commit 4b4e31a

Browse files
authored
chore(infra): Improve local VRT process (#4553)
* chore(infra): Improve local VRT process * chore(infra): Fix npm commands * chore(infra): Colors and improvements * chore(infra): Happy prompts for `local:vrt` etc * Clean `package-lock.json` * ci(vrt): update Applitools concurrency key * ci(vrt): Fixing a stooopid typo * chore(infra): Update prompts to be easier for humans * Update package-lock.json * Oops forgot sane defaults * Clean up on aisle 42
1 parent de3a874 commit 4b4e31a

File tree

7 files changed

+43371
-2059
lines changed

7 files changed

+43371
-2059
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,4 @@ coverage
6363

6464
# Local postcss packages
6565
install-postcss.sh
66+
applitools.*.local.js

applitools.config.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
const prompt = require('prompt-sync')({sigint: true});
21
const branch = require('git-branch');
3-
42
const resolution = { width: 1024, height: 768 };
3+
54
const currentBranch = branch.sync();
65

76
module.exports = {
7+
apiKey: process.env.APPLITOOLS_API_KEY,
88
appName: 'SLDS',
99
matchLevel: 'Strict',
1010
ignoreDisplacements: true,
@@ -17,20 +17,23 @@ module.exports = {
1717
],
1818
batchName: process.env.CI
1919
? undefined
20-
: prompt(`Please provide a batch name for this run: `) + ` (${process.env.LOGNAME})`,
20+
: '',
2121
branchName: process.env.CI
2222
? undefined
2323
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
2424
parentBranchName: process.env.CI
2525
? undefined
2626
: `localRun/${currentBranch}`,
27-
showLogs: process.env.CI,
27+
showLogs: process.env.CI || false,
28+
showStorybookOutput: process.env.CI || false,
2829
// saveDebugData: false,
2930
exitcode: false,
30-
concurrency: 100,
31+
testConcurrency: 100,
3132
serverUrl: 'https://salesforceuxeyesapi.applitools.com',
32-
include: ({ name, kind, parameters }) => {
33-
return /^Kitchen Sink/.test(name);
33+
testBlueprintPattern: '.*',
34+
testNamePattern: '^Kitchen Sink',
35+
include: function ({ name, kind, parameters }) {
36+
return new RegExp(this.testBlueprintPattern, 'gi').test(kind) && new RegExp(this.testNamePattern, 'gi').test(name);
3437
},
3538
puppeteerOptions: process.env.CIRCLECI
3639
? { executablePath: '/usr/bin/google-chrome' }
@@ -40,7 +43,6 @@ module.exports = {
4043
{ width: resolution.width, height: resolution.height, name: 'firefox' },
4144
{ width: resolution.width, height: resolution.height, name: 'chrome' },
4245
{ width: resolution.width, height: resolution.height, name: 'safari' },
43-
// { width: resolution.width, height: resolution.height, name: 'ie11' },
4446
{ width: resolution.width, height: resolution.height, name: 'edgechromium' }
4547
]
4648
};

applitools.legacy.config.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
const prompt = require('prompt-sync')({ sigint: true });
21
const branch = require('git-branch');
32

43
const resolution = { width: 1024, height: 768 };
54
const currentBranch = branch.sync();
65

76
module.exports = {
7+
apiKey: process.env.APPLITOOLS_API_KEY,
88
appName: 'SLDS',
99
matchLevel: 'Strict',
1010
ignoreDisplacements: true,
@@ -14,23 +14,24 @@ module.exports = {
1414
},
1515
properties: [{ name: 'Group', value: 'legacy' }],
1616
batchName: process.env.CI
17-
? undefined
18-
: prompt(`Please provide a batch name for this run: `) +
19-
` (${process.env.LOGNAME})`,
17+
? undefined
18+
: '',
2019
branchName: process.env.CI
2120
? undefined
2221
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
2322
parentBranchName: process.env.CI
24-
? undefined
25-
: // : `localRun/${currentBranch}`,
26-
'salesforce-ux/design-system-internal/232-summer-21',
27-
showLogs: process.env.CI,
23+
? undefined
24+
: `localRun/${currentBranch}`,
25+
showLogs: process.env.CI || false,
26+
showStorybookOutput: process.env.CI || false,
2827
// saveDebugData: false,
2928
exitcode: false,
30-
concurrency: 100,
29+
testConcurrency: 100,
3130
serverUrl: 'https://salesforceuxeyesapi.applitools.com',
32-
include: ({ name, kind, parameters }) => {
33-
return /^Kitchen Sink/.test(name);
31+
testBlueprintPattern: '.*',
32+
testNamePattern: '^Kitchen Sink',
33+
include: function ({ name, kind, parameters }) {
34+
return new RegExp(this.testBlueprintPattern, 'gi').test(kind) && new RegExp(this.testNamePattern, 'gi').test(name);
3435
},
3536
puppeteerOptions: process.env.CIRCLECI
3637
? { executablePath: '/usr/bin/google-chrome' }

applitools.mobile.config.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
const prompt = require('prompt-sync')({sigint: true});
21
const branch = require('git-branch');
32

43
const currentBranch = branch.sync();
54

65
module.exports = {
6+
apiKey: process.env.APPLITOOLS_API_KEY,
77
appName: 'SLDS',
88
matchLevel: 'Strict',
99
ignoreDisplacements: true,
@@ -16,20 +16,23 @@ module.exports = {
1616
],
1717
batchName: process.env.CI
1818
? undefined
19-
: prompt(`Please provide a batch name for this run: `) + ` (${process.env.LOGNAME})`,
19+
: '',
2020
branchName: process.env.CI
2121
? undefined
2222
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
2323
parentBranchName: process.env.CI
2424
? undefined
2525
: `localRun/${currentBranch}`,
26-
showLogs: process.env.CI,
26+
showLogs: process.env.CI || false,
27+
showStorybookOutput: process.env.CI || false,
2728
// saveDebugData: false,
2829
exitcode: false,
29-
concurrency: 100,
30+
testConcurrency: 100,
3031
serverUrl: 'https://salesforceuxeyesapi.applitools.com',
31-
include: ({ name, kind, parameters }) => {
32-
return /^Kitchen Sink/.test(name);
32+
testBlueprintPattern: '.*',
33+
testNamePattern: '^Kitchen Sink',
34+
include: function ({ name, kind, parameters }) {
35+
return new RegExp(this.testBlueprintPattern, 'gi').test(kind) && new RegExp(this.testNamePattern, 'gi').test(name);
3336
},
3437
puppeteerOptions: process.env.CIRCLECI
3538
? { executablePath: '/usr/bin/google-chrome' }

applitools.prompts.js

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
const { prompt } = require('enquirer');
2+
const branch = require('git-branch');
3+
const fs = require('fs').promises;
4+
const pkg = require('./package.json');
5+
6+
const yargs = require('yargs');
7+
8+
const argv = yargs.option('type', {
9+
alias: 't',
10+
describe: 'provide the type of run (standard, legacy, mobile)',
11+
demandOption: true,
12+
default: 'standard',
13+
type: 'string'
14+
})
15+
.help()
16+
.alias('help', 'h')
17+
.argv;
18+
19+
let runType = '';
20+
21+
switch (argv.type) {
22+
case 'legacy':
23+
runType = 'legacy.';
24+
break;
25+
26+
case 'mobile':
27+
runType = 'mobile.';
28+
break;
29+
30+
default:
31+
break;
32+
}
33+
34+
const sfdcVersion = pkg.slds.id;
35+
const sfdcName = pkg.slds.name.toLowerCase().replace(' ’', '-');
36+
const currentBranch = branch.sync();
37+
38+
async function ask() {
39+
return prompt([
40+
{
41+
type: 'input',
42+
name: 'apiKey',
43+
message: 'Please provide your APPLITOOLS_API_KEY value\n ',
44+
skip: () => {
45+
if (process.env.APPLITOOLS_API_KEY) {
46+
return true;
47+
}
48+
}
49+
},
50+
{
51+
type: 'input',
52+
name: 'batchName',
53+
message: 'Please provide a batch name for this run\n ',
54+
initial: 'Local run',
55+
result(name) {
56+
return `${name} (${process.env.LOGNAME})`;
57+
}
58+
},
59+
{
60+
type: 'input',
61+
name: 'parentBranchName',
62+
message: 'Which branch would you like to compare against\n ',
63+
initial: `${sfdcVersion}-${sfdcName}`,
64+
result(branch) {
65+
if (branch) {
66+
return `salesforce-ux/design-system-internal/${branch}`;
67+
}
68+
69+
return `localRun/${currentBranch}`;
70+
}
71+
},
72+
{
73+
type: 'input',
74+
name: 'testKindPattern',
75+
message: `If you'd like to test only some blueprints please enter a comma separated list of names\n `,
76+
footer: ` ex. Path, Buttons, Icons`,
77+
initial: 'all',
78+
result(pattern) {
79+
let kindSearch = '';
80+
if (pattern.toLowerCase() !== 'all') {
81+
// convert comma separated list into regex OR pattern
82+
kindSearch = pattern.split(/,\s?/g).join('|');
83+
}
84+
85+
// regex clarification:
86+
// » [^/]* => 0 or more of any character except forward-slash
87+
return `[^/]*/[^/]*${kindSearch}.*`;
88+
}
89+
},
90+
{
91+
type: 'input',
92+
name: 'testKindSubPattern',
93+
message: `If you'd like to test only a subsection within the patterns above, such as "Examples" or "Base/States" please enter a comma separated list\n `,
94+
footer: ` ex. Examples, Base/States`,
95+
initial: 'all',
96+
result(pattern) {
97+
let subSearch = '';
98+
99+
if (pattern.toLowerCase() === 'all') {
100+
return '.*';
101+
}
102+
103+
// convert comma separated list into regex OR pattern
104+
subSearch = pattern.split(/,\s?/g).join('|');
105+
106+
// regex clarification:
107+
// » [^/]* => 0 or more of any character except forward-slash
108+
return `/[^/]*${subSearch}.*`;
109+
}
110+
},
111+
{
112+
type: 'input',
113+
name: 'testNamePattern',
114+
message: `If you'd like to test only specific tests within your defined filters above please enter the regex pattern (use ".*" for all)\n `,
115+
footer: ` NOTE: This is searching on the name of the test such as "Kitchen Sink"`,
116+
initial: '^Kitchen Sink'
117+
},
118+
{
119+
type: 'confirm',
120+
name: 'showStorybookOutput',
121+
message: `Would you like to show Storybook output logs?\n `
122+
},
123+
{
124+
type: 'confirm',
125+
name: 'showLogs',
126+
message: `Would you like to show Applitools output logs?\n `
127+
}
128+
])
129+
.catch(console.error);
130+
};
131+
132+
const chalk = require('chalk');
133+
console.log(chalk.blue(`\n
134+
██████╗ ███████╗███████╗ ██╗ ██╗██████╗ ████████╗
135+
██╔══██╗██╔════╝██╔════╝ ██║ ██║██╔══██╗╚══██╔══╝
136+
██║ ██║███████╗█████╗ ██║ ██║██████╔╝ ██║
137+
██║ ██║╚════██║██╔══╝ ╚██╗ ██╔╝██╔══██╗ ██║
138+
██████╔╝███████║███████╗ ╚████╔╝ ██║ ██║ ██║
139+
╚═════╝ ╚══════╝╚══════╝ ╚═══╝ ╚═╝ ╚═╝ ╚═╝ \n`));
140+
141+
// Special note when running mobile VRT
142+
if (argv.type === 'mobile') {
143+
console.log(chalk.inverse(`
144+
╓───────────────────────────────────────────────────────╖
145+
║ ║
146+
║ Please keep in mind that the mobile ║
147+
║ Storybook instance only has a subset of stories. ║
148+
║ ║
149+
║ To view this locally please run: ║
150+
║ > npm run start:mobile ║
151+
║ ║
152+
╙───────────────────────────────────────────────────────╜
153+
\n`));
154+
}
155+
156+
ask().then(async answers => {
157+
const template = require(`./applitools.${runType}config`);
158+
159+
// add proper full "kind" search regular expression
160+
answers.testBlueprintPattern = `${answers.testKindPattern}${answers.testKindSubPattern}$`;
161+
162+
const userConfig = Object.keys(answers).reduce((acc, key) => {
163+
if (key in template) {
164+
acc[key] = answers[key] || template[key];
165+
}
166+
return acc;
167+
}, {});
168+
169+
const config = Object.assign(template, userConfig);
170+
171+
const parsedConfig = Object.keys(config).map(key => {
172+
const value = config[key];
173+
const type = typeof value;
174+
175+
if (type === 'object') {
176+
return `${key}: ${JSON.stringify(value, null, 4)}`;
177+
} else if (type === 'string') {
178+
return `${key}: '${value}'`
179+
} else {
180+
return `${key}: ${value}`;
181+
}
182+
}).join(',\n ');
183+
184+
const configExport = `
185+
module.exports = {
186+
${parsedConfig}
187+
}
188+
`
189+
190+
await fs.writeFile(`./applitools.${runType}config.local.js`, configExport);
191+
});

0 commit comments

Comments
 (0)