chore: write tests for box shadow

oaknational · Dec 4, 2024 · 5f5d757 · 5f5d757
1 parent 4b89c8d
commit 5f5d757
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 55 deletions.
diff --git a/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.test.tsx b/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.test.tsx
@@ -10,6 +10,14 @@ import { oakDefaultTheme } from "@/styles";
 import renderWithTheme from "@/test-helpers/renderWithTheme";
 
 describe(InternalChevronAccordion, () => {
+  Object.defineProperties(HTMLElement.prototype, {
+    scrollHeight: { get: () => 348, configurable: true },
+    clientHeight: { get: () => 300, configurable: true },
+    scrollTop: { get: () => 20, configurable: true },
+  });
+
+  const useRefSpy = jest.spyOn(React, "useRef");
+
   it("matches snapshot", () => {
     const tree = create(
       <OakThemeProvider theme={oakDefaultTheme}>
@@ -45,7 +53,49 @@ describe(InternalChevronAccordion, () => {
     expect(queryByRole("region")).not.toBeInTheDocument();
   });
 
-  it("performs correct action when the content is scrolled", () => {
+  it("renders correct initial opacity of box shadow when scroll is present", async () => {
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("1");
+  });
+
+  it("renders correct initial opacity of box shadow when scroll is not present", async () => {
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 348, configurable: true },
+      scrollTop: { get: () => 20, configurable: true },
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("0");
+  });
+
+  it("renders correct opacity of box shadow after scrolling to the end", async () => {
     const { getByTestId } = renderWithTheme(
       <InternalChevronAccordion
         header="See more"
@@ -56,23 +106,52 @@ describe(InternalChevronAccordion, () => {
       </InternalChevronAccordion>,
     );
 
-    jest.spyOn(React, "useRef").mockReturnValue({
-      current: {
-        scrollHeight: 348,
-        clientHeight: 300,
-        scrollTop: 20,
-      },
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 328, configurable: true },
+      scrollTop: { get: () => 0, configurable: true },
+    });
+
+    act(() => {
+      fireEvent.scroll(getByTestId("scrollable-content"), {
+        scrollY: 20,
+      });
     });
 
     const boxShadow = getByTestId("bottom-box-shadow");
     const styles = getComputedStyle(boxShadow);
 
+    expect(useRefSpy).toHaveBeenCalled();
     expect(styles.opacity).toBe("0");
+  });
+
+  it("renders correct opacity of box shadow after scrolling notto the end", async () => {
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 328, configurable: true },
+      scrollTop: { get: () => 0, configurable: true },
+    });
 
     act(() => {
       fireEvent.scroll(getByTestId("scrollable-content"), {
         scrollY: 10,
       });
     });
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("1");
   });
 });
diff --git a/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx b/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx
@@ -79,6 +79,26 @@ const StyledContainer = styled(OakFlex)`
   ${flexStyle}
 `;
 
+type BottomBoxShadowProps = {
+  shouldDisplayShadow: boolean;
+};
+
+export const BottomBoxShadow = styled(OakBox)<BottomBoxShadowProps>`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  opacity: ${(props) =>
+    props.shouldDisplayShadow
+      ? parseOpacity("opaque")
+      : parseOpacity("transparent")};
+  z-index: 100;
+  -webkit-box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
+  -moz-box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
+  box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
+  padding: 2px;
+`;
+
 /**
  * An accordion component that can be used to show/hide content
  */
@@ -90,36 +110,16 @@ const Accordion = ({
   ...styleProps
 }: InternalChevronAccordionProps) => {
   const [shouldDisplayShadow, setShouldDisplayShadow] = useState(false);
-
-  const BottomBoxShadow = styled(OakBox)`
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 50px;
-    opacity: ${shouldDisplayShadow
-      ? parseOpacity("opaque")
-      : parseOpacity("transparent")};
-    z-index: 100;
-    -webkit-box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
-    -moz-box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
-    box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
-    padding: 2px;
-  `;
-
   const scrollBox = useRef(null as null | HTMLDivElement);
 
   useEffect(() => {
     const scrollHeight = scrollBox.current?.scrollHeight;
-
-    console.log(">>>>>> scroll height", scrollHeight);
     const clientHeight = scrollBox.current?.clientHeight;
 
-    if (scrollHeight && clientHeight) {
-      if (scrollHeight > clientHeight) {
-        setShouldDisplayShadow(true);
-      } else {
-        setShouldDisplayShadow(false);
-      }
+    if (scrollHeight && clientHeight && scrollHeight > clientHeight) {
+      setShouldDisplayShadow(true);
+    } else {
+      setShouldDisplayShadow(false);
     }
   }, []);
 
@@ -140,6 +140,7 @@ const Accordion = ({
   };
 
   const { isOpen } = useAccordionContext();
+
   return (
     <StyledContainer
       $position={"relative"}
@@ -189,7 +190,12 @@ const Accordion = ({
         </InternalAccordionContent>
       </OakBox>
       <StyledAccordionUnderline $fill={"border-decorative5-stronger"} />
-      {isOpen && <BottomBoxShadow data-testid="bottom-box-shadow" />}
+      {isOpen && (
+        <BottomBoxShadow
+          shouldDisplayShadow={shouldDisplayShadow}
+          data-testid="bottom-box-shadow"
+        />
+      )}
     </StyledContainer>
   );
 };

diff --git a/...molecules/OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap b/...molecules/OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap
@@ -175,11 +175,6 @@ exports[`OakMediaClipListAccordion matches snapshot 1`] = `
   visibility: visible;
 }
 
-.c2 {
-  position: relative;
-  border-width: 2px;
-}
-
 .c20 {
   position: absolute;
   bottom: 0;
@@ -193,6 +188,11 @@ exports[`OakMediaClipListAccordion matches snapshot 1`] = `
   padding: 2px;
 }
 
+.c2 {
+  position: relative;
+  border-width: 2px;
+}
+
 @media (min-width:750px) {
   .c3 {
     border-left: 0.125rem solid;

diff --git a/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap b/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap
@@ -167,19 +167,6 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   visibility: visible;
 }
 
-.c4 {
-  height: 0.125rem;
-  width: 100%;
-  bottom: 0.125rem;
-}
-
-.c21 {
-  height: 0.125rem;
-  position: absolute;
-  width: 100%;
-  bottom: 0.125rem;
-}
-
 .c20 {
   position: absolute;
   bottom: 0;
@@ -193,6 +180,19 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   padding: 2px;
 }
 
+.c4 {
+  height: 0.125rem;
+  width: 100%;
+  bottom: 0.125rem;
+}
+
+.c21 {
+  height: 0.125rem;
+  position: absolute;
+  width: 100%;
+  bottom: 0.125rem;
+}
+
 <div
   className="c0 c1"
 >

diff --git a/...components/organisms/shared/OakMediaClipList/__snapshots__/OakMediaClipList.test.tsx.snap b/...components/organisms/shared/OakMediaClipList/__snapshots__/OakMediaClipList.test.tsx.snap
@@ -254,11 +254,6 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   visibility: visible;
 }
 
-.c2 {
-  position: relative;
-  border-width: 2px;
-}
-
 .c27 {
   position: absolute;
   bottom: 0;
@@ -272,6 +267,11 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   padding: 2px;
 }
 
+.c2 {
+  position: relative;
+  border-width: 2px;
+}
+
 @media (min-width:750px) {
   .c3 {
     border-left: 0.125rem solid;