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.

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 a visual-diff test for amp-by-example #9233

Merged
merged 16 commits into from May 12, 2017
Merged

Add a visual-diff test for amp-by-example #9233

merged 16 commits into from May 12, 2017

Conversation

rsimha
Copy link
Contributor

@rsimha rsimha commented May 9, 2017

This PR adds a visual-diff test for the amp-by-example page using the Percy service. It visually compares the page as rendered by the AMP runtime at HEAD with a previously selected known good snapshot of the same page.

Note that visual diff tests will only be run for pushes to master, and will be skipped during regular pull requests. This is due to two reasons: 1) Travis does not make secure environment variables available during PRs (required by Percy) 2) Our existing Percy quota will be used more judiciously by running visual tests only after a PR is pushed to master

Fixes issues #8, #8340, #9069

@rsimha rsimha requested a review from erwinmombay May 11, 2017 18:23
@rsimha rsimha self-assigned this May 11, 2017
@rsimha rsimha added this to the Sprint H1 May milestone May 11, 2017
@dreamofabear
Copy link

Sorry if this has already been discussed but have you considered using a variant of everything.amp.html? As far as visual components go, the ABE page only uses amp-accordion. It'd be nice to have coverage of over the top N used visual components.

@rsimha
Copy link
Contributor Author

rsimha commented May 11, 2017

@choumx, I just took two consecutive visual snapshots of everything.amp.html and there seems to be some variability in how the page is rendered, resulting in a failed visual test. See this test result. Can you suggest a different page that uses more components, but is consistent in the way it renders?

It was Malte's idea to start with amp-by-example.html, and then move on to individual static pages that we can use to detect breaking changes.

@rsimha
Copy link
Contributor Author

rsimha commented May 11, 2017

@erwinmombay, this is ready for review. Could you take a look? I'll watch the first few runs once this is pushed to master.

@rsimha rsimha requested a review from dreamofabear May 12, 2017 14:24
@rsimha
Copy link
Contributor Author

rsimha commented May 12, 2017

@choumx, could you take a look please?

runVisualDiffTests: function() {
// This must only be run for push builds, since Travis hides the encrypted
// environment variables required by Percy during pull request builds.
execOrDie(`${gulp} visual-diff`);

Choose a reason for hiding this comment

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

Looks like this will cause the build to fail if visual-diff returns status 1, which can happen if Percy is misconfigured or a runtime error is thrown. We probably want a "or-don't-die" variant for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

FYI, the actual percy invocation in the visual-diff.js task was already wrapped in an "or-don't-die", but I see no harm in making sure pr-check.js doesn't terminate on failure either. I've got a bug assigned to me to refactor all these exec* functions into one library.

Choose a reason for hiding this comment

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

Yea it's cause I noticed that extractPercyKeys has a few process.exit(1) calls.

@rsimha rsimha merged commit f82846a into ampproject:master May 12, 2017
@rsimha rsimha deleted the 2017-05-09-AmpByExample branch May 12, 2017 15:24
'Must specify a webpage to diff via --webpage'));
process.exit(1);
// Default to the amp-by-example page for test runs.
// TODO(rsimha): Refactor this to support multiple webpages.
Copy link
Member

Choose a reason for hiding this comment

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

add pr issue number for todo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants