e2e basic run test

e2e/unit configs

Author: naripok

jest-playwright.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  serverOptions: [
+  {
+    command: 'npm run bundle && npx serve -C -l 8000 dist/sdk',
+    port: 8000,
+    launchTimeout: 10000,
+  },
+  {
+    command: 'npx serve -l 9000 test/fixtures',
+    port: 9000,
+    launchTimeout: 20000,
+  },
+  ]
+}

jest.e2e.config.js

@@ -2,19 +2,14 @@ module.exports = {
   verbose: true,
   preset: 'jest-playwright-preset',
   testMatch: [
-    '**/__tests__/**/*.+(ts|js)',
-    '**/test/e2e/?(*.)+(spec|test).+(ts|js)',
+    '**/test/e2e/**/?(*.)+(test).+(ts|js)',
   ],
   transform: {
     '^.+\\.ts$': 'ts-jest',
   },
   testEnvironmentOptions: {
     'jest-playwright': {
-      browsers: ['firefox'],
-      exitOnPageError: false, // GitHub currently throws errors
-      lauchOptions: {
-        headless: true,
-      },
+      browsers: ['chromium', 'firefox'],
     },
   },
 };

jest.config.js renamed to jest.unit.config.js

@@ -1,6 +1,10 @@
 module.exports = {
+  verbose: true,
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
+  testMatch: [
+    '**/test/unit/**/?(*.)+(test).+(ts|js)',
+  ],
   automock: false,
   setupFiles: ['./test/setupJest.ts'],
   modulePaths: ['<rootDir>'],

package-lock.json

@@ -34,11 +34,12 @@
     "compile-esm": "tsc --module es6 --outDir dist/esm",
     "compile-cjs": "tsc --module commonjs --outDir dist/cjs",
     "build": "run-s clean compile",
-    "bundle": "microbundle --format umd,esm --name edkt",
+    "bundle": "microbundle --format umd,esm --name edkt -o dist/sdk/edgekit.min.js -i src/index.ts",
     "watch": "tsc -w",
-    "test": "jest --verbose",
-    "test:watch": "jest --watch --verbose",
-    "test:coverage": "jest --coverage",
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "jest --config jest.unit.config.js",
+    "test:unit:watch": "jest --config jest.unit.config.js --watch",
+    "test:unit:coverage": "jest --coverage",
     "test:e2e": "jest --config jest.e2e.config.js",
     "test:e2e:watch": "jest --config jest.e2e.config.js --watch",
     "lint": "eslint src test --ext js,ts",
@@ -51,6 +52,7 @@
     "eslint": "^7.3.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
+    "expect-playwright": "^0.3.1",
     "jest": "^26.1.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-playwright-preset": "^1.4.4",

package.json

@@ -1,29 +1,54 @@
 /// <reference types="jest-playwright-preset" />
-/// <reference types="expect-playwright" />
 
-import { mockHtmlResponse } from '../helpers/network';
-import * as examplePage from '../fixtures/examplePage.json';
-import { edkt } from '../../src/index';
+import {
+  makeAudienceDefinition,
+  makeStringArrayQuery,
+} from '../helpers/audienceDefinitions';
+
+type Store = {edkt_matched_audiences: string, edkt_page_views: string}
+
+const getPageViewsFromStore = (store: Store) => JSON.parse(store['edkt_page_views'])
+const getMatchedAudiencesFromStore = (store: Store) => JSON.parse(store['edkt_matched_audiences'])
+const getLocalStorageFromPage = (): Promise<Store> => page.evaluate('localStorage')
 
 describe('edgekit basic run behaviour', () => {
-  const testUrl = 'https://example.com/';
+  const testUrl = 'http://localhost:9000';
+
+  const sportAudience = makeAudienceDefinition({
+    id: 'sport_id',
+    occurrences: 1,
+    definition: [makeStringArrayQuery(['sport'])],
+  });
+
+  const sportPageFeatures = {
+    keywords: {
+      version: 1,
+      value: ['sport'],
+    }
+  }
+
+  const runEdkt = async () =>
+    await page.evaluate((params) => (<any>window).edkt.edkt.run(params), {
+      audienceDefinitions: [sportAudience],
+      pageFeatures: sportPageFeatures,
+      omitGdprConsent: true,
+    })
+
+  beforeAll(async () => {
+    await page.goto(`${testUrl}?edktDebug=true`, { waitUntil: 'networkidle' });
+  })
 
-  beforeEach(async () => {
-    mockHtmlResponse(page, `${testUrl}?edktDebug=true`, examplePage);
+  it('runs and adds pageView to store', async () => {
+    await runEdkt()
+    const store = await getLocalStorageFromPage()
+    expect(getPageViewsFromStore(store)).toHaveLength(1)
+    expect(getMatchedAudiencesFromStore(store)).toHaveLength(0)
   });
 
-  it('runs', async () => {
-    await page.goto(`${testUrl}?edktDebug=true`, { waitUntil: 'load' });
-    await page.evaluate(
-      (params) => {
-        console.log(localStorage);
-        edkt.run(params);
-      },
-      {
-        audienceDefinitions: [],
-        pageFeatures: {},
-        omitGdprConsent: true,
-      }
-    );
+  it('adds another pageView and match audienceDefinition', async () => {
+    await runEdkt()
+    const store = await getLocalStorageFromPage()
+    expect(getPageViewsFromStore(store)).toHaveLength(2)
+    expect(getMatchedAudiencesFromStore(store)).toHaveLength(1)
   });
 });

test/e2e/run.test.ts

@@ -0,0 +1,27 @@
+<html>
+  <head>
+    <script async>
+      (function () {
+        var edktInitializor = (window.edktInitializor =
+          window.edktInitializor || {});
+        if (!edktInitializor.invoked) {
+          edktInitializor.invoked = true;
+          edktInitializor.load = function (e) {
+            var p = e ? e : 'sdk';
+            var n = document.createElement('script');
+            n.type = 'text/javascript';
+            n.async = true;
+            n.src = 'http://localhost:8000/edgekit.min.umd.js';
+            var a = document.getElementsByTagName('script')[0];
+            a.parentNode.insertBefore(n, a);
+          };
+          edktInitializor.load();
+        }
+      })();
+    </script>
+  </head>
+
+  <body>
+    <h2>Edge | Jest Test</h2>
+  </body>
+</html>

test/fixtures/examplePage.json

@@ -18,7 +18,6 @@
     "noFallthroughCasesInSwitch": true,
     "esModuleInterop": true,
     "target": "es5",
-    "module": "es6",
-    "resolveJsonModule": true
+    "module": "es6"
   }
 }