diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml new file mode 100644 index 0000000..0064850 --- /dev/null +++ b/.github/workflows/tests.yml @@ -0,0 +1,47 @@ +name: Tests + +on: [push] + +jobs: + unit-tests: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - name: Cache node modules + uses: actions/cache@v1 + with: + path: ~/.npm + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-node- + - name: Use Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + - name: Install dependencies (npm ci) + run: npm ci + working-directory: ./phone-store + - name: Run unit tests (npm run test) + run: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI + working-directory: ./phone-store + e2e-tests: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - name: Cache node modules + uses: actions/cache@v1 + with: + path: ~/.npm + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-node- + - name: Use Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + - name: Install dependencies (npm ci) + run: npm ci + working-directory: ./phone-store + - name: Run e2e tests + run: npm run e2eci + working-directory: ./phone-store diff --git a/README.md b/README.md index fcd5689..331b8df 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,23 @@ We will also not provide a complete tutorial on E2E tests with protractor or uni - :question: This creates a directory called `phone-store` in the project. Do we want to change the name to `client` to be more like our later structures? - At this point you can go into the `phone-store` directory and run `ng server` and see our little project! :smile: It of course doesn't actually _do_ anything interesting yet, but it does work. +### Setup GitHub Actions + +@floogulinc set up the GitHub Actions based on work done in S20. +These are all laid out in [this pull request](https://github.com/UMM-CSci-3601/revised-angular-tutorial/pull/3). + +For reasons we don't fully understand, this requires installing +some `webdriver-manager` binaries that didn't get installed on +their own. Without them, we can't run the `e2e` tests. + +Running: + +```bash +node_modules/protractor/bin/webdriver-manager update +``` + +installed the necessary binaries and all the tests ran and passed. + ## Start making components The tutorial starts you off with two components: diff --git a/phone-store/angular.json b/phone-store/angular.json index fa7e5a7..5141fdc 100644 --- a/phone-store/angular.json +++ b/phone-store/angular.json @@ -117,7 +117,8 @@ "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "phone-store:serve" + "devServerTarget": "phone-store:serve", + "webdriverUpdate": false }, "configurations": { "production": { diff --git a/phone-store/e2e/protractor-ci.conf.js b/phone-store/e2e/protractor-ci.conf.js new file mode 100644 index 0000000..d36bc73 --- /dev/null +++ b/phone-store/e2e/protractor-ci.conf.js @@ -0,0 +1,15 @@ +const config = require('./protractor.conf').config; + +config.capabilities = { + browserName: 'chrome', + chromeOptions: { + args: ['--headless', '--no-sandbox'] + } +}; + +config.highlightDelay = undefined; + +config.seleniumServerJar = process.env.SELENIUM_JAR_PATH; +config.chromeDriver = process.env.CHROMEWEBDRIVER + '/chromedriver'; + +exports.config = config; diff --git a/phone-store/e2e/protractor.conf.js b/phone-store/e2e/protractor.conf.js index 7c798cf..d162761 100644 --- a/phone-store/e2e/protractor.conf.js +++ b/phone-store/e2e/protractor.conf.js @@ -15,7 +15,7 @@ exports.config = { capabilities: { browserName: 'chrome' }, - directConnect: true, + directConnect: false, baseUrl: 'http://localhost:4200/', framework: 'jasmine', jasmineNodeOpts: { @@ -28,5 +28,7 @@ exports.config = { project: require('path').join(__dirname, './tsconfig.json') }); jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; \ No newline at end of file + }, + useBlockingProxy: true, + highlightDelay: 200 // How long it waits and highlights before interacting with an element +}; diff --git a/phone-store/karma.conf.js b/phone-store/karma.conf.js index 1b1f7f8..25d98ff 100644 --- a/phone-store/karma.conf.js +++ b/phone-store/karma.conf.js @@ -26,6 +26,12 @@ module.exports = function (config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], + customLaunchers: { + ChromeHeadlessCI: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + }, singleRun: false, restartOnFileChange: true }); diff --git a/phone-store/package.json b/phone-store/package.json index f98436a..b7b0d4f 100644 --- a/phone-store/package.json +++ b/phone-store/package.json @@ -8,6 +8,8 @@ "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", + "pree2e": "node node_modules/protractor/bin/webdriver-manager -- update --gecko false", + "e2eci": "ng e2e --protractor-config=e2e/protractor-ci.conf.js", "postinstall": "ngcc" }, "private": true,