fixing chromatic

WPMedia · Jul 26, 2024 · d14102f · d14102f
1 parent 39fa84a
commit d14102f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 41 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -3643,7 +3643,7 @@
 				),
 				"social-sign-on-button-container-apple-custom": (
 					"inline-size": 100%
-				)
+				),
 				"social-sign-on-button-container-facebook": (
 					"justify-content": center,
 					"border-block-start-width": 1px,

diff --git a/blocks/identity-block/components/social-sign-on/_children/FacebookSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/FacebookSignIn.jsx
@@ -12,19 +12,21 @@ function FacebookSignIn({ customButtons, socialSignOnIn, className }) {
 
 	if (customButtons) {
 		return (
-			<Button
-				id="facebook-btn"
-				variant="secondary-reverse"
-				iconLeft={FacebookIcon}
-				className={`${className}__Facebook`}
-				onClick={() => window?.onFacebookSignOn()}
-			>
-				{socialSignOnIn !== SIGN_UP ? (
-					<span>{phrases.t("identity-block.social-signOn-facebook-login")}</span>
-				) : (
-					<span>{phrases.t("identity-block.social-signOn-facebook-signUp")}</span>
-				)}
-			</Button>
+			<div data-testid="custom-facebook-btn">
+				<Button
+					id="facebook-btn"
+					variant="secondary-reverse"
+					iconLeft={FacebookIcon}
+					className={`${className}__Facebook`}
+					onClick={() => window?.onFacebookSignOn()}
+				>
+					{socialSignOnIn !== SIGN_UP ? (
+						<span>{phrases.t("identity-block.social-signOn-facebook-login")}</span>
+					) : (
+						<span>{phrases.t("identity-block.social-signOn-facebook-signUp")}</span>
+					)}
+				</Button>
+			</div>
 		);
 	}
 

diff --git a/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx
@@ -12,31 +12,33 @@ function GoogleSignIn({ customButtons, socialSignOnIn, className }) {
 
 	if (customButtons) {
 		return (
-			<Button
-				id="custom-google-signin-btn"
-				variant="secondary-reverse"
-				iconLeft={GoogleIcon}
-				className={`${className}__Google`}
-				onClick={() =>
-					window.google.accounts.id.prompt((notification) => {
-						if (notification.isSkippedMoment()) {
-							// https://developers.google.com/identity/gsi/web/reference/js-reference
-							// https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown
-							// eslint-disable-next-line
-							alert(googleNotification);
-							// Remove cookie works in Safari
-							document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
-							window.google.accounts.id.prompt();
-						}
-					})
-				}
-			>
-				{socialSignOnIn !== SIGN_UP ? (
-					<span>{phrases.t("identity-block.social-signOn-google-login")}</span>
-				) : (
-					<span>{phrases.t("identity-block.social-signOn-google-signUp")}</span>
-				)}
-			</Button>
+			<div data-testid="custom-google-sign-in-button">
+				<Button
+					id="custom-google-signin-btn"
+					variant="secondary-reverse"
+					iconLeft={GoogleIcon}
+					className={`${className}__Google`}
+					onClick={() =>
+						window.google.accounts.id.prompt((notification) => {
+							if (notification.isSkippedMoment()) {
+								// https://developers.google.com/identity/gsi/web/reference/js-reference
+								// https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown
+								// eslint-disable-next-line
+								alert(googleNotification);
+								// Remove cookie works in Safari
+								document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
+								window.google.accounts.id.prompt();
+							}
+						})
+					}
+				>
+					{socialSignOnIn !== SIGN_UP ? (
+						<span>{phrases.t("identity-block.social-signOn-google-login")}</span>
+					) : (
+						<span>{phrases.t("identity-block.social-signOn-google-signUp")}</span>
+					)}
+				</Button>
+			</div>
 		);
 	}
 	return (

diff --git a/blocks/identity-block/components/social-sign-on/index.test.jsx b/blocks/identity-block/components/social-sign-on/index.test.jsx
@@ -97,7 +97,7 @@ describe("Identity Social Login Component", () => {
 			</GoogleSignInProvider>,
 		);
 
-		expect(screen.getByTestId('custom-google-signin-btn')).toBeInTheDocument();
+		expect(screen.getByTestId('custom-google-sign-in-button')).toBeInTheDocument();
 		expect(screen.queryByTestId('fb-login-button')).not.toBeInTheDocument();
 	});
 
@@ -145,7 +145,7 @@ describe("Identity Social Login Component", () => {
 			</GoogleSignInProvider>,
 		);
 
-		expect(screen.getByTestId('facebook-btn')).toBeInTheDocument();
+		expect(screen.getByTestId('custom-facebook-btn')).toBeInTheDocument();
 		expect(screen.queryByTestId('google-sign-in-button')).not.toBeInTheDocument();
 	});