From 2b728c21f0aa56504c5f0e66e0b84ed972c6ab6f Mon Sep 17 00:00:00 2001 From: LauraPinilla Date: Tue, 26 Mar 2024 16:07:20 -0600 Subject: [PATCH] fixing test and linting errors --- .../bot-challenge-protection/index.jsx | 12 +++++-- .../bot-challenge-protection/index.test.jsx | 30 +++++++++++++---- .../bot-challenge-protection/reCaptchaV3.js | 6 ++++ .../identity-block/features/login/default.jsx | 9 +++--- .../features/login/default.test.jsx | 4 +-- blocks/identity-block/utils/useRecaptcha.js | 32 ++++++++++--------- 6 files changed, 63 insertions(+), 30 deletions(-) diff --git a/blocks/identity-block/components/bot-challenge-protection/index.jsx b/blocks/identity-block/components/bot-challenge-protection/index.jsx index 06c99caf76..937e987299 100644 --- a/blocks/identity-block/components/bot-challenge-protection/index.jsx +++ b/blocks/identity-block/components/bot-challenge-protection/index.jsx @@ -1,16 +1,20 @@ import React from "react"; -import { useIdentity, Paragraph } from "@wpmedia/arc-themes-components"; -import useRecaptcha, { RECAPTCHA_V2, RECAPTCHA_V3 } from "../../utils/useRecaptcha"; import ReCAPTCHA from "react-google-recaptcha"; import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3"; + +import { usePhrases, useIdentity, Paragraph } from "@wpmedia/arc-themes-components"; +import useRecaptcha, { RECAPTCHA_V2, RECAPTCHA_V3 } from "../../utils/useRecaptcha"; + +// eslint-disable-next-line import RecaptchaV3 from "./reCaptchaV3"; export const ARCXP_CAPTCHA= "ArcXP_captchaToken" const BotChallengeProtection = ({ challengeIn, setCaptchaToken, className, captchaError, setCaptchaError, resetRecaptcha }) => { - + const { isInitialized } = useIdentity(); const { recaptchaVersion, siteKey, isRecaptchaEnabled } = useRecaptcha(challengeIn); + const phrases = usePhrases(); const onChange = (value) => { setCaptchaToken(value); @@ -44,6 +48,8 @@ const BotChallengeProtection = ({ challengeIn, setCaptchaToken, className, captc } else { return null; } + + return null; }; export default BotChallengeProtection; diff --git a/blocks/identity-block/components/bot-challenge-protection/index.test.jsx b/blocks/identity-block/components/bot-challenge-protection/index.test.jsx index b1f5a40b00..8b8ef85645 100644 --- a/blocks/identity-block/components/bot-challenge-protection/index.test.jsx +++ b/blocks/identity-block/components/bot-challenge-protection/index.test.jsx @@ -1,7 +1,10 @@ import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import { useIdentity } from "@wpmedia/arc-themes-components"; import BotChallengeProtection from "."; +import * as useRecaptcha from "../../utils/useRecaptcha"; + +jest.mock("../../utils/useRecaptcha"); const mockLogin = jest.fn(() => Promise.resolve()); @@ -12,8 +15,8 @@ const mockIdentity = { }; const mockSales = { - getConfig: jest.fn(() => {}) -} + getConfig: jest.fn(() => {}), +}; jest.mock("@wpmedia/arc-themes-components", () => ({ ...jest.requireActual("@wpmedia/arc-themes-components"), @@ -32,18 +35,33 @@ jest.mock("@wpmedia/arc-themes-components", () => ({ })); describe("Bot challenge protection", () => { - it("renders with required items", () => { + it("renders with required items", async () => { + useRecaptcha.default.mockReturnValue({ + recaptchaVersion: "V2", + siteKey: "123", + isRecaptchaEnabled: true, + }); + render(); - expect(screen.getByTestId("bot-challege-protection-container")).not.toBeNull(); + await waitFor(() => { + expect(screen.getByTestId("bot-challege-protection-container")).not.toBeNull(); + }); }); it("it does not render if identity is not initialized", () => { + + useRecaptcha.default.mockReturnValue({ + recaptchaVersion: "V2", + siteKey: "123", + isRecaptchaEnabled: true, + }); + useIdentity.mockImplementation(() => ({ isInitialized: false, Identity: { ...mockIdentity, }, - })) + })); render(); expect(screen.queryByTestId("bot-challege-protection-container")).toBeNull(); }); diff --git a/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js b/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js index 40ef3e1829..b1c4fe986b 100644 --- a/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js +++ b/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js @@ -1,22 +1,28 @@ import { useEffect, useCallback } from "react"; import { useGoogleReCaptcha } from "react-google-recaptcha-v3"; + +// eslint-disable-next-line import { ARCXP_CAPTCHA } from "./index"; const RecaptchaV3 = ({ setCaptchaToken, resetRecaptcha }) => { const { executeRecaptcha } = useGoogleReCaptcha(); + const handleReCaptcha3Verify = useCallback(async () => { if (!executeRecaptcha) { + // eslint-disable-next-line console.log("ArcXP - Execute recaptcha not yet available"); return; } const token = await executeRecaptcha(); setCaptchaToken(token); localStorage.setItem(ARCXP_CAPTCHA, token); + /* eslint-disable-next-line */ }, [executeRecaptcha]); useEffect(() => { handleReCaptcha3Verify(); + /* eslint-disable-next-line */ }, [executeRecaptcha, resetRecaptcha]); return null; diff --git a/blocks/identity-block/features/login/default.jsx b/blocks/identity-block/features/login/default.jsx index 334757e81f..4faf237548 100644 --- a/blocks/identity-block/features/login/default.jsx +++ b/blocks/identity-block/features/login/default.jsx @@ -1,3 +1,4 @@ +/* global grecaptcha */ import React, { useState } from "react"; import PropTypes from "@arc-fusion/prop-types"; import { useFusionContext } from "fusion:context"; @@ -13,10 +14,6 @@ import { RECAPTCHA_LOGIN } from "../../utils/useRecaptcha"; const BLOCK_CLASS_NAME = "b-login-form"; -export function definedMessageByCode(code) { - return errorCodes[code] || errorCodes["0"]; -} - const errorCodes = { 100015: "identity-block.login-form-error.account-is-disabled", 130001: "identity-block.login-form-error.captcha-token-invalid", @@ -25,6 +22,10 @@ const errorCodes = { 0: "identity-block.login-form-error.invalid-email-password", }; +export function definedMessageByCode(code) { + return errorCodes[code] || errorCodes["0"]; +} + const Login = ({ customFields }) => { const { redirectURL, redirectToPreviousPage, loggedInPageLocation, OIDC } = customFields; diff --git a/blocks/identity-block/features/login/default.test.jsx b/blocks/identity-block/features/login/default.test.jsx index a5c8ace853..3aac18b2e5 100644 --- a/blocks/identity-block/features/login/default.test.jsx +++ b/blocks/identity-block/features/login/default.test.jsx @@ -70,7 +70,7 @@ describe("Identity Login Feature", () => { describe("Identity Login Feature - rejected Login", () => { beforeEach(() => { - mockLogin.mockImplementation(() => Promise.reject()); + mockLogin.mockImplementation(() => Promise.reject({ code: 0 })); global.grecaptcha = { reset: jest.fn() } @@ -97,7 +97,7 @@ describe("Identity Login Feature - rejected Login", () => { fireEvent.click(screen.getByRole("button")); await waitFor(() => expect(mockLogin).toHaveBeenCalled()); - await screen.findByText("identity-block.login-form-error"); + await screen.findByText("identity-block.login-form-error.invalid-email-password"); }); }); diff --git a/blocks/identity-block/utils/useRecaptcha.js b/blocks/identity-block/utils/useRecaptcha.js index 7c421009db..bab44e0034 100644 --- a/blocks/identity-block/utils/useRecaptcha.js +++ b/blocks/identity-block/utils/useRecaptcha.js @@ -1,14 +1,13 @@ import { useState, useMemo } from "react"; -import { useIdentity } from "@wpmedia/arc-themes-components"; -import { useSales } from "@wpmedia/arc-themes-components"; +import { useIdentity, useSales } from "@wpmedia/arc-themes-components"; -export const RECAPTCHA_LOGIN = 'signin'; -export const RECAPTCHA_SIGNUP = 'signup'; -export const RECAPTCHA_MAGICLINK = 'magicLink'; -export const RECAPTCHA_CHECKOUT = 'checkout'; +export const RECAPTCHA_LOGIN = "signin"; +export const RECAPTCHA_SIGNUP = "signup"; +export const RECAPTCHA_MAGICLINK = "magicLink"; +export const RECAPTCHA_CHECKOUT = "checkout"; -export const RECAPTCHA_V2 = 'V2'; -export const RECAPTCHA_V3 = 'V3'; +export const RECAPTCHA_V2 = "V2"; +export const RECAPTCHA_V3 = "V3"; const useRecaptcha = (challengeIn) => { const { Identity } = useIdentity(); @@ -18,13 +17,13 @@ const useRecaptcha = (challengeIn) => { const [siteKey, setSiteKey] = useState(); const [isRecaptchaEnabled, setIsRecaptchaEnabled] = useState(false); - const setRecaptchaInfo = (isRecaptchaEnabled, recaptchaSiteKey, recaptchaScore) => { - if (isRecaptchaEnabled && recaptchaSiteKey && recaptchaScore) { + const setRecaptchaInfo = (isCaptchaEnabled, recaptchaSiteKey, recaptchaScore) => { + if (isCaptchaEnabled && recaptchaSiteKey && recaptchaScore) { if (recaptchaScore === "-1") { setSiteKey(recaptchaSiteKey); setRecaptchaVersion(RECAPTCHA_V2); setIsRecaptchaEnabled(true); - } else if (0 <= parseFloat(recaptchaScore) && parseFloat(recaptchaScore) <= 1) { + } else if (parseFloat(recaptchaScore) >= 0 && parseFloat(recaptchaScore) <= 1) { setSiteKey(recaptchaSiteKey); setRecaptchaVersion(RECAPTCHA_V3); setIsRecaptchaEnabled(true); @@ -47,14 +46,17 @@ const useRecaptcha = (challengeIn) => { } }; - useMemo(() => checkCaptcha(), [challengeIn]); - + useMemo( + () => checkCaptcha(), + /* eslint-disable-next-line */ + [challengeIn], + ); + return { recaptchaVersion, siteKey, - isRecaptchaEnabled + isRecaptchaEnabled, }; }; export default useRecaptcha; -