Convert aws-amplify-vue to TypeScript

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,13 +57,27 @@ 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(
 			signInUserSession: CognitoUserSession
 		): void;
 		public getSignInUserSession(): CognitoUserSession | null;
+		// TODO: remove this accessor. only `getUsername` should be used
+		public username: string;
 		public getUsername(): string;
 
 		public getAuthenticationFlowType(): string;
@@ -316,10 +330,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/__tests__/Authenticator.test.js

@@ -3,7 +3,6 @@ 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 * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 import dependency from '../src/services/getUser';
@@ -12,15 +11,22 @@ Vue.use(AmplifyPlugin, AmplifyMocks);
 jest.mock('../src/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('');
 	});

packages/aws-amplify-vue/__tests__/Chatbot.test.js

@@ -11,16 +11,23 @@ import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 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('');
 	});
 

packages/aws-amplify-vue/__tests__/ConfirmSignIn.test.js

@@ -11,15 +11,22 @@ import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('ConfirmSignIn', () => {
+	let confirmSignIn;
+
+	beforeEach(() => {
+		confirmSignIn = new ConfirmSignIn();
+	});
+
 	it('has a mounted hook', () => {
-		expect(typeof ConfirmSignIn.mounted).toBe('function');
+		expect(confirmSignIn.$options.mounted.length).toEqual(1);
+		expect(typeof confirmSignIn.$options.mounted[0]).toBe('function');
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof ConfirmSignIn.data).toBe('function');
-		const defaultData = ConfirmSignIn.data();
+		expect(typeof confirmSignIn.$options.data).toBe('function');
+		const defaultData = confirmSignIn.$options.data();
 		expect(defaultData.code).toBe('');
-		expect(defaultData.logger).toEqual({});
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.error).toEqual('');
 	});
 
@@ -62,16 +69,16 @@ describe('ConfirmSignIn', () => {
 
 		it('...have default options', () => {
 			expect(wrapper.vm.options.header).toEqual('i18n Confirm Sign In');
-			expect(Object.keys(wrapper.vm.options.user).length).toEqual(0);
+			expect(wrapper.vm.options.user).toEqual(null);
 		});
 
 		it('...should set the error property when a valid user is not received', () => {
 			expect(wrapper.vm.error).toEqual('i18n Valid user not received.');
 		});
 
-		it('...should call Auth.confirmSignIn when submit function is called', () => {
+		it('...should call not Auth.confirmSignIn when submit function is called', () => {
 			wrapper.vm.submit();
-			expect(AmplifyMocks.Auth.confirmSignIn).toHaveBeenCalled();
+			expect(AmplifyMocks.Auth.confirmSignIn).toHaveBeenCalledTimes(0);
 		});
 
 		it('...should call emit the authState event when signIn function is called', () => {

packages/aws-amplify-vue/__tests__/ConfirmSignUp.test.js

@@ -11,15 +11,22 @@ import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('ConfirmSignUp', () => {
+	let confirmSignUp;
+
+	beforeEach(() => {
+		confirmSignUp = new ConfirmSignUp();
+  });
+
 	it('has a mounted hook', () => {
-		expect(typeof ConfirmSignUp.mounted).toBe('function');
+		expect(confirmSignUp.$options.mounted.length).toEqual(1);
+		expect(typeof confirmSignUp.$options.mounted[0]).toBe('function');
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof ConfirmSignUp.data).toBe('function');
-		const defaultData = ConfirmSignUp.data();
+		expect(typeof confirmSignUp.$options.data).toBe('function');
+		const defaultData = confirmSignUp.$options.data();
 		expect(defaultData.code).toBe('');
-		expect(defaultData.logger).toEqual({});
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.error).toEqual('');
 	});
 

packages/aws-amplify-vue/__tests__/Connect.test.js

@@ -9,19 +9,28 @@ import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('Connect', () => {
+	let connect;
+
+	beforeEach(() => {
+		connect = new Connect();
+	});
+
 	it('has a beforeMount hook', () => {
-		expect(typeof Connect.beforeMount).toBe('function');
+		expect(connect.$options.beforeMount.length).toEqual(2);
+		expect(typeof connect.$options.beforeMount[0]).toBe('function');
+		expect(typeof connect.$options.beforeMount[1]).toBe('function');
 	});
 
-	it('has a beforeDestroy book', () => {
-		expect(typeof Connect.beforeDestroy).toBe('function');
+	it('has a beforeDestroy hook', () => {
+		expect(connect.$options.beforeDestroy.length).toEqual(1);
+		expect(typeof connect.$options.beforeDestroy[0]).toBe('function');
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof Connect.data).toBe('function');
-		const defaultData = Connect.data();
+		expect(typeof connect.$options.data).toBe('function');
+		const defaultData = connect.$options.data();
 		expect(defaultData.data).toEqual({});
-		expect(defaultData.logger).toEqual({});
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.errors).toEqual([]);
 		expect(defaultData.loading).toEqual(false);
 		expect(defaultData.watchedSubscription).toEqual(null);

packages/aws-amplify-vue/__tests__/ForgotPassword.test.js

@@ -11,15 +11,17 @@ import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('ForgotPassword', () => {
-	it('has a mounted hook', () => {
-		expect(typeof ForgotPassword.mounted).toBe('function');
-	});
+	let forgotPassword;
+
+	beforeEach(() => {
+		forgotPassword = new ForgotPassword();
+  });
 
 	it('sets the correct default data', () => {
-		expect(typeof ForgotPassword.data).toBe('function');
-		const defaultData = ForgotPassword.data();
+		expect(typeof forgotPassword.$options.data).toBe('function');
+		const defaultData = forgotPassword.$options.data();
 		expect(defaultData.code).toBe('');
-		expect(defaultData.logger).toEqual({});
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.error).toEqual('');
 	});
 

packages/aws-amplify-vue/__tests__/PhoneField.test.js

@@ -10,9 +10,11 @@ import countries from '../src/assets/countries';
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('PhoneField', () => {
+  let phoneField;
 	let wrapper = null;
 	const mockPhoneNumberChanged = jest.fn();
 	beforeEach(() => {
+    phoneField = new PhoneField();
 		wrapper = shallowMount(PhoneField, {
 			methods: {
 				emitPhoneNumberChanged: mockPhoneNumberChanged,
@@ -25,8 +27,8 @@ describe('PhoneField', () => {
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof PhoneField.data).toBe('function');
-		const defaultData = PhoneField.data();
+		expect(typeof phoneField.$options.data).toBe('function');
+		const defaultData = phoneField.$options.data();
 		expect(defaultData.countryCode).toEqual('1');
 		expect(defaultData.local_phone_number).toEqual('');
 		expect(defaultData.countries).toEqual(countries);

packages/aws-amplify-vue/__tests__/PhotoPicker.test.js

@@ -10,17 +10,24 @@ import * as AmplifyMocks from '../__mocks__/Amplify.mocks';
 Vue.use(AmplifyPlugin, AmplifyMocks);
 
 describe('PhotoPicker', () => {
+	let photoPicker;
+
+	beforeEach(() => {
+		photoPicker = new PhotoPicker();
+  });
+
 	it('has a mounted hook', () => {
-		expect(typeof PhotoPicker.mounted).toBe('function');
+		expect(photoPicker.$options.mounted.length).toEqual(1);
+		expect(typeof photoPicker.$options.mounted[0]).toBe('function');
 	});
 
 	it('sets the correct default data', () => {
-		expect(typeof PhotoPicker.data).toBe('function');
-		const defaultData = PhotoPicker.data();
+		expect(typeof photoPicker.$options.data).toBe('function');
+		const defaultData = photoPicker.$options.data();
 		expect(defaultData.file).toBe(null);
 		expect(defaultData.s3ImagePath).toEqual('');
 		expect(defaultData.photoUrl).toEqual('');
-		expect(defaultData.logger).toEqual({});
+		expect(defaultData.logger).toEqual(null);
 		expect(defaultData.error).toEqual('');
 	});
 
@@ -142,7 +149,7 @@ describe('PhotoPicker', () => {
 		it('...should call completeFileUpload when upload is clicked', () => {
 			wrapper.vm.upload();
 			wrapper.vm.file = { foo: 'bar' };
-			wrapper.vm.s3ImageFile = 'testImage';
+			wrapper.vm.s3ImagePath = 'testImage';
 			wrapper.vm.$Amplify.Storage.put(
 				'testPath',
 				{ type: 'fakeFile' },
@@ -151,7 +158,7 @@ describe('PhotoPicker', () => {
 				.then(res => {
 					expect(mockCompleteFileUpload).toHaveBeenCalledWith(res.key);
 					expect(wrapper.vm.file).toBe(null);
-					expect(wrapper.vm.s3ImageFile).toBe(null);
+					expect(wrapper.vm.s3ImagePath).toBe(null);
 				})
 				.catch(e => e);
 		});