diff --git a/.github/workflows/qawolf.yml b/.github/workflows/qawolf.yml new file mode 100644 index 0000000000..bc8fc129ad --- /dev/null +++ b/.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 diff --git a/ui/__tests__/e2e/createFlag.test.js b/ui/__tests__/e2e/createFlag.test.js new file mode 100644 index 0000000000..c4fb46d466 --- /dev/null +++ b/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']"); +}); diff --git a/ui/__tests__/e2e/createSegment.test.js b/ui/__tests__/e2e/createSegment.test.js new file mode 100644 index 0000000000..eee48a2c29 --- /dev/null +++ b/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']"); +}); diff --git a/ui/package.json b/ui/package.json index 9ae1175f8f..595cc161d5 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/qawolf.config.js b/ui/qawolf.config.js new file mode 100644 index 0000000000..4e77b61452 --- /dev/null +++ b/ui/qawolf.config.js @@ -0,0 +1,7 @@ +module.exports = { + attribute: "data-testid,placeholder", + config: "{}", + rootDir: "__tests__/e2e", + testTimeout: 60000, + useTypeScript: false +}; diff --git a/ui/src/components/Flags.vue b/ui/src/components/Flags.vue index 05f59a3fd6..e93134f43f 100644 --- a/ui/src/components/Flags.vue +++ b/ui/src/components/Flags.vue @@ -19,7 +19,10 @@
- New Flag
diff --git a/ui/src/components/Flags/NewFlag.vue b/ui/src/components/Flags/NewFlag.vue index 6921ddb09e..74267b531a 100644 --- a/ui/src/components/Flags/NewFlag.vue +++ b/ui/src/components/Flags/NewFlag.vue @@ -42,6 +42,7 @@
- New Segment
diff --git a/ui/src/components/Segments/NewSegment.vue b/ui/src/components/Segments/NewSegment.vue index 4b5a56adc8..5e2eb40524 100644 --- a/ui/src/components/Segments/NewSegment.vue +++ b/ui/src/components/Segments/NewSegment.vue @@ -49,6 +49,7 @@