test: add missing unit tests (#1157)

* test: add missing unit tests for `<Banner>`, `<Datepicker>`, `<ThemeModeScript>`

* chore: enable coverage report in `yarn test:open`

You can now view test coverage in the local `vitest` window that is open in your browser, instead of
needing to run `yarn test:coverage` in tandem.

Author: tulup-conner

src/components/Banner/Banner.spec.tsx

@@ -0,0 +1,22 @@
+import userEvent from '@testing-library/user-event';
+import { Banner } from './Banner';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('Components / Banner', () => {
+  it('should close when collapse button is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <div>
+        <Banner>
+          <Banner.CollapseButton>Click me</Banner.CollapseButton>
+        </Banner>
+      </div>,
+    );
+
+    await user.tab();
+    await user.keyboard('[Space]');
+
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+  });
+});

src/components/Datepicker/Datepicker.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Datepicker } from './Datepicker';
+import { getFormattedDate } from './helpers';
+import userEvent from '@testing-library/user-event';
+
+describe('Components / Datepicker', () => {
+  it("should display today's date by default", () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
+
+    render(<Datepicker />);
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
+
+  it('should update date when a different day is clicked', async () => {
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+
+    expect((screen.getByRole('textbox') as HTMLInputElement).value?.includes(`${anotherDay}`)).toBeTruthy();
+  });
+
+  it("should reset to today's date when Clear button is clicked", async () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getByText('Clear'));
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
+
+  it("should use today's date when Today button is clicked", async () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getByText('Today'));
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
+
+  it('should call `onSelectedDateChange` when a new date is selected', async () => {
+    const onSelectedDateChange = vi.fn();
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker onSelectedDateChanged={onSelectedDateChange} />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+
+    expect(onSelectedDateChange).toHaveBeenCalledOnce();
+  });
+
+  it('should close month overlay when user clicks outside of it', async () => {
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(document.body);
+  });
+});

src/components/ThemeModeScript/ThemeModeScript.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ThemeModeScript } from './ThemeModeScript';
+
+describe('Components / ThemeModeScript', () => {
+  it('should insert `<script>`', () => {
+    render(
+      <>
+        <ThemeModeScript />
+      </>,
+    );
+
+    expect(document.querySelector('script')).toBeDefined();
+  });
+});

vitest.config.ts

@@ -13,6 +13,7 @@ const config: ViteConfig = {
   plugins: [react(), tsconfigPaths()],
   test: {
     coverage: {
+      enabled: true,
       reporter: ['html', 'json', 'text'],
     },
     environment: 'jsdom',