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 screenshot testing #3736

Merged
merged 4 commits into from
Jul 30, 2019
Merged

Add screenshot testing #3736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87e0457
Move amplify-ui-components package from npm to yarn
Jul 23, 2019
edf04b1
Merge branch 'amplify-ui-components' of https://github.com/aws-amplif…
Jul 25, 2019
4c88b3a
Add visual screenshot testing to amplify-text-field, and fix jest-con…
Jul 25, 2019
8649176
Bump stencil version + husky pre-push testing
Jul 30, 2019
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 package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"cypress": "^3.2.0",
"husky": "^1.3.1",
"jest": "^22.4.3",
"jest-config": "24.8.0",
"json-loader": "^0.5.7",
"lerna": "^3.13.1",
"rimraf": "^2.6.2",
Expand Down
6 changes: 4 additions & 2 deletions packages/amplify-ui-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"lint": "eslint --ext .js,.ts,.tsx .",
"format": "eslint --fix --ext .js,.ts,.tsx .",
"pretest": "npm run lint",
"test": "stencil test --spec --e2e",
"test": "stencil test --spec --e2e --screenshot",
"test:update-screenshot": "stencil test --spec --e2e --screenshot --update-screenshot",
"test:watch": "stencil test --spec --e2e --watchAll",
"stencil": "stencil build --docs-readme",
"stencil:watch": "stencil build --dev --watch",
Expand All @@ -29,7 +30,7 @@
"emotion": "^10.0.9"
},
"devDependencies": {
"@stencil/core": "^1.1.9",
"@stencil/core": "^1.2.3",
"@stencil/state-tunnel": "^1.0.1",
"@storybook/addon-a11y": "^5.1.9",
"@storybook/addon-knobs": "^5.1.9",
Expand All @@ -56,6 +57,7 @@
},
"husky": {
"hooks": {
"pre-push": "npm run test"
}
},
"peerDependencies": {},
Expand Down
3 changes: 3 additions & 0 deletions packages/amplify-ui-components/screenshot/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
images
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This .gitignore is removing everything in the /screenshot/ folder. I can't quite decide if that's a good or a bad idea -- it will certainly decrease the size of the repo, among other things, but is it really worth the downsides? For example, if you've run tests on your computer (creating screenshots), but someone remotely updates the components, when you pull and re-run the tests they'll fail the screenshot comparison and you'll need to --update-screenshot. Or for another example, suppose you pull the repo fresh and don't run the tests before you change the components -- then the screenshots aren't doing their job at all, since they're not stopping you from accidentally breaking the styling of the components. All in all, I think there's a reason why snapshots are normally committed...

Copy link
Contributor

Choose a reason for hiding this comment

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

This is a good analysis. I think the 'baseline' screenshot should be committed so that everyone is comparing against the same image. The latest images generated to compare against the baseline image should be ignored. Is this possible with Stencil screenshot testing?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Doesn't look like it. The file names are generated via just a hash of the contents, so there's no easy way to know which one is the master. Moreover there's not even a function for deleting a file, let alone removing all of the previous versions whenever a new master is set.

builds
compare.html
3 changes: 3 additions & 0 deletions packages/amplify-ui-components/src/components/amplify-text-field/amplify-text-field.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ describe('amplify-text-field', () => {
await page.setContent(
`<amplify-text-field field-id="id" label="Label test" description="Description test"></amplify-text-field>`,
);
const screenshot = await page.compareScreenshot('Amplify Text Field', {fullPage: true});
tjleing marked this conversation as resolved.
Show resolved Hide resolved
expect(screenshot).toMatchScreenshot({ allowableMismatchedPixels: 10 });

const textElement = await page.find('amplify-text-field');
expect(textElement).not.toBeNull();

Expand Down
Loading