From 9ed0725d48f28b430141fbeb577ee339373b18d2 Mon Sep 17 00:00:00 2001
From: wsameer <dev.wsameer@gmail.com>
Date: Fri, 15 Oct 2021 12:09:25 +0530
Subject: [PATCH 1/5] refactor: corrects typo in file name

---
 utils/formatDate.js       | 15 +++++++--------
 utils/formatDate.test.js  | 10 ++++++++++
 utils/formateDate.test.js | 11 -----------
 3 files changed, 17 insertions(+), 19 deletions(-)
 create mode 100644 utils/formatDate.test.js
 delete mode 100644 utils/formateDate.test.js

diff --git a/utils/formatDate.js b/utils/formatDate.js
index 3a7e14c..8454afa 100644
--- a/utils/formatDate.js
+++ b/utils/formatDate.js
@@ -1,13 +1,12 @@
- export function formatDate(date) {
+export function formatDate(date) {
     if (!date) {
-      return "";
+        return "";
     }
     const options = {
-      // weekday: 'long',
-      year: "numeric",
-      month: "short",
-      day: "numeric",
+        // weekday: 'long',
+        year: "numeric",
+        month: "short",
+        day: "numeric",
     };
     return new Date(date).toLocaleDateString("en-US", options);
-  }
-
+}
diff --git a/utils/formatDate.test.js b/utils/formatDate.test.js
new file mode 100644
index 0000000..5b1a4c3
--- /dev/null
+++ b/utils/formatDate.test.js
@@ -0,0 +1,10 @@
+import { formatDate } from "./formatDate";
+
+describe("tests format date", () => {
+    it("if data isn't pass should return null", async () => {
+        expect(formatDate()).toBe("");
+    });
+    it('should return invalid date for "21st october"', async () => {
+        expect(formatDate("21st october")).toBe("Invalid Date");
+    });
+});
diff --git a/utils/formateDate.test.js b/utils/formateDate.test.js
deleted file mode 100644
index b331719..0000000
--- a/utils/formateDate.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {formatDate} from "./formatDate"
-
-
-describe("tests format date",  () => {
-    it("if data isn't pass should return null",async()=>{
-        expect(formatDate()).toBe("")
-    })
-    it("should return invalid date for \"21st october\"",async()=>{
-        expect(formatDate("21st october")).toBe("Invalid Date")
-    })
-})
\ No newline at end of file

From dc2f0ec0091675ec4ee1936e59c9d2f56e44a1b1 Mon Sep 17 00:00:00 2001
From: wsameer <dev.wsameer@gmail.com>
Date: Fri, 15 Oct 2021 12:52:51 +0530
Subject: [PATCH 2/5] test: adds tests for Footer component

---
 components/Footer.js      | 53 ++++++++++++++++++---------------------
 components/Footer.test.js |  9 +++++++
 2 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 components/Footer.test.js

diff --git a/components/Footer.js b/components/Footer.js
index 066a2b0..cb2e9e7 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -3,36 +3,31 @@ import {
     Container,
     Stack,
     Text,
-    Link,
     useColorModeValue,
-  } from '@chakra-ui/react';
+} from "@chakra-ui/react";
 
-  export default function Footer() {
-    return (
-      <Box
-        bg={useColorModeValue('gray.50', 'gray.900')}
-        color={useColorModeValue('gray.700', 'gray.200')}
-        // css={{
-        //   backdropFilter: 'saturate(180%) blur(5px)',
-        //   backgroundColor: useColorModeValue(
-        //     'rgba(255, 255, 255, 0.8)',
-        //     'rgba(26, 32, 44, 0.8)'
-        //   ),
-        // }}
-        >
+import React from "react";
+
+export const Footer = () => (
+    <Box
+        bg={useColorModeValue("gray.50", "gray.900")}
+        color={useColorModeValue("gray.700", "gray.200")}
+    >
         <Container
-          as={Stack}
-          maxW={'6xl'}
-          py={4}
-          direction={{ base: 'column', md: 'row' }}
-          spacing={4}
-          justify={{ base: 'center', md: 'space-between' }}
-          align={{ base: 'center', md: 'center' }}>
-          <Stack direction={'row'} spacing={6}>
-           <Text>Build with ❤️ from Nigeria.  Teencode Africa </Text>
-          </Stack>
-          <Text>© {new Date().getFullYear()}. All rights reserved</Text>
+            as={Stack}
+            maxW={"6xl"}
+            py={4}
+            direction={{ base: "column", md: "row" }}
+            spacing={4}
+            justify={{ base: "center", md: "space-between" }}
+            align={{ base: "center", md: "center" }}
+        >
+            <Stack direction={"row"} spacing={6}>
+                <Text>Build with ❤️ from Nigeria. Teencode Africa </Text>
+            </Stack>
+            <Text>© {new Date().getFullYear()}. All rights reserved</Text>
         </Container>
-      </Box>
-    );
-  }
\ No newline at end of file
+    </Box>
+);
+
+export default Footer;
diff --git a/components/Footer.test.js b/components/Footer.test.js
new file mode 100644
index 0000000..b387d43
--- /dev/null
+++ b/components/Footer.test.js
@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react";
+import Footer from "./Footer";
+
+describe("Footer", () => {
+    it("should render properly", () => {
+        const { container } = render(<Footer />);
+        expect(container).toMatchSnapshot();
+    });
+});

From 1d3b76f8276de6b91bc12bdda2ee328b78487c8c Mon Sep 17 00:00:00 2001
From: wsameer <dev.wsameer@gmail.com>
Date: Fri, 15 Oct 2021 12:57:07 +0530
Subject: [PATCH 3/5] test: adds tests for FormInput component

---
 components/FormInput.js                      | 16 +++++------
 components/FormInput.test.js                 | 29 +++++++++++++++++++
 components/__snapshots__/Footer.test.js.snap | 30 ++++++++++++++++++++
 3 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 components/FormInput.test.js
 create mode 100644 components/__snapshots__/Footer.test.js.snap

diff --git a/components/FormInput.js b/components/FormInput.js
index aca73bc..886c953 100644
--- a/components/FormInput.js
+++ b/components/FormInput.js
@@ -1,10 +1,8 @@
-import React from 'react'
-import { Input } from '@chakra-ui/react';
+import React from "react";
+import { Input } from "@chakra-ui/react";
 
-export default function FormInput(props) {
-    return (
-        <>
-               <Input {...props} focusBorderColor="#181C27" color="#181C27" />
-        </>
-    )
-}
+const FormInput = (props) => (
+    <Input {...props} focusBorderColor="#181C27" color="#181C27" />
+);
+
+export default FormInput;
diff --git a/components/FormInput.test.js b/components/FormInput.test.js
new file mode 100644
index 0000000..0cd6f34
--- /dev/null
+++ b/components/FormInput.test.js
@@ -0,0 +1,29 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+import FormInput from "./FormInput";
+
+describe("FormInput", () => {
+    it("should render an <input /> element", () => {
+        render(<FormInput placeholder="First name"/>);
+        expect(screen.getByPlaceholderText(/first name/i)).toBeInTheDocument();
+    });
+
+    it("should call the onChange event if passed", () => {
+        const mockOnChange = jest.fn();
+        render(<FormInput placeholder="First name" onChange={mockOnChange} />);
+        const input = screen.getByPlaceholderText(/first name/i);
+        fireEvent.change(input, {
+            target: { value: "Roger" },
+        });
+        expect(mockOnChange).toBeCalled();
+    });
+
+    it("should call the update the value onChange", () => {
+        const mockOnChange = jest.fn();
+        render(<FormInput placeholder="First name" onChange={mockOnChange} />);
+        const input = screen.getByPlaceholderText(/first name/i);
+        fireEvent.change(input, {
+            target: { value: "Roger" },
+        });
+        expect(input.value).toBe("Roger");
+    });
+});
diff --git a/components/__snapshots__/Footer.test.js.snap b/components/__snapshots__/Footer.test.js.snap
new file mode 100644
index 0000000..1cfef47
--- /dev/null
+++ b/components/__snapshots__/Footer.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer should render properly 1`] = `
+<div>
+  <div
+    class="css-1sp5dw5"
+  >
+    <div
+      class="chakra-stack chakra-container css-1pyonn0"
+    >
+      <div
+        class="chakra-stack css-111rh5x"
+      >
+        <p
+          class="chakra-text css-0"
+        >
+          Build with ❤️ from Nigeria. Teencode Africa 
+        </p>
+      </div>
+      <p
+        class="chakra-text css-0"
+      >
+        © 
+        2021
+        . All rights reserved
+      </p>
+    </div>
+  </div>
+</div>
+`;

From 94e2a5ad1899cabbb9f392ec86d910b8bfd847e4 Mon Sep 17 00:00:00 2001
From: wsameer <dev.wsameer@gmail.com>
Date: Fri, 15 Oct 2021 14:01:13 +0530
Subject: [PATCH 4/5] test: adds tests for Header components

---
 components/Header.js                         | 170 +++++++------
 components/Header.test.js                    |  22 ++
 components/__snapshots__/Header.test.js.snap | 246 +++++++++++++++++++
 3 files changed, 362 insertions(+), 76 deletions(-)
 create mode 100644 components/Header.test.js
 create mode 100644 components/__snapshots__/Header.test.js.snap

diff --git a/components/Header.js b/components/Header.js
index 6b5b22a..685266d 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -11,13 +11,13 @@ import {
     useColorModeValue,
     useBreakpointValue,
     useDisclosure,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
 import {
     HamburgerIcon,
     CloseIcon,
     ChevronDownIcon,
     ChevronRightIcon,
-} from '@chakra-ui/icons';
+} from "@chakra-ui/icons";
 
 export default function Header() {
     const { isOpen, onToggle } = useDisclosure();
@@ -25,58 +25,70 @@ export default function Header() {
     return (
         <Box>
             <Flex
-                bg={useColorModeValue('white', 'gray.800')}
-                color={useColorModeValue('gray.600', 'white')}
-                minH={'60px'}
+                bg={useColorModeValue("white", "gray.800")}
+                color={useColorModeValue("gray.600", "white")}
+                minH={"60px"}
                 py={{ base: 2 }}
                 px={{ base: 4 }}
                 borderBottom={1}
-                borderStyle={'solid'}
-                borderColor={useColorModeValue('gray.200', 'gray.900')}
-
-                align={'center'}>
+                borderStyle={"solid"}
+                borderColor={useColorModeValue("gray.200", "gray.900")}
+                align={"center"}
+            >
                 <Flex
-                    flex={{ base: 1, md: 'auto' }}
+                    flex={{ base: 1, md: "auto" }}
                     ml={{ base: -2 }}
-                    display={{ base: 'flex', md: 'none' }}>
+                    display={{ base: "flex", md: "none" }}
+                >
                     <IconButton
                         onClick={onToggle}
                         icon={
-                            isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
+                            isOpen ? (
+                                <CloseIcon w={3} h={3} />
+                            ) : (
+                                <HamburgerIcon w={5} h={5} />
+                            )
                         }
-                        variant={'ghost'}
-                        aria-label={'Toggle Navigation'}
+                        variant={"ghost"}
+                        aria-label={"Toggle Navigation"}
                     />
                 </Flex>
-                <Flex w={"250px"} flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
+                <Flex
+                    w={"250px"}
+                    flex={{ base: 1 }}
+                    justify={{ base: "center", md: "start" }}
+                >
                     <Text
                         fontSize="2xl"
-                        textAlign={useBreakpointValue({ base: 'center', md: 'left' })}
-                        fontFamily={'heading'}
+                        textAlign={useBreakpointValue({
+                            base: "center",
+                            md: "left",
+                        })}
+                        fontFamily={"heading"}
                         className="u-stroke"
-                        color={useColorModeValue('gray.800', 'white')}>
+                        color={useColorModeValue("gray.800", "white")}
+                    >
                         Grand resume
                     </Text>
-
-
                 </Flex>
 
                 <Stack
                     flex={{ base: 1, md: 0 }}
-                    justify={'flex-end'}
-                    direction={'row'}
-                    spacing={6}>
-
+                    justify={"flex-end"}
+                    direction={"row"}
+                    spacing={6}
+                >
                     <Button
-                        display={{ base: 'none', md: 'inline-flex' }}
-                        fontSize={'sm'}
+                        display={{ base: "none", md: "inline-flex" }}
+                        fontSize={"sm"}
                         fontWeight={600}
-                        color={'white'}
-                        bg={'#181C27'}
-                        href={'#'}
+                        color={"white"}
+                        bg={"#181C27"}
+                        href={"#"}
                         _hover={{
-                            bg: '#181C27',
-                        }}>
+                            bg: "#181C27",
+                        }}
+                    >
                         Get started
                     </Button>
                 </Stack>
@@ -89,12 +101,40 @@ export default function Header() {
     );
 }
 
-const MobileNav = () => {
+export const MobileNav = () => {
+    const NAV_ITEMS = [
+        {
+            label: "Templates",
+            children: [
+                {
+                    label: "Danfo",
+                    subLabel: "Trending Design to inspire you",
+                    href: "#",
+                },
+                {
+                    label: "Google ",
+                    subLabel: "Up-and-coming Designers",
+                    href: "#",
+                },
+                {
+                    label: "Uber",
+                    // subLabel: 'Up-and-coming Designers',
+                    href: "#",
+                },
+            ],
+        },
+        {
+            label: "Contribute a Template",
+            href: "#",
+        },
+    ];
+
     return (
         <Stack
-            bg={useColorModeValue('white', 'gray.800')}
+            bg={useColorModeValue("white", "gray.800")}
             p={4}
-            display={{ md: 'none' }}>
+            display={{ md: "none" }}
+        >
             {NAV_ITEMS.map((navItem) => (
                 <MobileNavItem key={navItem.label} {...navItem} />
             ))}
@@ -102,7 +142,7 @@ const MobileNav = () => {
     );
 };
 
-const MobileNavItem = ({ label, children, href }) => {
+export const MobileNavItem = ({ label, children, href }) => {
     const { isOpen, onToggle } = useDisclosure();
 
     return (
@@ -110,36 +150,43 @@ const MobileNavItem = ({ label, children, href }) => {
             <Flex
                 py={2}
                 as={Link}
-                href={href ?? '#'}
-                justify={'space-between'}
-                align={'center'}
+                href={href ?? "#"}
+                justify={"space-between"}
+                align={"center"}
                 _hover={{
-                    textDecoration: 'none',
-                }}>
+                    textDecoration: "none",
+                }}
+            >
                 <Text
                     fontWeight={600}
-                    color={useColorModeValue('gray.600', 'gray.200')}>
+                    color={useColorModeValue("gray.600", "gray.200")}
+                >
                     {label}
                 </Text>
                 {children && (
                     <Icon
                         as={ChevronDownIcon}
-                        transition={'all .25s ease-in-out'}
-                        transform={isOpen ? 'rotate(180deg)' : ''}
+                        transition={"all .25s ease-in-out"}
+                        transform={isOpen ? "rotate(180deg)" : ""}
                         w={6}
                         h={6}
                     />
                 )}
             </Flex>
 
-            <Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}>
+            <Collapse
+                in={isOpen}
+                animateOpacity
+                style={{ marginTop: "0!important" }}
+            >
                 <Stack
                     mt={2}
                     pl={4}
                     borderLeft={1}
-                    borderStyle={'solid'}
-                    borderColor={useColorModeValue('gray.200', 'gray.700')}
-                    align={'start'}>
+                    borderStyle={"solid"}
+                    borderColor={useColorModeValue("gray.200", "gray.700")}
+                    align={"start"}
+                >
                     {children &&
                         children.map((child) => (
                             <Link key={child.label} py={2} href={child.href}>
@@ -151,32 +198,3 @@ const MobileNavItem = ({ label, children, href }) => {
         </Stack>
     );
 };
-
-
-const NAV_ITEMS = [
-    {
-        label: 'Templates',
-        children: [
-            {
-                label: 'Danfo',
-                subLabel: 'Trending Design to inspire you',
-                href: '#',
-            },
-            {
-                label: 'Google ',
-                subLabel: 'Up-and-coming Designers',
-                href: '#',
-            },
-            {
-                label: 'Uber',
-                // subLabel: 'Up-and-coming Designers',
-                href: '#',
-            },
-        ],
-    },
-    {
-        label: 'Contribute a Template',
-        href: '#',
-    },
-
-];
\ No newline at end of file
diff --git a/components/Header.test.js b/components/Header.test.js
new file mode 100644
index 0000000..8f9cd47
--- /dev/null
+++ b/components/Header.test.js
@@ -0,0 +1,22 @@
+import "../matchMedia.mock";
+import { render } from "@testing-library/react";
+import Header, { MobileNav, MobileNavItem } from "./Header";
+
+describe("Header", () => {
+    it("should render the component properly", () => {
+        const { container } = render(<Header />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render the MobileNav component properly", () => {
+        const { container } = render(<MobileNav />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render the MobileNavItem component properly", () => {
+        const { container } = render(
+            <MobileNavItem label="Contribute a Template" href="#" key={1} />
+        );
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/components/__snapshots__/Header.test.js.snap b/components/__snapshots__/Header.test.js.snap
new file mode 100644
index 0000000..aa09d1d
--- /dev/null
+++ b/components/__snapshots__/Header.test.js.snap
@@ -0,0 +1,246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header should render the MobileNav component properly 1`] = `
+<div>
+  <div
+    class="chakra-stack css-tm2a1"
+  >
+    <div
+      class="chakra-stack css-17kdbol"
+    >
+      <a
+        class="chakra-link css-q4j97j"
+        href="#"
+      >
+        <p
+          class="chakra-text css-y33gq0"
+        >
+          Templates
+        </p>
+        <svg
+          class="chakra-icon chakra-icon css-1bfsybq"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+            fill="currentColor"
+          />
+        </svg>
+      </a>
+      <div
+        class="chakra-collapse"
+        style="overflow: hidden; display: none; opacity: 0; height: 0px;"
+      >
+        <div
+          class="chakra-stack css-khmogt"
+        >
+          <a
+            class="chakra-link css-o5g2qp"
+            href="#"
+          >
+            Danfo
+          </a>
+          <a
+            class="chakra-link css-o5g2qp"
+            href="#"
+          >
+            Google 
+          </a>
+          <a
+            class="chakra-link css-o5g2qp"
+            href="#"
+          >
+            Uber
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="chakra-stack css-17kdbol"
+    >
+      <a
+        class="chakra-link css-q4j97j"
+        href="#"
+      >
+        <p
+          class="chakra-text css-y33gq0"
+        >
+          Contribute a Template
+        </p>
+      </a>
+      <div
+        class="chakra-collapse"
+        style="overflow: hidden; display: none; opacity: 0; height: 0px;"
+      >
+        <div
+          class="chakra-stack css-khmogt"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Header should render the MobileNavItem component properly 1`] = `
+<div>
+  <div
+    class="chakra-stack css-17kdbol"
+  >
+    <a
+      class="chakra-link css-q4j97j"
+      href="#"
+    >
+      <p
+        class="chakra-text css-y33gq0"
+      >
+        Contribute a Template
+      </p>
+    </a>
+    <div
+      class="chakra-collapse"
+      style="overflow: hidden; display: none; opacity: 0; height: 0px;"
+    >
+      <div
+        class="chakra-stack css-khmogt"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Header should render the component properly 1`] = `
+<div>
+  <div
+    class="css-0"
+  >
+    <div
+      class="css-8lthux"
+    >
+      <div
+        class="css-1fsntt9"
+      >
+        <button
+          aria-label="Toggle Navigation"
+          class="chakra-button css-198bfjk"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="chakra-icon css-w31a5m"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M 3 5 A 1.0001 1.0001 0 1 0 3 7 L 21 7 A 1.0001 1.0001 0 1 0 21 5 L 3 5 z M 3 11 A 1.0001 1.0001 0 1 0 3 13 L 21 13 A 1.0001 1.0001 0 1 0 21 11 L 3 11 z M 3 17 A 1.0001 1.0001 0 1 0 3 19 L 21 19 A 1.0001 1.0001 0 1 0 21 17 L 3 17 z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="css-1r8knn8"
+      >
+        <p
+          class="chakra-text u-stroke css-1i519ap"
+        >
+          Grand resume
+        </p>
+      </div>
+      <div
+        class="chakra-stack css-18njwrs"
+      >
+        <button
+          class="chakra-button css-149nlxd"
+          href="#"
+          type="button"
+        >
+          Get started
+        </button>
+      </div>
+    </div>
+    <div
+      class="chakra-collapse"
+      style="overflow: hidden; display: none; opacity: 0; height: 0px;"
+    >
+      <div
+        class="chakra-stack css-tm2a1"
+      >
+        <div
+          class="chakra-stack css-17kdbol"
+        >
+          <a
+            class="chakra-link css-q4j97j"
+            href="#"
+          >
+            <p
+              class="chakra-text css-y33gq0"
+            >
+              Templates
+            </p>
+            <svg
+              class="chakra-icon chakra-icon css-1bfsybq"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                fill="currentColor"
+              />
+            </svg>
+          </a>
+          <div
+            class="chakra-collapse"
+            style="overflow: hidden; display: none; opacity: 0; height: 0px;"
+          >
+            <div
+              class="chakra-stack css-khmogt"
+            >
+              <a
+                class="chakra-link css-o5g2qp"
+                href="#"
+              >
+                Danfo
+              </a>
+              <a
+                class="chakra-link css-o5g2qp"
+                href="#"
+              >
+                Google 
+              </a>
+              <a
+                class="chakra-link css-o5g2qp"
+                href="#"
+              >
+                Uber
+              </a>
+            </div>
+          </div>
+        </div>
+        <div
+          class="chakra-stack css-17kdbol"
+        >
+          <a
+            class="chakra-link css-q4j97j"
+            href="#"
+          >
+            <p
+              class="chakra-text css-y33gq0"
+            >
+              Contribute a Template
+            </p>
+          </a>
+          <div
+            class="chakra-collapse"
+            style="overflow: hidden; display: none; opacity: 0; height: 0px;"
+          >
+            <div
+              class="chakra-stack css-khmogt"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

From 7b9555faddda6c320b9e96a62b9f20f1b94dc1c3 Mon Sep 17 00:00:00 2001
From: wsameer <dev.wsameer@gmail.com>
Date: Fri, 15 Oct 2021 14:02:20 +0530
Subject: [PATCH 5/5] test: mocks window.matchMedia function for jest

---
 matchMedia.mock.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 matchMedia.mock.js

diff --git a/matchMedia.mock.js b/matchMedia.mock.js
new file mode 100644
index 0000000..977ce2a
--- /dev/null
+++ b/matchMedia.mock.js
@@ -0,0 +1,13 @@
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});