Set up e2e tests

.github/workflows/qawolf.yml

@@ -0,0 +1,68 @@
+name: qawolf
+on:
+  push:
+    # test every branch
+    # edit below if you only want certain branches tested
+    branches: "*"
+  # schedule:
+  #   # test on schedule using cron syntax
+  #   - cron: "0 * * * *" # every hour
+jobs:
+  test:
+    runs-on: ubuntu-18.04
+
+    timeout-minutes: 20
+
+    env:
+      working-directory: ./ui
+
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt update
+          # chromium dependencies
+          sudo apt-get install libgbm1
+          # webkit dependencies
+          sudo apt-get install libwoff1 libopus0 libwebp6 libwebpdemux2 libenchant1c2a libgudev-1.0-0 libsecret-1-0 libhyphen0 libgdk-pixbuf2.0-0 libegl1 libgles2 libevent-2.1-6 libnotify4 libvpx5 libxslt1.1
+          # ffmpeg
+          sudo apt-get install -y ffmpeg
+
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v1
+
+      - run: npx wait-on http://localhost:8080
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - run: yarn
+        working-directory: ${{env.working-directory}}
+
+      - run: yarn qawolf test --headless
+        env:
+          FFMPEG_PATH: /usr/bin/ffmpeg # for recording video
+          QAW_ARTIFACT_PATH: ${{ github.workspace }}/artifacts
+        working-directory: ${{env.working-directory}}
+
+      - name: Upload Artifacts
+        if: always()
+        uses: actions/upload-artifact@master
+        with:
+          name: qawolf
+          path: ${{ github.workspace }}/artifacts
+
+    services:
+      flipt:
+        image: markphelps/flipt:latest
+        ports:
+          - 8080:8080

ui/__tests__/e2e/createFlag.test.js

@@ -0,0 +1,29 @@
+const qawolf = require("qawolf");
+
+let browser;
+let page;
+
+beforeAll(async () => {
+  browser = await qawolf.launch();
+  const context = await browser.newContext();
+  await qawolf.register(context);
+  page = await context.newPage();
+});
+
+afterAll(async () => {
+  await qawolf.stopVideos();
+  await browser.close();
+});
+
+test("createFlag", async () => {
+  await page.goto("localhost:8080");
+  await page.click("[data-testid='new-flag']");
+  await page.click("[placeholder='Flag name']");
+  await page.type("[placeholder='Flag name']", "Awesome new feature");
+  await page.click("[placeholder='Flag description']");
+  await page.type(
+    "[placeholder='Flag description']",
+    "Our product manager cannot wait to ship this!"
+  );
+  await page.click("[data-testid='create-flag']");
+});

ui/__tests__/e2e/createSegment.test.js

@@ -0,0 +1,30 @@
+const qawolf = require("qawolf");
+
+let browser;
+let page;
+
+beforeAll(async () => {
+  browser = await qawolf.launch();
+  const context = await browser.newContext();
+  await qawolf.register(context);
+  page = await context.newPage();
+});
+
+afterAll(async () => {
+  await qawolf.stopVideos();
+  await browser.close();
+});
+
+test("createSegment", async () => {
+  await page.goto("localhost:8080");
+  await page.click("[data-testid='segments']");
+  await page.click("[data-testid='new-segment']");
+  await page.click("[placeholder='Segment name']");
+  await page.type("[placeholder='Segment name']", "Power users");
+  await page.click("[placeholder='Segment description']");
+  await page.type(
+    "[placeholder='Segment description']",
+    "Users that are willing to try out advanced functionality"
+  );
+  await page.click("[data-testid='create-segment']");
+});

ui/package.json

@@ -64,16 +64,18 @@
     "file-loader": "^4.2.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.9.0",
+    "jest": "~25.1.0",
     "mini-css-extract-plugin": "^0.8.0",
     "node-notifier": "^6.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "ora": "^4.0.3",
+    "playwright": "~0.12.1",
     "portfinder": "^1.0.13",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-url": "^8.0.0",
     "prettier": "^1.15.3",
+    "qawolf": "~0.12.4",
     "rimraf": "^3.0.0",
     "semver": "^6.3.0",
     "shelljs": "^0.8.3",

ui/qawolf.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  attribute: "data-testid,placeholder",
+  config: "{}",
+  rootDir: "__tests__/e2e",
+  testTimeout: 60000,
+  useTypeScript: false
+};

ui/src/components/Flags.vue

@@ -19,7 +19,10 @@
         </div>
         <div class="level-right">
           <div class="level-item">
-            <RouterLink class="button is-primary" :to="{ name: 'new-flag' }"
+            <RouterLink
+              data-testid="new-flag"
+              class="button is-primary"
+              :to="{ name: 'new-flag' }"
               >New Flag</RouterLink
             >
           </div>

ui/src/components/Flags/NewFlag.vue

@@ -42,6 +42,7 @@
               <div class="field is-grouped">
                 <div class="control">
                   <button
+                    data-testid="create-flag"
                     class="button is-primary"
                     :disabled="!canCreateFlag"
                     @click.prevent="createFlag()"

ui/src/components/Nav.vue

@@ -25,11 +25,13 @@
       <div class="navbar-start">
         <RouterLink
           class="navbar-item has-text-weight-semibold"
+          data-testid="flags"
           :to="{ name: 'flags' }"
           >Flags</RouterLink
         >
         <RouterLink
           class="navbar-item has-text-weight-semibold"
+          data-testid="segments"
           :to="{ name: 'segments' }"
           >Segments</RouterLink
         >

ui/src/components/Segments.vue

@@ -19,7 +19,10 @@
         </div>
         <div class="level-right">
           <div class="level-item">
-            <RouterLink class="button is-primary" :to="{ name: 'new-segment' }"
+            <RouterLink
+              data-testid="new-segment"
+              class="button is-primary"
+              :to="{ name: 'new-segment' }"
               >New Segment</RouterLink
             >
           </div>

ui/src/components/Segments/NewSegment.vue

@@ -49,6 +49,7 @@
               <div class="field is-grouped">
                 <div class="control">
                   <button
+                    data-testid="create-segment"
                     class="button is-primary"
                     :disabled="!canCreateSegment"
                     @click.prevent="createSegment()"