Convert aws-amplify-vue to Typescript

Author: netroy

package.json

@@ -26,9 +26,10 @@
 			"pre-commit": "pretty-quick --staged"
 		}
 	},
-	"workspaces": [
-		"packages/*"
-	],
+	"workspaces": {
+		"packages": ["packages/*"],
+		"nohoist": ["**/@vue/**"]
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/aws-amplify/amplify-js.git"

packages/amazon-cognito-identity-js/index.d.ts

@@ -57,7 +57,19 @@ declare module 'amazon-cognito-identity-js' {
 		Storage?: ICognitoStorage;
 	}
 
+	export type CognitoSigninChallenge = 'SMS_MFA' | 'SOFTWARE_TOKEN_MFA';
+	export type CognitoChallenge =
+		| CognitoSigninChallenge
+		| 'CUSTOM_CHALLENGE'
+		| 'DEVICE_SRP_AUTH'
+		| 'MFA_SETUP'
+		| 'NEW_PASSWORD_REQUIRED'
+		| 'SELECT_MFA_TYPE'
+		| 'DEVICE_PASSWORD_VERIFIER';
+
 	export class CognitoUser {
+		challengeName?: CognitoChallenge;
+
 		constructor(data: ICognitoUserData);
 
 		public setSignInUserSession(
@@ -316,10 +328,10 @@ declare module 'amazon-cognito-identity-js' {
 		public isValid(): boolean;
 	}
 	/*
-    export class CognitoIdentityServiceProvider {
-        public config: AWS.CognitoIdentityServiceProvider.Types.ClientConfiguration;
-    }
-    */
+	export class CognitoIdentityServiceProvider {
+		public config: AWS.CognitoIdentityServiceProvider.Types.ClientConfiguration;
+	}
+	*/
 	export class CognitoAccessToken {
 		payload: { [key: string]: any };
 

packages/api/src/API.ts

@@ -10,9 +10,13 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-import { OperationDefinitionNode, GraphQLError } from 'graphql';
-import { print } from 'graphql/language/printer';
-import { parse } from 'graphql/language/parser';
+import {
+	OperationDefinitionNode,
+	OperationTypeNode,
+	GraphQLError,
+	parse,
+	print,
+} from 'graphql';
 import * as Observable from 'zen-observable';
 import { RestClient as RestClass } from './RestClient';
 import Amplify, {
@@ -40,8 +44,7 @@ export default class APIClass {
 	 * @private
 	 */
 	private _options;
-	private _api = null;
-	private _pubSub = Amplify.PubSub;
+	private _api: RestClass = null;
 
 	/**
 	 * Initialize Storage with AWS configuration
@@ -334,7 +337,7 @@ export default class APIClass {
 	 * to get the operation type
 	 * @param operation
 	 */
-	getGraphqlOperationType(operation) {
+	getGraphqlOperationType(operation: string): OperationTypeNode {
 		const doc = parse(operation);
 		const {
 			definitions: [{ operation: operationType }],

packages/auth/src/Auth.ts

@@ -59,6 +59,7 @@ import {
 	CognitoIdToken,
 	CognitoRefreshToken,
 	CognitoAccessToken,
+	CognitoSigninChallenge,
 } from 'amazon-cognito-identity-js';
 
 import { parse } from 'url';
@@ -857,7 +858,7 @@ export default class AuthClass {
 	public confirmSignIn(
 		user: CognitoUser | any,
 		code: string,
-		mfaType?: 'SMS_MFA' | 'SOFTWARE_TOKEN_MFA' | null
+		mfaType?: CognitoSigninChallenge | null
 	): Promise<CognitoUser | any> {
 		if (!code) {
 			return this.rejectAuthError(AuthErrorTypes.EmptyCode);
@@ -1767,7 +1768,7 @@ export default class AuthClass {
 					logger.debug('AWS credentials', credentials);
 				}
 
-				/* 
+				/*
                 Prior to the request we do sign the custom state along with the state we set. This check will verify
                 if there is a dash indicated when setting custom state from the request. If a dash is contained
                 then there is custom state present on the state string.

packages/aws-amplify-vue/__mocks__/Amplify.mocks.js

@@ -0,0 +1,64 @@
+export class Logger {
+  private name: string;
+  public info = jest.fn();
+  public error = jest.fn();
+
+  constructor(name: string) {
+    this.name = name;
+  }
+};
+
+export const Auth = {
+  currentAuthenticatedUser: jest.fn(() => Promise.resolve({})),
+  verifyCurrentUserAttribute: jest.fn(() =>
+    Promise.resolve({ username: 'myTestUsername' })
+  ),
+  completeNewPassword: jest.fn(() => Promise.resolve({})),
+  confirmSignIn: jest.fn(() => Promise.resolve({})),
+  confirmSignUp: jest.fn(() => Promise.resolve({})),
+  forgotPassword: jest.fn(() => Promise.resolve({})),
+  forgotPasswordSubmit: jest.fn(() => Promise.resolve({})),
+  resendSignUp: jest.fn(() => Promise.resolve({})),
+  setPreferredMFA: jest.fn(() => Promise.resolve({})),
+  setupTOTP: jest.fn(() => Promise.resolve('gibberish')),
+  signIn: jest.fn(() =>
+    Promise.resolve({
+      challengeName: 'CUSTOM_CHALLENGE',
+      challengeParam: { trigger: 'true' },
+    })
+  ),
+  signOut: jest.fn(() => Promise.resolve({})),
+  signUp: jest.fn(() => Promise.resolve({})),
+  verifiedContact: jest.fn(() => Promise.resolve({})),
+  verifyTotpToken: jest.fn(() => Promise.resolve({})),
+};
+
+export class AuthClass {};
+
+export const Interactions = {
+  onComplete: jest.fn(() => Promise.resolve({})),
+  send: jest.fn(() => Promise.resolve({})),
+};
+
+export const Storage = {
+  get: jest.fn(() => Promise.resolve({})),
+  put: jest.fn(() => Promise.resolve({ key: 'testKey' })),
+  list: jest.fn(() => Promise.resolve({})),
+};
+
+export const I18n = {
+  get: jest.fn(key => `i18n ${key}`),
+};
+
+export const XR = {
+  loadScene: jest.fn(() => Promise.resolve({})),
+  start: jest.fn(),
+  isMuted: jest.fn(() => false),
+  isVRCapable: jest.fn(() => false),
+  onSceneEvent: jest.fn(),
+  setMuted: jest.fn(),
+  enableAudio: jest.fn(),
+  enterVR: jest.fn(),
+  exitVR: jest.fn(),
+  isVRPresentationActive: jest.fn(() => false),
+};

packages/aws-amplify-vue/__mocks__/Amplify.mocks.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import App from '../src/Amplify.vue';
-import AmplifyEventBus from '../src/events/AmplifyEventBus';
-import AmplifyPlugin from '../src/plugins/AmplifyPlugin';
+import App from '@/Amplify.vue';
+import AmplifyEventBus from '@/events/AmplifyEventBus';
+import AmplifyPlugin from '@/plugins/AmplifyPlugin';
 import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 
 Vue.use(AmplifyPlugin, AmplifyMocks);

packages/aws-amplify-vue/__tests__/Amplify.test.js renamed to packages/aws-amplify-vue/__tests__/Amplify.test.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import App from '../src/Amplify.vue';
-import AmplifyPlugin from '../src/plugins/AmplifyPlugin';
+import App from '@/Amplify.vue';
+import AmplifyPlugin from '@/plugins/AmplifyPlugin';
 
 Vue.use(AmplifyPlugin, {});
 

packages/aws-amplify-vue/__tests__/AmplifyPlugin.test.js renamed to packages/aws-amplify-vue/__tests__/AmplifyPlugin.test.ts

@@ -1,26 +1,33 @@
 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils'; // eslint-disable-line
-import Authenticator from '../src/components/authenticator/Authenticator.vue';
-import AmplifyEventBus from '../src/events/AmplifyEventBus';
-import * as components from '../src/components';
-import * as AmplifyEntry from '../src/Amplify.vue'; //eslint-disable-line
-import AmplifyPlugin from '../src/plugins/AmplifyPlugin';
+import { mocked } from 'ts-jest/utils';
+import { shallowMount } from '@vue/test-utils';
+import Authenticator from '@/components/authenticator/Authenticator.vue';
+import AmplifyEventBus from '@/events/AmplifyEventBus';
+import * as components from '@/components';
+import AmplifyPlugin from '@/plugins/AmplifyPlugin';
 import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
-import dependency from '../src/services/getUser';
+import dependency from '@/services/getUser';
 
 Vue.use(AmplifyPlugin, AmplifyMocks);
-jest.mock('../src/services/getUser');
+jest.mock('@/services/getUser');
 
 describe('Authenticator', () => {
+	let authenticator;
+
+	beforeEach(() => {
+		authenticator = new Authenticator();
+	});
+
 	it('has a mounted hook', () => {
-		expect(typeof Authenticator.mounted).toBe('function');
+		expect(authenticator.$options.mounted.length).toEqual(1);
+		expect(typeof authenticator.$options.mounted[0]).toBe('function');
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof Authenticator.data).toBe('function');
-		const defaultData = Authenticator.data();
-		expect(defaultData.user.username).toBe(null);
-		expect(defaultData.logger).toEqual({});
+		expect(typeof authenticator.$options.data).toEqual('function');
+		const defaultData = authenticator.$options.data();
+		expect(defaultData.user).toBe(null);
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.displayMap).toEqual({});
 		expect(defaultData.error).toEqual('');
 	});
@@ -30,7 +37,7 @@ describe('Authenticator', () => {
 
 		beforeEach(() => {
 			wrapper = shallowMount(Authenticator);
-			dependency.mockImplementation(() => Promise.resolve({}));
+			mocked(dependency).mockImplementation(() => Promise.resolve(null));
 		});
 
 		it('...it should use the amplify plugin with passed modules', () => {
@@ -60,15 +67,15 @@ describe('Authenticator', () => {
 
 	describe('...when it is mounted and displaying components...', () => {
 		let wrapper;
-		let mockDisplayMap = {};
+		let mockDisplayMap = {} as any;
 		beforeEach(() => {
 			wrapper = shallowMount(Authenticator, {
 				// methods: {
 				//   updateDisplayMap: mockUpdateDisplayMap,
 				// }
 			});
 			wrapper.vm.updateDisplayMap = jest.fn(() => mockDisplayMap);
-			dependency.mockImplementation(() => Promise.reject(new Error()));
+			mocked(dependency).mockImplementation(() => Promise.reject(new Error()));
 			mockDisplayMap = {
 				showSignIn: false,
 				showSignUp: false,
@@ -122,9 +129,9 @@ describe('Authenticator', () => {
 		});
 
 		it('...should set user and options data on localUser event emission', () => {
-			const testUser = { username: 'IAMEMITTED' };
+			const testUser = { getUsername: () => 'IAMEMITTED' };
 			AmplifyEventBus.$emit('localUser', testUser);
-			expect(wrapper.vm.user.username).toEqual(testUser.username);
+			expect(wrapper.vm.user.getUsername()).toEqual(testUser.getUsername());
 		});
 	});
 });

packages/aws-amplify-vue/__tests__/Authenticator.test.js renamed to packages/aws-amplify-vue/__tests__/Authenticator.test.ts

@@ -1,26 +1,30 @@
-/* eslint-disable */
 import Vue from 'vue';
-import { shallowMount, mount } from '@vue/test-utils';
-import * as AmplifyUI from '@aws-amplify/ui';
-import Chatbot from '../src/components/interactions/Chatbot.vue';
-import AmplifyEventBus from '../src/events/AmplifyEventBus';
-import AmplifyPlugin from '../src/plugins/AmplifyPlugin';
+import { shallowMount } from '@vue/test-utils';
+import Chatbot from '@/components/interactions/Chatbot.vue';
+import AmplifyEventBus from '@/events/AmplifyEventBus';
+import AmplifyPlugin from '@/plugins/AmplifyPlugin';
 import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
-/* eslint-enable */
 
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('Chatbot', () => {
+	let chatbot;
+
+	beforeEach(() => {
+		chatbot = new Chatbot();
+	});
+
 	it('has a mounted hook', () => {
-		expect(typeof Chatbot.mounted).toBe('function');
+		expect(chatbot.$options.mounted.length).toEqual(1);
+		expect(typeof chatbot.$options.mounted[0]).toBe('function');
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof Chatbot.data).toBe('function');
-		const defaultData = Chatbot.data();
+		expect(typeof chatbot.$options.data).toBe('function');
+		const defaultData = chatbot.$options.data();
 		expect(defaultData.inputText).toBe('');
 		expect(defaultData.messages.length).toEqual(0);
-		expect(defaultData.logger).toEqual({});
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.error).toEqual('');
 	});