feat(test): test new code

CHANGE_LOG.md

@@ -1,3 +1,5 @@
+## [1.543.3](https://github.com/oaknational/Oak-Web-Application/compare/v1.543.2...v1.543.3) (2024-09-11)
+
 ## [1.543.2](https://github.com/oaknational/Oak-Web-Application/compare/v1.543.1...v1.543.2) (2024-09-11)
 
 

sonar-project.properties

@@ -4,7 +4,7 @@ sonar.organization=oaknational
 
 # This is the name and version displayed in the SonarCloud UI.
 sonar.projectName=Oak Web Application
-sonar.projectVersion=v1.543.2
+sonar.projectVersion=v1.543.3
 sonar.projectDescription=Oak National Academy Web Application
 sonar.links.homepage=https://www.thenational.academy/
 

src/app/(registration)/formAppearanceStyles.ts

@@ -0,0 +1,120 @@
+import { oakColorTokens } from "@oaknational/oak-components";
+
+const formFocusStyles = {
+  "&:focus": {
+    boxShadow: `0px 0px 0px 2px ${oakColorTokens.lemon}, 0px 0px 0px 5px ${oakColorTokens.grey60} !important`,
+  },
+};
+
+const buttonStyles = {
+  padding: "8px",
+  radius: "4px",
+  border: `1px solid ${oakColorTokens.grey50} !important`,
+  ...formFocusStyles,
+};
+
+const headerTextStyles = {
+  textAlign: "start",
+  fontWeight: "300",
+  fontSize: "16px",
+  color: oakColorTokens.grey60,
+};
+
+const linkFocusStyles = {
+  borderRadius: "4px",
+  outline: "none",
+  boxShadow: `0px 0px 0px 2px ${oakColorTokens.lemon}, 0px 0px 0px 5px ${oakColorTokens.grey60}`,
+};
+
+export const formAppearanceStyles = {
+  elements: {
+    card: {
+      padding: "40px 40px 40px",
+    },
+    logoBox: {
+      height: "47px",
+      justifyContent: "flex-start",
+      "a:focus": linkFocusStyles,
+    },
+    headerTitle: {
+      fontSize: "20px",
+      textAlign: "start",
+      marginBottom: "8px",
+      color: oakColorTokens.black,
+      fontWeight: "600",
+    },
+    headerSubtitle: {
+      ...headerTextStyles,
+    },
+    dividerText: {
+      ...headerTextStyles,
+    },
+    dividerLine: {
+      height: "1px",
+      background: oakColorTokens.grey50,
+    },
+    button__google: {
+      ...buttonStyles,
+    },
+    button__microsoft: {
+      ...buttonStyles,
+    },
+    socialButtonsBlockButtonText: {
+      ...headerTextStyles,
+      color: oakColorTokens.black,
+    },
+    formFieldLabel: {
+      fontSize: "16px",
+      fontWeight: "500",
+      color: oakColorTokens.black,
+    },
+    button: {
+      padding: "14px",
+      fontSize: "16px",
+      ...formFocusStyles,
+    },
+    formFieldInput: {
+      padding: "16px",
+      border: `1px solid ${oakColorTokens.grey50} !important`,
+      ...formFocusStyles,
+    },
+    input: {
+      border: `1px solid ${oakColorTokens.grey50} !important`,
+    },
+    footer: {
+      padding: "0px",
+    },
+    footerAction: {
+      zIndex: "50",
+      margin: "0px 0px 24px 0px",
+      padding: "0px !important",
+      width: "100%",
+      paddingLeft: "40px  !important",
+      "a:focus": linkFocusStyles,
+    },
+    footerActionLink: {
+      color: oakColorTokens.navy,
+      textAlign: "start !important",
+      fontSize: "16px",
+      "&:hover": {
+        color: oakColorTokens.navy,
+      },
+    },
+    formResendCodeLink: {
+      fontWeight: "300",
+      fontSize: "16px",
+      color: oakColorTokens.grey60,
+      ...formFocusStyles,
+    },
+    footerActionText: {
+      ...headerTextStyles,
+      color: oakColorTokens.black,
+      display: "block",
+      textAlign: "start !important",
+      ...formFocusStyles,
+    },
+    identityPreviewText: {
+      ...headerTextStyles,
+    },
+  },
+};

src/app/(registration)/sign-in/[[...sign-in]]/page.tsx

@@ -3,6 +3,8 @@
 
 import { SignIn } from "@clerk/nextjs";
 
+import { formAppearanceStyles } from "../../formAppearanceStyles";
+
 export default function SignInPage() {
-  return <SignIn />;
+  return <SignIn appearance={formAppearanceStyles} />;
 }

src/app/(registration)/sign-up/[[...sign-up]]/page.tsx

@@ -3,6 +3,8 @@
 
 import { SignUp } from "@clerk/nextjs";
 
+import { formAppearanceStyles } from "../../formAppearanceStyles";
+
 export default function SignUpPage() {
-  return <SignUp />;
+  return <SignUp appearance={formAppearanceStyles} />;
 }

src/components/AppComponents/AppHeader/AppHeader.test.tsx

@@ -1,13 +1,35 @@
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/react";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 
 import AppHeader from ".";
 
+import { useFeatureFlaggedClerk } from "@/context/FeatureFlaggedClerk/FeatureFlaggedClerk";
 import renderWithProviders from "@/__tests__/__helpers__/renderWithProviders";
 
 const render = renderWithProviders();
+jest.mock("@/context/FeatureFlaggedClerk/FeatureFlaggedClerk", () => ({
+  useFeatureFlaggedClerk: jest.fn(() => ({
+    useUser: jest.fn(() => ({
+      isSignedIn: true,
+    })),
+  })),
+}));
+
+jest.mock("@clerk/nextjs", () => ({
+  UserButton: () => (
+    <div data-testid="clerk-user-button">Mocked User Button</div>
+  ),
+}));
+
+jest.mock("posthog-js/react", () => ({
+  useFeatureFlagEnabled: jest.fn(() => true),
+}));
 
 describe("components/AppHeader", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   test("header should be in the document", () => {
     const { getByRole } = render(<AppHeader />);
 
@@ -77,4 +99,35 @@ describe("components/AppHeader", () => {
 
     expect(pupilsLink.closest("a")).toHaveAttribute("href", "/pupils/years");
   });
+
+  it("does not render a sign out button when user is not logged in", () => {
+    (useFeatureFlaggedClerk as jest.Mock).mockImplementationOnce(() => ({
+      useUser: () => ({
+        isSignedIn: false, // Override for this test
+      }),
+    }));
+    renderWithProviders()(<AppHeader />);
+
+    const signOutButton = screen.queryByTestId("clerk-user-button");
+    expect(signOutButton).not.toBeInTheDocument();
+  });
+
+  it("renders a sign out button when a user is logged in and feature flag is on", async () => {
+    renderWithProviders()(<AppHeader />);
+    (useFeatureFlagEnabled as jest.Mock).mockReturnValue(true);
+    const signOutButton = screen.getByText("Mocked User Button");
+    expect(signOutButton).toBeInTheDocument();
+  });
+  it("does not render a sign out button when feature flag is off", () => {
+    (useFeatureFlagEnabled as jest.Mock).mockReturnValue(false);
+    (useFeatureFlaggedClerk as jest.Mock).mockImplementationOnce(() => ({
+      useUser: () => ({
+        isSignedIn: true, // Override for this test
+      }),
+    }));
+    renderWithProviders()(<AppHeader />);
+
+    const signOutButton = screen.queryByTestId("clerk-user-button");
+    expect(signOutButton).not.toBeInTheDocument();
+  });
 });

src/components/AppComponents/AppHeader/AppHeader.tsx

@@ -1,5 +1,7 @@
 import { FC, useRef } from "react";
-import { OakFlex } from "@oaknational/oak-components";
+import { oakColorTokens, OakFlex } from "@oaknational/oak-components";
+import { useFeatureFlagEnabled } from "posthog-js/react";
+import { UserButton } from "@clerk/nextjs";
 
 import Logo from "@/components/AppComponents/Logo";
 import { HeaderProps } from "@/components/AppComponents/Layout/Layout";
@@ -15,6 +17,8 @@ import { AppHeaderUnderline } from "@/components/AppComponents/AppHeaderUnderlin
 import { burgerMenuSections } from "@/browser-lib/fixtures/burgerMenuSections";
 import useAnalytics from "@/context/Analytics/useAnalytics";
 import useSelectedArea from "@/hooks/useSelectedArea";
+import { useFeatureFlaggedClerk } from "@/context/FeatureFlaggedClerk/FeatureFlaggedClerk";
+import { getBreakpoint } from "@/styles/utils/responsive";
 
 export const siteAreas = {
   teachers: "TEACHERS",
@@ -33,6 +37,9 @@ const AppHeader: FC<HeaderProps> = () => {
   const { openMenu, open } = useMenuContext();
   const { track } = useAnalytics();
   const selectedArea = useSelectedArea();
+  const { useUser } = useFeatureFlaggedClerk();
+  const authFlagEnabled = useFeatureFlagEnabled("use-auth-owa");
+  const { isSignedIn } = useUser();
 
   return (
     <header>
@@ -64,6 +71,33 @@ const AppHeader: FC<HeaderProps> = () => {
             $gap="all-spacing-6"
             $font="heading-7"
           >
+            {isSignedIn && authFlagEnabled && (
+              <UserButton
+                appearance={{
+                  elements: {
+                    userButtonAvatarBox: {
+                      [`@media (max-width: ${getBreakpoint("small")}px)`]: {
+                        width: "100%",
+                        maxWidth: "100%",
+                      },
+                    },
+                    userButtonTrigger: {
+                      "&:focus": {
+                        boxShadow: `0px 0px 0px 2px ${oakColorTokens.lemon}, 0px 0px 0px 5px ${oakColorTokens.grey60} !important`,
+                      },
+                    },
+                    userButtonPopoverCard: {
+                      [`@media (max-width: ${getBreakpoint("small")}px)`]: {
+                        width: "100%",
+                        maxWidth: "100%",
+                        marginLeft: "0",
+                      },
+                    },
+                  },
+                }}
+                data-testid="clerk-user-button"
+              />
+            )}
             <OwaLink
               page={"home"}
               $focusStyles={["underline"]}

src/components/AppComponents/AppHeaderBurgerMenuSections/AppHeaderBurgerMenuSections.test.tsx

@@ -1,6 +1,4 @@
 import { screen, within } from "@testing-library/react";
-import * as posthog from "posthog-js/react";
-import { PropsWithChildren } from "react";
 
 import AppHeaderBurgerMenuSections from "./AppHeaderBurgerMenuSections";
 
@@ -36,41 +34,4 @@ describe("AppHeaderBurgerburgerMenuSections", () => {
     const list = within(firstSection!).getByRole("list");
     expect(list).toBeInTheDocument();
   });
-
-  describe("when the `use-auth-owa` feature is enabled", () => {
-    function SignOutButton({ children }: PropsWithChildren) {
-      return <>{children}</>;
-    }
-    SignOutButton.displayName = "SignoutButton";
-
-    beforeEach(() => {
-      jest.spyOn(posthog, "useFeatureFlagEnabled").mockReturnValue(true);
-    });
-
-    it("does not render a sign out button when user is not logged in", () => {
-      enableMockClerk({ SignOutButton, SignedIn: () => null });
-
-      renderWithProviders()(
-        <AppHeaderBurgerMenuSections burgerMenuSections={burgerMenuSections} />,
-      );
-
-      const signOutButton = screen.queryByText("Sign out");
-      expect(signOutButton).not.toBeInTheDocument();
-    });
-
-    it("renders a sign out button when a user is logged in", async () => {
-      enableMockClerk({
-        SignOutButton,
-        SignedIn: ({ children }) => <>{children}</>,
-      });
-
-      renderWithProviders()(
-        <AppHeaderBurgerMenuSections burgerMenuSections={burgerMenuSections} />,
-      );
-      const signOutButton = await screen.findByRole("button", {
-        name: "Sign out",
-      });
-      expect(signOutButton).toBeInTheDocument();
-    });
-  });
 });

src/components/AppComponents/AppHeaderBurgerMenuSections/AppHeaderBurgerMenuSections.tsx

@@ -1,15 +1,9 @@
 import { FC } from "react";
-import {
-  OakHeading,
-  OakLI,
-  OakFlex,
-  OakSecondaryButton,
-} from "@oaknational/oak-components";
+import { OakHeading, OakLI, OakFlex } from "@oaknational/oak-components";
 
 import AppHeaderBurgerMenuLink, {
   BurgerMenuLink,
 } from "@/components/AppComponents/AppHeaderBurgerMenuLink";
-import { useFeatureFlaggedClerk } from "@/context/FeatureFlaggedClerk/FeatureFlaggedClerk";
 
 /**
  * New menu sections to be used in the hamburger menu for the beta site
@@ -28,15 +22,9 @@ const AppHeaderBurgerburgerMenuSections: FC<
   AppHeaderBurgerburgerMenuSectionsProps
 > = (props) => {
   const { burgerMenuSections } = props;
-  const clerk = useFeatureFlaggedClerk();
 
   return (
     <OakFlex $flexDirection="column" $gap="all-spacing-7">
-      <clerk.SignedIn>
-        <clerk.SignOutButton>
-          <OakSecondaryButton>Sign out</OakSecondaryButton>
-        </clerk.SignOutButton>
-      </clerk.SignedIn>
       {burgerMenuSections.map((section, i) => (
         <OakFlex
           $flexDirection="column"