Feat/dashboard tests (#31)

* feat: new tests

* feat: card test created

* feat: empty section test created

* feat: favorite activities test created

* feat: more tests for card component

* feat: more test for favorite activities component

* feat: new test for card component

* feat: delete and highlight test created

* feat: description and icon tests

* feat: new card tests

* feat: lucas' tests

* feat: icon test on favorite activities

src/__test__/components/ActivityTable.test.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import ActivityTable from '../../components/ActivityTable';
+import RecentActivityItems from '../../mock-data/RecentActivityItems';
+import '@testing-library/jest-dom';
+
+describe('Activity Table component', () => {
+  const func = jest.fn();
+  const listItems = RecentActivityItems;
+  const tableHeaders: string[] = [
+    'Activity type',
+    'Status',
+    'Request ID',
+    'Created at',
+    'Last viewed',
+    'View'
+  ];
+
+  beforeEach(() => {
+    render(
+      <ActivityTable
+        elements={listItems}
+        clickFn={func}
+        headers={tableHeaders}
+      />
+    );
+  });
+
+  it('should call the function', () => {
+    const svg = screen.getAllByRole('cell')[5].firstElementChild!;
+    fireEvent.click(svg);
+    expect(func).toBeCalled();
+  });
+
+  it('should render headers correctly', () => {
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(tableHeaders.length);
+    headers.forEach((th, idx) => {
+      expect(th.textContent).toEqual(tableHeaders[idx]);
+    });
+  });
+
+  it('should render columns correctly', () => {
+    const cells = screen.getAllByRole('cell');
+    expect(cells[0].textContent).toEqual('Seedling request');
+    expect(cells[1].textContent).toEqual('Pending');
+    expect(cells[2].textContent).toEqual('201589');
+    expect(cells[3].textContent).toEqual('2022-10-27');
+    expect(cells[4].textContent).toEqual('2022-10-27');
+  });
+});

src/__test__/components/BCGovLogo.test.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BCGovLogo from '../../components/BCGovLogo';
+import '@testing-library/jest-dom';
+
+describe('BCGovLogo component', () => {
+  it('should render correctly', () => {
+    render(<BCGovLogo />);
+    const logo = screen.getByRole('img');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute('alt', 'BCGov Logo');
+  });
+});

src/__test__/components/Card.test.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Card from '../../components/Card/index';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Test the card component', () => {
+  it('should render correctly with headers', async () => {
+    const { container } = render(
+      <Card
+        header="Test"
+        description="For testing"
+        icon="SoilMoistureField"
+      />
+    );
+
+    const headers = await screen.findAllByText('Test');
+    expect(headers[0]).toHaveClass('card-title__small');
+    expect(headers[1]).toHaveClass('card-title__large');
+    expect(screen.getByText('For testing')).toBeInTheDocument();
+    const icon = container.getElementsByClassName('card-icon');
+    expect(icon[0]).toBeInTheDocument();
+  });
+
+  it('should render card highlighted with different style', () => {
+    const { container } = render(
+      <Card
+        header="Test"
+        description="For testing"
+        icon="SoilMoistureField"
+        highlighted
+      />
+    );
+
+    expect(container.firstChild).not.toHaveClass('card-main');
+    expect(container.firstChild).toHaveClass('card-main-highlighted');
+  });
+
+  it('should click in the button and open the options', () => {
+    const { container } = render(
+      <Card
+        header="Test"
+        description="For testing"
+        icon="SoilMoistureField"
+      />
+    );
+
+    const buttonElement = container.getElementsByClassName('card-overflow');
+    fireEvent.click(buttonElement[0]);
+    expect(screen.getByText('Highlight shortcut')).toBeInTheDocument();
+    expect(screen.getByText('Delete shortcut')).toBeInTheDocument();
+  });
+
+  it('should close the dropdown menu when click outside', () => {
+    const { container } = render(
+      <Card
+        header="Test"
+        description="For testing"
+        icon="SoilMoistureField"
+      />
+    );
+
+    const buttonElement = container.getElementsByClassName('card-overflow');
+    fireEvent.click(buttonElement[0]);
+    fireEvent.click(document);
+    expect(screen.queryByText('Highlight shortcut')).toBeNull();
+    expect(screen.queryByText('Delete shortcut')).toBeNull();
+  });
+});

src/__test__/components/EmptySection.test.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmptySection from '../../components/EmptySection/index';
+import '@testing-library/jest-dom';
+
+describe('Test the Empty Section component', () => {
+  it('should render correctly', () => {
+    const { container } = render(
+      <EmptySection
+        title="Test"
+        description="For testing"
+        icon="SoilMoistureField"
+      />
+    );
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(screen.getByText('For testing')).toBeInTheDocument();
+    const icon = container.getElementsByClassName('empty-section-icon');
+    expect(icon[0]).toBeInTheDocument();
+  });
+});

src/__test__/components/FavoriteActivities.test.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import FavoriteActivities from '../../components/FavoriteActivities/index';
+import '@testing-library/jest-dom';
+
+// empty section should be tested in the future
+describe('Test the Favorite Activities component', () => {
+  it('should render correctly', () => {
+    const { container } = render(
+      <FavoriteActivities />
+    );
+
+    expect(screen.getByText('My favorite activities')).toBeInTheDocument();
+    expect(screen.getByText('Quick access to your favorite activities.')).toBeInTheDocument();
+    expect(container.getElementsByTagName('svg')).toBeDefined();
+  });
+
+  it('should render exactly 8 cards', () => {
+    const { container } = render(
+      <FavoriteActivities />
+    );
+
+    const cards = container.getElementsByClassName('card-main');
+    expect(cards).toHaveLength(8);
+  });
+
+  it('should delete the card', () => {
+    const { container } = render(
+      <FavoriteActivities />
+    );
+
+    const cards = container.getElementsByClassName('card-main');
+    const buttonElement = container.getElementsByClassName('card-overflow');
+    fireEvent.click(buttonElement[3]);
+    const deleteButton = screen.getByText('Delete shortcut');
+    fireEvent.click(deleteButton);
+    expect(cards).toHaveLength(7);
+  });
+
+  it('should highlight the card', () => {
+    const { container } = render(
+      <FavoriteActivities />
+    );
+
+    const buttonElement = container.getElementsByClassName('card-overflow');
+    fireEvent.click(buttonElement[3]);
+    const highlightButton = screen.getByText('Highlight shortcut');
+    fireEvent.click(highlightButton);
+    const highlightedCard = container.getElementsByClassName('card-main-highlighted');
+    expect(highlightedCard).toHaveLength(1);
+  });
+});

src/__test__/components/PanelSectionName.test.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PanelSectionName from '../../components/PanelSectionName/index';
+import '@testing-library/jest-dom';
+
+describe('Test the panel section name component', () => {
+  it('should render correctly', () => {
+    render(
+      <PanelSectionName title="Main Activities" />
+    );
+
+    expect(screen.getByText('Main Activities')).toBeInTheDocument();
+  });
+});

src/__test__/components/RecentActivities.test.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import RecentActivities from '../../components/RecentActivities';
+import '@testing-library/jest-dom';
+
+// TODO test Empty Section
+describe('Recent Activities component', () => {
+  beforeEach(() => {
+    render(
+      <BrowserRouter>
+        <RecentActivities />
+      </BrowserRouter>
+    );
+  });
+
+  it('should render title and subtitle correctly', () => {
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('My recent activities');
+    expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Check your recent requests and files');
+  });
+
+  it('should change tabs when clicked', () => {
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0].textContent).toEqual('Requests');
+    expect(tabs[1].textContent).toEqual('Files & Docs.');
+
+    const tabPanelBefore = screen.getByRole('tabpanel');
+    expect(tabPanelBefore).toHaveTextContent('Seedling request');
+    expect(tabPanelBefore).not.toHaveTextContent('Placeholder');
+
+    fireEvent.click(tabs[1]);
+    const tabPanelAfter = screen.getByRole('tabpanel');
+    expect(tabPanelAfter).not.toHaveTextContent('Seedling request');
+    expect(tabPanelAfter).toHaveTextContent('Placeholder');
+  });
+});

src/__test__/components/StatusItem.test.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StatusItem from '../../components/StatusItem';
+import '@testing-library/jest-dom';
+
+describe('Status item component', () => {
+  it('should return the Pending status', () => {
+    render(
+      <StatusItem status={0} />
+    );
+
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('should return the In progress status', () => {
+    render(
+      <StatusItem status={1} />
+    );
+
+    expect(screen.getByText('In progress')).toBeInTheDocument();
+  });
+
+  it('should return the Approved status', () => {
+    render(
+      <StatusItem status={2} />
+    );
+
+    expect(screen.getByText('Approved')).toBeInTheDocument();
+  });
+
+  it('should return the Canceled status', () => {
+    render(
+      <StatusItem status={3} />
+    );
+
+    expect(screen.getByText('Canceled')).toBeInTheDocument();
+  });
+});