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/bootstrapping/ApplicationBootstrapper.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { BootstrapperStub } from '@tests/unit/shared/Stubs/BootstrapperStub';
+import { ApplicationBootstrapper } from '@/presentation/bootstrapping/ApplicationBootstrapper';
+import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
+import type { App } from 'vue';
+
+describe('ApplicationBootstrapper', () => {
+  it('calls bootstrap on each bootstrapper', async () => {
+    // arrange
+    const bootstrapper1 = new BootstrapperStub();
+    const bootstrapper2 = new BootstrapperStub();
+    const sut = new ApplicationBootstrapper([bootstrapper1, bootstrapper2]);
+    // act
+    await sut.bootstrap({} as App);
+    // assert
+    expect(bootstrapper1.callHistory.map((c) => c.methodName === 'bootstrap')).to.have.lengthOf(1);
+    expect(bootstrapper2.callHistory.map((c) => c.methodName === 'bootstrap')).to.have.lengthOf(1);
+  });
+
+  it('calls bootstrap in the correct order', async () => {
+    // arrange
+    const callOrder: number[] = [];
+    const bootstrapper1 = {
+      async bootstrap(): Promise<void> {
+        callOrder.push(1);
+      },
+    };
+    const bootstrapper2 = {
+      async bootstrap(): Promise<void> {
+        callOrder.push(2);
+      },
+    };
+    const sut = new ApplicationBootstrapper([bootstrapper1, bootstrapper2]);
+    // act
+    await sut.bootstrap({} as App);
+    // assert
+    expect(callOrder).to.deep.equal([1, 2]);
+  });
+
+  it('stops if a bootstrapper fails', async () => {
+    // arrange
+    const expectedError = 'Bootstrap failed';
+    const bootstrapper1 = {
+      async bootstrap(): Promise<void> {
+        throw new Error(expectedError);
+      },
+    };
+    const bootstrapper2 = new BootstrapperStub();
+    const sut = new ApplicationBootstrapper([bootstrapper1, bootstrapper2]);
+    // act
+    const act = async () => { await sut.bootstrap({} as App); };
+    // assert
+    await expectThrowsAsync(act, expectedError);
+    expect(bootstrapper2.callHistory.map((c) => c.methodName === 'bootstrap')).to.have.lengthOf(0);
+  });
+});

tests/unit/presentation/bootstrapping/Modules/AppInitializationLogger.spec.ts

@@ -3,13 +3,13 @@ import { AppInitializationLogger } from '@/presentation/bootstrapping/Modules/Ap
 import { LoggerStub } from '@tests/unit/shared/Stubs/LoggerStub';
 
 describe('AppInitializationLogger', () => {
-  it('logs the app initialization marker upon bootstrap', () => {
+  it('logs the app initialization marker upon bootstrap', async () => {
     // arrange
     const marker = '[APP_INIT]';
     const loggerStub = new LoggerStub();
     const sut = new AppInitializationLogger(loggerStub);
     // act
-    sut.bootstrap();
+    await sut.bootstrap();
     // assert
     expect(loggerStub.callHistory).to.have.lengthOf(1);
     expect(loggerStub.callHistory[0].args).to.have.lengthOf(1);

tests/unit/presentation/bootstrapping/Modules/DependencyBootstrapper.spec.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest';
+import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
+import { DependencyBootstrapper } from '@/presentation/bootstrapping/Modules/DependencyBootstrapper';
+import { IApplicationContext } from '@/application/Context/IApplicationContext';
+import { VueDependencyInjectionApiStub } from '@tests/unit/shared/Stubs/VueDependencyInjectionApiStub';
+import { buildContext } from '@/application/Context/ApplicationContextFactory';
+import { provideDependencies } from '@/presentation/bootstrapping/DependencyProvider';
+import type { App, inject } from 'vue';
+
+describe('DependencyBootstrapper', () => {
+  describe('bootstrap', () => {
+    it('calls the contextFactory', async () => {
+      // arrange
+      const { mockContext, mockApp } = createMocks();
+      let contextFactoryCalled = false;
+      const sut = new DependencyBootstrapperBuilder()
+        .withContextFactory(async () => {
+          contextFactoryCalled = true;
+          return mockContext;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(contextFactoryCalled).to.equal(true);
+    });
+    it('provides correct context to dependency provider', async () => {
+      // arrange
+      const { mockContext, mockApp } = createMocks();
+      const expectedContext = mockContext;
+      let actualContext: IApplicationContext | undefined;
+      const sut = new DependencyBootstrapperBuilder()
+        .withContextFactory(async () => expectedContext)
+        .withDependencyProvider((...params) => {
+          const [context] = params;
+          actualContext = context;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(actualContext).to.equal(expectedContext);
+    });
+    it('provides correct provide function to dependency provider', async () => {
+      // arrange
+      const { mockApp, provideMock } = createMocks();
+      const expectedProvide = provideMock;
+      let actualProvide: typeof expectedProvide | undefined;
+      const sut = new DependencyBootstrapperBuilder()
+        .withDependencyProvider((...params) => {
+          actualProvide = params[1]?.provide;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(actualProvide).to.equal(expectedProvide);
+    });
+    it('provides correct inject function to dependency provider', async () => {
+      // arrange
+      const { mockApp } = createMocks();
+      const expectedInjector = new VueDependencyInjectionApiStub().inject;
+      let actualInjector: Injector | undefined;
+      const sut = new DependencyBootstrapperBuilder()
+        .withInjector(expectedInjector)
+        .withDependencyProvider((...params) => {
+          actualInjector = params[1]?.inject;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(actualInjector).to.equal(expectedInjector);
+    });
+  });
+});
+
+function createMocks() {
+  const provideMock = new VueDependencyInjectionApiStub().provide;
+  const mockContext = new ApplicationContextStub();
+  const mockApp = {
+    provide: provideMock,
+  } as unknown as App;
+  return { mockContext, mockApp, provideMock };
+}
+
+type Injector = typeof inject;
+type Provider = typeof provideDependencies;
+type ContextFactory = typeof buildContext;
+
+class DependencyBootstrapperBuilder {
+  private contextFactory: ContextFactory = () => Promise.resolve(new ApplicationContextStub());
+
+  private dependencyProvider: Provider = () => new VueDependencyInjectionApiStub().provide;
+
+  private injector: Injector = () => new VueDependencyInjectionApiStub().inject;
+
+  public withContextFactory(contextFactory: ContextFactory): this {
+    this.contextFactory = contextFactory;
+    return this;
+  }
+
+  public withInjector(injector: Injector): this {
+    this.injector = injector;
+    return this;
+  }
+
+  public withDependencyProvider(dependencyProvider: Provider): this {
+    this.dependencyProvider = dependencyProvider;
+    return this;
+  }
+
+  public build(): DependencyBootstrapper {
+    return new DependencyBootstrapper(
+      this.contextFactory,
+      this.dependencyProvider,
+      this.injector,
+    );
+  }
+}

tests/unit/presentation/bootstrapping/Modules/RuntimeSanityValidator.spec.ts

@@ -1,9 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import { ISanityCheckOptions } from '@/infrastructure/RuntimeSanity/Common/ISanityCheckOptions';
 import { RuntimeSanityValidator } from '@/presentation/bootstrapping/Modules/RuntimeSanityValidator';
+import { expectDoesNotThrowAsync, expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
 
 describe('RuntimeSanityValidator', () => {
-  it('calls validator with correct options upon bootstrap', () => {
+  it('calls validator with correct options upon bootstrap', async () => {
     // arrange
     const expectedOptions: ISanityCheckOptions = {
       validateEnvironmentVariables: true,
@@ -15,11 +16,11 @@ describe('RuntimeSanityValidator', () => {
     };
     const sut = new RuntimeSanityValidator(validatorMock);
     // act
-    sut.bootstrap();
+    await sut.bootstrap();
     // assert
     expect(actualOptions).to.deep.equal(expectedOptions);
   });
-  it('propagates the error if validator fails', () => {
+  it('propagates the error if validator fails', async () => {
     // arrange
     const expectedMessage = 'message thrown from validator';
     const validatorMock = () => {
@@ -27,17 +28,17 @@ describe('RuntimeSanityValidator', () => {
     };
     const sut = new RuntimeSanityValidator(validatorMock);
     // act
-    const act = () => sut.bootstrap();
+    const act = async () => { await sut.bootstrap(); };
     // assert
-    expect(act).to.throw(expectedMessage);
+    await expectThrowsAsync(act, expectedMessage);
   });
-  it('runs successfully if validator passes', () => {
+  it('runs successfully if validator passes', async () => {
     // arrange
     const validatorMock = () => { /* NOOP */ };
     const sut = new RuntimeSanityValidator(validatorMock);
     // act
-    const act = () => sut.bootstrap();
+    const act = async () => { await sut.bootstrap(); };
     // assert
-    expect(act).to.not.throw();
+    await expectDoesNotThrowAsync(act);
   });
 });