bright-components 10.1.1 → 10.2.2

package/src/components/DayPicker/examples.md

@@ -231,3 +231,20 @@ initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
 	isDateSelect={true}
 />
 ```
+Day Picker - typeable
+```js
+initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
+<DayPicker
+	range={state.dates}
+	yearRange={{ min: 2000, max: 2030}}
+	style={{
+		width: '70%'
+	}}
+	GA={{
+		category: 'Test',
+		actionId: 'Test'
+	}}
+	onSelectedDate={dates=>setState({dates})}
+	typeable
+/>
+```

package/src/components/DayPicker/index.js

@@ -26,6 +26,8 @@ import breakpoints from 'constants/breakpoints';
 
 import CalendarIcon from 'components/Icons/Calendar/';
 
+import NewDayPicker from './NewDayPicker';
+
 const friendlyShort = 'EEE dd MMM';
 const friendlyShortWithYear = 'EEE dd MMM yyyy';
 
@@ -232,11 +234,12 @@ class DayPicker extends React.Component {
 			panelAbsoluteOnDesktop,
 			onSelectedDate,
 			isDateSelect,
+			typeable,
 			...rest
 		} = this.props;
 
 		const { dayPickerOpen } = this.state;
-		const { range } = this.props;
+		const { range, locale } = this.props;
 
 		const fromDate = range.from
 			? format(range.from, this.getDisplayFormat())
@@ -250,20 +253,39 @@ class DayPicker extends React.Component {
 
 		return (
 			<DayPickerInputContainer {...rest}>
-				<InputBox
-					onClick={this.toggleDayPicker}
-					error={error}
-					disabled={disabled}
-					legacyInputStyle={legacyInputStyle}
-					data-testid="input-selector"
-				>
-					{datesToDisplay ? (
-						<span>{datesToDisplay}</span>
-					) : (
-						<Placeholder>{placeholder}</Placeholder>
-					)}
-					<OpenCalendarIcon size={22} disabled={disabled} />
-				</InputBox>
+				{!typeable || dateRange ? (
+					<InputBox
+						onClick={this.toggleDayPicker}
+						error={error}
+						disabled={disabled}
+						legacyInputStyle={legacyInputStyle}
+						data-testid="input-selector"
+					>
+						{datesToDisplay ? (
+							<span>{datesToDisplay}</span>
+						) : (
+							<Placeholder>{placeholder}</Placeholder>
+						)}
+						<OpenCalendarIcon size={22} disabled={disabled} />
+					</InputBox>
+				) : (
+					<NewDayPicker
+						placeholder={placeholder}
+						datesToDisplay={datesToDisplay}
+						range={range}
+						allowClear={allowClear}
+						yearRange={yearRange}
+						onSelectedDate={onSelectedDate}
+						locale={locale}
+						clearValue={this.clearValue}
+						disabled={disabled}
+						error={error}
+						toggleDayPicker={this.toggleDayPicker}
+						GA={GA}
+						recordValue={recordValue}
+						dayPickerOpen={dayPickerOpen}
+					/>
+				)}
 
 				{dayPickerOpen && (
 					<DayRangeContainer
@@ -330,7 +352,9 @@ DayPicker.propTypes = {
 	legacyInputStyle: bool,
 	closeButton: bool,
 	panelAbsoluteOnDesktop: bool,
-	isDateSelect: bool
+	isDateSelect: bool,
+	typeable: bool,
+	locale: string
 };
 
 DayPicker.defaultProps = {
@@ -356,7 +380,9 @@ DayPicker.defaultProps = {
 	legacyInputStyle: false,
 	closeButton: false,
 	panelAbsoluteOnDesktop: true,
-	isDateSelect: false
+	isDateSelect: false,
+	typeable: false,
+	locale: 'GB'
 };
 
 export { DayPicker as Unwrapped };

package/src/components/DayPicker/test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, wait } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import ReactGA from 'react-ga';
 import DayPicker from '.';
 
@@ -406,4 +407,299 @@ describe('<DayPicker />', () => {
 			expect(ReactGA.event).toHaveBeenCalledTimes(1);
 		});
 	});
+
+	describe('Typing date', () => {
+		it('should set the correct date when typed in', async () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					GA={{
+						category: undefined,
+						actionId: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, `010203`);
+			await wait(() => expect(inputSelect.value).toEqual('01/02/03'));
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: new Date('2003-02-01T00:00:00.000Z'),
+				to: new Date('2003-02-01T00:00:00.000Z')
+			});
+		});
+
+		it('should set the correct date when typed in - CA', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					locale="CA"
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '010203');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: new Date('2001-02-03T00:00:00.000Z'),
+				to: new Date('2001-02-03T00:00:00.000Z')
+			});
+		});
+
+		it('should show the correct date when date pre set', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+
+			expect(inputSelect.value).toEqual('01/08/19');
+		});
+
+		it('should show the correct date when date pre set - CA', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+					locale="CA"
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+
+			expect(inputSelect.value).toEqual('19/08/01');
+		});
+
+		it('should allow clearing date', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: undefined,
+				to: undefined
+			});
+		});
+
+		it('shouldnt save invalid dates', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			fireEvent.blur(inputSelect);
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}0101');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith('');
+			expect(wrapper.getByText('Date is invalid')).toBeInTheDocument();
+		});
+
+		it('shouldnt save dates outside the range', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2018, max: 2030 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+					allowClear={false}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}010131');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: new Date('2019-08-01T00:00:00.000Z'),
+				to: undefined
+			});
+			expect(
+				wrapper.getByText(
+					'Year is outside of range. Must be between 2018 - 2030'
+				)
+			).toBeInTheDocument();
+		});
+
+		it('should revert invalid date to empty if no initial date', () => {
+			onMockSelectedDate.mockClear();
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: undefined,
+						to: undefined
+					}}
+					allowClear={false}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			fireEvent.blur(inputSelect);
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}0101');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).not.toHaveBeenCalled();
+		});
+
+		it('backspace / automatically', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, `{backspace}{backspace}/`);
+			expect(inputSelect.value).toEqual('01/08/');
+		});
+
+		it('should open calendar view with the icon', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+
+			fireEvent.click(wrapper.getByTestId('calendarIcon'));
+			expect(wrapper.getByTestId('daypicker-panel')).toBeInTheDocument();
+
+			const inputSelect = wrapper.getByTestId('new input');
+			fireEvent.focus(inputSelect);
+			fireEvent.blur(inputSelect);
+
+			expect(
+				wrapper.queryByTestId('daypicker-panel')
+			).not.toBeInTheDocument();
+		});
+
+		it('should apply the error styling if error', () => {
+			wrapper.rerender(
+				<DayPicker {...props} dateRange={false} typeable error />
+			);
+
+			const inputSelect = wrapper.getByTestId('input-selector');
+			expect(inputSelect).toHaveStyleRule(
+				'border-color',
+				'#FF5000 !important'
+			);
+		});
+
+		it('should apply the error styling if disabled', () => {
+			wrapper.rerender(
+				<DayPicker {...props} typeable dateRange={false} disabled />
+			);
+
+			const inputSelect = wrapper.getByTestId('new input');
+			expect(inputSelect).toBeDisabled();
+		});
+
+		it('should call the correct GA tags when the date is typed', async () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					range={{
+						from: undefined,
+						to: undefined
+					}}
+					recordValue
+				/>
+			);
+			expect(ReactGA.event).toHaveBeenCalledTimes(0);
+
+			const inputSelect = wrapper.getByTestId('new input');
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, `201222`);
+			await wait(() => expect(inputSelect.value).toEqual('20/12/22'));
+			fireEvent.blur(inputSelect);
+
+			await wait(() =>
+				expect(ReactGA.event).toHaveBeenCalledWith({
+					action: 'ActionID - Set via Typing',
+					category: 'Test',
+					label: 'Tue 20 Dec 2022'
+				})
+			);
+		});
+	});
 });

package/src/components/DayPickerPanel/index.js

@@ -178,7 +178,7 @@ class DayPickerPanel extends React.Component {
 			range: { from, to }
 		} = this.state;
 
-		const actionEvent = selectedDay ? 'Set' : 'Apply';
+		const actionEvent = selectedDay ? 'Set via Date Picker' : 'Apply';
 
 		if (category) {
 			const label = dateRange

package/src/components/DayPickerPanel/test.js

@@ -73,7 +73,7 @@ describe('Month Year and Calendar view', () => {
 
 			expect(event).toHaveBeenCalledWith({
 				category: 'Cat',
-				action: 'Action ID - Set',
+				action: 'Action ID - Set via Date Picker',
 				label: 'Tue 03 Apr 2018'
 			});
 		});

package/src/components/DurationInput/test.js

@@ -20,7 +20,7 @@ describe('<DurationInput />', () => {
 		});
 
 		it('should select a new days value when the days input is changed', () => {
-			const daysInput = wrapper.getByRole('textbox');
+			const daysInput = wrapper.getByRole('spinbutton');
 
 			expect(onChange).not.toHaveBeenCalled();
 
@@ -36,7 +36,7 @@ describe('<DurationInput />', () => {
 			const blurProps = { ...props, onBlur: jest.fn() };
 			wrapper.rerender(<DurationInput {...blurProps} />);
 
-			const daysInput = wrapper.getByRole('textbox');
+			const daysInput = wrapper.getByRole('spinbutton');
 			fireEvent.blur(daysInput);
 
 			expect(blurProps.onBlur).toHaveBeenCalled();
@@ -54,7 +54,9 @@ describe('<DurationInput />', () => {
 		});
 
 		it('should select a new hours value and a new minutes value when the inputs are changed', () => {
-			const [hoursInput, minutesInput] = wrapper.getAllByRole('textbox');
+			const [hoursInput, minutesInput] = wrapper.getAllByRole(
+				'spinbutton'
+			);
 
 			expect(onChange).not.toHaveBeenCalled();
 

package/src/components/EmployeePicker/FilterBar/test.js

@@ -33,7 +33,7 @@ describe('EmployeePickerFilterBar', () => {
 	});
 
 	const getInput = () => element.getByPlaceholderText('Enter name');
-	const getSelect = () => element.getByRole('listbox');
+	const getSelect = () => element.getByRole('combobox');
 
 	it('should call updateType when the user selects a filter type', () => {
 		const input = getInput();

package/src/components/Icons/Users/index.js

@@ -4,7 +4,7 @@ import IconBase from 'react-icon-base';
 
 const UsersIcon = props => (
 	<IconBase viewBox="0 0 32 32" {...props}>
-		<path d="M28.465 13.771A8.125 8.125 0 1 0 15.859 3.626 9.963 9.963 0 0 0 11.25 2.5c-5.522 0-10 4.478-10 10 0 2.7 1.071 5.148 2.81 6.946A10.945 10.945 0 0 0 0 27.963v1.844c0 1.206.986 2.192 2.192 2.192h18.115a2.198 2.198 0 0 0 2.192-2.192v-1.844c0-1.444-.284-2.824-.796-4.089h8.796c.825 0 1.5-.675 1.5-1.5v-2.25c0-2.671-1.416-5.025-3.535-6.354zM22.625 3c2.826 0 5.125 2.299 5.125 5.125s-2.299 5.125-5.125 5.125c-.483 0-.949-.069-1.391-.194a9.966 9.966 0 0 0-2.945-7.657A5.125 5.125 0 0 1 22.625 3zM11.25 5.5c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zM19.5 29H3v-1.036a7.96 7.96 0 0 1 3.56-6.631 9.96 9.96 0 0 0 4.69 1.168 9.958 9.958 0 0 0 4.685-1.165 8.16 8.16 0 0 1 1.224 1.006 7.903 7.903 0 0 1 2.341 5.621v1.038zm9.5-8.125h-9.117c-.44-.516-.925-.991-1.451-1.419.95-.981 1.7-2.156 2.188-3.459a8.12 8.12 0 0 0 4.86-.264 4.493 4.493 0 0 1 2.199 1.215 4.465 4.465 0 0 1 1.325 3.175v.751h-.003z" />
+		<path d="M6.421 16.496C6.15 15.635 6 14.773 6 14c0-3.308 2.692-6 6-6 1.069 0 2.073.283 2.944.775A6 6 0 0120 6c3.308 0 6 2.692 6 6 0 .773-.15 1.635-.421 2.496C28.166 15.525 30 18.051 30 21c0 1.654-1.346 3-3 3h-5.172A3.004 3.004 0 0119 26H5c-1.654 0-3-1.346-3-3 0-2.949 1.834-5.475 4.421-6.504zM8 14c0 2.479 2.069 6 4 6s4-3.521 4-6c0-2.206-1.794-4-4-4s-4 1.794-4 4zm12-6a4 4 0 00-3.49 2.05A5.974 5.974 0 0118 14c0 .773-.15 1.635-.421 2.496a7 7 0 012.315 1.506L20 18c1.931 0 4-3.521 4-6 0-2.206-1.794-4-4-4zm8 13a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737c-.903 1.402-1.995 2.331-3.156 2.717A6.93 6.93 0 0121.927 22H27c.551 0 1-.449 1-1zM5 24h14c.551 0 1-.449 1-1a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737C15.162 20.962 13.608 22 12 22c-1.608 0-3.162-1.038-4.376-2.923a10.13 10.13 0 01-.43-.737A5.006 5.006 0 004 23c0 .551.449 1 1 1z" />
 	</IconBase>
 );
 

package/src/components/Icons/Visibility/index.js

@@ -1,29 +1,18 @@
 import React from 'react';
-import { string, number } from 'prop-types';
+import { number } from 'prop-types';
 import IconBase from 'react-icon-base';
 
 const VisibilityIcon = props => (
-	<IconBase viewBox="0 0 256 256" {...props}>
-		<path
-			d="M254.89 122.97c-.36-.78-9.08-19.38-29.04-37.79C207.48 68.22 175.58 48 128 48S48.52 68.22 30.14 85.18c-19.95 18.41-28.67 37-29.04 37.79a12.026 12.026 0 0 0 0 10.06c.36.78 9.08 19.38 29.04 37.79C48.52 187.78 80.42 208 128 208s79.48-20.22 97.86-37.18c19.95-18.41 28.67-37 29.04-37.79 1.47-3.19 1.47-6.87-.01-10.06zM184 128c0 30.88-25.12 56-56 56s-56-25.12-56-56 25.12-56 56-56 56 25.12 56 56zm-158.3 0c3.54-5.84 10.5-15.91 21.44-25.84 2.49-2.26 5.05-4.39 7.68-6.4C50.44 105.63 48 116.53 48 128s2.44 22.37 6.81 32.24c-2.62-2.01-5.18-4.14-7.68-6.4-10.93-9.93-17.9-20-21.43-25.84zm183.17 25.84a118.32 118.32 0 0 1-7.68 6.4c4.36-9.87 6.81-20.77 6.81-32.24s-2.44-22.37-6.81-32.24c2.62 2.01 5.18 4.14 7.68 6.4 10.94 9.93 17.91 20.01 21.44 25.83-3.54 5.85-10.51 15.92-21.44 25.85z"
-			fill={props.color}
-		/>
-		<circle cx="128" cy="128" r="30" fill={props.color} />
-		<path
-			d="M252.49 3.51c-4.69-4.69-12.29-4.69-16.97 0l-232 232c-4.69 4.69-4.69 12.28 0 16.97 4.69 4.69 12.29 4.69 16.97 0l232-232c4.68-4.68 4.68-12.28 0-16.97z"
-			fill={props.color}
-		/>
+	<IconBase viewBox="0 0 32 32" {...props}>
+		<path d="M29.769 15.36C29.519 15.06 23.562 8 16 8c-1.938 0-3.77.464-5.427 1.159L5.707 4.293a1 1 0 00-1.414 1.414l4.38 4.38c-3.774 2.108-6.282 5.08-6.442 5.274a1 1 0 000 1.278C2.481 16.94 8.438 24 16 24c1.938 0 3.77-.463 5.427-1.158l4.866 4.866a1 1 0 001.414-1.414l-4.38-4.38c3.774-2.108 6.282-5.081 6.442-5.274a1 1 0 000-1.278zM16 22c-5.372 0-10.05-4.336-11.647-6 .973-1.014 3.088-3.015 5.805-4.428l.25.25a6 6 0 007.77 7.77l1.699 1.699C18.653 21.727 17.349 22 16 22zm5.842-1.572l-9.719-9.719C13.347 10.274 14.651 10 16 10c5.372 0 10.049 4.335 11.647 6-.973 1.014-3.088 3.015-5.805 4.428z" />
 	</IconBase>
 );
-VisibilityIcon.displayName = 'VisibilityIcon';
 
 VisibilityIcon.propTypes = {
-	color: string,
 	size: number
 };
 
 VisibilityIcon.defaultProps = {
-	color: '#000',
 	size: 40
 };
 

package/src/components/Icons/Visible/examples.md

@@ -0,0 +1,5 @@
+Visible example
+
+```js
+<VisibleIcon />
+```

package/src/components/Icons/Visible/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { number } from 'prop-types';
+import IconBase from 'react-icon-base';
+
+const VisibleIcon = props => (
+	<IconBase viewBox="0 0 32 32" {...props}>
+		<path d="M29.769 15.36C29.519 15.06 23.562 8 16 8S2.481 15.06 2.231 15.36a1 1 0 000 1.28C2.481 16.94 8.438 24 16 24s13.519-7.06 13.769-7.36a1 1 0 000-1.28zM16 22c-5.372 0-10.05-4.336-11.647-6 1.028-1.07 3.33-3.243 6.269-4.66a6 6 0 1010.757 0c2.939 1.416 5.24 3.59 6.268 4.66-1.598 1.665-6.275 6-11.647 6z" />
+	</IconBase>
+);
+
+VisibleIcon.propTypes = {
+	size: number
+};
+
+VisibleIcon.defaultProps = {
+	size: 40
+};
+
+export default VisibleIcon;

package/src/components/Modal/ModalBody/index.js

@@ -3,6 +3,7 @@ import spacing from 'constants/spacing';
 
 const ModalBody = styled.div`
 	padding: ${props => (props.noPadding ? '0px' : spacing.s2)};
+	overflow-y: auto;
 `;
 ModalBody.displayName = 'ModalBody';
 

package/src/components/Modal/index.js

@@ -34,6 +34,8 @@ const Background = styled.div`
 `;
 
 const ModalContainer = styled.div`
+	display: flex;
+	flex-direction: column;
 	background: white;
 	position: relative;
 	width: ${props => props.width};
@@ -43,7 +45,6 @@ const ModalContainer = styled.div`
 	border-radius: ${vars.borderRadius};
 	max-height: 90%;
 	overflow-x: hidden;
-	overflow-y: auto;
 	${props => props.version === '1' && '-webkit-overflow-scrolling: touch'};
 
 	${props =>

package/src/components/Modal/test.js

@@ -133,7 +133,6 @@ describe('<Modal />', () => {
 		const modalContainer = wrapper.getByRole('region');
 
 		expect(modalContainer).toHaveStyleRule('overflow-x', 'hidden');
-		expect(modalContainer).toHaveStyleRule('overflow-y', 'auto');
 
 		wrapper.rerender(
 			<Modal close={closeFn} allowOverflow>

package/src/components/ResponsiveTabs/test.js

@@ -15,7 +15,7 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('listbox')).toBeInTheDocument();
+		expect(getByRole('combobox')).toBeInTheDocument();
 		expect(getAllByRole('option')).toHaveLength(2);
 	});
 
@@ -38,7 +38,7 @@ describe('<ResponsiveTabs />', () => {
 		expect(getByTestId('tab1')).toBeVisible();
 		expect(getByTestId('tab2')).not.toBeVisible();
 
-		const dropdown = getByRole('listbox');
+		const dropdown = getByRole('combobox');
 		fireEvent.change(dropdown, { target: { value: 'Two' } });
 
 		expect(getByTestId('tab1')).not.toBeVisible();
@@ -90,7 +90,7 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		fireEvent.change(getByRole('listbox'), { target: { value: 'One' } });
+		fireEvent.change(getByRole('combobox'), { target: { value: 'One' } });
 		expect(event).not.toHaveBeenCalled();
 
 		fireEvent.click(getByRole('tab'));

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

@@ -118,6 +118,7 @@ const TimePicker = ({
 		<>
 			<MobileTimePicker
 				type="time"
+				data-testid="mobileTimePicker"
 				onChange={e => {
 					const timeString = e.target.value;
 					if (timeString.length === 5) {