test(picture): remove testing library dep

This commit removes `@testing-library/vue` dependency from the
`ix-picture` spec. This fixes an issue we were having with their plugin
registration functionality.

This commit also updates the test suite to use Vue 3 syntax and APIs for
all tets. It makes extensive use of the officially maintained
`@vue/test-utils` testing utilities.

tests/unit/picture-mode.spec.tsx

@@ -1,102 +1,58 @@
-import { createApp } from 'vue';
-import { render, screen } from '@testing-library/vue';
-import '@testing-library/jest-dom';
-
-import VueImgix from '@/plugins/vue-imgix';
+import IxPictureSimple from '@/components/simple/ix-picture.vue';
+import VueImgix from '@/plugins/vue-imgix/index';
+import { IxImg } from '@/plugins/vue-imgix/ix-img';
 import { IxPicture } from '@/plugins/vue-imgix/ix-picture';
-import _App from '../../src/App.vue';
-
-const App = createApp(_App);
-
-describe.skip('Picture Mode', () => {
-  beforeAll(() => {
-    App.use(VueImgix, {
-      domain: 'assets.imgix.net',
-    });
-  });
-
+import { IxSource } from '@/plugins/vue-imgix/ix-source';
+import { config, mount } from '@vue/test-utils';
+config.global.plugins = [[VueImgix, { domain: 'assets.imgix.net' }]];
+config.global.components = {
+  IxImg,
+  IxPicture,
+  IxSource,
+};
+
+describe('Picture Mode', () => {
   describe('ix-picture', () => {
     it('should render a picture', () => {
-      render(IxPicture, {
-        props: {
-          src: 'examples/pione.jpg',
-          ['data-testid']: 'test-picture',
-        },
+      const wrapper = mount(IxPicture, {
+        shallow: false,
       });
 
-      expect(screen.getByTestId('test-picture').tagName).toBe('PICTURE');
+      const picture = wrapper.find('picture');
+      expect(picture.element.tagName).toBe('PICTURE');
     });
 
-    it('should render a source as a child', () => {
-      const { getByTestId } = render(
-        App.component('test', {
-          template: `
-        <ix-picture data-testid="test-picture">
-          <ix-source src="image.jpg" />
-          <ix-img src="image.jpg" />
-        </ix-picture>
-      `,
-        }),
-      );
-      expect(
-        getByTestId('test-picture').querySelectorAll('source'),
-      ).toHaveLength(1);
-    });
-
-    it('the developer can pass an ix-img component as a fallback src', () => {
-      render(
-        App.component('test-component', {
-          render() {
-            return (
-              <ix-picture data-testid="test-picture">
-                <ix-source src="image.jpg" />
-                <ix-img src="image.jpg" />
-              </ix-picture>
-            );
-          },
-        }),
-      );
-
-      const fallbackImgEl = screen
-        .getByTestId('test-picture')
-        .querySelectorAll('img')[0];
-      expect(fallbackImgEl).toHaveAttribute(
-        'src',
-        expect.stringMatching(/ixlib=vue/),
-      );
-      expect(fallbackImgEl).toHaveAttribute(
-        'srcset',
-        expect.stringMatching(/ixlib/),
-      );
+    it('should allow developer to pass an ix-img component as a fallback src', () => {
+      const wrapper = mount(IxPictureSimple, {
+        shallow: false,
+      });
+      const fallbackImgEl = wrapper.get('img');
+      const fallBackSrc = fallbackImgEl.element.getAttribute('src');
+      const fallBackSrcSet = fallbackImgEl.element.getAttribute('srcset');
+      expect(fallBackSrc).toBeDefined();
+      expect(fallBackSrc).toMatch(/ixlib=vue/);
+      expect(fallBackSrcSet).toBeDefined();
+      expect(fallBackSrcSet).toMatch(/ixlib/);
     });
-  });
-
-  describe('ix-source', () => {
-    it('should render a <source> component', () => {
-      render(
-        App.component('test-component', {
-          render() {
-            return <ix-source src="image.jpg" data-testid="test-source" />;
-          },
-        }),
-      );
 
-      expect(screen.getByTestId('test-source').tagName).toBe('SOURCE');
+    it('should render a <source> component as a child', () => {
+      const wrapper = mount(IxPictureSimple, {
+        shallow: false,
+      });
+      const sourceElement = wrapper.find('picture > source');
+      expect(sourceElement.exists()).toBe(true);
+      expect(sourceElement.element.tagName).toBe('SOURCE');
     });
 
     it('should have a srcset attribute', () => {
-      render(
-        App.component('test-component', {
-          render() {
-            return <ix-source data-testid="test-source" src="image.png" />;
-          },
-        }),
-      );
-
-      expect(screen.getByTestId('test-source')).toHaveAttribute(
-        'srcset',
-        expect.stringMatching('100w'),
-      );
+      const wrapper = mount(IxPictureSimple, {
+        shallow: false,
+      });
+      const sourceElement = wrapper.find('picture > source');
+      const elementSrcset = sourceElement.element.getAttribute('srcset');
+      expect(sourceElement.exists()).toBe(true);
+      expect(elementSrcset).toMatch('100w');
+      wrapper.unmount();
     });
 
     const subsetOfImportantSourceAttributes = {
@@ -107,48 +63,35 @@ describe.skip('Picture Mode', () => {
     Object.entries(subsetOfImportantSourceAttributes).forEach(
       ([attribute, value]) => {
         it(`should allow developer to set ${attribute} attribute`, () => {
-          render(
-            App.component('test-component', {
-              render() {
-                return (
-                  <ix-source
-                    data-testid="test-source"
-                    src="image.png"
-                    // Don't understand why this works? Me neither. Just joking - take a read of this to see why attrs={} is necessary https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/143
-                    attrs={{ [attribute]: value }}
-                  />
-                );
-              },
-            }),
-          );
-
-          expect(screen.getByTestId('test-source')).toHaveAttribute(
-            attribute,
-            value,
-          );
+          const wrapper = mount(IxSource, {
+            shallow: false,
+            props: {
+              src: 'https://sdk-test.imgix.net/amsterdam.jpg',
+            },
+            attrs: {
+              [attribute]: value,
+            },
+          });
+          const ele = wrapper.find('source');
+          const eleAttr = ele.element.getAttribute(attribute);
+          expect(eleAttr).toBe(value);
+          wrapper.unmount();
         });
       },
     );
 
     it('should pass params from imgixParams', () => {
-      render(
-        App.component('test-component', {
-          render() {
-            return (
-              <ix-source
-                data-testid="test-source"
-                src="image.png"
-                imgixParams={{ w: 100 }}
-              />
-            );
-          },
-        }),
-      );
-
-      expect(screen.getByTestId('test-source')).toHaveAttribute(
-        'srcset',
-        expect.stringMatching('w=100'),
-      );
+      const wrapper = mount(IxSource, {
+        shallow: false,
+        props: {
+          src: 'https://sdk-test.imgix.net/amsterdam.jpg',
+          'data-testid': 'test-source',
+          imgixParams: { w: 100 },
+        },
+      });
+      const eleSrcset = wrapper.find('source').element.getAttribute('srcset');
+      expect(eleSrcset).toBeTruthy();
+      expect(eleSrcset).toMatch(/w=100/);
     });
   });
 });