[FOLIO-1035] Add chrome and FF to Nodejs build environment Created: 17/Jan/18  Updated: 12/Nov/18  Resolved: 03/May/18

Status: Closed
Project: FOLIO
Components: None
Affects versions: None
Fix versions: None

Type: Task Priority: P2
Reporter: John Malconian Assignee: John Malconian
Resolution: Done Votes: 0
Labels: ci, sprint31, sprint32, sprint33, sprint37
Remaining Estimate: Not Specified
Time Spent: 2 days, 2 hours
Original estimate: Not Specified

Sprint:

 Description   

In order to support browser-based unit tests using karma, for example, add Chrome to Nodejs build environment in Docker. There is some good information here on how to set this up. It's a little tricky with Docker.

https://hackernoon.com/running-karma-tests-with-headless-chrome-inside-docker-ae4aceb06ed3
https://github.com/eirslett/chrome-karma-docker



 Comments   
Comment by John Malconian [ 24/Apr/18 ]

Steps to support karma with Chrome browser in FOLIO Jenkins build environment:

  • Install Chrome:
wget -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" \
    >> /etc/apt/sources.list.d/google.list' && \
    apt-get -q update  && apt-get install -y google-chrome-stable
  • Set env CHROME_BIN - 'export CHROME_BIN=/usr/bin/google-chrome-stable'
  • Test using ui-eholdings:
jenkins@c335a236ad0d:~/ui-eholdings$ yarn test --karma.singleRun --karma.browsers=ChromeHeadless
yarn run v1.5.1
$ stripes test karma demo/stripes.config.js --karma.singleRun --karma.browsers=ChromeHeadless
Starting Karma tests...
[2018-04-24 17:55:55.233] [DEBUG] config - No config file specified.

START:
webpack: wait until bundle finished: 

webpack: Compiled successfully.
24 04 2018 17:56:45.876:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
24 04 2018 17:56:45.877:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
24 04 2018 17:56:46.458:INFO [launcher]: Starting browser ChromeHeadless
24 04 2018 17:56:47.796:INFO [HeadlessChrome 66.0.3359 (Linux 0.0.0)]: Connected on socket RhNoMNw7F4FC-ZxdAAAA with id 50278796
  Error retrieving backend
    when trying to use the app
      ✔ informs user that an error has occurred
  With no backend at all
    when trying to use the app
      ✔ blocks access to the eholdings app and tells me that I need to install a backend
  With unconfigured backend
    when trying to use the app
      ✔ blocks access to the eholdings app and points you to the configuration screen
    when visiting the KB auth form
      ✔ shows the form action buttons
      filling in incomplete data
        ✔ displays an errored state for the blank customer id
        ✔ displays an errored state for the blank api key
      filling in incomplete data, then filling in more data
        ✔ does not display an error state for customer id
        ✔ does not display an error state for api key
  With valid backend configuration
    when visiting the KB auth form
      ✔ has a field for the ebsco customer id
      ✔ has a field for the ebsco RM API key
      ✔ field for the ebsco RM API key appears with text as password hidden
      ✔ does not have visible form action buttons
      filling in invalid data
        ✔ reports the error to the interface
      filling in complete data
        ✔ shows the form actions
        saving the changes
          ✖ disables the save button (skipped)
          ✖ indicates that it is working (skipped)
          when the changes succeed
            ✔ hides the form actions
        when saving the changes fail
          ✔ shows the form action buttons
          ✔ enables the save button
          ✔ shows an error message
        when the validation fails
          ✔ does not enable the save button
        then hitting the cancel button
          ✔ reverts the changes
...

Finished in 4 mins 22.871 secs / 21.691 secs @ 18:01:11 GMT+0000 (UTC)

SUMMARY:
✔ 810 tests completed
ℹ 18 tests skipped
Karma exited with 0
Done in 318.32s.

Comment by John Malconian [ 24/Apr/18 ]

With FF:

  • Install FF from Ubuntu distro - sudo 'apt-get install firefox'
jenkins@c335a236ad0d:~/ui-eholdings$ yarn test --karma.singleRun --karma.browsers=FirefoxHeadless
yarn run v1.5.1
$ stripes test karma demo/stripes.config.js --karma.singleRun --karma.browsers=FirefoxHeadless
Starting Karma tests...
[2018-04-24 18:38:36.573] [DEBUG] config - No config file specified.

START:
webpack: wait until bundle finished: 

webpack: Compiled successfully.
24 04 2018 18:39:14.157:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
24 04 2018 18:39:14.158:INFO [launcher]: Launching browser FirefoxHeadless with unlimited concurrency
24 04 2018 18:39:14.162:INFO [launcher]: Starting browser FirefoxHeadless
24 04 2018 18:39:16.258:INFO [Firefox 59.0.0 (Ubuntu 0.0.0)]: Connected on socket vxuxis6_ZnBxIa41AAAA with id 62177346
  Error retrieving backend
    when trying to use the app
      ✔ informs user that an error has occurred
  With no backend at all
    when trying to use the app
      ✔ blocks access to the eholdings app and tells me that I need to install a backend
  With unconfigured backend
    when trying to use the app
      ✔ blocks access to the eholdings app and points you to the configuration screen
...
Finished in 7 mins 30.32 secs / 32.042 secs @ 18:46:48 GMT+0000 (UTC)

SUMMARY:
✔ 810 tests completed
ℹ 18 tests skipped
Karma exited with 0
Done in 494.01s.
  • Install latest FF ESR from Mozilla:

sudo apt-get remove firefox
wget -O /tmp/firefox.tar.bz2 "https://download.mozilla.org/?product=firefox-esr-latest&os=linux64&lang=en-US"
sudo tar -C /opt -xjf /tmp/firefox.tar.bz2
export FIREFOX_BIN=/opt/firefox/firefox

The mozilla distribution seems less straight-forward. Even though I specify 'FirefoxHeadless' it doesn't want to run unless I start a virtual framebuffer and set my display:

xvfb :10 &
export DISPLAY :10

jenkins@c335a236ad0d:~/ui-eholdings$ yarn test --karma.singleRun --karma.browsers=FirefoxHeadless
yarn run v1.5.1
$ stripes test karma demo/stripes.config.js --karma.singleRun --karma.browsers=FirefoxHeadless
Starting Karma tests...
[2018-04-24 19:03:20.298] [DEBUG] config - No config file specified.

START:
webpack: wait until bundle finished:

webpack: Compiled successfully.
24 04 2018 19:03:57.997:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
24 04 2018 19:03:57.998:INFO [launcher]: Launching browser FirefoxHeadless with unlimited concurrency
24 04 2018 19:03:58.278:INFO [launcher]: Starting browser FirefoxHeadless
24 04 2018 19:04:00.369:INFO [Firefox 52.0.0 (Linux 0.0.0)]: Connected on socket JDpwm_Mwqgc3gUcvAAAA with id 84729199
Error retrieving backend
when trying to use the app
✔ informs user that an error has occurred
With no backend at all
when trying to use the app
✔ blocks access to the eholdings app and tells me that I need to install a backend
With unconfigured backend
when trying to use the app
✔ blocks access to the eholdings app and points you to the configuration screen
...


Anyway, it works.

Comment by John Malconian [ 26/Apr/18 ]

The FF package that's included in the Ubuntu distro includes a headless option, but the Mozilla distro does not, therefore, a virtulal framebuffer (Xvfb) needs to be running and 'DISPLAY' needs to be set to run the latter. FOLIO Jenkins build environment will include FF from Ubuntu which is updated frequently to the latest version as well as FF ESR from the Mozilla - which is the "long-term support" version. Chrome "stable" will also be included, but in order to run properly in a docker container, a custom Chrome launcher must be defined in karma.conf.js:

 customLaunchers: {
      chrome_docker: {
        base: 'ChromeHeadless',
        flags: [
           '--no-sandbox',
           '--disable-web-security'
        ]
}
Comment by John Malconian [ 01/May/18 ]

The FOLIO jenkins build image now includes Chrome, the latest version of Firefox for Ubuntu, as well as Firefox ESR. In order for Jenkins to run Chrome-based karma tests, a customLauncher Chrome browser needs to be added to the karma configuration. See customLaunchers configuration for Chrome in the previous comment above for example. If there is interest in pursuing this, I will implement a CI script that will run karma-based testing for UI-based repos as an opt-in per project configuration.

Comment by John Malconian [ 03/May/18 ]

FOLIO Jenkins now supports Chrome and Firefox browser-based testing with Karma. See https://github.com/folio-org/stripes-components/pull/359 for example implementation.

Steps needed:
1. Add karma.conf.js to top-level project directory that defines customLauncher for Chrome for Docker called 'ChromeDocker'
2. Add the following two parameters to top-level Jenkinsfile:

  • runTest = 'yes' (Tells Jenkins to run 'yarn test')
  • runTestOptions = '--karma.singleRun --karma.browsers=ChromeDocker' (additional options to pass to 'yarn test')
Generated at Thu Feb 08 23:10:21 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.