chore(use-uvu-for-unit-tests) (#52)

package.json

@@ -14,7 +14,11 @@
     "src/**.js*"
   ],
   "scripts": {
-    "test": "ava 'tests/unit/*.js' 'tests/ava/*.js' && jest tests/jest && uvu tests/uvu -r esm",
+    "test:unit": "uvu tests/unit -r esm",
+    "test:ava": "ava 'tests/ava/*.js'",
+    "test:uvu": "uvu tests/uvu -r esm",
+    "test:jest": "jest tests/jest",
+    "test": "yarn test:unit && yarn test:uvu && yarn test:ava && yarn test:jest",
     "build": "jsdoc -t node_modules/tsd-jsdoc/dist -r src -d .",
     "lint": "xo src tests",
     "fmt": "xo src tests --fix",

tests/unit/load.js

@@ -1,25 +1,26 @@
-import test from 'ava';
+import {test} from 'uvu';
+import * as assert from 'uvu/assert';
 import path from 'path';
 import {load, loadSync} from '../../src/main';
 
-test('load - file with multiple components', async (t) => {
+test('load - file with multiple components', async () => {
   const components = await load(
     path.join(__dirname, '../fixtures/multiple-components.html')
   );
-  t.is(components.length, 3);
-  t.is(components[0], `<div x-data="" name="component-1"></div>`);
-  t.is(components[1], `<div x-data="" name="component-2"></div>`);
-  t.is(components[2], `<div x-data="" name="component-3"></div>`);
+  assert.is(components.length, 3);
+  assert.is(components[0], `<div x-data="" name="component-1"></div>`);
+  assert.is(components[1], `<div x-data="" name="component-2"></div>`);
+  assert.is(components[2], `<div x-data="" name="component-3"></div>`);
 });
 
-test('load - file with single component', async (t) => {
+test('load - file with single component', async () => {
   const component = await load(
     path.join(__dirname, '../fixtures/single-component.html')
   );
-  t.is(component, `<div x-data="" name="component-1"></div>`);
+  assert.is(component, `<div x-data="" name="component-1"></div>`);
 });
 
-test('loadSync - file with multiple components', (t) => {
+test('loadSync - file with multiple components', () => {
   const calls = [];
   const realWarn = console.warn;
   console.warn = (...args) => {
@@ -29,20 +30,20 @@ test('loadSync - file with multiple components', (t) => {
   const components = loadSync(
     path.join(__dirname, '../fixtures/multiple-components.html')
   );
-  t.is(components.length, 3);
-  t.is(components[0], `<div x-data="" name="component-1"></div>`);
-  t.is(components[1], `<div x-data="" name="component-2"></div>`);
-  t.is(components[2], `<div x-data="" name="component-3"></div>`);
+  assert.is(components.length, 3);
+  assert.is(components[0], `<div x-data="" name="component-1"></div>`);
+  assert.is(components[1], `<div x-data="" name="component-2"></div>`);
+  assert.is(components[2], `<div x-data="" name="component-3"></div>`);
   // Check warning
-  t.deepEqual(calls, [
+  assert.equal(calls, [
     [
       'alpine-test-utils: loadSync() can cause performance issues, prefer async "load()"'
     ]
   ]);
   console.warn = realWarn;
 });
 
-test('loadSync - file with single component', (t) => {
+test('loadSync - file with single component', () => {
   const calls = [];
   const realWarn = console.warn;
   console.warn = (...args) => {
@@ -52,12 +53,14 @@ test('loadSync - file with single component', (t) => {
   const component = loadSync(
     path.join(__dirname, '../fixtures/single-component.html')
   );
-  t.is(component, `<div x-data="" name="component-1"></div>`);
+  assert.is(component, `<div x-data="" name="component-1"></div>`);
   // Check warning
-  t.deepEqual(calls, [
+  assert.equal(calls, [
     [
       'alpine-test-utils: loadSync() can cause performance issues, prefer async "load()"'
     ]
   ]);
   console.warn = realWarn;
 });
+
+test.run();

tests/unit/render.js

@@ -1,43 +1,44 @@
-import test from 'ava';
+import {test} from 'uvu';
+import * as assert from 'uvu/assert';
 import {render} from '../../src/main';
 
-test('render - sanity check', (t) => {
+test('render - sanity check', () => {
   const component = render(`<div x-data="{ foo: 'bar' }">
     <span x-text="foo"></span>
   </div>`);
-  t.is(component.querySelector('span').innerText, 'bar');
+  assert.is(component.querySelector('span').innerText, 'bar');
 });
 
-test('render - can override x-data if data option is passed - string', (t) => {
+test('render - can override x-data if data option is passed - string', () => {
   const component = render(
     `<div x-data="{ foo: 'bar' }">
   <span x-text="foo"></span>
 </div>`,
     '{ "foo": "baz" }'
   );
-  t.is(component.querySelector('span').innerText, 'baz');
+  assert.is(component.querySelector('span').innerText, 'baz');
 });
 
-test('render - can override x-data if data option is passed - object', (t) => {
+test('render - can override x-data if data option is passed - object', () => {
   const component = render(
     `<div x-data="{ foo: 'bar' }">
   <span x-text="foo"></span>
 </div>`,
     {foo: 'baz'}
   );
-  t.is(component.querySelector('span').innerText, 'baz');
+  assert.is(component.querySelector('span').innerText, 'baz');
 });
 
-test('render - sets $data properties on the component', (t) => {
+test('render - sets $data properties on the component', () => {
   const component = render(
     `<div x-data="{ foo: 'bar' }">
   <span x-text="foo"></span>
 </div>`
   );
-  t.is(component.$data.foo, 'bar');
+  assert.is(component.$data.foo, 'bar');
 });
 
-test('render - updating $data works', async (t) => {
+test('render - updating $data works', async () => {
   const component = render(
     `<div x-data="{ foo: 'bar' }">
   <span x-text="foo"></span>
@@ -47,24 +48,22 @@ test('render - updating $data works', async (t) => {
   component.$data.foo = 'baz';
 
   await component.$nextTick();
-  t.is(component.querySelector('span').innerText, 'baz');
+  assert.is(component.querySelector('span').innerText, 'baz');
 });
 
-test('render - sets $el on the component to itself', (t) => {
+test('render - sets $el on the component to itself', () => {
   const component = render(
     `<div x-data="{ foo: 'bar' }">
   <span x-text="foo"></span>
 </div>`
   );
-  t.is(component.$el, component);
+  assert.is(component.$el, component);
 });
 
-test('render throws if passed a Promise (eg. forgot to await load())', async (t) => {
-  const error = await t.throws(() => {
+test('render throws if passed a Promise (eg. forgot to await load())', async () => {
+  assert.throws(() => {
     render(Promise.resolve('<div x-data=""></div>'));
-  });
-  t.is(
-    error.message,
-    'alpine-test-utils render(): "markup" should be a string'
-  );
+  }, 'alpine-test-utils render(): "markup" should be a string');
 });
+
+test.run();

tests/unit/version.js

@@ -1,4 +1,5 @@
-import test from 'ava';
+import {test} from 'uvu';
+import * as assert from 'uvu/assert';
 import path from 'path';
 import {load} from '../../src/main';
 import Alpine from 'alpinejs';
@@ -15,14 +16,16 @@ const stub = (fn) => {
   return callable;
 };
 
-test('load - Alpine.js version mismatch', async (t) => {
+test('load - Alpine.js version mismatch', async () => {
   console.warn = stub(() => {});
   const component = await load(
     path.join(__dirname, '../fixtures/version.html')
   );
-  t.is(component, `<div x-data="{}"></div>`);
-  t.is(
+  assert.is(component, `<div x-data="{}"></div>`);
+  assert.is(
     console.warn.firstCall()[0],
     `alpine-test-utils: Alpine.js version is different to CDN one, requested "1.x.x", testing with "${Alpine.version}"`
   );
 });
+
+test.run();

tests/unit/wait-for.js

@@ -1,15 +1,18 @@
-import test from 'ava';
+import {test} from 'uvu';
+import * as assert from 'uvu/assert';
 import {render, waitFor} from '../../src/main';
 
-test('waitFor - x-show toggles style.display', async (t) => {
+test('waitFor - x-show toggles style.display', async () => {
   const component = render(`<div x-data="{ isOpen: false }">
     <button @click="isOpen = !isOpen"></button>
     <span x-show="isOpen"></span>
   </div>`);
 
-  t.is(component.querySelector('span').style.display, 'none');
+  assert.is(component.querySelector('span').style.display, 'none');
   component.querySelector('button').click();
   await waitFor(() => {
-    t.is(component.querySelector('span').style.display, '');
+    assert.is(component.querySelector('span').style.display, '');
   });
 });
+
+test.run();