Skip to content

Commit eff5a04

Browse files
anuraghazraanuraghazra
committed
feat: move wdio setup to blade workspace
1 parent 7d73830 commit eff5a04

File tree

12 files changed

+2041
-111
lines changed

12 files changed

+2041
-111
lines changed

‎packages/blade/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,7 @@ prBundleSizeStats.json
6363

6464
# Temporary files created by Metro to check the health of the file watcher
6565
.metro-health-check*
66+
67+
# Browserstack
68+
logs
69+
local.log

‎packages/blade/package.json

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,9 @@
129129
"publish-npm": "node ./scripts/publishToNpm.js",
130130
"pregenerate-bundle-size-info": "yarn run-s build:clean build:generate-types build:react-prod",
131131
"generate-bundle-size-info": "node ./scripts/generateBundleSizeInfo.js",
132-
"generate-github-npmrc": "node ./scripts/generateGitHubRegistryNpmrc.js"
132+
"generate-github-npmrc": "node ./scripts/generateGitHubRegistryNpmrc.js",
133+
"e2e:bstack": "./scripts/run-e2e-bstack.sh",
134+
"e2e:local": "./scripts/run-e2e-local.sh"
133135
},
134136
"dependencies": {
135137
"@babel/runtime": "7.20.0",
@@ -275,7 +277,16 @@
275277
"@types/body-scroll-lock": "3.1.0",
276278
"ramda": "0.29.1",
277279
"@razorpay/i18nify-js": "1.8.0",
278-
"@razorpay/i18nify-react": "4.0.6"
280+
"@razorpay/i18nify-react": "4.0.6",
281+
"ts-node": "10.9.2",
282+
"@testing-library/webdriverio": "3.2.1",
283+
"@wdio/browserstack-service": "8.35.1",
284+
"@wdio/local-runner": "8.35.1",
285+
"@wdio/mocha-framework": "8.35.0",
286+
"@wdio/globals": "8.35.1",
287+
"@wdio/cli": "8.35.1",
288+
"webdriverio": "8.35.1",
289+
"chai": "5.1.0"
279290
},
280291
"peerDependencies": {
281292
"react": ">=18",

‎packages/blade/scripts/run-e2e-bstack.sh

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
#!/bin/bash
2+
3+
# 1. Modify package.json to add type:module
4+
# 2. Trigger wdio tests
5+
# 3. Revert package.json
6+
7+
wait-on http://bs-local.com:9009 --timeout 50000
8+
9+
# if there is timeout exit
10+
if [ $? -ne 0 ]; then
11+
echo "Timeout waiting for http://localhost:9009"
12+
exit 1
13+
fi
14+
15+
# Add `"type": "module"` to package.json and write it back to the file with jq
16+
jq '. + { "type": "module" }' package.json > tmp.$$.json && mv tmp.$$.json package.json
17+
18+
# Trigger wdio tests
19+
E2E_BASE_URL=http://bs-local.com:9009/iframe.html wdio wdio.bstack.conf.ts $@
20+
21+
# Revert package.json
22+
jq 'del(.type)' package.json > tmp.$$.json && mv tmp.$$.json package.json

‎packages/blade/scripts/run-e2e-local.sh

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
#!/bin/bash
2+
3+
# 1. Modify package.json to add type:module
4+
# 2. Trigger wdio tests
5+
# 3. Revert package.json
6+
7+
wait-on http://localhost:9009 --timeout 50000
8+
9+
# if there is timeout exit
10+
if [ $? -ne 0 ]; then
11+
echo "Timeout waiting for http://localhost:9009"
12+
exit 1
13+
fi
14+
15+
# Add `"type": "module"` to package.json and write it back to the file with jq
16+
jq '. + { "type": "module" }' package.json > tmp.$$.json && mv tmp.$$.json package.json
17+
18+
# Trigger wdio tests also pass any extra shell arguments to wdio
19+
E2E_BASE_URL=http://localhost:9009/iframe.html wdio wdio.local.conf.ts $@
20+
21+
# Revert package.json
22+
jq 'del(.type)' package.json > tmp.$$.json && mv tmp.$$.json package.json

‎packages/blade/src/@types/globals.d.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
// import original module declarations
22
import 'styled-components';
33
import 'styled-components/native';
4-
import type { Theme } from '~components/BladeProvider';
54
import '@testing-library/jest-dom';
65
import '@testing-library/jest-native/extend-expect';
6+
import type { WebdriverIOQueries } from '@testing-library/webdriverio';
7+
import type { BrowserBase } from 'webdriverio';
8+
import type { Theme } from '~components/BladeProvider';
79

810
declare module 'styled-components' {
911
// eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -13,3 +15,7 @@ declare module 'styled-components/native' {
1315
// eslint-disable-next-line @typescript-eslint/no-empty-interface
1416
export interface DefaultTheme extends Theme {}
1517
}
18+
19+
declare module '@testing-library/webdriverio' {
20+
function setupBrowser<Browser extends BrowserBase>(browser: Browser): WebdriverIOQueries;
21+
}

‎packages/blade/src/components/Button/Button/Button.stories.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
getStyledPropsArgTypes,
2020
} from '~components/Box/BaseBox/storybookArgTypes';
2121
import { castWebType } from '~utils';
22+
import { Box } from '~components/Box';
2223

2324
const Page = (): ReactElement => {
2425
return (
@@ -445,3 +446,14 @@ ButtonRef.parameters = {
445446
},
446447
},
447448
};
449+
450+
export const ButtonTest = (): React.ReactElement => {
451+
const [count, setCount] = useState(0);
452+
453+
return (
454+
<Box>
455+
<ButtonComponent onClick={() => setCount((prev) => prev + 1)}>Increase</ButtonComponent>
456+
<Text testID="counter">Clicked: {count}</Text>
457+
</Box>
458+
);
459+
};

‎packages/blade/src/components/Button/Button/__tests__/Button.e2e.test.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* eslint-disable @typescript-eslint/no-floating-promises */
2+
import { expect, browser } from '@wdio/globals';
3+
import { setupBrowser } from '@testing-library/webdriverio';
4+
5+
before(async () => {
6+
await browser.url('?args=&id=components-button--button-test&viewMode=story');
7+
await browser.waitUntil(async () => (await browser.getTitle()).match(/button/i), {
8+
timeout: 5000,
9+
});
10+
});
11+
12+
describe('Button', () => {
13+
it('should click', async () => {
14+
const { getByTestId, getByRole } = setupBrowser(browser);
15+
16+
expect(await getByTestId('counter')).toHaveText('Clicked: 0');
17+
18+
const button1 = await getByRole('button', { name: /increase/i });
19+
await button1.click();
20+
await button1.click();
21+
await button1.click();
22+
23+
expect(await getByTestId('counter')).toHaveText('Clicked: 3');
24+
});
25+
});

‎packages/blade/tsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010
"~tokens/*": ["src/tokens/*"],
1111
"~src/*": ["src/*"]
1212
},
13+
"types": [
14+
"node",
15+
"@wdio/globals/types",
16+
"expect-webdriverio",
17+
"@wdio/mocha-framework",
18+
"@wdio/browserstack-service"
19+
],
1320
// In Blade side we are targeting `.web` types
1421
// We can't add both `.native` & `.web` at once.
1522
"moduleSuffixes": [".all", ".web", ""],

‎packages/blade/wdio.base.conf.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
2+
import type { Options } from '@wdio/types';
3+
4+
export const config: Options.Testrunner = {
5+
specs: ['./src/**/*.e2e.test.ts'],
6+
exclude: [],
7+
logLevel: 'warn',
8+
baseUrl: process.env.E2E_BASE_URL || 'http://localhost:9009/iframe.html',
9+
waitforTimeout: 10000,
10+
connectionRetryTimeout: 120000,
11+
connectionRetryCount: 3,
12+
capabilities: [],
13+
filesToWatch: [
14+
// TODO: How should we organize the e2e stories? Like _KitchenSin?
15+
'./src/**/*.stories.tsx',
16+
],
17+
before: async (_, __, browser) => {
18+
await browser.maximizeWindow();
19+
},
20+
framework: 'mocha',
21+
mochaOpts: {
22+
ui: 'bdd',
23+
timeout: 60000,
24+
},
25+
};

‎packages/blade/wdio.bstack.conf.ts

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
2+
/* eslint-disable no-template-curly-in-string */
3+
import type { Options } from '@wdio/types';
4+
import { config as baseConfig } from './wdio.base.conf.js';
5+
6+
const commonCapabilities = {
7+
buildName: 'blade browserstack build',
8+
};
9+
10+
const bstackConfig: Options.Testrunner = {
11+
maxInstances: 5,
12+
user: process.env.BROWSERSTACK_USERNAME,
13+
key: process.env.BROWSERSTACK_ACCESS_KEY,
14+
15+
services: [
16+
[
17+
'browserstack',
18+
{
19+
buildIdentifier: '#${BUILD_NUMBER}',
20+
browserstackLocal: true,
21+
},
22+
],
23+
],
24+
capabilities: [
25+
{
26+
browserName: 'Chrome',
27+
'bstack:options': {
28+
browserVersion: 'latest',
29+
os: 'OS X',
30+
osVersion: 'Sonoma',
31+
...commonCapabilities,
32+
},
33+
},
34+
{
35+
browserName: 'Firefox',
36+
'bstack:options': {
37+
browserVersion: 'latest',
38+
os: 'OS X',
39+
osVersion: 'Sonoma',
40+
...commonCapabilities,
41+
},
42+
},
43+
// Skipping safari for now, our storybook is broken in safari desktop :(
44+
// {
45+
// browserName: 'Safari',
46+
// 'bstack:options': {
47+
// browserVersion: 'latest',
48+
// os: 'OS X',
49+
// osVersion: 'Sonoma',
50+
// },
51+
// },
52+
{
53+
browserName: 'Chrome',
54+
'bstack:options': {
55+
browserVersion: 'latest',
56+
os: 'Windows',
57+
osVersion: '11',
58+
...commonCapabilities,
59+
},
60+
},
61+
// Mobile devices
62+
{
63+
browserName: 'safari',
64+
'bstack:options': {
65+
deviceOrientation: 'portrait',
66+
deviceName: 'iPhone 15 Pro Max',
67+
osVersion: '17',
68+
...commonCapabilities,
69+
},
70+
},
71+
{
72+
browserName: 'chrome',
73+
'bstack:options': {
74+
deviceOrientation: 'portrait',
75+
deviceName: 'Samsung Galaxy S23 Ultra',
76+
osVersion: '13.0',
77+
...commonCapabilities,
78+
},
79+
},
80+
],
81+
};
82+
83+
const config = { ...baseConfig, ...bstackConfig };
84+
85+
// Code to support common capabilities
86+
// config.capabilities.forEach(function (caps) {
87+
// for (const i in exports.config.commonCapabilities)
88+
// caps[i] = { ...caps[i], ...exports.config.commonCapabilities[i] };
89+
// });
90+
91+
export { config };

‎packages/blade/wdio.local.conf.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
2+
/* eslint-disable no-template-curly-in-string */
3+
import type { Options } from '@wdio/types';
4+
import { config as baseConfig } from './wdio.base.conf.js';
5+
6+
const localConfig: Options.Testrunner = {
7+
maxInstances: 3,
8+
runner: 'local',
9+
capabilities: [
10+
{
11+
browserName: 'chrome',
12+
browserVersion: '121',
13+
},
14+
{
15+
browserName: 'firefox',
16+
},
17+
// Skipping safari for now, our storybook is broken in safari desktop :(
18+
// {
19+
// // run safaridriver --enable on macOS to enable automation
20+
// browserName: 'safari',
21+
// },
22+
],
23+
};
24+
25+
const config = { ...baseConfig, ...localConfig };
26+
27+
export { config };

0 commit comments

Comments
 (0)