Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add abstraction logic for simplifying writing visual tests #685

Merged
merged 15 commits into from
Jul 26, 2024
Merged

Add abstraction logic for simplifying writing visual tests #685

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
65a08d4
Introduce abstraction for component rendering functions and support f…
KshitijThareja Jul 11, 2024
d2ea3d1
Initial workflow config
KshitijThareja Jul 14, 2024
8ce5fe8
Fix the initial workflow for visual tests job
KshitijThareja Jul 16, 2024
2eaabdb
Add automatic comments job for visual testing workflow
KshitijThareja Jul 17, 2024
310f75b
Fix lint errors
KshitijThareja Jul 17, 2024
f6c66f3
Abstraction for page navigation
KshitijThareja Jul 17, 2024
1eba82f
Fix lint errors
KshitijThareja Jul 17, 2024
c37ddd3
Merge branch 'gsoc/visual-testing' into vt-abstraction
KshitijThareja Jul 17, 2024
f4373a0
Introduce visual testing to the existing Javascript tests workflow
KshitijThareja Jul 17, 2024
bdea16d
Introduce visual testing to the existing Javascript tests workflow
KshitijThareja Jul 17, 2024
c0e977f
Replace usage of custom describe blocks with test regex patterns
KshitijThareja Jul 20, 2024
95228a2
Merge branch 'vt-abstraction' of github.com:KshitijThareja/kolibri-de…
KshitijThareja Jul 20, 2024
61c98f9
Remove unintentional changes
KshitijThareja Jul 20, 2024
fde97db
Add comments for rendering function and make variable names clear
KshitijThareja Jul 23, 2024
93f2b7c
Add special test blocks for visual tests to append Visual tag automat…
KshitijThareja Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions jest.conf/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const moduleNameMapper = {
module.exports = {
rootDir: path.resolve(__dirname, '..'),
moduleFileExtensions: ['js', 'json', 'vue'],
testNamePattern: '^(?!.*\\[Visual\\])',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wooo, thats great, I researched if we had something like this for jest.config but I found nothing in the docs, but its great that this is working 🎉

moduleNameMapper,
testEnvironment: 'jsdom',
testEnvironmentOptions: {
Expand Down
9 changes: 9 additions & 0 deletions jest.conf/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,15 @@ global.afterEach(() => {
});
});

// Configure special test blocks for visual tests
global.describe.visual = (name, fn) => {
global.describe(`[Visual] ${name}`, fn);
};

global.it.visual = (name, fn) => {
global.it(`[Visual] ${name}`, fn);
};

// Register Vue plugins and components
Vue.use(VueRouter);
Vue.use(VueCompositionAPI);
Expand Down
1 change: 1 addition & 0 deletions jest.conf/visual.index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ module.exports = async () => {
preset: 'jest-puppeteer',
testTimeout: 50000,
moduleFileExtensions: ['js', 'json', 'vue'],
testNamePattern: '\\[Visual\\]',
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$': path.resolve(
__dirname,
Expand Down
2 changes: 1 addition & 1 deletion lib/buttons-and-links/__tests__/KButton.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe('KButton', () => {
});
});

describe('[Visual] KButton Visual Tests', () => {
describe.visual('KButton Visual Tests', () => {
it('renders correctly with default props', async () => {
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
await renderComponent('KButton', { text: 'Test Button' });
await takeSnapshot('KButton - Default');
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"precompile-svgs": "node utils/precompileSvgs/index.js && yarn run pregenerate",
"precompile-custom-svgs": "node utils/precompileSvgs/index.js --custom && yarn run pregenerate",
"_lint-watch-fix": "yarn lint -w -m",
"test:percy": "PERCY_LOGLEVEL=info npx percy exec -v -- jest --config jest.conf/visual.index.js -i ./lib/buttons-and-links/__tests__/KButton.spec.js -t '\\[Visual\\]'",
"test": "jest --config=jest.conf/index.js -t '^(?!.*\\[Visual\\])'",
"test:percy": "PERCY_LOGLEVEL=info npx percy exec -v -- jest --config jest.conf/visual.index.js -i ./lib/buttons-and-links/__tests__/KButton.spec.js",
"test": "jest --config=jest.conf/index.js",
"test:visual": "concurrently --kill-others --success first --names \"SERVER,TEST\" -c \"bgCyan.bold,bgYellow.bold\" \"yarn dev-only > /dev/null 2>&1\" \"yarn test:percy\"",
"_api-watch": "chokidar \"**/lib/**\" -c \"node utils/extractApi.js\""
},
Expand Down
Loading