Add ci and convert to vitest

.github/workflows/test.yml

@@ -0,0 +1,44 @@
+name: CI
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: npm list
+      - name: Install node-canvas dependencies
+        run: |
+          sudo apt update
+          sudo apt install -y libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev librsvg2-dev libxt-dev libxi-dev libgl-dev libxext-dev
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Unit tests
+        run: xvfb-run npm run test:unit
+      - name: E2e tests
+        run: xvfb-run npm run test:e2e

package.json

@@ -11,8 +11,8 @@
     "watch": "rollup -c rollup.build.js -w",
     "demo": "cd demo && rollup -c && cd -",
     "watch:demo": "cd demo && rollup -c -w && cd -",
-    "test:unit": "ava test/unit/core.js && ava test/unit/kampos.js",
-    "test:e2e": "ava test/e2e/*.js",
+    "test:unit": "vitest test/unit/core.js && vitest test/unit/kampos.js",
+    "test:e2e": "vitest test/e2e/*.js",
     "test": "npm run test:unit && npm run test:e2e",
     "docs": "documentation build src/index.js -f html -o docs -c documentation.yml",
     "check": "npm-check -u",
@@ -38,7 +38,6 @@
   "homepage": "https://wix-incubator.github.io/kampos/",
   "devDependencies": {
     "@babel/core": "^7.24.7",
-    "ava": "^6.1.3",
     "documentation": "^14.0.3",
     "finalhandler": "^1.2.0",
     "get-port": "^6.1.2",
@@ -53,6 +52,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-progress": "^1.1.2",
-    "serve-static": "^1.15.0"
+    "serve-static": "^1.15.0",
+    "vitest": "^2.0.2"
   }
 }

test/e2e/context-restore.js

@@ -1,4 +1,4 @@
-import test from 'ava';
+import { expect, test, beforeAll, afterAll, beforeEach, afterEach } from 'vitest'
 import path from 'path';
 import http from 'http';
 import pify from 'pify';
@@ -24,8 +24,8 @@ async function createBrowser () {
     browser = await puppeteer.launch();
 }
 
-async function setPage (t) {
-    t.context.page = await browser.newPage();
+async function setPage (ctx) {
+    ctx.page = await browser.newPage();
 }
 
 const createServer = function () {
@@ -46,14 +46,14 @@ const createServer = function () {
     });
 };
 
-async function initVideo (t, src, dims) {
-    const page = t.context.page;
+async function initVideo (ctx, src, dims) {
+    const page = ctx.page;
 
     const body = await page.$('body');
     await page.evaluate(b => b.classList.remove('image-test'), body);
 
     const source = await page.$('#video');
-    t.context.source = source;
+    ctx.source = source;
 
     await page.evaluate((video, url, dims) => {
         video.src = url;
@@ -74,7 +74,7 @@ async function initVideo (t, src, dims) {
     }, source, src, dims);
 }
 
-test.before(async () => {
+beforeAll(async () => {
     server = await createServer();
     const port = server.port;
     const host = server.host;
@@ -88,28 +88,28 @@ test.before(async () => {
     await createBrowser();
 });
 
-test.beforeEach(async t => {
-    await setPage(t);
+beforeEach(async (ctx) => {
+    await setPage(ctx);
 
-    await t.context.page.goto(pageUrl);
+    await ctx.page.goto(pageUrl);
 });
 
-test.afterEach(async t => {
-    // await t.context.page.evaluate(vgls => vgls && vgls.forEach(vgl => vgl.destroy()), t.context.vgls);
-    await t.context.page.close();
+afterEach(async (ctx) => {
+    // await ctx.page.evaluate(vgls => vgls && vgls.forEach(vgl => vgl.destroy()), ctx.vgls);
+    await ctx.page.close();
 });
 
-test.after(async () => {
+afterAll(async () => {
     await browser.close();
     server.close();
 });
 
-test('playing an instance with lost context should restore context and recover', async t => {
-    await initVideo(t, SIMPLE_VIDEO_URL, SIMPLE_VIDEO_DIMS);
+test('playing an instance with lost context should restore context and recover', async (ctx) => {
+    await initVideo(ctx, SIMPLE_VIDEO_URL, SIMPLE_VIDEO_DIMS);
 
     const NUM_CONTEXTS = 17;
-    const page = t.context.page;
-    const source = t.context.source;
+    const page = ctx.page;
+    const source = ctx.source;
 
     const kamposs = await page.evaluateHandle((video, canvasDims, NUM_CONTEXTS) => {
         const _target = document.querySelector('#canvas');
@@ -138,7 +138,7 @@ test('playing an instance with lost context should restore context and recover',
         return instances;
     }, source, SIMPLE_VIDEO_CANVAS_DIMS, NUM_CONTEXTS);
 
-    const stateHandle = await t.context.page.evaluateHandle(kamposs => {
+    const stateHandle = await ctx.page.evaluateHandle(kamposs => {
         return kamposs.reduce((acc, kampos) => {
             acc[kampos.config.target.id] = kampos.lostContext;
 
@@ -148,7 +148,7 @@ test('playing an instance with lost context should restore context and recover',
     const contextState = await stateHandle.jsonValue();
 
     // make sure we have one instance with a lost context
-    t.is(contextState.canvas1, true);
+    expect(contextState.canvas1).toBe(true);
 
     // attempt to set its source
     const kampos = await page.evaluateHandle((kamposs, video) => {
@@ -161,10 +161,10 @@ test('playing an instance with lost context should restore context and recover',
         return instance
     }, kamposs, source);
 
-    const isLostHandle = await t.context.page.evaluateHandle(kampos => kampos.gl.isContextLost(), kampos);
+    const isLostHandle = await ctx.page.evaluateHandle(kampos => kampos.gl.isContextLost(), kampos);
     const isLost = await isLostHandle.jsonValue();
 
-    t.is(isLost, false);
+    expect(isLost).toBe(false);
 
-    t.context.kamposs = kamposs;
-});
+    ctx.kamposs = kamposs;
+}, 20000);