Skip to content
Snippets Groups Projects
Select Git revision
  • 896769bfa24b7c98b933bf0fdb032be3f4e7f16b
  • main default protected
2 results

numberInputField.test.js

Blame
  • Forked from SOFT Core / SOFT 260 / React Redux Starter Code
    Source project has a limited visibility.
    numberInputField.test.js 1.74 KiB
    import { render, screen } from '@testing-library/react';
    import '../../testing/mockRedux.js';
    import { NumberInputField} from './numberInputField.js';
    import numberInputFieldSlice from '../number-input-field/numberInputFieldSlice.js';
    
    import {
      selectNumberOfUnits,
      setNumberOfUnits,
    } from './numberInputFieldSlice.js';
    
    import {
      selectCurrentInputUnit,
    } from '../unit-selector/unitSelectorSlice.js';
    
    describe('the NumberInputField slice', () => {
      test('selects input value according to the store', () => {
        const state = {
          unitSelector: {
            currentInputUnit: 'm',
            currentOutputUnit: 'cm',
          },
          numberInputField: {
            numberToConvert: 10,
          },
        };
    
        const selectedInputUnit = selectNumberOfUnits(state);
        expect(selectedInputUnit).toEqual(10);
      });
    });
    
    describe('the NumberInputField slice', () => {
      test('setNumberOfUnits correctly adjusts state value', () => {
        // This is what the local state looks like to the "setNumberOfUnits" reducer.
        const state = numberInputFieldSlice.reducer({
          numberToConvert: 10,
        }, setNumberOfUnits(100));
    
        const numberOfUnits = 100;
        expect(state.numberToConvert).toEqual(numberOfUnits);
      });
    });
    
    describe('the NumberInputField component', () => {
      test('numberInputField displays apropriate content', () => {
        jest.mock('../unit-selector/unitSelectorSlice.js', () => ({
          selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'),
        }));
    
        selectCurrentInputUnit.mockReturnValue('cm');
    
        const { container } = render(<NumberInputField/>);
        expect(screen.getByLabelText('inputField')).toHaveAttribute(
          'placeholder', expect.stringContaining('Enter # of "cm"'),
        );
        expect(container).toMatchSnapshot();
      });
    });