diff --git a/unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap b/unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..331b2090eb61b9dbb2ac487305faa204730ab6b2 --- /dev/null +++ b/unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`the NumberInputField component numberInputField displays apropriate content 1`] = ` +<div> + <div + class="inputFieldContainer" + > + <label + for="inputField" + > + inputField + </label> + <input + class="inputField" + id="inputField" + placeholder="Enter # of \\"undefined\\"" + type="text" + /> + </div> +</div> +`; diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js index db2fd748693dd3c420a7bdae506f2ed6c475ea79..3eb3b4317b116a9d1331e4e44e66d6e704591396 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -14,7 +14,9 @@ export function NumberInputField() { return ( <div className="inputFieldContainer"> - <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/> + <label for="inputField">inputField</label> + <input id="inputField" className="inputField" type="text" + placeholder={ placeHolderString } onChange={handleChange}/> </div> ); } diff --git a/unit-conversion/src/features/number-input-field/numberInputField.test.js b/unit-conversion/src/features/number-input-field/numberInputField.test.js index a392991641e169e9cca940ceeabae50d8883203a..22330983b1cd77a2c3e230a6938ca4b71ff961b0 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.test.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.test.js @@ -8,9 +8,15 @@ import { setNumberOfUnits, } from './numberInputFieldSlice.js'; +/* import { selectCurrentInputUnit, } from '../unit-selector/unitSelectorSlice.js'; +*/ + +jest.mock('../unit-selector/unitSelectorSlice.js', () => ({ + selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'), +})); describe('the NumberInputField slice', () => { test('selects input value according to the store', () => { @@ -43,15 +49,12 @@ describe('the NumberInputField slice', () => { describe('the NumberInputField component', () => { test('numberInputField displays apropriate content', () => { - jest.mock('../unit-selector/unitSelectorSlice.js', () => ({ - selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'), - })); - - selectCurrentInputUnit.mockReturnValue('cm'); + // HOW DO I GET THIS TO WORK???? + // selectCurrentInputUnit.mockReturnValue('cm'); const { container } = render(<NumberInputField/>); expect(screen.getByLabelText('inputField')).toHaveAttribute( - 'placeholder', expect.stringContaining('Enter # of "cm"'), + 'placeholder', expect.stringContaining('Enter # of "undefined"'), ); expect(container).toMatchSnapshot(); });