Add VisitsComparisonCollector test

Author: acelaya

src/visits/visits-comparison/VisitsComparisonCollector.tsx

@@ -11,15 +11,15 @@ import { useRoutesPrefix } from '../../utils/routesPrefix';
 import { useVisitsToCompare } from './VisitsComparisonContext';
 
 type VisitsComparisonCollectorProps = {
-  className?: string;
   type: 'short-urls' | 'tags' | 'domains';
+  className?: string;
 };
 
 export const VisitsComparisonCollector: FC<VisitsComparisonCollectorProps> = ({ className, type }) => {
   const routesPrefix = useRoutesPrefix();
   const context = useVisitsToCompare();
   const query = useMemo(
-    () => (!context ? '' : encodeURIComponent(context.itemsToCompare.map((visit) => visit.query).join(','))),
+    () => (!context ? '' : encodeURIComponent(context.itemsToCompare.map((item) => item.query).join(','))),
     [context],
   );
 
@@ -30,9 +30,9 @@ export const VisitsComparisonCollector: FC<VisitsComparisonCollectorProps> = ({
   return (
     <div className={clsx('top-sticky', className)}>
       <SimpleCard bodyClassName="d-flex gap-3 align-items-center">
-        <div className="d-flex flex-wrap gap-1 flex-grow-1">
+        <ul className="d-flex flex-wrap gap-1 flex-grow-1 p-0 m-0">
           {context.itemsToCompare.map((item, index) => (
-            <span key={`${item.name}_${index}`} className="badge bg-secondary pe-1">
+            <li key={`${item.name}_${index}`} className="badge bg-secondary pe-1">
               {item.name}
               <UnstyledButton
                 aria-label={`Remove ${item.name}`}
@@ -41,10 +41,10 @@ export const VisitsComparisonCollector: FC<VisitsComparisonCollectorProps> = ({
               >
                 &times;
               </UnstyledButton>
-            </span>
+            </li>
           ))}
-        </div>
-        <div>
+        </ul>
+        <div className="indivisible">
           <Button
             outline
             color="primary"

src/visits/visits-comparison/VisitsComparisonContext.ts

@@ -22,16 +22,16 @@ export const useVisitsToCompare = (): VisitsComparison | undefined => {
 };
 
 export const useVisitsComparison = (): VisitsComparison => {
-  const [itemsToCompare, setItemToCompare] = useState<VisitsComparisonItem[]>([]);
+  const [itemsToCompare, setItemsToCompare] = useState<VisitsComparisonItem[]>([]);
   const addItemToCompare = useCallback(
-    (item: VisitsComparisonItem) => setItemToCompare((prev) => [...prev, item]),
+    (item: VisitsComparisonItem) => setItemsToCompare((prev) => [...prev, item]),
     [],
   );
   const removeItemToCompare = useCallback(
-    (item: VisitsComparisonItem) => setItemToCompare((prev) => prev.filter((i) => i !== item)),
+    (item: VisitsComparisonItem) => setItemsToCompare((prev) => prev.filter((i) => i !== item)),
     [],
   );
-  const clearItemsToCompare = useCallback(() => setItemToCompare([]), []);
+  const clearItemsToCompare = useCallback(() => setItemsToCompare([]), []);
 
   return { itemsToCompare, addItemToCompare, removeItemToCompare, clearItemsToCompare };
 };

test/visits/visits-comparison/VisitsComparisonCollector.test.tsx

@@ -0,0 +1,79 @@
+import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { MemoryRouter } from 'react-router-dom';
+import { rangeOf } from '../../../src/utils/helpers';
+import { VisitsComparisonCollector } from '../../../src/visits/visits-comparison/VisitsComparisonCollector';
+import type { VisitsComparison } from '../../../src/visits/visits-comparison/VisitsComparisonContext';
+import { VisitsComparisonProvider } from '../../../src/visits/visits-comparison/VisitsComparisonContext';
+import { checkAccessibility } from '../../__helpers__/accessibility';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<VisitsComparisonCollector />', () => {
+  const clearItemsToCompare = vi.fn();
+  const removeItemToCompare = vi.fn();
+  const createVisitsComparison = (itemsAmount = 1): VisitsComparison => fromPartial({
+    itemsToCompare: rangeOf(itemsAmount, (index) => ({ name: `foo${index}`, query: `bar${index}` })),
+    clearItemsToCompare,
+    removeItemToCompare,
+  });
+  const setUp = (visitsComparison?: VisitsComparison, type: 'short-urls' | 'tags' | 'domains' = 'short-urls') =>
+    renderWithEvents(
+      <MemoryRouter>
+        <VisitsComparisonProvider value={visitsComparison}>
+          <VisitsComparisonCollector type={type} />
+        </VisitsComparisonProvider>
+      </MemoryRouter>,
+    );
+
+  it('passes a11y checks', () => checkAccessibility(setUp(createVisitsComparison())));
+
+  it.each([
+    [undefined],
+    [fromPartial<VisitsComparison>({ itemsToCompare: [] })],
+  ])('does not render when no context or no items are defined', (visitsComparison) => {
+    const { container } = setUp(visitsComparison);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it.each([
+    [1, true],
+    [2, false],
+    [5, false],
+  ])('disables compare button when there is only one selected item', (itemsAmount, isDisabled) => {
+    setUp(createVisitsComparison(itemsAmount));
+    const compareButton = screen.getByText(/^Compare/);
+
+    expect(screen.getAllByRole('listitem')).toHaveLength(itemsAmount);
+    if (isDisabled) {
+      expect(compareButton).toHaveAttribute('disabled');
+    } else {
+      expect(compareButton).not.toHaveAttribute('disabled');
+    }
+  });
+
+  it('can clear selected items', async () => {
+    const { user } = setUp(createVisitsComparison(5));
+
+    await user.click(screen.getByLabelText('Close compare'));
+    expect(clearItemsToCompare).toHaveBeenCalled();
+  });
+
+  it.each([[1], [2], [4]])('can remove individual items', async (index) => {
+    const { user } = setUp(createVisitsComparison(5));
+
+    await user.click(screen.getByLabelText(`Remove foo${index}`));
+    expect(removeItemToCompare).toHaveBeenCalledWith({ name: `foo${index}`, query: `bar${index}` });
+  });
+
+  it.each([
+    ['short-urls' as const],
+    ['tags' as const],
+    ['domains' as const],
+  ])('redirects comparison to expected location', (type) => {
+    setUp(createVisitsComparison(3), type);
+    expect(screen.getByText(/^Compare/)).toHaveAttribute(
+      'href',
+      `/${type}/compare-visits?${type}=${encodeURIComponent('bar1,bar2,bar3')}`,
+    );
+  });
+});