Use cypress for integration tests

[Fryguy]

cc @himdel @chessbyte

This PR is a basic POC of writing integration tests with cypress.

I chose cypress because I like how it doesn't use selenium/phantomjs, but instead spins up a real headless browser and interacts with it directly. The tooling for it is really good with a live interactive UI with time travel and DOM selector discovery, CLI support, screenshot generation on failure, video generation of the run, and a lot more. It only supports Chrome (and Chromium/Canary/Electron) right now, but they are very close to getting Firefox. Even so, for 1st tier testing Chrome should be more than good enough.

Running the tests

In a separate tab, run bundle exec rails server, then...

$ npm run cypress:run

> manageiq-ui-classic@1.0.0 cypress:run /Users/jfrey/dev/manageiq-ui-classic
> cypress run --headless --browser chrome


====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.8.3                                                                              │
  │ Browser:    Chrome 79 (headless)                                                               │
  │ Specs:      1 found (ui/login.spec.js)                                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  ui/login.spec.js                                                                (1 of 1)


  Login
    ✓ login page (27337ms)


  1 passing (27s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     27 seconds                                                                       │
  │ Spec Ran:     ui/login.spec.js                                                                 │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: /Users/jfrey/dev/manageiq-ui-classic/cypress/videos/ui/logi     (1 second)
                          n.spec.js.mp4


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  ui/login.spec.js                         00:27        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
  1 Initial commit for using cypress for integration tests
    ✔  All specs passed!                        00:27        1        1        -        -        -

Running the interactive tool

• npm run cypress:open
• Then browse to manageiq-ui-classic
• You can then "Run all tests", or run specfic ones.

[miq-bot]

Checked commit Fryguy@61a41bb with ruby 2.5.5, rubocop 0.69.0, haml-lint 0.20.0, and yamllint 1.10.0
0 files checked, 0 offenses detected
Everything looks fine. 👍

[himdel]

Heheh, so, I haven't figured out the custom matchers/helpers/whatever yet, but for traversing the menu, this works...

https://www.himdel.eu/menu.spec.js.mp4
https://gist.github.com/himdel/c5e0bfb94201d0525f462656139a5c88

[Fryguy]

I knew you'd give it a shot 😉

Their website has really good docs and a tutorial with best practices, so will probably be a good resource for things like the custom matchers

[Fryguy]

@himdel As discussed, I've unWIPed and I'll make a follow up PR with making it run through Travis.