Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tests: added timepicker interaction tests #56

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

tests: added timepicker interaction tests #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
905cbd4
added testID prop in TimePicker have easier testing
Dec 22, 2022
2c38294
added timepicker interaction tests
Dec 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions example/stories/components/TimePicker/TimePicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { within, userEvent } from '@storybook/testing-library';
import { expect } from '@storybook/jest';

import { delay } from '../../common';
import { ControlledExample } from './TimePicker';

export default {
Expand Down Expand Up @@ -31,3 +34,58 @@ Default.parameters = {
},
},
};

export const Interactions = Default.bind({});

Interactions.args = {
...Default.args,
testID: 'timePickerInteractions',
};

Interactions.parameters = {
...Default.parameters,
};

Interactions.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);

await delay(500);

// clear the hour input
await userEvent.clear(canvas.getByTestId('timePickerInteractions-hour-input-plain'));

await delay(500);

// enter 15 in hour input
await userEvent.type(canvas.getByTestId('timePickerInteractions-hour-input-plain'), '15');

await delay(500);

// focus out
await userEvent.click(canvasElement);

// since it's not 24Hour mode, 15 should be 03
await expect(canvas.getByDisplayValue('03')).toBeInTheDocument();

await delay(500);

// clear the minute input
await userEvent.clear(canvas.getByTestId('timePickerInteractions-minute-input-plain'));

await delay(500);

// type in 60
await userEvent.type(canvas.getByTestId('timePickerInteractions-minute-input-plain'), '60');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this works, this doesn't verify anything.

Does it test AM/PM values?
Does it test 24 hours mode?

Try this use case..
With the current time 11:00AM.. start making it 60 minutes.
everytime the hour updates.. add a 6 before the 0 in the minutes section.. hours would update; in this case it is the expected behaviour..
but see what happens when it hits 11:00 AM after a full circle..
It will crash..

Our test cases should find bugs like these..
Think about all the possible scenarios..

Whatever is wrapped in an if condition.. is a code branch. every code branch is an error waiting to happen.


await delay(500);

// if the minute reach 60, it should increment the hour value
await expect(canvas.getByDisplayValue('04')).toBeInTheDocument();

await delay(500);

await userEvent.click(canvasElement);

// And the minute value should be 00
await expect(canvas.getByDisplayValue('00')).toBeInTheDocument();
};
4 changes: 4 additions & 0 deletions src/components/TimePicker/TimeInputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ type Props = {
focused?: undefined | PossibleClockTypes;
}) => any;
is24Hour: boolean;
testID?: string;
};

function TimeInputs({
Expand All @@ -37,6 +38,7 @@ function TimeInputs({
inputType,
onChange,
is24Hour,
testID = '',
}: Props) {
const dimensions = useWindowDimensions();
const isLandscape = dimensions.width > dimensions.height;
Expand Down Expand Up @@ -121,6 +123,7 @@ function TimeInputs({
onSubmitEditing={onSubmitStartInput}
blurOnSubmit={false}
onChanged={onHourChange}
testID={`${testID}-hour-input`}
// onChangeText={onChangeStartInput}
/>
<View style={componentStyles.hoursAndMinutesSeparator}>
Expand All @@ -140,6 +143,7 @@ function TimeInputs({
inputType={inputType}
onSubmitEditing={onSubmitEndInput}
onChanged={onMinuteChange}
testID={`${testID}-minute-input`}
/>
{!is24Hour && (
<>
Expand Down
5 changes: 4 additions & 1 deletion src/components/TimePicker/TimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export type Props = {

onFocusInput?: (type: PossibleClockTypes) => any;
isLandscape?: boolean;
testID?: string;
};

function TimePicker({
Expand All @@ -59,6 +60,7 @@ function TimePicker({
inputType = 'keyboard',
onTimeChange,
isLandscape = false,
testID,
}: Props) {
const { hours, minutes } = useMemo(() => {
const date = time ? parse(time, 'HH:mm', new Date()) : new Date();
Expand Down Expand Up @@ -105,7 +107,7 @@ function TimePicker({

return (
<DisplayModeContext.Provider value={memoizedValue}>
<View style={componentStyles.container}>
<View style={componentStyles.container} testID={testID}>
<TimeInputs
inputType={inputType}
hours={hours}
Expand All @@ -114,6 +116,7 @@ function TimePicker({
onChange={onChange}
onFocusInput={onFocusInput}
focused={focused}
testID={testID}
/>
<>
{inputType === inputTypes.picker ? (
Expand Down