From 57c5ce0142803af88375304ad37890f5d4c2e76e Mon Sep 17 00:00:00 2001
From: Adrian Santana Berg <adrian_berg96@hotmail.com>
Date: Thu, 12 Oct 2023 20:26:45 +0200
Subject: [PATCH] test: add tests

---
 .../__tests__/transport-mode-filter.test.tsx  | 141 ++++++++++++++++++
 .../transport-mode-filter/index.tsx           |   7 +-
 2 files changed, 145 insertions(+), 3 deletions(-)
 create mode 100644 src/components/transport-mode-filter/__tests__/transport-mode-filter.test.tsx

diff --git a/src/components/transport-mode-filter/__tests__/transport-mode-filter.test.tsx b/src/components/transport-mode-filter/__tests__/transport-mode-filter.test.tsx
new file mode 100644
index 00000000..eeab648a
--- /dev/null
+++ b/src/components/transport-mode-filter/__tests__/transport-mode-filter.test.tsx
@@ -0,0 +1,141 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import TransportModeFilter from '@atb/components/transport-mode-filter';
+import { getInitialTransportModeFilter } from '@atb/components/transport-mode-filter/utils';
+import userEvent from '@testing-library/user-event';
+import { TransportModeFilterState } from '@atb/components/transport-mode-filter/types';
+
+afterEach(() => cleanup());
+
+describe('transport mode filter', () => {
+  it('should render', () => {
+    render(
+      <TransportModeFilter
+        filterState={getInitialTransportModeFilter()}
+        onFilterChange={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByRole('checkbox', {
+        name: /alle/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should default select all', () => {
+    render(
+      <TransportModeFilter
+        filterState={getInitialTransportModeFilter()}
+        onFilterChange={() => {}}
+      />,
+    );
+
+    screen.getAllByRole('checkbox').forEach((checkbox) => {
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  it('should default select only bus', () => {
+    render(
+      <TransportModeFilter
+        filterState={getInitialTransportModeFilter(['bus'])}
+        onFilterChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole('checkbox', { name: /alle/i })).not.toBeChecked();
+    expect(screen.getByRole('checkbox', { name: /^buss$/i })).toBeChecked();
+    expect(screen.getAllByRole('checkbox', { checked: true })).toHaveLength(1);
+  });
+
+  it('should call onChange when clicking a checkbox', () => {
+    const onChange = vi.fn();
+
+    render(
+      <TransportModeFilter
+        filterState={getInitialTransportModeFilter()}
+        onFilterChange={onChange}
+      />,
+    );
+
+    screen.getByRole('checkbox', { name: /alle/i }).click();
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('should uncheck all when clicking "All"', () => {
+    const onChange = vi.fn();
+    const initialState = getInitialTransportModeFilter();
+    const expected: TransportModeFilterState = {
+      air: false,
+      airportbus: false,
+      bus: false,
+      expressboat: false,
+      ferry: false,
+      other: false,
+      rail: false,
+    };
+
+    render(
+      <TransportModeFilter
+        filterState={initialState}
+        onFilterChange={onChange}
+      />,
+    );
+
+    screen.getByRole('checkbox', { name: /alle/i }).click();
+    expect(onChange).toHaveBeenCalledWith(expected);
+  });
+
+  it('should only uncheck "Bus"', () => {
+    const onChange = vi.fn();
+    const initialState = getInitialTransportModeFilter();
+    const expected: TransportModeFilterState = {
+      ...initialState,
+      bus: false,
+    };
+
+    render(
+      <TransportModeFilter
+        filterState={initialState}
+        onFilterChange={onChange}
+      />,
+    );
+
+    screen.getByRole('checkbox', { name: /^buss$/i }).click();
+    expect(onChange).toHaveBeenCalledWith(expected);
+  });
+
+  it('should check all when all initially are unchecked', async () => {
+    const onChange = vi.fn();
+
+    const initial: TransportModeFilterState = {
+      air: false,
+      airportbus: false,
+      bus: false,
+      expressboat: false,
+      ferry: false,
+      other: false,
+      rail: false,
+    };
+
+    const expected: TransportModeFilterState = {
+      air: true,
+      airportbus: true,
+      bus: true,
+      expressboat: true,
+      ferry: true,
+      other: true,
+      rail: true,
+    };
+
+    render(
+      <TransportModeFilter filterState={initial} onFilterChange={onChange} />,
+    );
+
+    const all = screen.getByRole('checkbox', { name: /alle/i });
+
+    await userEvent.click(all);
+    expect(onChange).toHaveBeenCalledWith(expected);
+  });
+});
diff --git a/src/components/transport-mode-filter/index.tsx b/src/components/transport-mode-filter/index.tsx
index 99718055..0a23430b 100644
--- a/src/components/transport-mode-filter/index.tsx
+++ b/src/components/transport-mode-filter/index.tsx
@@ -39,7 +39,7 @@ export default function TransportModeFilter({
               onFilterChange(setAllValues(filterState, event.target.checked));
             }}
           />
-          <label htmlFor="all">
+          <label htmlFor="all" aria-hidden>
             {t(ComponentText.TransportModeFilter.all)}
           </label>
         </li>
@@ -65,8 +65,9 @@ export default function TransportModeFilter({
                       [key]: event.target.checked,
                     });
                   }}
+                  aria-labelledby={`label-${option.id}`}
                 />
-                <label htmlFor={option.id}>
+                <label htmlFor={option.id} aria-hidden>
                   <MonoIcon
                     icon={getTransportModeIcon({
                       mode: option.icon?.transportMode,
@@ -74,7 +75,7 @@ export default function TransportModeFilter({
                     })}
                     overrideMode="dark"
                   />
-                  <span>{text}</span>
+                  <span id={`label-${option.id}`}>{text}</span>
                 </label>
               </div>