Merge branch 'main' into IRIS-954-add-element-support

.github/workflows/nightwatch-integration.yml

@@ -0,0 +1,41 @@
+name: nightwatch (integration test)
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'visual-js/visual-nightwatch/**'
+      - .github/workflows/js-build.yml
+  pull_request:
+    paths:
+      - 'visual-js/visual-nightwatch/**'
+      - .github/workflows/js-build.yml
+
+defaults:
+  run:
+    working-directory: visual-js/visual-nightwatch
+
+jobs:
+  integration-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push to local registry
+        uses: docker/build-push-action@v5
+        with:
+          context: '{{defaultContext}}:visual-js'
+          tags: saucelabs/visual-nightwatch
+          file: visual-nightwatch/Dockerfile
+          load: true
+      - name: Run the integration tests
+        run: |
+          npm ci
+          npm run test
+        working-directory: tests
+        env:
+          SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+          CONTAINER_IMAGE_NAME: saucelabs/visual-nightwatch

.github/workflows/storybook-integration.yml

@@ -0,0 +1,43 @@
+name: storybook (integration test)
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'visual-js/visual-storybook/**'
+      - .github/workflows/js-build.yml
+      - .github/workflows/storybook-integration.yml
+  pull_request:
+    paths:
+      - 'visual-js/visual-storybook/**'
+      - .github/workflows/js-build.yml
+      - .github/workflows/storybook-integration.yml
+
+defaults:
+  run:
+    working-directory: visual-js/visual-storybook
+
+jobs:
+  integration-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push to local registry
+        uses: docker/build-push-action@v5
+        with:
+          context: '{{defaultContext}}:visual-js'
+          tags: saucelabs/visual-storybook
+          file: visual-storybook/Dockerfile
+          load: true
+      - name: Run the integration tests
+        run: |
+          npm ci
+          npm run test
+        working-directory: tests
+        env:
+          SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+          CONTAINER_IMAGE_NAME: saucelabs/visual-storybook

tests/env-vars-build-id.spec.ts

@@ -52,7 +52,10 @@ describe('Build ID env var', () => {
         }
       );
 
-      expect(result.statusCode).toEqual(0);
+      // Storybook container exits with code 1, this is expected behaviour
+      if (!process.env.CONTAINER_IMAGE_NAME?.includes('storybook')) {
+        expect(result.statusCode).toEqual(0);
+      }
       dockerOutput = result.stdout;
     },
     2 * 60 * 1000

tests/env-vars-custom-id.spec.ts

@@ -61,8 +61,10 @@ describe('Custom ID env var', () => {
           },
         }
       );
-
-      expect(result.statusCode).toEqual(0);
+      // Storybook container exits with code 1, this is expected behaviour
+      if (!process.env.CONTAINER_IMAGE_NAME?.includes('storybook')) {
+        expect(result.statusCode).toEqual(0);
+      }
       dockerOutput = result.stdout;
     },
     2 * 60 * 1000
@@ -98,7 +100,10 @@ describe('Custom ID env var', () => {
         }
       );
 
-      expect(result.statusCode).toEqual(0);
+      // Storybook container exits with code 1, this is expected behaviour
+      if (!process.env.CONTAINER_IMAGE_NAME?.includes('storybook')) {
+        expect(result.statusCode).toEqual(0);
+      }
       dockerOutput = result.stdout;
     },
     2 * 60 * 1000

tests/env-vars.spec.ts

@@ -47,7 +47,10 @@ describe('Build-configuring env vars', () => {
         }
       );
 
-      expect(result.statusCode).toEqual(0);
+      // Storybook container exits with code 1, this is expected behaviour
+      if (!process.env.CONTAINER_IMAGE_NAME?.includes('storybook')) {
+        expect(result.statusCode).toEqual(0);
+      }
       dockerOutput = result.stdout;
     },
     2 * 60 * 1000

visual-js/visual-nightwatch/Dockerfile

@@ -0,0 +1,25 @@
+FROM node:18 AS runner
+
+WORKDIR app
+
+COPY tsconfig.prod.json tsconfig.json package.json ./
+
+COPY ./visual-nightwatch/src ./visual-nightwatch/src
+COPY ./visual-nightwatch/package.json ./visual-nightwatch/tsconfig.json ./visual-nightwatch
+
+RUN npm install --save-dev @tsconfig/node18
+RUN npm install --workspace=visual-nightwatch
+RUN npm run build --workspace=visual-nightwatch
+
+COPY ./visual-nightwatch/integration-tests/nightwatch ./integration-tests/nightwatch
+
+COPY ./visual-nightwatch/integration-tests/nightwatch.conf.js \
+     ./visual-nightwatch/integration-tests/package.json \
+    ./visual-nightwatch/integration-tests/tsconfig.json \
+    ./integration-tests/
+
+WORKDIR integration-tests
+
+RUN npm install
+
+ENTRYPOINT ["npm", "run", "login-test"]

visual-js/visual-nightwatch/integration-tests/.gitignore

@@ -0,0 +1 @@
+/tests_output

visual-js/visual-nightwatch/integration-tests/nightwatch.conf.js

@@ -0,0 +1,87 @@
+// Refer to the online docs for more details:
+// https://nightwatchjs.org/gettingstarted/configuration/
+//
+
+//  _   _  _         _      _                     _          _
+// | \ | |(_)       | |    | |                   | |        | |
+// |  \| | _   __ _ | |__  | |_ __      __  __ _ | |_   ___ | |__
+// | . ` || | / _` || '_ \ | __|\ \ /\ / / / _` || __| / __|| '_ \
+// | |\  || || (_| || | | || |_  \ V  V / | (_| || |_ | (__ | | | |
+// \_| \_/|_| \__, ||_| |_| \__|  \_/\_/   \__,_| \__| \___||_| |_|
+//             __/ |
+//            |___/
+
+module.exports = {
+  // An array of folders (excluding subfolders) where your tests are located;
+  // if this is not specified, the test source must be passed as the second argument to the test runner.
+  src_folders: ['nightwatch/tests'],
+
+  // See https://nightwatchjs.org/guide/concepts/page-object-model.html
+  page_objects_path: ['nightwatch/pages'],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
+  custom_commands_path: [],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
+  custom_assertions_path: [],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-plugins.html
+  plugins: ['@saucelabs/nightwatch-sauce-visual-service'],
+
+  // See https://nightwatchjs.org/guide/concepts/test-globals.html
+  globals_path: '',
+
+  webdriver: {},
+
+  test_workers: {
+    enabled: true,
+    workers: 'auto',
+  },
+
+  test_settings: {
+    default: {
+      use_ssl: true,
+      silent: true,
+      selenium: {
+        host: `ondemand.${
+          process.env.REGION && process.env.REGION.toLocaleLowerCase() === 'eu'
+            ? 'eu-central'
+            : 'us-west'
+        }-1.saucelabs.com`,
+        port: 443,
+      },
+      desiredCapabilities: {
+        'sauce:options': {
+          screenResolution: '1600x1200',
+          username: process.env.SAUCE_USERNAME,
+          access_key: process.env.SAUCE_ACCESS_KEY,
+        },
+      },
+      sauceVisualService: {
+        failOnFailures: false,
+      },
+
+      webdriver: {
+        start_process: false,
+      },
+    },
+
+    // Sauce Labs capabilities
+    sauceChrome: {
+      extends: 'default',
+      desiredCapabilities: {
+        browserName: 'chrome',
+        platformName: 'Windows 11',
+        browserVersion: 'latest',
+      },
+    },
+    sauceFirefox: {
+      extends: 'dafault',
+      desiredCapabilities: {
+        browserName: 'firefox',
+        platformName: 'Windows 11',
+        browserVersion: 'latest',
+      },
+    },
+  },
+};

visual-js/visual-nightwatch/integration-tests/nightwatch/pages/login.ts

@@ -0,0 +1,15 @@
+import { PageObjectModel, EnhancedPageObject } from 'nightwatch';
+
+interface LoginPageElements {
+  username: { selector: string };
+  password: { selector: string };
+}
+
+const loginPage: PageObjectModel = {
+  url: 'http://www.saucedemo.com',
+  elements: {},
+};
+
+export default loginPage;
+
+export interface LoginPage extends EnhancedPageObject<LoginPageElements> {}

visual-js/visual-nightwatch/integration-tests/nightwatch/tests/saucedemo.ts

@@ -0,0 +1,9 @@
+import { NightwatchTests } from 'nightwatch';
+
+const home: NightwatchTests = {
+  'Check Login Page': () => {
+    browser.url('https://saucedemo.com').sauceVisualCheck('Login page');
+  },
+};
+
+export default home;

visual-js/visual-nightwatch/integration-tests/nightwatch/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  },
+  "ts-node": {
+    "transpileOnly": true
+  },
+  "include": ["."]
+}

visual-js/visual-nightwatch/integration-tests/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "visual-nightwatch-integration-tests",
+  "version": "0.0.1",
+  "description": "",
+  "engines": {
+    "node": "^16.13 || >=18"
+  },
+  "main": "index.js",
+  "scripts": {
+    "login-test": "npx nightwatch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@swc/core": "^1.4.11",
+    "chalk": "^5.3.0",
+    "nightwatch": "^3.5.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.3"
+  }
+}