Migrate to Vue 3.0 #230

- Migrate from "Vue 2.X" to "Vue 3.X"
- Migrate from "Vue Test Utils v1" to "Vue Test Utils v2"

Changes in detail:

- Change `inserted` to `mounted`.
- Change `::v-deep` to `:deep`.
- Change to Vue 3.0 `v-modal` syntax.
- Remove old Vue 2.0 transition name, keep the ones for Vue 3.0.
- Use new global mounting API `createApp`.
- Change `destroy` to `unmount`.
- Bootstrapping:
  - Move `provide`s for global dependencies to a bootsrapper from
    `App.vue`.
  - Remove `productionTip` setting (not in Vue 3).
  - Change `IVueBootstrapper` for simplicity and Vue 3 compatible API.
  - Add missing tests.
- Remove `.text` access on `VNode` as it's now internal API of Vue.
- Import `CSSProperties` from `vue` instead of `jsx` package.
- Shims:
  - Remove unused `shims-tsx.d.ts`.
  - Remove `shims-vue.d.ts` that's missing in quickstart template.
- Unit tests:
  - Remove old typing workaround for mounting components.
  - Rename `propsData` to `props`.
  - Remove unneeded `any` cast workarounds.
  - Move stubs and `provide`s under `global` object.

Other changes:

- Add `dmg-license` dependency explicitly due to failing electron builds
  on macOS (electron-userland/electron-builder#6520,
  electron-userland/electron-builder#6489). This was a side-effect of
  updating dependencies for this commit.

tests/unit/presentation/components/Shared/Modal/ModalContainer.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
 
 const DOM_MODAL_CONTAINER_SELECTOR = '.modal-container';
@@ -32,18 +33,27 @@ describe('ModalContainer.vue', () => {
   });
 
   describe('modal open/close', () => {
-    it('opens when model prop changes from false to true', async () => {
+    it('renders the model when prop changes from false to true', async () => {
       // arrange
       const wrapper = mountComponent({ modelValue: false });
 
       // act
-      await wrapper.setProps({ value: true });
+      await wrapper.setProps({ modelValue: true });
 
-      // assert after updating props
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((wrapper.vm as any).isRendered).to.equal(true);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((wrapper.vm as any).isOpen).to.equal(true);
+      // assert
+      expect(wrapper.vm.isRendered).to.equal(true);
+    });
+
+    it('opens the model when prop changes from false to true', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: false });
+
+      // act
+      await wrapper.setProps({ modelValue: true });
+      await nextTick();
+
+      // assert
+      expect(wrapper.vm.isOpen).to.equal(true);
     });
 
     it('closes when model prop changes from true to false', async () => {
@@ -51,11 +61,10 @@ describe('ModalContainer.vue', () => {
       const wrapper = mountComponent({ modelValue: true });
 
       // act
-      await wrapper.setProps({ value: false });
+      await wrapper.setProps({ modelValue: false });
 
-      // assert after updating props
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((wrapper.vm as any).isOpen).to.equal(false);
+      // assert
+      expect(wrapper.vm.isOpen).to.equal(false);
       // isRendered will not be true directly due to transition
     });
 
@@ -70,7 +79,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
       restore();
     });
 
@@ -86,7 +95,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
     });
   });
 
@@ -118,7 +127,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input).to.equal(undefined);
+      expect(wrapper.emitted('update:modelValue')).to.equal(undefined);
     });
 
     it('closes on overlay click if prop is true', async () => {
@@ -131,7 +140,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
     });
   });
 });
@@ -142,22 +151,24 @@ function mountComponent(options: {
   readonly slotHtml?: string,
   readonly attachToDocument?: boolean,
 }) {
-  return shallowMount(ModalContainer as unknown, {
-    propsData: {
-      value: options.modelValue,
+  return shallowMount(ModalContainer, {
+    props: {
+      modelValue: options.modelValue,
       ...(options.closeOnOutsideClick !== undefined ? {
         closeOnOutsideClick: options.closeOnOutsideClick,
       } : {}),
     },
     slots: options.slotHtml !== undefined ? { default: options.slotHtml } : undefined,
-    stubs: {
-      [COMPONENT_MODAL_OVERLAY_NAME]: {
-        name: COMPONENT_MODAL_OVERLAY_NAME,
-        template: '<div />',
-      },
-      [COMPONENT_MODAL_CONTENT_NAME]: {
-        name: COMPONENT_MODAL_CONTENT_NAME,
-        template: '<slot />',
+    global: {
+      stubs: {
+        [COMPONENT_MODAL_OVERLAY_NAME]: {
+          name: COMPONENT_MODAL_OVERLAY_NAME,
+          template: '<div />',
+        },
+        [COMPONENT_MODAL_CONTENT_NAME]: {
+          name: COMPONENT_MODAL_CONTENT_NAME,
+          template: '<slot />',
+        },
       },
     },
   });