bright-components 10.1.1 → 10.2.2

package/src/components/Time/TimePicker/test.js

@@ -7,21 +7,22 @@ describe('<TimePicker />', () => {
 	describe('given a null value', () => {
 		it('should render without throwing exceptions', () => {
 			const onChange = jest.fn();
-			const { getAllByRole } = render(
+			const { getByRole, getByTestId } = render(
 				<TimePicker value={null} onChange={onChange} />
 			);
 
-			expect(getAllByRole('textbox').length).toBe(2);
+			expect(getByRole('textbox')).toBeInTheDocument();
+			expect(getByTestId('mobileTimePicker')).toBeInTheDocument();
 		});
 
 		it('should allow a new value to be input', () => {
 			const onChange = jest.fn();
-			const { getAllByRole } = render(
+			const { getByRole } = render(
 				<TimePicker value={null} onChange={onChange} />
 			);
 
 			// check a new value can be input
-			const textBox = getAllByRole('textbox')[1];
+			const textBox = getByRole('textbox');
 			expect(onChange).not.toHaveBeenCalled();
 			fireEvent.change(textBox, { target: { value: '17:15' } });
 			expect(onChange).toHaveBeenCalledWith({
@@ -44,14 +45,14 @@ describe('<TimePicker />', () => {
 
 	describe('on initial render', () => {
 		it('should render a native time input for mobile devices', () => {
-			const { getAllByRole } = render(
+			const { getByTestId } = render(
 				<TimePicker
 					value={{ hours: 1, minutes: 30 }}
 					onChange={() => {}}
 				/>
 			);
 
-			const textBox = getAllByRole('textbox')[0];
+			const textBox = getByTestId('mobileTimePicker');
 			expect(textBox.type).toBe('time');
 			expect(textBox.value).toBe('01:30');
 			expect(textBox).toHaveStyleRule('display', 'inline-block');
@@ -62,14 +63,14 @@ describe('<TimePicker />', () => {
 		});
 
 		it('should render a standard input for desktop-class devices', () => {
-			const { getAllByRole } = render(
+			const { getByRole } = render(
 				<TimePicker
 					value={{ hours: 1, minutes: 30 }}
 					onChange={() => {}}
 				/>
 			);
 
-			const textBox = getAllByRole('textbox')[1];
+			const textBox = getByRole('textbox');
 			expect(textBox.type).toBe('text');
 			expect(textBox.value).toBe('01:30');
 		});
@@ -77,7 +78,7 @@ describe('<TimePicker />', () => {
 		it('should support onFocus and onBlur props and call down to them', () => {
 			const onFocus = jest.fn();
 			const onBlur = jest.fn();
-			const { getAllByRole } = render(
+			const { getByRole } = render(
 				<TimePicker
 					value={{ hours: 1, minutes: 30 }}
 					onFocus={onFocus}
@@ -86,7 +87,7 @@ describe('<TimePicker />', () => {
 				/>
 			);
 
-			const textBox = getAllByRole('textbox')[1];
+			const textBox = getByRole('textbox');
 			expect(onFocus).not.toHaveBeenCalled();
 			expect(onBlur).not.toHaveBeenCalled();
 			fireEvent.focus(textBox);
@@ -152,14 +153,14 @@ describe('<TimePicker />', () => {
 		describe('given a valid value is supplied', () => {
 			it('should call the onChange handler when the mobile input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByTestId } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[0];
+				const textBox = getByTestId('mobileTimePicker');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '17:15' } });
@@ -171,14 +172,14 @@ describe('<TimePicker />', () => {
 
 			it('should call the onChange handler when the desktop-class input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '17:15' } });
@@ -192,14 +193,14 @@ describe('<TimePicker />', () => {
 		describe('given an incomplete value is supplied', () => {
 			it('should not call the onChange handler when the mobile input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByTestId } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[0];
+				const textBox = getByTestId('mobileTimePicker');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.change(textBox, { target: { value: '17:1' } });
 				expect(onChange).not.toHaveBeenCalledWith();
@@ -207,14 +208,14 @@ describe('<TimePicker />', () => {
 
 			it('should not call the onChange handler when the desktop-class input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.change(textBox, { target: { value: '17:1' } });
 				expect(onChange).not.toHaveBeenCalledWith();
@@ -224,14 +225,14 @@ describe('<TimePicker />', () => {
 		describe('given the box is cleared', () => {
 			it('should call the onChange handler with null', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '' } });
@@ -242,14 +243,14 @@ describe('<TimePicker />', () => {
 		describe('when the field loses focus', () => {
 			it('should parse reasonable partial values into valid values', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01:3' } });
 				expect(onChange).not.toHaveBeenCalled();
@@ -259,14 +260,14 @@ describe('<TimePicker />', () => {
 
 			it('should not call onChange if parsed partial value is same as given value', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 3 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01:3' } });
 				expect(onChange).not.toHaveBeenCalled();
@@ -276,14 +277,14 @@ describe('<TimePicker />', () => {
 
 			it('should not parse unreasonable values into valid values', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01' } });
 				expect(onChange).not.toHaveBeenCalled();
@@ -297,7 +298,7 @@ describe('<TimePicker />', () => {
 				// this is a convoluted test to cover some code that works around an issue with
 				// stores (mobx) that only re-render when actual values change
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						minuteIncrements={5}
@@ -305,7 +306,7 @@ describe('<TimePicker />', () => {
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01:32' } });
 				expect(onChange).toHaveBeenCalledWith({

package/src/setupTests.js

@@ -1,4 +1,5 @@
 import { configure } from 'enzyme';
+import { configure as RTLConfig } from '@testing-library/react';
 import Adapter from 'enzyme-adapter-react-16';
 import ReactGA from 'react-ga';
 import 'jest-enzyme';
@@ -34,3 +35,4 @@ afterEach(() => {
 });
 
 configure({ adapter: new Adapter() });
+RTLConfig({ defaultHidden: true });