Test env setup [1] Initial unit tests

__tests__/Unit/Components/Accordion.test.tsx

@@ -0,0 +1,63 @@
+import { render, fireEvent } from "@testing-library/react";
+import Accordion from "@/components/Accordion";
+
+const DEFAULT_PROPS = {
+  title: "Active",
+  open: true,
+};
+
+describe("Accordion", () => {
+  test("Accordion rendered", () => {
+    const { getByTestId } = render(
+      <Accordion {...DEFAULT_PROPS}>
+        <p>Paragraph text</p>
+      </Accordion>
+    );
+
+    const accordion = getByTestId("accordion");
+    expect(accordion).toBeInTheDocument();
+  });
+
+  test("Title is visible", async () => {
+    const { getByText, getByTestId } = render(
+      <Accordion {...DEFAULT_PROPS}>
+        <p>Paragraph text</p>
+      </Accordion>
+    );
+    expect(getByText("Active")).toBeInTheDocument();
+
+    const accordion = getByTestId("accordion");
+    expect(accordion.getAttribute('aria-expanded')).toBe("true");
+    fireEvent.click(getByText("Active"));
+    expect(accordion.getAttribute('aria-expanded')).toBe("false");
+  });
+
+  test("Child is present", () => {
+    const { getByText } = render(
+      <Accordion {...DEFAULT_PROPS}>
+        <p>Paragraph text</p>
+      </Accordion>
+    );
+
+    expect(getByText("Paragraph text")).toBeInTheDocument();
+  });
+
+  test("Opens and closes on mouse click", () => {
+    const { getByText, getByTestId } = render(
+      <Accordion {...DEFAULT_PROPS}>
+        <p>Paragraph text</p>
+      </Accordion>
+    );
+
+    const accordion = getByTestId("accordion");
+
+    // Open by default
+    expect(accordion.getAttribute('aria-expanded')).toBe("true");
+
+    // Click on title
+    fireEvent.click(getByText("Active"));
+
+    // Closed after mouse click
+    expect(accordion.getAttribute('aria-expanded')).toBe("false");
+  });
+});

__tests__/Unit/Components/Tasks/Card.test.tsx

@@ -0,0 +1,87 @@
+import { render } from "@testing-library/react";
+import Card from "@/components/tasks/card/index";
+
+const DEFAULT_PROPS = {
+  content: {
+    id: "firestoreDocumentId123",
+    lossRate: {
+      dinero: 10,
+      neelam: 5
+    },
+    links: [
+      "https://realdevsquad.com/learn-site"
+    ],
+    completionAward: {
+      dinero: 110,
+      neelam: 10
+    },
+    dependsOn: [],
+    assignee: "ankur",
+    startedOn: "1618790400",
+    isNoteworthy: true,
+    title: "test 1 for drag and drop",
+    purpose: "string",
+    percentCompleted: 0,
+    endsOn: "1618790400",
+    status: "assigned",
+    featureUrl: "string",
+    type: "feature",
+    createdBy: "ankush",
+  },
+  shouldEdit: false,
+  onContentChange: jest.fn(),
+};
+
+const getFirestoreDateNDaysBefore = (n = 1) => {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return (new Date(d).getTime()) / 1000;
+};
+
+describe("Task card", () => {
+  test("Should render card", () => {
+    const { getByText } = render(
+      <Card {...DEFAULT_PROPS} />
+    );
+
+    expect(getByText("test 1 for drag and drop")).toBeInTheDocument();
+  });
+
+  test("Should show n days ago for due tasks", () => {
+    let props = {
+      ...DEFAULT_PROPS,
+      content: {
+        ...DEFAULT_PROPS.content,
+        endsOn: `${getFirestoreDateNDaysBefore(1)}`,
+      }
+    };
+    const { rerender, getByText } = render(
+      <Card {...props} />
+    );
+
+    expect(getByText("a day ago")).toBeInTheDocument();
+
+    // With updated props
+    props = {
+      ...props,
+      content: {
+        ...props.content,
+        endsOn: `${getFirestoreDateNDaysBefore(2)}`,
+      }
+    };
+
+    rerender(
+      <Card {...props} />
+    )
+
+    expect(getByText("2 days ago")).toBeInTheDocument();
+  });
+
+  test("Should show right status", () => {
+    const { getByText } = render(
+      <Card {...DEFAULT_PROPS} />
+    );
+
+    expect(getByText(DEFAULT_PROPS.content.status)).toBeInTheDocument();
+  });
+});

__tests__/Unit/Functions/fetch.test.ts

@@ -0,0 +1,20 @@
+import fetch from '@/helperFunctions/fetch';
+import mockAxios from 'jest-mock-axios';
+
+describe("Test fetch", () => {
+  afterEach(() => {
+    mockAxios.reset();
+  });
+
+  test('Should call axios', async () => {
+    const catchFn = jest.fn();
+    const thenFn = jest.fn();
+    const { requestPromise } = fetch({ url: 'http://localhost' });
+
+    requestPromise
+      .then(thenFn)
+      .catch(catchFn);
+
+    expect(mockAxios).toHaveBeenCalledTimes(1);
+  });
+});

src/components/Accordion/index.tsx

@@ -16,17 +16,16 @@ const Accordion: VFC<Props> = ({ title, open = true, children }) => {
   }
 
   return (
-    <div data-testid="accordion" className={styles.container}>
+    <div aria-expanded={isOpen} data-testid="accordion" className={styles.container}>
       <div
         className={styles.title}
         onClick={toggle}
         onKeyDown={toggle}
         tabIndex={0}
         role="button"
-        data-testid="accordion-title"
       >
         {title}
-        <span>{ isOpen ? '-' : '+' }</span>
+        <span>{isOpen ? '-' : '+'}</span>
       </div>
       <div data-testid="accordion-content" className={`${styles.content} ${isOpen ? styles.open : styles.close}`}>
         {children}

src/components/Layout/index.tsx

@@ -43,14 +43,14 @@ const Layout: FC<Props> = ({ children }) => {
           |
           {navBarContent('Idle Members', '/idle-members', router.pathname === '/idle-members')}
           {
-          (dev)
+            (dev)
             && (
               <>
                 |
                 {navBarContent('Availability Panel', '/availability-panel')}
               </>
             )
-        }
+          }
         </div>
         {children}
       </div>

src/interfaces/task.type.ts

@@ -10,13 +10,14 @@ type task = {
   endsOn: string,
   startedOn: string,
   status: string,
-  assignee: string,
+  assignee?: string,
   percentCompleted: number,
   dependsOn: string[],
-  participants: string,
+  participants?: string[],
   completionAward: award,
   lossRate: award,
   isNoteworthy: boolean,
+  createdBy: string,
 };
 
 export default task;