diff --git a/webpack/components/ResourceQuotaForm/components/Resource/__test__/UnitInputField.test.js b/webpack/components/ResourceQuotaForm/components/Resource/__test__/UnitInputField.test.js new file mode 100644 index 0000000..1f93eb1 --- /dev/null +++ b/webpack/components/ResourceQuotaForm/components/Resource/__test__/UnitInputField.test.js @@ -0,0 +1,108 @@ +import React from 'react'; +import '@testing-library/jest-dom'; +import { render, screen, fireEvent } from '@testing-library/react'; + +import { testComponentSnapshotsWithFixtures } from '@theforeman/test'; +import LabelIcon from 'foremanReact/components/common/LabelIcon'; + +import UnitInputField from '../UnitInputField'; + +const getDefaultProps = () => ({ + initialValue: 0, + onChange: jest.fn(), + isDisabled: false, + handleInputValidation: jest.fn(), + units: [ + { symbol: 'MiB', factor: 1 }, + { symbol: 'GiB', factor: 1024 }, + ], + labelIcon: , + minValue: 0, + maxValue: 5, +}); + +const fixtureDefault = { + 'should render default': { + ...getDefaultProps(), + }, +}; + +const fixtureSingleUnit = { + 'should render without dropdown (single unit)': { + ...getDefaultProps(), + units: [{ symbol: 'cores', factor: 1 }], + }, +}; + +const fixtureDisabled = { + 'should render as disabled field': { + ...getDefaultProps(), + isDisabled: true, + }, +}; + +describe('UnitInputField', () => { + testComponentSnapshotsWithFixtures(UnitInputField, fixtureDefault); + testComponentSnapshotsWithFixtures(UnitInputField, fixtureSingleUnit); + testComponentSnapshotsWithFixtures(UnitInputField, fixtureDisabled); + + it('triggers handleInputValidation on unit change', async () => { + const props = getDefaultProps(); + + render(); + const input = screen.getByRole('textbox'); + fireEvent.change(input, { target: { value: 3 } }); + + // gets called (1.) with initialValue and (2.) the simulated change + expect(props.onChange).toHaveBeenCalledTimes(2); + expect(props.onChange).toHaveBeenCalledWith(props.initialValue); + expect(props.onChange).toHaveBeenLastCalledWith(3); + expect(props.handleInputValidation).toHaveBeenCalledTimes(2); + expect(props.handleInputValidation).toHaveBeenCalledWith(true); + }); + + test('triggers onChange with rounded value', () => { + const props = getDefaultProps(); + + render(); + const input = screen.getByRole('textbox'); + fireEvent.change(input, { target: { value: 3.5 } }); + + // gets called (1.) with initialValue and (2.) the simulated change + expect(props.onChange).toHaveBeenCalledTimes(2); + expect(props.onChange).toHaveBeenCalledWith(props.initialValue); + expect(props.onChange).toHaveBeenLastCalledWith(3); + expect(props.handleInputValidation).toHaveBeenCalledTimes(2); + expect(props.handleInputValidation).toHaveBeenCalledWith(true); + }); + + test('does not trigger onChange when value out of bounds', () => { + const props = getDefaultProps(); + + render(); + const input = screen.getByRole('textbox'); + fireEvent.change(input, { target: { value: props.maxValue + 1 } }); + + // onChange only called for initialValue + expect(props.onChange).toHaveBeenCalledTimes(1); + expect(props.onChange).toHaveBeenCalledWith(props.initialValue); + // handleInputValidation called with false => invalid + expect(props.handleInputValidation).toHaveBeenCalledTimes(2); + expect(props.handleInputValidation).toHaveBeenLastCalledWith(false); + }); + + test('does not trigger onChange when value is not a number', () => { + const props = getDefaultProps(); + + render(); + const input = screen.getByRole('textbox'); + fireEvent.change(input, { target: { value: 'no number' } }); + + // onChange only called for initialValue + expect(props.onChange).toHaveBeenCalledTimes(1); + expect(props.onChange).toHaveBeenCalledWith(props.initialValue); + // handleInputValidation called with false => invalid + expect(props.handleInputValidation).toHaveBeenCalledTimes(2); + expect(props.handleInputValidation).toHaveBeenLastCalledWith(false); + }); +}); diff --git a/webpack/components/ResourceQuotaForm/components/Resource/__test__/__snapshots__/UnitInputField.test.js.snap b/webpack/components/ResourceQuotaForm/components/Resource/__test__/__snapshots__/UnitInputField.test.js.snap new file mode 100644 index 0000000..4bbacc3 --- /dev/null +++ b/webpack/components/ResourceQuotaForm/components/Resource/__test__/__snapshots__/UnitInputField.test.js.snap @@ -0,0 +1,155 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UnitInputField should render as disabled field 1`] = ` + + + + } + helperTextInvalid="" + label="Quota Limit" + labelIcon={ + + } + validated="default" +> + + + + MiB + , + + GiB + , + ] + } + isOpen={false} + onSelect={[Function]} + toggle={ + + MiB + + } + /> + + +`; + +exports[`UnitInputField should render default 1`] = ` + + + + } + helperTextInvalid="" + label="Quota Limit" + labelIcon={ + + } + validated="default" +> + + + + MiB + , + + GiB + , + ] + } + isOpen={false} + onSelect={[Function]} + toggle={ + + MiB + + } + /> + + +`; + +exports[`UnitInputField should render without dropdown (single unit) 1`] = ` + + + + } + helperTextInvalid="" + label="Quota Limit" + labelIcon={ + + } + validated="default" +> + + + + cores + + + +`;