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

Silne30/visual regression rests 521 #630

Merged

Conversation

cuff-links
Copy link
Contributor

Added visual regression suite to EUI

Fixes #521

@cuff-links
Copy link
Contributor Author

jenkins test this

package.json Outdated
@@ -17,7 +18,10 @@
"lint-fix": "eslint --fix --cache --ignore-pattern \"**/*.snap.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
"test": "npm run lint && npm run test-unit",
"test-unit": "jest --config ./scripts/jest/config.json",
"start-test-server": "./node_modules/.bin/webpack-dev-server --config src-docs/webpack.config.js --port 9999",
Copy link
Contributor

Choose a reason for hiding this comment

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

./node_modules/.bin is automatically added to the $PATH for entries in scripts when you run npm or yarn, so you can just write webpack-dev-server. Same for test-visual below.

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 also very similar to the start script. Is it bad for the tests to supply --hot, as the start script does?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@pugnascotia I am a bit new to webpack. Is there something that the hot argument provides that I am not understanding?

Fixed the node-modules path.

chromeOptions: {
// to run chrome headless the following flags are required
// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
// args: ['--headless', '--disable-gpu'],
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it intended that headless mode be available at some point via e.g. a HEADLESS environment variable? Or is this code here so it can be commented out? FWIW Cloud's UI e2e tests respond to the CI and HEADLESS env vars.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think this is just code that can be deleted.

@bevacqua
Copy link
Contributor

local test run logs on macOS High Sierra:

[chrome 65 macOS 10.12 #0-2] Session ID: 5d354198-e9bb-42b9-98f1-2a869cfa1840
[chrome 65 macOS 10.12 #0-2] Spec: /Users/bevacqua/dev/elastic/eui/test/spec/components/toast/toast.spec.js
[chrome 65 macOS 10.12 #0-2] Running: chrome (v65) on macOS 10.12
[chrome 65 macOS 10.12 #0-2]
[chrome 65 macOS 10.12 #0-2] Toast Component
[chrome 65 macOS 10.12 #0-2]   1) Default Toast
[chrome 65 macOS 10.12 #0-2]
[chrome 65 macOS 10.12 #0-2]
[chrome 65 macOS 10.12 #0-2] 1 failing (23s)
[chrome 65 macOS 10.12 #0-2]
[chrome 65 macOS 10.12 #0-2] 1) Toast Component Default Toast:
[chrome 65 macOS 10.12 #0-2] Image 0 is not the same by 15.41%: expected false to be true
[chrome 65 macOS 10.12 #0-2] AssertionError: Image 0 is not the same by 15.41%: expected false to be true
[chrome 65 macOS 10.12 #0-2]     at Assertion.<anonymous> (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/core/assertions.js:659:10)
[chrome 65 macOS 10.12 #0-2]     at Assertion.propertyGetter (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/addProperty.js:62:29)
[chrome 65 macOS 10.12 #0-2]     at Object.get (<anonymous>)
[chrome 65 macOS 10.12 #0-2]     at Object.proxyGetter [as get] (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/proxify.js:86:22)
[chrome 65 macOS 10.12 #0-2]     at results.forEach (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:112:89)
[chrome 65 macOS 10.12 #0-2]     at Array.forEach (<anonymous>)
[chrome 65 macOS 10.12 #0-2]     at expectImageToBeSame (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:111:15)
[chrome 65 macOS 10.12 #0-2]     at Context.<anonymous> (/Users/bevacqua/dev/elastic/eui/test/spec/components/toast/toast.spec.js:12:5)
[chrome 65 macOS 10.12 #0-2]     at new Promise (<anonymous>)
[chrome 65 macOS 10.12 #0-2]

․------------------------------------------------------------------
[firefox #1-0] Session ID: 3e29b54c-1280-4561-9c6d-d1ef78d6e304
[firefox #1-0] Spec: /Users/bevacqua/dev/elastic/eui/test/spec/components/card/card.spec.js
[firefox #1-0] Running: firefox
[firefox #1-0]
[firefox #1-0] Card Component
[firefox #1-0]   ✓ Basic Card
[firefox #1-0]
[firefox #1-0]
[firefox #1-0] 1 passing (24s)
[firefox #1-0]

․------------------------------------------------------------------
[firefox #1-1] Session ID: 5ff96e86-7aa5-4485-b57e-c5e12b9d256b
[firefox #1-1] Spec: /Users/bevacqua/dev/elastic/eui/test/spec/components/table/table.spec.js
[firefox #1-1] Running: firefox
[firefox #1-1]
[firefox #1-1] Table Component
[firefox #1-1]   ✓ Basic Table
[firefox #1-1]
[firefox #1-1]
[firefox #1-1] 1 passing (26s)
[firefox #1-1]

F------------------------------------------------------------------
[chrome 65 macOS 10.12 #0-0] Session ID: dd575d7d-5639-4f8f-8c59-a834df2d5f57
[chrome 65 macOS 10.12 #0-0] Spec: /Users/bevacqua/dev/elastic/eui/test/spec/components/card/card.spec.js
[chrome 65 macOS 10.12 #0-0] Running: chrome (v65) on macOS 10.12
[chrome 65 macOS 10.12 #0-0]
[chrome 65 macOS 10.12 #0-0] Card Component
[chrome 65 macOS 10.12 #0-0]   1) Basic Card
[chrome 65 macOS 10.12 #0-0]
[chrome 65 macOS 10.12 #0-0]
[chrome 65 macOS 10.12 #0-0] 1 failing (27s)
[chrome 65 macOS 10.12 #0-0]
[chrome 65 macOS 10.12 #0-0] 1) Card Component Basic Card:
[chrome 65 macOS 10.12 #0-0] Image 0 is not the same by 0.97%: expected false to be true
[chrome 65 macOS 10.12 #0-0] AssertionError: Image 0 is not the same by 0.97%: expected false to be true
[chrome 65 macOS 10.12 #0-0]     at Assertion.<anonymous> (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/core/assertions.js:659:10)
[chrome 65 macOS 10.12 #0-0]     at Assertion.propertyGetter (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/addProperty.js:62:29)
[chrome 65 macOS 10.12 #0-0]     at Object.get (<anonymous>)
[chrome 65 macOS 10.12 #0-0]     at Object.proxyGetter [as get] (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/proxify.js:86:22)
[chrome 65 macOS 10.12 #0-0]     at results.forEach (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:112:89)
[chrome 65 macOS 10.12 #0-0]     at Array.forEach (<anonymous>)
[chrome 65 macOS 10.12 #0-0]     at expectImageToBeSame (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:111:15)
[chrome 65 macOS 10.12 #0-0]     at Context.<anonymous> (/Users/bevacqua/dev/elastic/eui/test/spec/components/card/card.spec.js:12:5)
[chrome 65 macOS 10.12 #0-0]     at new Promise (<anonymous>)
[chrome 65 macOS 10.12 #0-0]

F------------------------------------------------------------------
[chrome 65 macOS 10.12 #0-1] Session ID: 5b9ad294-c301-4476-8895-7121365a8f62
[chrome 65 macOS 10.12 #0-1] Spec: /Users/bevacqua/dev/elastic/eui/test/spec/components/table/table.spec.js
[chrome 65 macOS 10.12 #0-1] Running: chrome (v65) on macOS 10.12
[chrome 65 macOS 10.12 #0-1]
[chrome 65 macOS 10.12 #0-1] Table Component
[chrome 65 macOS 10.12 #0-1]   1) Basic Table
[chrome 65 macOS 10.12 #0-1]
[chrome 65 macOS 10.12 #0-1]
[chrome 65 macOS 10.12 #0-1] 1 failing (28s)
[chrome 65 macOS 10.12 #0-1]
[chrome 65 macOS 10.12 #0-1] 1) Table Component Basic Table:
[chrome 65 macOS 10.12 #0-1] Image 0 is not the same by 1.44%: expected false to be true
[chrome 65 macOS 10.12 #0-1] AssertionError: Image 0 is not the same by 1.44%: expected false to be true
[chrome 65 macOS 10.12 #0-1]     at Assertion.<anonymous> (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/core/assertions.js:659:10)
[chrome 65 macOS 10.12 #0-1]     at Assertion.propertyGetter (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/addProperty.js:62:29)
[chrome 65 macOS 10.12 #0-1]     at Object.get (<anonymous>)
[chrome 65 macOS 10.12 #0-1]     at Object.proxyGetter [as get] (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/proxify.js:86:22)
[chrome 65 macOS 10.12 #0-1]     at results.forEach (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:112:89)
[chrome 65 macOS 10.12 #0-1]     at Array.forEach (<anonymous>)
[chrome 65 macOS 10.12 #0-1]     at expectImageToBeSame (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:111:15)
[chrome 65 macOS 10.12 #0-1]     at Context.<anonymous> (/Users/bevacqua/dev/elastic/eui/test/spec/components/table/table.spec.js:12:5)
[chrome 65 macOS 10.12 #0-1]     at new Promise (<anonymous>)
[chrome 65 macOS 10.12 #0-1]

․------------------------------------------------------------------
[firefox #1-2] Session ID: f4297e90-0288-480d-af75-458aa788c38d
[firefox #1-2] Spec: /Users/bevacqua/dev/elastic/eui/test/spec/components/toast/toast.spec.js
[firefox #1-2] Running: firefox
[firefox #1-2]
[firefox #1-2] Toast Component
[firefox #1-2]   ✓ Default Toast
[firefox #1-2]
[firefox #1-2]
[firefox #1-2] 1 passing (14s)
[firefox #1-2]



3 passing (43.80s)
3 failing

1) Toast Component Default Toast:
Image 0 is not the same by 15.41%: expected false to be true
running chrome (v65) on macOS 10.12
AssertionError: Image 0 is not the same by 15.41%: expected false to be true
    at Assertion.<anonymous> (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/core/assertions.js:659:10)
    at Assertion.propertyGetter (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/addProperty.js:62:29)
    at Object.get (<anonymous>)
    at Object.proxyGetter [as get] (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/proxify.js:86:22)
    at results.forEach (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:112:89)
    at Array.forEach (<anonymous>)
    at expectImageToBeSame (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:111:15)
    at Context.<anonymous> (/Users/bevacqua/dev/elastic/eui/test/spec/components/toast/toast.spec.js:12:5)
    at new Promise (<anonymous>)

2) Card Component Basic Card:
Image 0 is not the same by 0.97%: expected false to be true
running chrome (v65) on macOS 10.12
AssertionError: Image 0 is not the same by 0.97%: expected false to be true
    at Assertion.<anonymous> (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/core/assertions.js:659:10)
    at Assertion.propertyGetter (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/addProperty.js:62:29)
    at Object.get (<anonymous>)
    at Object.proxyGetter [as get] (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/proxify.js:86:22)
    at results.forEach (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:112:89)
    at Array.forEach (<anonymous>)
    at expectImageToBeSame (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:111:15)
    at Context.<anonymous> (/Users/bevacqua/dev/elastic/eui/test/spec/components/card/card.spec.js:12:5)
    at new Promise (<anonymous>)

3) Table Component Basic Table:
Image 0 is not the same by 1.44%: expected false to be true
running chrome (v65) on macOS 10.12
AssertionError: Image 0 is not the same by 1.44%: expected false to be true
    at Assertion.<anonymous> (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/core/assertions.js:659:10)
    at Assertion.propertyGetter (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/addProperty.js:62:29)
    at Object.get (<anonymous>)
    at Object.proxyGetter [as get] (/Users/bevacqua/dev/elastic/eui/node_modules/chai/lib/chai/utils/proxify.js:86:22)
    at results.forEach (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:112:89)
    at Array.forEach (<anonymous>)
    at expectImageToBeSame (/Users/bevacqua/dev/elastic/eui/test/wdio.conf.js:111:15)
    at Context.<anonymous> (/Users/bevacqua/dev/elastic/eui/test/spec/components/table/table.spec.js:12:5)
    at new Promise (<anonymous>)





==================================================================
Number of specs: 6
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @elastic/eui@0.0.40 test-visual: `wdio test/wdio.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @elastic/eui@0.0.40 test-visual script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bevacqua/.npm/_logs/2018-04-11T21_14_23_950Z-debug.log
{ Error: Command failed: npm run test-visual
    at makeError (/Users/bevacqua/dev/elastic/eui/node_modules/start-server-and-test/node_modules/execa/index.js:172:9)
    at Promise.all.then.arr (/Users/bevacqua/dev/elastic/eui/node_modules/start-server-and-test/node_modules/execa/index.js:277:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
  code: 1,
  stdout: null,
  stderr: null,
  failed: true,
  signal: null,
  cmd: 'npm run test-visual',
  timedOut: false,
  killed: false }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@bevacqua
Copy link
Contributor

bevacqua commented Apr 11, 2018

The test run introduced a bunch of non-git-ignored screenshots at test/spec/screenshots/baseline. I'm assuming this is the expected behavior, right?

@cchaos
Copy link
Contributor

cchaos commented Apr 11, 2018

Seems pretty easy to locally run the tests and add new ones. I, personally, would like to see the "writing tests" section of the readme more fleshed out and tailored to how we should be writing them. For instance, should we be relying on classes/id's to select elements or use data attributes? Also, should we be targeting each component on the page or just select the whole page?

@cuff-links
Copy link
Contributor Author

@bevacqua Thanks for letting me know of your test results. Yes, the uncommitted baselines were expected but we are going to change that behavior. Instead of having baselines developed by one machine, we are going to have the test create the base line on a per user basic (against master) and then run again to check your code changes. That way, variances between systems don't cause problems.

@cuff-links
Copy link
Contributor Author

jenkins test this

John Dorlus added 2 commits April 19, 2018 17:31
…ser. Also removed baseline images as the tests will run twice, the first will create the baselines.
@cuff-links cuff-links self-assigned this Apr 23, 2018
@cuff-links cuff-links added work in progress blocked testing Issues or PRs that only affect tests - will not need changelog entries labels Apr 23, 2018
return self.repo.getCurrentBranch()
.then(function (branch) {
console.log(displayCurrentBranch(branch));
execSync('yarn start-test-server-and-visual-test', { stdio: [0,1,2] } );
Copy link
Contributor

Choose a reason for hiding this comment

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

better to exec instead of execSync and return a promise that is resolved by the async execution instead of relying on this synchronous call to block before the following then block to switch branches & do the next test run.

@chandlerprall
Copy link
Contributor

I'm having some issues running this locally, working through it.

@chandlerprall
Copy link
Contributor

LGTM; after this core functionality is in we can discuss exactly what should be covered and write some more documentation around visual regression testing @snide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocked testing Issues or PRs that only affect tests - will not need changelog entries
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants