chore: migrate integration test suite to pw (#1769)

* chore: migrate integration test suite to pw

* chore: update circle config

* chore: try break

* chore: revert break

.circleci/config.yml

@@ -150,7 +150,7 @@ jobs:
           command: yarn run test:mashup --chrome.browserWSEndpoint "ws://localhost:3000" --no-launch
       - run:
           name: Test integration
-          command: yarn run test:integration --chrome.browserWSEndpoint "ws://localhost:3000" --no-launch
+          command: yarn run test:integration
       - run: npx playwright install --with-deps chromium
       - run:
           name: Test rendering

package.json

@@ -22,7 +22,7 @@
     "test:coverage": "jest --coverage",
     "test:mashup": "aw puppet -c aw.config.cjs --testExt '*.int.*js' --glob 'test/mashup/**/*.int.*js'",
     "test:rendering": "playwright test --config=./test/rendering/playwright.config.rendering.js --quiet",
-    "test:integration": "aw puppet -c aw.config.cjs --testExt '*.int.*js' --glob 'test/integration/**/*.int.*js'",
+    "test:integration": "playwright test test/integration",
     "test:component": "playwright test test/component",
     "prepare": "husky install"
   },

test/integration/table/table.int.cjs

@@ -1,52 +0,0 @@
-const path = require('path');
-const serve = require('@nebula.js/cli-serve'); // eslint-disable-line
-const puppeteerUtil = require('../../utils/puppeteer-util.cjs');
-
-describe('Table visualization', () => {
-  const content = '.simple-table';
-  let s;
-
-  before(async () => {
-    s = await serve({
-      entry: path.resolve(__dirname, 'sn-table'),
-      config: 'nebula.config.cjs',
-      open: false,
-      fixturePath: 'test/integration/table',
-    });
-    puppeteerUtil.addListeners(page);
-  });
-
-  after(() => {
-    s.close();
-    puppeteerUtil.removeListeners(page);
-  });
-
-  describe('basic', () => {
-    before(async () => {
-      const url = `${s.url}/render?fixture=table.fix.js`;
-      await page.goto(url);
-
-      await page.waitForSelector(content, { visible: true });
-    });
-
-    it('should render a div', async () => {
-      const text = await page.$eval('.hello', (el) => el.textContent);
-      expect(text).to.equal('A simple table');
-    });
-
-    it('should be able to load json file', async () => {
-      const text = await page.$eval('.json-value', (el) => el.textContent);
-      expect(text).to.equal('Hi json!');
-    });
-
-    it('should be able to load css', async () => {
-      const bg = await page.$eval('.hello', (el) => window.getComputedStyle(el).backgroundColor);
-      expect(bg).to.equal('rgb(144, 41, 140)');
-    });
-
-    it('should have some data', async () => {
-      const text = await page.$eval('.table table tbody td', (el) => el.textContent);
-      expect(text).to.equal('A');
-    });
-  });
-});

test/integration/table/table.test.cjs

@@ -0,0 +1,52 @@
+const path = require('path');
+const serve = require('@nebula.js/cli-serve');
+const { test, expect } = require('@playwright/test');
+
+const content = '.simple-table';
+
+test.describe('Table visualization', () => {
+  let s;
+
+  test.beforeAll(async () => {
+    s = await serve({
+      entry: path.resolve(__dirname, 'sn-table'),
+      config: 'nebula.config.cjs',
+      open: false,
+      fixturePath: 'test/integration/table',
+    });
+  });
+
+  test.afterAll(async () => {
+    if (s && s.close) await s.close();
+  });
+
+  test.describe('basic', () => {
+    test.beforeEach(async ({ page }) => {
+      const url = `${s.url}/render?fixture=table.fix.js`;
+      await page.goto(url);
+      await page.waitForSelector(content, { state: 'visible' });
+    });
+
+    test('should render a div', async ({ page }) => {
+      const text = await page.textContent('.hello');
+      expect(text).toBe('A simple table');
+    });
+
+    test('should be able to load json file', async ({ page }) => {
+      const text = await page.textContent('.json-value');
+      expect(text).toBe('Hi json!');
+    });
+
+    test('should be able to load css', async ({ page }) => {
+      const bg = await page.evaluate(() => {
+        return window.getComputedStyle(document.querySelector('.hello')).backgroundColor;
+      });
+      expect(bg).toBe('rgb(144, 41, 140)');
+    });
+
+    test('should have some data', async ({ page }) => {
+      const text = await page.textContent('.table table tbody td');
+      expect(text).toBe('A');
+    });
+  });
+});