chore(vue): migrate to standardized tsconfig and align exports test (#…

…4966)
aws-amplify · Jan 30, 2024 · a82bc69 · a82bc69
1 parent 726ac98
commit a82bc69
Show file tree

Hide file tree

Showing 24 changed files with 48 additions and 57 deletions.
diff --git a/.changeset/odd-terms-talk.md b/.changeset/odd-terms-talk.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-vue": minor
+---
+
+chore(vue): migrate to standardized tsconfig and align exports test
diff --git a/packages/configs/typescript/tsconfig.vue.json b/packages/configs/typescript/tsconfig.vue.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    // required in `vue` projects
+    "jsx": "preserve",
+    // see: https://github.com/vuejs/test-utils/issues/1538
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  }
+}
diff --git a/packages/vue/__mocks__/styleMock.js b/packages/vue/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/packages/vue/__tests__/exports.spec.ts b/packages/vue/__tests__/exports.spec.ts
@@ -1,9 +1,10 @@
-import * as exported from '../dist';
+import * as exported from '../src';
 
 describe('@aws-amplify/ui-vue', () => {
   describe('exports', () => {
     it('should match snapshot', () => {
-      expect(Object.keys(exported)).toMatchSnapshot();
+      const sortedExports = Object.keys(exported).sort();
+      expect(sortedExports).toMatchSnapshot();
     });
   });
 });
diff --git a/packages/vue/index.js b/packages/vue/index.js
diff --git a/packages/vue/jest.config.ts b/packages/vue/jest.config.ts
@@ -23,8 +23,11 @@ const config: Config = {
   },
   testEnvironment: 'jsdom',
   verbose: true,
-  moduleFileExtensions: ['js', 'ts', 'json', 'vue', 'tsx'],
-  moduleNameMapper: { '^nanoid$': '<rootDir>/../../node_modules/nanoid' },
+  moduleFileExtensions: ['js', 'ts', 'vue'],
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
+    '^nanoid$': '<rootDir>/../../node_modules/nanoid',
+  },
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
   setupFilesAfterEnv: ['./jest.setup.ts'],
   transform: {

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -39,7 +39,6 @@
   },
   "dependencies": {
     "@aws-amplify/ui": "6.0.8",
-    "@vue/tsconfig": "^0.1.3",
     "@vueuse/core": "7.5.5",
     "@xstate/vue": "0.8.1",
     "nanoid": "3.1.31",

diff --git a/packages/vue/src/components/__tests__/authenticator.spec.ts b/packages/vue/src/components/__tests__/authenticator.spec.ts
@@ -10,7 +10,7 @@ import {
 } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import * as UseAuthComposables from '../../composables/useAuth';
 import Authenticator from '../authenticator';
 

diff --git a/packages/vue/src/components/__tests__/confirm-reset-password.spec.ts b/packages/vue/src/components/__tests__/confirm-reset-password.spec.ts
@@ -6,7 +6,7 @@ import { AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import { UseAuthenticator } from '../../types';
 import ConfirmResetPassword from '../confirm-reset-password.vue';
 

diff --git a/packages/vue/src/components/__tests__/confirm-sign-in.spec.ts b/packages/vue/src/components/__tests__/confirm-sign-in.spec.ts
@@ -6,7 +6,7 @@ import { AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import { UseAuthenticator } from '../../types';
 import ConfirmSignIn from '../confirm-sign-in.vue';
 

diff --git a/packages/vue/src/components/__tests__/confirm-sign-up.spec.ts b/packages/vue/src/components/__tests__/confirm-sign-up.spec.ts
@@ -10,7 +10,7 @@ import {
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import ConfirmSignUp from '../confirm-sign-up.vue';
 
 jest.spyOn(UseAuthComposables, 'useAuth').mockReturnValue({

diff --git a/packages/vue/src/components/__tests__/confirm-verify-user.spec.ts b/packages/vue/src/components/__tests__/confirm-verify-user.spec.ts
@@ -10,7 +10,7 @@ import {
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import ConfirmVerifyUser from '../confirm-verify-user.vue';
 
 jest.spyOn(UseAuthComposables, 'useAuth').mockReturnValue({

diff --git a/packages/vue/src/components/__tests__/federated-sign-in-button.spec.ts b/packages/vue/src/components/__tests__/federated-sign-in-button.spec.ts
@@ -2,7 +2,7 @@ import { reactive } from 'vue';
 import { screen, render, fireEvent } from '@testing-library/vue';
 
 import { components } from '../../../global-spec';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import * as UseAuthComposables from '../../composables/useAuth';
 import FederatedSignInButton from '../federated-sign-in-button.vue';
 

diff --git a/packages/vue/src/components/__tests__/federated-sign-in.spec.ts b/packages/vue/src/components/__tests__/federated-sign-in.spec.ts
@@ -2,7 +2,7 @@ import { reactive, ref, Ref } from 'vue';
 import { render, screen } from '@testing-library/vue';
 
 import { components } from '../../../global-spec';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import * as UseAuthComposables from '../../composables/useAuth';
 import FederatedSignIn from '../federated-sign-in.vue';
 

diff --git a/packages/vue/src/components/__tests__/force-new-password.spec.ts b/packages/vue/src/components/__tests__/force-new-password.spec.ts
@@ -6,7 +6,7 @@ import { AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import { UseAuthenticator } from '../../types';
 import ForceNewPassword from '../force-new-password.vue';
 

diff --git a/packages/vue/src/components/__tests__/forgot-password.spec.ts b/packages/vue/src/components/__tests__/forgot-password.spec.ts
@@ -6,7 +6,7 @@ import { AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import { UseAuthenticator } from '../../types';
 import ForgotPassword from '../forgot-password.vue';
 

diff --git a/packages/vue/src/components/__tests__/setup-totp.spec.ts b/packages/vue/src/components/__tests__/setup-totp.spec.ts
@@ -6,7 +6,7 @@ import * as UIModule from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import { UseAuthenticator } from '../../types';
 import SetupTotp from '../setup-totp.vue';
 

diff --git a/packages/vue/src/components/__tests__/sign-in.spec.ts b/packages/vue/src/components/__tests__/sign-in.spec.ts
@@ -6,7 +6,7 @@ import { AuthInterpreter, AuthMachineState } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import SignIn from '../sign-in.vue';
 
 jest.spyOn(UseAuthComposables, 'useAuth').mockReturnValue({

diff --git a/packages/vue/src/components/__tests__/sign-up.spec.ts b/packages/vue/src/components/__tests__/sign-up.spec.ts
@@ -10,7 +10,7 @@ import {
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import SignUp from '../sign-up.vue';
 
 jest.spyOn(UseAuthComposables, 'useAuth').mockReturnValue({

diff --git a/packages/vue/src/components/__tests__/verify-user.spec.ts b/packages/vue/src/components/__tests__/verify-user.spec.ts
@@ -11,7 +11,7 @@ import {
 
 import { components } from '../../../global-spec';
 import * as UseAuthComposables from '../../composables/useAuth';
-import { baseMockServiceFacade } from '../../composables/__mock__/useAuthenticatorMock';
+import { baseMockServiceFacade } from '../../composables/__mocks__/useAuthenticatorMock';
 import VerifyUser from '../verify-user.vue';
 
 jest.spyOn(UseAuthComposables, 'useAuth').mockReturnValue({

diff --git a/...posables/__mock__/useAuthenticatorMock.ts → ...osables/__mocks__/useAuthenticatorMock.ts b/...posables/__mock__/useAuthenticatorMock.ts → ...osables/__mocks__/useAuthenticatorMock.ts
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
@@ -1,22 +1,12 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    // see: https://github.com/vuejs/test-utils/issues/1538
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "outDir": "dist",
-    "resolveJsonModule": true,
-    "types": ["webpack-env", "vite/client"]
-  },
-  "include": ["jest.setup.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "extends": "@aws-amplify/typescript-config/tsconfig.vue.json",
+  "include": [
+    "__mocks__",
+    "__tests__",
+    "*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
@@ -25,13 +25,7 @@ export default defineConfig({
           declaration: true,
           declarationMap: true,
         },
-        exclude: [
-          'vite.config.ts',
-          '*.ts',
-          '__tests__',
-          '**/__mock__',
-          '**/__tests__',
-        ],
+        exclude: ['*.ts', '**/__mocks__', '**/__tests__'],
       },
     }) as PluginOption,
   ],
@@ -64,11 +58,7 @@ export default defineConfig({
         'aws-amplify/utils',
         'vue',
       ],
-      output: {
-        globals: {
-          vue: 'Vue',
-        },
-      },
+      output: { globals: { vue: 'Vue' } },
     },
   },
 });
diff --git a/yarn.lock b/yarn.lock