Skip to content

Commit

Permalink
✅ DateField - add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@JosselinTILLAY
JosselinTILLAY committed Dec 18, 2023
1 parent 94f5ef4 commit 3709a05
Show file tree
Hide file tree
Showing 2 changed files with 396 additions and 0 deletions.
117 changes: 117 additions & 0 deletions src/__tests__/components/DateField.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import React from 'react';
import { fireEvent, render, act } from '@testing-library/react-native';
import { ThemeProvider } from '../../styles/themes';
import { DateField } from '../../components';

const mockedCallback = jest.fn();
const mockedTestID = 'mockedTestID';

describe('MODULE | DateField', () => {
it('component renders correctly in empty mode', () => {
const tree = render(
<ThemeProvider>
<DateField placeholder='01' />
</ThemeProvider>,
);
expect(tree.toJSON()).toMatchSnapshot();
});

it('component renders correctly empty focused state', async () => {
const tree = render(
<ThemeProvider>
<DateField testID={mockedTestID} placeholder='01' />
</ThemeProvider>,
);

await act(async () => {
fireEvent(tree.getByTestId(mockedTestID), 'focus');
});

expect(tree.toJSON()).toMatchSnapshot();
});

it('component renders correctly filled focused state', async () => {
const tree = render(
<ThemeProvider>
<DateField testID={mockedTestID} placeholder='01' value='12' />
</ThemeProvider>,
);

await act(async () => {
fireEvent(tree.getByTestId(mockedTestID), 'focus');
});

expect(tree.toJSON()).toMatchSnapshot();
});

it('component renders correctly filled unfocused state', async () => {
const tree = render(
<ThemeProvider>
<DateField testID={mockedTestID} placeholder='01' value='12' />
</ThemeProvider>,
);

expect(tree.toJSON()).toMatchSnapshot();
});

it('component renders correctly in error state', async () => {
const tree = render(
<ThemeProvider>
<DateField placeholder='01' hasError={true} />
</ThemeProvider>,
);

expect(tree.toJSON()).toMatchSnapshot();
});

it('fires callback when on input value change', async () => {
const tree = render(
<ThemeProvider>
<DateField
testID={mockedTestID}
onChangeText={mockedCallback}
/>
</ThemeProvider>,
);

await act(async () => {
fireEvent.changeText(tree.getByTestId(mockedTestID), '12');
});

expect(mockedCallback).toHaveBeenCalledWith('12');
});

it('shouldnt send more than 2 characters', async () => {
const tree = render(
<ThemeProvider>
<DateField
testID={mockedTestID}
onChangeText={mockedCallback}
/>
</ThemeProvider>,
);

await act(async () => {
fireEvent.changeText(tree.getByTestId(mockedTestID), '1234');
});

expect(mockedCallback).toHaveBeenCalledWith('12');
});

it('shouldnt accept non number characters', async () => {
const tree = render(
<ThemeProvider>
<DateField
testID={mockedTestID}
onChangeText={mockedCallback}
/>
</ThemeProvider>,
);

await act(async () => {
fireEvent.changeText(tree.getByTestId(mockedTestID), '1.');
});

expect(mockedCallback).toHaveBeenCalledWith('1');
});
});
279 changes: 279 additions & 0 deletions src/__tests__/components/__snapshots__/DateField.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`MODULE | DateField component renders correctly empty focused state 1`] = `
<RNCSafeAreaProvider
onInsetsChange={[Function]}
style={
[
{
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
pointerEvents="box-none"
style={
{
"flex": 1,
}
}
>
<TextInput
cursorColor="#18A586"
keyboardType="numeric"
maxLength={2}
onBlur={[Function]}
onChangeText={[Function]}
onFocus={[Function]}
placeholder="01"
placeholderTextColor="#18A586"
selectTextOnFocus={true}
selectionColor="#18A58629"
style={
{
"backgroundColor": "#18A58629",
"borderColor": "#18A586",
"borderRadius": 18,
"borderWidth": 1,
"color": "#18A586",
"fontFamily": "PublicSans-Bold",
"fontSize": 20,
"height": 48,
"lineHeight": 23.5,
"marginVertical": 0,
"paddingVertical": 0,
"width": 72,
}
}
testID="mockedTestID"
textAlign="center"
value=""
/>
</View>
</RNCSafeAreaProvider>
`;

exports[`MODULE | DateField component renders correctly filled focused state 1`] = `
<RNCSafeAreaProvider
onInsetsChange={[Function]}
style={
[
{
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
pointerEvents="box-none"
style={
{
"flex": 1,
}
}
>
<TextInput
cursorColor="#18A586"
keyboardType="numeric"
maxLength={2}
onBlur={[Function]}
onChangeText={[Function]}
onFocus={[Function]}
placeholder="01"
placeholderTextColor="#919EAB"
selectTextOnFocus={true}
selectionColor="#18A58629"
style={
{
"backgroundColor": "#FFFFFF",
"borderColor": "#18A586",
"borderRadius": 18,
"borderWidth": 1,
"color": "#212B36",
"fontFamily": "PublicSans-Bold",
"fontSize": 20,
"height": 48,
"lineHeight": 23.5,
"marginVertical": 0,
"paddingVertical": 0,
"width": 72,
}
}
testID="mockedTestID"
textAlign="center"
value="12"
/>
</View>
</RNCSafeAreaProvider>
`;

exports[`MODULE | DateField component renders correctly filled unfocused state 1`] = `
<RNCSafeAreaProvider
onInsetsChange={[Function]}
style={
[
{
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
pointerEvents="box-none"
style={
{
"flex": 1,
}
}
>
<TextInput
cursorColor="#18A586"
keyboardType="numeric"
maxLength={2}
onBlur={[Function]}
onChangeText={[Function]}
onFocus={[Function]}
placeholder="01"
placeholderTextColor="#919EAB"
selectTextOnFocus={true}
selectionColor="#18A58629"
style={
{
"backgroundColor": "#919EAB14",
"borderColor": undefined,
"borderRadius": 18,
"borderWidth": 0,
"color": "#212B36",
"fontFamily": "PublicSans-Bold",
"fontSize": 20,
"height": 48,
"lineHeight": 23.5,
"marginVertical": 0,
"paddingVertical": 0,
"width": 72,
}
}
testID="mockedTestID"
textAlign="center"
value="12"
/>
</View>
</RNCSafeAreaProvider>
`;

exports[`MODULE | DateField component renders correctly in empty mode 1`] = `
<RNCSafeAreaProvider
onInsetsChange={[Function]}
style={
[
{
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
pointerEvents="box-none"
style={
{
"flex": 1,
}
}
>
<TextInput
cursorColor="#18A586"
keyboardType="numeric"
maxLength={2}
onBlur={[Function]}
onChangeText={[Function]}
onFocus={[Function]}
placeholder="01"
placeholderTextColor="#919EAB"
selectTextOnFocus={true}
selectionColor="#18A58629"
style={
{
"backgroundColor": "#919EAB14",
"borderColor": undefined,
"borderRadius": 18,
"borderWidth": 0,
"color": "#919EAB",
"fontFamily": "PublicSans-Bold",
"fontSize": 20,
"height": 48,
"lineHeight": 23.5,
"marginVertical": 0,
"paddingVertical": 0,
"width": 72,
}
}
textAlign="center"
value=""
/>
</View>
</RNCSafeAreaProvider>
`;

exports[`MODULE | DateField component renders correctly in error state 1`] = `
<RNCSafeAreaProvider
onInsetsChange={[Function]}
style={
[
{
"flex": 1,
},
undefined,
]
}
>
<View
collapsable={false}
pointerEvents="box-none"
style={
{
"flex": 1,
}
}
>
<TextInput
cursorColor="#18A586"
keyboardType="numeric"
maxLength={2}
onBlur={[Function]}
onChangeText={[Function]}
onFocus={[Function]}
placeholder="01"
placeholderTextColor="#919EAB"
selectTextOnFocus={true}
selectionColor="#18A58629"
style={
{
"backgroundColor": "#FF563014",
"borderColor": undefined,
"borderRadius": 18,
"borderWidth": 0,
"color": "#FF5630",
"fontFamily": "PublicSans-Bold",
"fontSize": 20,
"height": 48,
"lineHeight": 23.5,
"marginVertical": 0,
"paddingVertical": 0,
"width": 72,
}
}
textAlign="center"
value=""
/>
</View>
</RNCSafeAreaProvider>
`;

0 comments on commit 3709a05

Please sign in to comment.