test: use vue 3 global api & new testing-library screen api

This commit uses the vue 3 global createApp api instead of Vue.use. It
also uses testing-library's screen API, since the libraries render
function no longer returns a wrapper. The return value of the render
function could alternatively be destructured into {getByTestId} for
example, but this achieves the same thing as using screen. Finally
propsData now gets merged into props by default, so props can just be
used instead.

Note that instead of 'data-testid' we are using 'dataTestId' as a prop.
For reasons I cannot explain the 'data-testid' prop is not getting
passed down to the ix-img component reliably so custom prop had be
defined. This is not desired behavior and will likely need to be
addressed in a future commit.

tests/unit/imgix-component.spec.ts

@@ -1,49 +1,54 @@
+import { createApp } from 'vue';
 import VueImgix, { IxImg } from '@/plugins/vue-imgix';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
-import Vue from 'vue';
+import { render, screen } from '@testing-library/vue';
+import _App from '../../src/App.vue';
 import {
   expectElementToHaveFixedSrcAndSrcSet,
   expectElementToHaveFluidSrcAndSrcSet,
 } from '../helpers/url-assert';
+
+const App = createApp(_App);
+
 describe('imgix component', () => {
   beforeAll(() => {
-    Vue.use(VueImgix, {
+    App.use(VueImgix, {
       domain: 'assets.imgix.net',
     });
   });
   it('an img should be rendered', () => {
-    const wrapper = render(IxImg, {
-      propsData: {
+    render(IxImg, {
+      props: {
         src: 'examples/pione.jpg',
-        'data-testid': 'img-rendering',
+        // TODO(luis): remove this when we have a better way of testing
+        dataTestId: 'img-rendering',
       },
     });
 
-    expect(wrapper.getByTestId('img-rendering'));
+    expect(screen.getByTestId('img-rendering'));
   });
   it(`the rendered img's src should be set`, () => {
-    const wrapper = render(IxImg, {
-      propsData: {
+    render(IxImg, {
+      props: {
         src: 'examples/pione.jpg',
-        'data-testid': 'img-rendering',
+        dataTestId: 'img-rendering',
       },
     });
 
-    expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+    expect(screen.getByTestId('img-rendering')).toHaveAttribute(
       'src',
       expect.stringMatching('examples/pione.jpg'),
     );
   });
   it(`the rendered img's srcset should be set correctly`, () => {
-    const wrapper = render(IxImg, {
-      propsData: {
+    render(IxImg, {
+      props: {
         src: 'examples/pione.jpg',
-        'data-testid': 'img-rendering',
+        dataTestId: 'img-rendering',
       },
     });
 
-    const srcset = wrapper.getByTestId('img-rendering').getAttribute('srcset');
+    const srcset = screen.getByTestId('img-rendering').getAttribute('srcset');
 
     expect(srcset).not.toBeFalsy();
     if (!srcset) {
@@ -59,96 +64,96 @@ describe('imgix component', () => {
   });
 
   it('imgixParams should be set on the rendered src and srcset', () => {
-    const wrapper = render(IxImg, {
-      propsData: {
-        'data-testid': 'img-rendering',
+    render(IxImg, {
+      props: {
+        dataTestId: 'img-rendering',
         src: 'examples/pione.jpg',
         imgixParams: { crop: 'faces' },
       },
     });
 
-    expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+    expect(screen.getByTestId('img-rendering')).toHaveAttribute(
       'src',
       expect.stringMatching('crop=faces'),
     );
-    expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+    expect(screen.getByTestId('img-rendering')).toHaveAttribute(
       'srcset',
       expect.stringMatching('crop=faces'),
     );
   });
 
   describe('in fluid mode (no fixed props set)', () => {
     it('ix-img should render a fluid image if width is passed as attribute', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           width: 100,
         },
       });
 
-      const el = wrapper.getByTestId('img-rendering');
+      const el = screen.getByTestId('img-rendering');
       expectElementToHaveFluidSrcAndSrcSet(el);
     });
   });
 
   describe('in fixed mode (fixed prop set, or width/height passed to imgixParams)', () => {
     it('the src and srcset should be in fixed size mode when a width is passed to imgixParams', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           imgixParams: {
             w: 100,
           },
         },
       });
 
-      const el = wrapper.getByTestId('img-rendering');
+      const el = screen.getByTestId('img-rendering');
       expectElementToHaveFixedSrcAndSrcSet(el, 100);
     });
     it('the src and srcset should be in fixed size mode when a fixed prop is passed to the element', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           width: 100,
           height: 150,
           fixed: true,
         },
       });
 
-      const el = wrapper.getByTestId('img-rendering');
+      const el = screen.getByTestId('img-rendering');
       expectElementToHaveFixedSrcAndSrcSet(el, 100);
 
       expect(el).toHaveAttribute('src', expect.stringMatching('h=150'));
       expect(el).toHaveAttribute('srcset', expect.stringMatching('h=150'));
     });
 
     it('a width attribute should be passed through to the underlying component', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           width: 100,
         },
       });
 
-      expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+      expect(screen.getByTestId('img-rendering')).toHaveAttribute(
         'width',
         '100',
       );
     });
     it('a height attribute should be passed through to the underlying component', () => {
-      const wrapper = render(IxImg, {
-        propsData: {
-          'data-testid': 'img-rendering',
+      render(IxImg, {
+        props: {
+          dataTestId: 'img-rendering',
           src: 'examples/pione.jpg',
           height: 100,
         },
       });
 
-      expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+      expect(screen.getByTestId('img-rendering')).toHaveAttribute(
         'height',
         '100',
       );
@@ -159,21 +164,21 @@ describe('imgix component', () => {
     const ATTRIBUTES = ['src', 'srcset'];
     ATTRIBUTES.forEach((attribute) => {
       it(`${attribute} can be configured to use data-${attribute}`, () => {
-        const wrapper = render(IxImg, {
-          propsData: {
-            'data-testid': 'img-rendering',
+        render(IxImg, {
+          props: {
+            dataTestId: 'img-rendering',
             src: 'examples/pione.jpg',
             attributeConfig: {
               [attribute]: `data-${attribute}`,
             },
           },
         });
 
-        expect(wrapper.getByTestId('img-rendering')).toHaveAttribute(
+        expect(screen.getByTestId('img-rendering')).toHaveAttribute(
           `data-${attribute}`,
           expect.stringMatching(/ixlib/),
         );
-        expect(wrapper.getByTestId('img-rendering')).not.toHaveAttribute(
+        expect(screen.getByTestId('img-rendering')).not.toHaveAttribute(
           attribute,
         );
       });
@@ -197,14 +202,14 @@ describe('imgix component', () => {
       };
       const ImgixClient = require('@imgix/js-core');
       ImgixClient.mockImplementation(() => mockImgixClient);
-      _Vue.use(_VueImgix, {
+      App.use(_VueImgix, {
         domain: 'assets.imgix.net',
       });
       /* eslint-enable @typescript-eslint/no-var-requires */
     });
     it('should not pass disableVariableQuality: true to @imgix/js-core by default', () => {
       render(_IxImg, {
-        propsData: {
+        props: {
           src: 'examples/pione.jpg',
           height: 100,
           fixed: true,
@@ -221,7 +226,7 @@ describe('imgix component', () => {
     });
     it('should pass disableVariableQuality: true to @imgix/js-core when disableVariableQuality prop set', () => {
       render(_IxImg, {
-        propsData: {
+        props: {
           src: 'examples/pione.jpg',
           height: 100,
           disableVariableQuality: true,