test: add "yarn test:e2e:docker" run script to reproduce CI build docker steps locally (#936)

* Add run script to emulate CI build docker e2e testing

* document new run script in readme

* Enable passing through extra arguments to jest

* Fixes to README

Dockerfile

@@ -20,4 +20,4 @@ RUN yarn build:dev
 # since we need our chromium to run in 'headful' mode (for testing chrome extension)
 # we need a fake display (to run headful chromium), which we create by starting a Virtualized X server environment using xvfb-run
 # man page for command: https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html
-CMD xvfb-run --server-args="-screen 0 1024x768x24" yarn test:e2e
+ENTRYPOINT ["/bin/sh", "-c", "xvfb-run --server-args=\"-screen 0 1024x768x24\" yarn test:e2e $@", ""]

README.md

@@ -95,16 +95,13 @@ Please ensure that you have at least the **minimum** recommended versions
 
 We use [jest](https://github.com/facebook/jest) as our test framework and [puppeteer](https://github.com/GoogleChrome/puppeteer) for browser automation in our end-to-end UI tests.
 
-> This project's end to end tests require the ability to run a non-headless chromium process. Because of this, they are incompatible with non-graphical development environments (notably, a default WSL environment on Windows)
-> Issue for this posted [here](https://github.com/microsoft/accessibility-insights-web/issues/853).
+> This project's end to end tests require the ability to run a non-headless chromium process. Because of this, they are incompatible with non-graphical development environments (notably, a default WSL environment on Windows). For an example of emulating a graphical environment using `xvfb`, see [./Dockerfile](./Dockerfile). For details, see [issue #853](https://github.com/microsoft/accessibility-insights-web/issues/853).
 
 #### Using VS Code
 
 To run a task from the command palette, press **Ctrl + Shift + P**, select `Tasks: Run Task`, and select the task you want to run:
 
--   `yarn test` runs all unit tests
 -   `Test current file in VSCode` runs just the tests in the currently-opened test file
--   `yarn test:e2e` runs all end-to-end tests
 
 To debug a test inside VS Code, set a breakpoint and click the debug button or press **F5**.
 
@@ -122,9 +119,14 @@ You can start an interactive watch session that automatically runs tests affecte
 `yarn test:e2e` runs all end-to-end tests - you'll need to run `yarn build` first if you've changed non-test code.
 `yarn test:e2e -u` runs all end-to-end tests and updates snapshot files.
 
-To run a single or small number of test files, run `yarn test {FILE_NAME_REGEX}`
+`yarn test:e2e:docker` runs all end-to-end tests in the same Docker container our linux CI build uses. Prerequisite: [Install Docker](https://docs.docker.com/install/).
 
-Extra command line arguments and flags are passed to Jest. For example, `yarn test --watch` will start an interactive watch session. See more about Jest options [here](https://jestjs.io/docs/en/cli.html).
+Extra command line arguments and flags are passed along to Jest. For example:
+
+-   To run a single or small number of unit test files, run `yarn test {FILE_NAME_REGEX}`
+-   `yarn test --watch` will start an interactive watch session.
+
+See more about Jest options [here](https://jestjs.io/docs/en/cli.html).
 
 To debug using an external tool, run `node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand {RELATIVE_FILE_PATH}`. In Chrome, for example, navigate to `chrome://inspect` and click `Open dedicated DevTools for Node`.
 

package.json

@@ -27,6 +27,9 @@
         "start:electron": "electron drop/electron/extension/bundle/main.bundle.js",
         "test": "jest --projects src/tests/unit",
         "test:e2e": "jest --projects src/tests/end-to-end --runInBand",
+        "test:e2e:docker:build": "docker build -t accessibility-insights-web-e2e .",
+        "test:e2e:docker:run": "docker run -t accessibility-insights-web-e2e",
+        "test:e2e:docker": "npm-run-all --serial test:e2e:docker:build \"test:e2e:docker:run {@}\" --",
         "tslint": "tslint -c ./tslint.json -p ./tsconfig.json",
         "tslint:fix": "tslint --fix -c ./tslint.json -p ./tsconfig.json",
         "watch": "npm-run-all --parallel --race --print-label watch:scss watch:grunt watch:test watch:webpack",