Remove Applitools dependency for visual testing

[santam85]

As requested by the maintainer. Switching to local snapshot diff.
Had to switch to Firefox for e2e testing due to bugs in Cypress related to SVG snapshots on chrome (cypress-io/cypress#2034) which seems far away from resolution.
Also updated various dependencies.

[paviad]

@santam85

I am getting this:

  Running:  main-test.js                                                                    (1 of 1)


  Main Page
    1) navigate to main Demo page and check info

  Charts canvas
    2) /#/LineChart
    3) /#/BarChart
    4) /#/DoughnutChart
    5) /#/RadarChart
    6) /#/PieChart
    7) /#/PolarAreaChart
    8) /#/BubbleChart
    9) /#/ScatterChart
    10) /#/DynamicChart


  0 passing (57s)
  10 failing

  1) Main Page
       navigate to main Demo page and check info:
     AssertionError: Timed out retrying: Expected to find element: `mat-toolbar`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:110:28)

  2) Charts canvas
       /#/LineChart:
     AssertionError: Timed out retrying: Expected to find element: `app-line-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  3) Charts canvas
       /#/BarChart:
     AssertionError: Timed out retrying: Expected to find element: `app-bar-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  4) Charts canvas
       /#/DoughnutChart:
     AssertionError: Timed out retrying: Expected to find element: `app-doughnut-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  5) Charts canvas
       /#/RadarChart:
     AssertionError: Timed out retrying: Expected to find element: `app-radar-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  6) Charts canvas
       /#/PieChart:
     AssertionError: Timed out retrying: Expected to find element: `app-pie-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  7) Charts canvas
       /#/PolarAreaChart:
     AssertionError: Timed out retrying: Expected to find element: `app-polar-area-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  8) Charts canvas
       /#/BubbleChart:
     AssertionError: Timed out retrying: Expected to find element: `app-bubble-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  9) Charts canvas
       /#/ScatterChart:
     AssertionError: Timed out retrying: Expected to find element: `app-scatter-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)

  10) Charts canvas
       /#/DynamicChart:
     AssertionError: Timed out retrying: Expected to find element: `app-dynamic-chart`, but never found it.
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\integration\main-test.js:147:10)




  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        10                                                                               │
  │ Passing:      0                                                                                │
  │ Failing:      10                                                                               │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  10                                                                               │
  │ Video:        false                                                                            │
  │ Duration:     56 seconds                                                                       │
  │ Spec Ran:     main-test.js                                                                     │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

[paviad]

Oh my bad, I am not familiar with cypress, turns out I had to run the site locally using npm start before running npm run test:main. But now I am getting different errors:

  0 passing (30s)
  10 failing

  1) Main Page
       navigate to main Demo page and check info:
     Error: Image size (1366x64) different than saved snapshot size (1280x64).
See diff for details: C:\MyProjects\ng2-charts\cypress\snapshots\main-test.js\__diff_output__\Main Page -- navigate to main Demo page and check info.diff.png
      at Context.eval (http://localhost:4200/__cypress/tests?p=cypress\support\index.js:192:17)

  2) Charts canvas
       /#/LineChart:
     RangeError: The value of "offset" is out of range. It must be >= 0 and <= 3686396. Received -4900
  RangeError [ERR_OUT_OF_RANGE] [ERR_OUT_OF_RANGE]: The value of "offset" is out of range. It must be >= 0 and <= 3686396. Received -4900
      at boundsError (internal/buffer.js:72:9)
      at Buffer.readUInt32BE (internal/buffer.js:295:5)
      at Jimp.<anonymous> (C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\node_modules\@jimp\plugin-crop\dist\index.js:43:37)
      at scan (C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\node_modules\@jimp\utils\dist\index.js:53:9)
      at Jimp.scanQuiet (C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\node_modules\@jimp\core\dist\index.js:1262:32)
      at Jimp.cropQuiet (C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\node_modules\@jimp\plugin-crop\dist\index.js:42:12)
      at Jimp.<computed> [as crop] (C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\node_modules\@jimp\core\dist\index.js:1176:23)
      at crop (C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\lib\screenshots.js:169:24)
      at C:\Users\USER\AppData\Local\Cypress\Cache\5.1.0\Cypress\resources\app\packages\server\lib\screenshots.js:462:17

[paviad]

See this picture diff

[santam85]

I'm sorry, my bad: Cypress by default was still running on the embedded electron browser.
Unfortunately there's a bug with Cypress when used with Chrome that throws that error (see link in PR description).
Committed a parameter in package.json that forces using Firefox.

[paviad]

I'm still getting diff fails of 2%-5% deviation from snapshot...

Example:

[santam85]

We can increase the threshold for screenshot matching, this can happen when the testing environment is not exactly the same, are you perchance using Windows?
We should have the CI job on travis run this and get some feedback from it.

[paviad]

I emailed @valorkin if he doesn't respond maybe I should simply fork the repo to my own user and add you as maintainer.

To your question, I am using windows.

[paviad]

@santam85 I tried to run the test inside a linux container, they still fail... I used the cypress/include:5.1.0 docker image

[santam85]

Opened #1262 to try and address this.
Can you re-enable the CI merge checks on PRs? That way I can get this feedback directly...

[paviad]

Not sure how to do that

[santam85]

My bad, i introduce a syntax error in the travis.yml, will fix it ASAP