github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/textfield/textfield.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 { Textfield } from './textfield';
    17  import { render } from '@testing-library/react';
    18  import React from 'react';
    19  import { MemoryRouter } from 'react-router-dom';
    20  import { getElementsByClassNameSafe } from '../../../setupTests';
    21  
    22  describe('Textfield', () => {
    23      it('renders correctly using Snapshot', () => {
    24          // given
    25          const { container } = render(
    26              <MemoryRouter>
    27                  <Textfield placeholder="Floating label" />
    28              </MemoryRouter>
    29          );
    30          // when & then
    31          expect(container.firstChild).toMatchSnapshot();
    32      });
    33  
    34      test('renders correctly with leading icon', () => {
    35          // given
    36          const { container } = render(
    37              <MemoryRouter>
    38                  <Textfield leadingIcon="search" />
    39              </MemoryRouter>
    40          );
    41          // when & then
    42          expect(container.querySelectorAll('div')[0]?.className).toEqual(
    43              'mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--with-leading-icon'
    44          );
    45          expect(container.querySelector('i')).toMatchInlineSnapshot(`
    46      <i
    47        class="material-icons mdc-text-field__icon mdc-text-field__icon--leading"
    48        tabindex="0"
    49      >
    50        search
    51      </i>
    52    `);
    53      });
    54  });
    55  
    56  describe('Verify textfield content', () => {
    57      const getNode = (overrides?: {}): JSX.Element | any => {
    58          // given
    59          const defaultProps: any = {
    60              children: null,
    61          };
    62          return (
    63              <MemoryRouter>
    64                  <Textfield {...defaultProps} {...overrides} />;
    65              </MemoryRouter>
    66          );
    67      };
    68  
    69      const getWrapper = (overrides?: { placeholder: string; value: string; className: string }, entries?: string[]) =>
    70          render(getNode(overrides));
    71  
    72      it(`Renders a navigation item base`, () => {
    73          // when
    74          const { container } = getWrapper();
    75          // then
    76          expect(container.firstChild);
    77      });
    78  
    79      interface dataT {
    80          name: string;
    81          className: string;
    82          placeholder: string;
    83          value: string;
    84          expect: (container: HTMLElement) => void;
    85      }
    86  
    87      const data: dataT[] = [
    88          {
    89              name: 'Empty textfield',
    90              className: 'top-app-bar-search-field',
    91              placeholder: 'Search',
    92              value: '',
    93              expect: (container) =>
    94                  expect(container.getElementsByClassName('mdc-text-field__input')[0]).toHaveTextContent(''),
    95          },
    96          {
    97              name: 'Textfield with content',
    98              className: 'top-app-bar-search-field',
    99              placeholder: 'Search',
   100              value: 'test-search',
   101              expect: (container) => {
   102                  const input = getElementsByClassNameSafe(container, 'mdc-text-field__input')[0];
   103                  input.nodeValue = 'test-search';
   104                  return expect(container.getElementsByClassName('mdc-text-field__input')[0]).toHaveDisplayValue(
   105                      'test-search'
   106                  );
   107              },
   108          },
   109      ];
   110  
   111      describe.each(data)(`Renders a navigation item with selected`, (testcase) => {
   112          it(testcase.name, () => {
   113              const { className, placeholder, value } = testcase;
   114              // when
   115              const { container } = getWrapper({ placeholder, className, value });
   116              // then
   117              testcase.expect(container);
   118          });
   119      });
   120  });