Skip to content

Commit 23e6fd8

Browse files
committed
fix(vue): remove mock facade values code (#4061)
* Remove dependency on mock facade * Update comment * Remove //@ts-ignore * useAuthenticatorValue cleanup * Update packages/vue/src/composables/useAuth.ts * Update packages/vue/src/composables/useAuth.ts * Update packages/vue/src/composables/useAuth.ts * Update tests * fix typo * Update packages/vue/src/composables/__tests__/useAuthenticator.spec.ts
1 parent c33292f commit 23e6fd8

File tree

3 files changed

+24
-46
lines changed

3 files changed

+24
-46
lines changed

packages/vue/src/composables/__tests__/useAuthenticator.spec.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ class MockAuthService {
2020

2121
const mockServiceFacade = {
2222
authStatus: 'authenticated',
23+
socialProviders: ['amazon'],
2324
} as unknown as AuthenticatorServiceFacade;
2425

2526
const getServiceFacadeSpy = jest
@@ -54,13 +55,19 @@ describe('useAuthenticator', () => {
5455
it('returns the expected values', () => {
5556
const wrapper = mount(TestComponent);
5657

58+
expect(wrapper.vm.authStatus).toBe('unauthenticated');
59+
expect(wrapper.vm.socialProviders).toStrictEqual(['amazon']);
60+
wrapper.unmount();
61+
});
62+
63+
it('calls getServiceFacade once on initial mount', () => {
64+
const wrapper = mount(TestComponent);
65+
5766
expect(getServiceFacadeSpy).toBeCalledTimes(1);
5867
expect(getServiceFacadeSpy).toBeCalledWith({
5968
send: mockSend,
6069
state: mockState.value,
6170
});
62-
63-
expect(wrapper.vm.authStatus).toBe('unauthenticated');
6471
wrapper.unmount();
6572
});
6673

packages/vue/src/composables/useAuth.ts

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
} from '@aws-amplify/ui';
1515

1616
import { UseAuth } from '../types';
17-
import { facade } from './useUtils';
1817

1918
export const useAuth = createSharedComposable((): UseAuth => {
2019
const machine = createAuthenticatorMachine();
@@ -53,20 +52,25 @@ export const useAuth = createSharedComposable((): UseAuth => {
5352
export const useAuthenticator = createSharedComposable(() => {
5453
const { authStatus, state, send } = useAuth();
5554

56-
const useAuthenticatorValue = reactive({
57-
...facade,
58-
send,
59-
state,
60-
}) as any;
55+
// TODO(BREAKING): remove the cast to any
56+
const useAuthenticatorValue = reactive({}) as any;
6157

58+
/*
59+
* Note that watchEffect runs immediately, so `useAuthenticatorValue` is
60+
* guaranteed to have facade values by the time `useAuthenticator` returns.
61+
*
62+
* https://vuejs.org/api/reactivity-core.html#watcheffect
63+
*/
6264
watchEffect(() => {
63-
const facadeValues = getServiceFacade({
64-
send,
65-
state: state.value,
66-
});
65+
const facade = getServiceFacade({ send, state: state.value });
66+
67+
/*
68+
* TODO(BREAKING): consider using a plain object with `refs` instead of
69+
* one `reactive` object to prevent iterating manually over its keys.
70+
*/
6771
for (const key of Object.keys(facade)) {
6872
//@ts-ignore
69-
useAuthenticatorValue[key] = facadeValues[key];
73+
useAuthenticatorValue[key] = facade[key];
7074
}
7175
useAuthenticatorValue.authStatus = authStatus.value;
7276
useAuthenticatorValue.send = send;

packages/vue/src/composables/useUtils.ts

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)