fix(spam-protection): CHECKOUT-4852 Make sure spam protection execution status is accurate

Author: davidchin

src/checkout/checkout-service.spec.ts

@@ -1118,8 +1118,6 @@ describe('CheckoutService', () => {
         it('executes spam check', async () => {
             await checkoutService.executeSpamCheck();
 
-            expect(spamProtectionActionCreator.initialize)
-                .toHaveBeenCalled();
             expect(spamProtectionActionCreator.execute)
                 .toHaveBeenCalled();
         });

src/checkout/checkout-service.ts

@@ -1151,14 +1151,9 @@ export default class CheckoutService {
      * @returns A promise that resolves to the current state.
      */
     executeSpamCheck(): Promise<CheckoutSelectors> {
-        const action = this._spamProtectionActionCreator.initialize();
+        const action = this._spamProtectionActionCreator.execute();
 
-        return this._dispatch(action, { queueId: 'spamProtection' })
-            .then(() => {
-                const action = this._spamProtectionActionCreator.execute();
-
-                return this._dispatch(action, { queueId: 'spamProtection' });
-            });
+        return this._dispatch(action, { queueId: 'spamProtection' });
     }
 
     /**

src/spam-protection/google-recaptcha.spec.ts

@@ -102,8 +102,12 @@ describe('GoogleRecaptcha', () => {
             }
         });
 
-        it('throws an error if google recaptcha is not initialized', () => {
-            expect(() => googleRecaptcha.execute()).toThrow(NotInitializedError);
+        it('throws an error if google recaptcha is not initialized', async () => {
+            try {
+                await googleRecaptcha.execute().toPromise();
+            } catch (error) {
+                expect(error).toBeInstanceOf(NotInitializedError);
+            }
         });
 
         it('execute google recaptcha', async () => {

src/spam-protection/google-recaptcha.ts

@@ -8,6 +8,10 @@ import { NotInitializedError, NotInitializedErrorType } from '../common/error/er
 import { SpamProtectionChallengeNotCompletedError, SpamProtectionFailedError, SpamProtectionNotLoadedError } from './errors';
 import GoogleRecaptchaScriptLoader from './google-recaptcha-script-loader';
 
+const TIMEOUT = 7000;
+const RETRY_INTERVAL = 250;
+const MAX_RETRIES = TIMEOUT / RETRY_INTERVAL;
+
 export interface RecaptchaResult {
     error?: Error;
     token?: string;
@@ -59,39 +63,35 @@ export default class GoogleRecaptcha {
     }
 
     execute(): Observable<RecaptchaResult> {
-        const event$ = this._event$;
-        const recaptcha = this._recaptcha;
-
-        if (!event$ || !recaptcha) {
-            throw new NotInitializedError(NotInitializedErrorType.SpamProtectionNotInitialized);
-        }
+        return defer(() => {
+            const event$ = this._event$;
+            const recaptcha = this._recaptcha;
 
-        const timeout = 7000;
-        const retryInterval = 250;
-        const maxRetries = timeout / retryInterval;
+            if (!event$ || !recaptcha) {
+                throw new NotInitializedError(NotInitializedErrorType.SpamProtectionNotInitialized);
+            }
 
-        return defer(() => {
-            const element = document.querySelector('iframe[src*="bframe"]');
-
-            return element ?
-                of(element) :
-                throwError(new SpamProtectionNotLoadedError());
-        })
-            .pipe(
-                retryWhen(errors => errors.pipe(
-                    delay(retryInterval),
-                    switchMap((error, index) =>
-                        index < maxRetries ? of(error) : throwError(error)
-                    )
-                )),
-                switchMap(element => {
-                    this._watchRecaptchaChallengeWindow(event$, element);
-                    recaptcha.execute();
-
-                    return event$;
-                }),
-                catchError(error => of({ error }))
-            );
+            return defer(() => {
+                const element = document.querySelector('iframe[src*="bframe"]');
+
+                return element ? of(element) : throwError(new SpamProtectionNotLoadedError());
+            })
+                .pipe(
+                    retryWhen(errors => errors.pipe(
+                        delay(RETRY_INTERVAL),
+                        switchMap((error, index) =>
+                            index < MAX_RETRIES ? of(error) : throwError(error)
+                        )
+                    )),
+                    switchMap(element => {
+                        this._watchRecaptchaChallengeWindow(event$, element);
+                        recaptcha.execute();
+
+                        return event$;
+                    }),
+                    catchError(error => of({ error }))
+                );
+        });
     }
 
     private _watchRecaptchaChallengeWindow(event: Subject<RecaptchaResult>, element: Element) {

src/spam-protection/spam-protection-action-creator.spec.ts

@@ -1,10 +1,11 @@
 import { createRequestSender, Response } from '@bigcommerce/request-sender';
 import { ScriptLoader } from '@bigcommerce/script-loader';
-import { from, of, Subject } from 'rxjs';
+import { merge } from 'lodash';
+import { from, of, ReplaySubject, Subject } from 'rxjs';
 import { catchError, toArray } from 'rxjs/operators';
 
 import { createCheckoutStore, CheckoutStore, CheckoutStoreState } from '../checkout';
-import { getCheckout, getCheckoutState, getCheckoutStoreState } from '../checkout/checkouts.mock';
+import { getCheckout, getCheckoutStoreState } from '../checkout/checkouts.mock';
 import { getResponse } from '../common/http-request/responses.mock';
 
 import createSpamProtection from './create-spam-protection';
@@ -34,7 +35,7 @@ describe('SpamProtectionActionCreator', () => {
             spamProtectionRequestSender
         );
         jest.spyOn(googleRecaptcha, 'load').mockReturnValue(Promise.resolve());
-        $event = new Subject<RecaptchaResult>();
+        $event = new ReplaySubject<RecaptchaResult>();
         jest.spyOn(googleRecaptcha, 'execute').mockReturnValue($event);
         jest.spyOn(spamProtectionRequestSender, 'validate').mockReturnValue(Promise.resolve(response));
     });
@@ -96,32 +97,24 @@ describe('SpamProtectionActionCreator', () => {
 
     describe('#execute()', () => {
         it('emits actions if able to execute spam check', async () => {
-            const checkout = getCheckout();
-            checkout.shouldExecuteSpamCheck = true;
-            const checkoutState = getCheckoutState();
-            checkoutState.data = checkout;
-            const checkoutStoreState = {
-                ...getCheckoutStoreState(),
-                checkout: checkoutState,
-            };
-            const state = {
-                ...checkoutStoreState,
-                order: {
-                    errors: {},
-                    meta: {},
-                    statuses: {},
+            const store = createCheckoutStore(merge({}, getCheckoutStoreState(), {
+                checkout: {
+                    data: {
+                        shouldExecuteSpamCheck: true,
+                    },
                 },
-            };
-            const store = createCheckoutStore(state);
+            }));
 
-            const actions = from(spamProtectionActionCreator.execute()(store))
+            $event.next({ token: 'spamProtectionToken' });
+
+            const actions = await from(spamProtectionActionCreator.execute()(store))
                 .pipe(toArray())
                 .toPromise();
 
-            $event.next({ token: 'spamProtectionToken' });
-
-            expect(await actions).toEqual([
+            expect(actions).toEqual([
                 { type: SpamProtectionActionType.ExecuteRequested },
+                { type: SpamProtectionActionType.InitializeRequested },
+                { type: SpamProtectionActionType.InitializeSucceeded },
                 { type: SpamProtectionActionType.ExecuteSucceeded, payload: response.body },
             ]);
         });

src/spam-protection/spam-protection-action-creator.ts

@@ -49,35 +49,31 @@ export default class SpamProtectionActionCreator {
     }
 
     execute(): ThunkAction<SpamProtectionAction, InternalCheckoutSelectors> {
-        return store => {
-            const state = store.getState();
-            const checkout = state.checkout.getCheckout();
-
-            if (!checkout) {
-                throw new MissingDataError(MissingDataErrorType.MissingCheckout);
-            }
-
-            const { shouldExecuteSpamCheck } = checkout;
+        return store => defer(() => {
+            const { checkout } = store.getState();
+            const { id: checkoutId, shouldExecuteSpamCheck } = checkout.getCheckoutOrThrow();
 
             if (!shouldExecuteSpamCheck) {
                 return empty();
             }
 
             return concat(
                 of(createAction(SpamProtectionActionType.ExecuteRequested, undefined)),
+                this.initialize()(store),
                 this._googleRecaptcha.execute()
                     .pipe(take(1))
-                    .pipe(switchMap(({ error, token }) => {
+                    .pipe(switchMap(async ({ error, token }) => {
                         if (error || !token) {
                             throw new SpamProtectionFailedError();
                         }
 
-                        return this._requestSender.validate(checkout.id, token)
-                            .then(({ body }) => createAction(SpamProtectionActionType.ExecuteSucceeded, body));
+                        const { body } = await this._requestSender.validate(checkoutId, token);
+
+                        return createAction(SpamProtectionActionType.ExecuteSucceeded, body);
                     }))
             ).pipe(
                 catchError(error => throwErrorAction(SpamProtectionActionType.ExecuteFailed, error))
             );
-        };
+        });
     }
 }