Skip to content

Commit

Permalink
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-920
Browse files Browse the repository at this point in the history
  • Loading branch information
GioLopWP authored Aug 15, 2023
2 parents 21cdcc0 + 54944e6 commit 75f55bf
Show file tree
Hide file tree
Showing 28 changed files with 832 additions and 50 deletions.
2 changes: 1 addition & 1 deletion .storybook/themes/commerce.scss
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
alias: (
"font-family-primary": "Inter",
"font-family-secondary": "Lora",
"color-primary": var(--global-black),
"color-primary": var(--global-blue-6),
"text-color": var(--global-neutral-8),
"text-color-subtle": var(--global-neutral-5),
"background-color": var(--global-white),
Expand Down
2 changes: 1 addition & 1 deletion .storybook/themes/news.scss
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@
alias: (
"font-family-primary": "Inter",
"font-family-secondary": "Lora",
"color-primary": var(--global-black),
"color-primary": var(--global-blue-6),
"color-primary-hover": var(--global-neutral-7),
"text-color": var(--global-neutral-8),
"text-color-subtle": var(--global-neutral-5),
Expand Down
2 changes: 1 addition & 1 deletion blocks/alias-tokens/themes/commerce.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"default": {
"font-family-primary": "Inter",
"font-family-secondary": "Lora",
"color-primary": "var(--global-black)",
"color-primary": "var(--global-blue-6)",
"text-color": "var(--global-neutral-8)",
"text-color-subtle": "var(--global-neutral-5)",
"background-color": "var(--global-white)",
Expand Down
2 changes: 1 addition & 1 deletion blocks/alias-tokens/themes/news.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"default": {
"font-family-primary": "Inter",
"font-family-secondary": "Lora",
"color-primary": "var(--global-black)",
"color-primary": "var(--global-blue-6)",
"color-primary-hover": "var(--global-neutral-7)",
"text-color": "var(--global-neutral-8)",
"text-color-subtle": "var(--global-neutral-5)",
Expand Down
1 change: 1 addition & 0 deletions blocks/extra-large-promo-block/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@include scss.block-properties("xl-promo-img");
@include scss.block-components("xl-promo-img");
}

&__icon_label {
@include scss.block-components("xl-promo-icon-label");
@include scss.block-properties("xl-promo-icon-label");
Expand Down
20 changes: 14 additions & 6 deletions blocks/identity-block/_index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@use "@wpmedia/arc-themes-components/scss";

.b-forgot-password {
@include scss.block-components("forgot-password");
@include scss.block-properties("forgot-password");
}

.b-header-account-action {
&__desktop {
@include scss.block-components("header-account-action-desktop");
Expand All @@ -17,13 +22,12 @@
}

&__dropdown-list-item {
@include scss.block-components("header-account-action-dropdown-list-item");
@include scss.block-properties("header-account-action-dropdown-list-item");

&:last-of-type {
@include scss.block-components("header-account-action-dropdown-list-item-last");
@include scss.block-properties("header-account-action-dropdown-list-item-last");
}
@include scss.block-components("header-account-action-dropdown-list-item");
@include scss.block-properties("header-account-action-dropdown-list-item");
}

@include scss.block-components("header-account-action");
Expand All @@ -40,16 +44,20 @@
@include scss.block-properties("login-links");
}

.b-reset-password {
@include scss.block-components("reset-password");
@include scss.block-properties("reset-password");
}

.b-sign-up {
&__tos-container {
a {
@include scss.block-components("sign-up-tos-link");
@include scss.block-properties("sign-up-tos-link");

&:hover {
@include scss.block-components("sign-up-tos-link-hover");
@include scss.block-properties("sign-up-tos-link-hover");
}
@include scss.block-components("sign-up-tos-link");
@include scss.block-properties("sign-up-tos-link");
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import FormPasswordConfirm from ".";
describe("Form Password Confirm", () => {
it("renders with required items", () => {
render(<FormPasswordConfirm confirmLabel="Confirm" label="Password" name="field1" />);

expect(screen.getByLabelText("Password")).not.toBeNull();
expect(screen.getByLabelText("Confirm")).not.toBeNull();
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const HeadlinedSubmitForm = ({
onSubmit = () => {},
}) => {
const formRef = useRef();

const handleSubmit = (event) => {
event.preventDefault();

Expand Down
31 changes: 31 additions & 0 deletions blocks/identity-block/components/identity/index.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ describe("Identity useIdentity Hook", () => {
expect(Identity).toBe(IdentityObject);
return <div />;
};

render(<Test />);
expect(IdentityObject.options).toHaveBeenLastCalledWith({
apiOrigin: "http://origin/",
Expand All @@ -57,6 +58,7 @@ describe("Identity useIdentity Hook", () => {
expect(testInitialization).toHaveBeenCalledWith(false);
expect(testInitialization).toHaveBeenLastCalledWith(true);
});

it("The getSignedInIdentity utility function returns the current signed in identity", () => {
const testUser = {
identities: [
Expand Down Expand Up @@ -85,4 +87,33 @@ describe("Identity useIdentity Hook", () => {
render(<Test />);
expect(screen.getByText("Google")).toBeInTheDocument();
});

it("The getSignedInIdentity utility function returns the current signed in identity when timestamps are not in order", () => {
const testUser = {
identities: [
{
userName: "93284374387433",
passwordReset: false,
type: "Facebook",
lastLoginDate: 1639164736000,
locked: false,
},
{
userName: "106487204473538668210",
passwordReset: false,
type: "Google",
lastLoginDate: 1639164734000,
locked: false,
},
],
};

const Test = () => {
const { getSignedInIdentity } = useIdentity();
const getCurrent = getSignedInIdentity(testUser);
return <div>{getCurrent.type}</div>;
};
render(<Test />);
expect(screen.getByText("Facebook")).toBeInTheDocument();
});
});
11 changes: 1 addition & 10 deletions blocks/identity-block/components/login/index.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
import { useEffect, useState } from "react";
import useIdentity from "../identity";

const validateURL = (url) => {
if (!url) return null;
const validationRegEx = /^\/[^/].*$/;
const valid = validationRegEx.test(url);
if (valid) {
return url;
}
return "/";
};
import validateURL from "../../utils/validate-redirect-url";

const useLogin = ({ isAdmin, redirectURL, redirectToPreviousPage, loggedInPageLocation }) => {
const { Identity } = useIdentity();
Expand Down
61 changes: 61 additions & 0 deletions blocks/identity-block/features/forgot-password/default.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React, { useState } from "react";
import { useFusionContext } from "fusion:context";
import getProperties from "fusion:properties";
import getTranslatedPhrases from "fusion:intl";
import { Heading, Input, Paragraph } from "@wpmedia/arc-themes-components";
import HeadlinedSubmitForm from "../../components/headlined-submit-form";
import useIdentity from "../../components/identity";

const BLOCK_CLASS_NAME = "b-forgot-password";

const ForgotPassword = () => {
const { arcSite } = useFusionContext();
const { locale } = getProperties(arcSite);
const phrases = getTranslatedPhrases(locale);

const { Identity, isInitialized } = useIdentity();
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState();

if (submitted) {
return (
<section className={BLOCK_CLASS_NAME}>
<Heading>{phrases.t("identity-block.forgot-password-headline-submitted")}</Heading>
<Paragraph>{phrases.t("identity-block.forgot-password-instruction-submitted")}</Paragraph>
</section>
);
}

return isInitialized ? (
<HeadlinedSubmitForm
buttonLabel={phrases.t("identity-block.forgot-password-submit")}
className={BLOCK_CLASS_NAME}
formErrorText={error}
headline={phrases.t("identity-block.forgot-password-headline")}
onSubmit={({ email }) =>
Identity.requestResetPassword(email)
.then(() => {
setSubmitted(true);
})
.catch(() => setError(phrases.t("identity-block.forgot-password-error")))
}
>
<Paragraph>{phrases.t("identity-block.forgot-password-instruction")}</Paragraph>
<Input
autoComplete="email"
label={phrases.t("identity-block.email")}
name="email"
required
showDefaultError={false}
type="email"
validationErrorMessage={phrases.t("identity-block.email-requirements")}
/>
</HeadlinedSubmitForm>
) : null;
};

ForgotPassword.label = "Identity Forgot Password - Arc Block";

ForgotPassword.icon = "user-question";

export default ForgotPassword;
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";

import ForgotPassword from "./default";

export default {
title: "Blocks/Identity/Blocks/Forgot Password",
parameters: {
chromatic: { viewports: [320, 1200] },
},
};

export const basic = () => <ForgotPassword />;
93 changes: 93 additions & 0 deletions blocks/identity-block/features/forgot-password/default.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import ForgotPassword from "./default";
import useIdentity from "../../components/identity";

jest.mock("../../components/identity");

const resetMock = jest.fn(() => Promise.resolve());
const resetFailMock = jest.fn(() => Promise.reject());

jest.mock("fusion:properties", () => jest.fn(() => ({})));

describe("Identity Password Reset Feature", () => {
beforeEach(() => {
useIdentity.mockImplementation(() => ({
isInitialized: true,
isLoggedIn: () => true,
Identity: {
isLoggedIn: jest.fn(() => false),
getConfig: jest.fn(() => ({})),
requestResetPassword: resetMock,
},
}));
});

afterAll(() => {
jest.clearAllMocks();
});

it("renders nothing if identity not initialized", () => {
useIdentity.mockImplementation(() => ({
isInitialized: false,
isLoggedIn: () => true,
Identity: {
isLoggedIn: jest.fn(() => false),
getConfig: jest.fn(() => ({})),
},
}));
render(<ForgotPassword />);
expect(screen.queryByRole("form")).toBe(null);
});

it("renders", () => {
render(<ForgotPassword />);
expect(screen.queryByRole("form")).not.toBe(null);
});

it("shows submit form", () => {
render(<ForgotPassword />);
expect(screen.queryByRole("form")).not.toBe(null);
expect(screen.getByText("identity-block.forgot-password-instruction")).not.toBe(null);
expect(screen.getByLabelText("identity-block.email")).not.toBe(null);
expect(screen.getByRole("button")).not.toBe(null);
});

it("uses updates the form on submit", async () => {
render(<ForgotPassword />);
fireEvent.change(screen.getByLabelText("identity-block.email"), {
target: { value: "[email protected]" },
});
await fireEvent.click(screen.getByRole("button"));
expect(screen.getByText("identity-block.forgot-password-headline-submitted")).not.toBe(null);
expect(screen.getByText("identity-block.forgot-password-instruction-submitted")).not.toBe(null);
});
});

describe("Identity Password Reset Feature - Failing", () => {
beforeEach(() => {
useIdentity.mockImplementation(() => ({
isInitialized: true,
isLoggedIn: () => true,
Identity: {
isLoggedIn: jest.fn(() => false),
getConfig: jest.fn(() => ({})),
requestResetPassword: resetFailMock,
},
}));
});

afterAll(() => {
jest.clearAllMocks();
});

it("enter error state on failure to submit", async () => {
render(<ForgotPassword />);
fireEvent.change(screen.getByLabelText("identity-block.email"), {
target: { value: "[email protected]" },
});
await fireEvent.click(screen.getByRole("button"));
await expect(resetFailMock).toHaveBeenCalled();
expect(screen.getByText("identity-block.forgot-password-error")).not.toBe(null);
});
});
Loading

0 comments on commit 75f55bf

Please sign in to comment.