github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/navigation/navListItem.test.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import React from 'react';
    17  import { render } from '@testing-library/react';
    18  import { NavbarIndicator, NavListItem } from './navListItem';
    19  import { MemoryRouter } from 'react-router-dom';
    20  
    21  describe('Navigation List Item', () => {
    22      const getNode = (overrides?: {}, entries?: string[]): JSX.Element | any => {
    23          // given
    24          const defaultProps: any = {
    25              to: '/test',
    26              className: 'test-item',
    27          };
    28          return (
    29              <MemoryRouter initialEntries={entries}>
    30                  <NavListItem {...defaultProps} {...overrides} />
    31              </MemoryRouter>
    32          );
    33      };
    34      const getWrapper = (overrides?: { to?: string; icon?: JSX.Element }, entries?: string[]) =>
    35          render(getNode(overrides, entries));
    36  
    37      it(`Renders a navigation item base`, () => {
    38          // when
    39          const { container } = getWrapper();
    40          // then
    41          expect(container.firstChild).toMatchSnapshot();
    42      });
    43  
    44      interface dataT {
    45          name: string;
    46          initialEntries: string[];
    47          to: string;
    48          expect: (container: HTMLElement) => void;
    49      }
    50  
    51      const data: dataT[] = [
    52          {
    53              name: 'Navigation Item Selected',
    54              initialEntries: ['/test'],
    55              to: 'test',
    56              expect: (container) =>
    57                  expect(container.querySelectorAll('a')[0]?.className).toEqual(
    58                      'mdc-list-item mdc-list-item--activated test-item'
    59                  ),
    60          },
    61          {
    62              name: 'Navigation Item Not Selected',
    63              initialEntries: ['/not-test'],
    64              to: 'test',
    65              expect: (container) =>
    66                  expect(container.querySelectorAll('a')[0]?.className).toEqual('mdc-list-item test-item'),
    67          },
    68      ];
    69  
    70      describe.each(data)(`Renders a navigation item with selected`, (testcase) => {
    71          it(testcase.name, () => {
    72              const { initialEntries, to } = testcase;
    73              // when
    74              const { container } = getWrapper({ to: to }, initialEntries);
    75              // then
    76              testcase.expect(container);
    77          });
    78      });
    79  
    80      it(`Renders a navigation item with icon`, () => {
    81          // when
    82          const { container } = getWrapper({ icon: <svg>iconic</svg> });
    83          // when & then
    84          expect(container.querySelector('svg')).toMatchInlineSnapshot(`
    85      <svg>
    86        iconic
    87      </svg>
    88    `);
    89      });
    90  });
    91  
    92  describe('Display sidebar indicator', () => {
    93      interface dataT {
    94          name: string;
    95          pathname: string;
    96          to: string;
    97          expect: (container: HTMLElement, url?: string) => HTMLElement | void;
    98      }
    99  
   100      const data: dataT[] = [
   101          {
   102              name: 'Indicator is not displayed',
   103              pathname: '/test/',
   104              to: 'anotherTest',
   105              expect: (container) =>
   106                  expect(container.querySelector(`.mdc-list-item-indicator--activated`)).not.toBeTruthy(),
   107          },
   108          {
   109              name: 'Indicator is displayed',
   110              pathname: '/test/',
   111              to: 'test',
   112              expect: (container) => expect(container.querySelector(`.mdc-list-item-indicator--activated`)).toBeTruthy(),
   113          },
   114      ];
   115  
   116      const getNode = (overrides?: {}): JSX.Element | any => {
   117          // given
   118          const defaultProps: any = {
   119              children: null,
   120          };
   121          return <NavbarIndicator {...defaultProps} {...overrides} />;
   122      };
   123      const getWrapper = (overrides?: { pathname: string; to: string }) => render(getNode(overrides));
   124  
   125      describe.each(data)(`Sidebar Indicator Cases`, (testcase) => {
   126          it(testcase.name, () => {
   127              const { pathname, to } = testcase;
   128              // when
   129              const { container } = getWrapper({ pathname: pathname, to: to });
   130              // then
   131              testcase.expect(container);
   132          });
   133      });
   134  });