-
Notifications
You must be signed in to change notification settings - Fork 270
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: implement toHaveStyle with tests * refactor: tweaks and cleanup --------- Co-authored-by: Marcin Kornek <7931279+marcinkornek@users.noreply.github.com> Co-authored-by: Maciej Jastrzebski <mdjastrzebski@gmail.com>
- Loading branch information
1 parent
701433c
commit 3b9c4da
Showing
6 changed files
with
268 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,175 @@ | ||
import React from 'react'; | ||
import { StyleSheet, View, Pressable } from 'react-native'; | ||
import { render } from '../..'; | ||
import '../extend-expect'; | ||
|
||
const styles = StyleSheet.create({ | ||
container: { borderBottomColor: 'white' }, | ||
}); | ||
|
||
test('toHaveStyle() handles basic cases', () => { | ||
const screen = render( | ||
<View | ||
testID="view" | ||
style={[ | ||
{ | ||
backgroundColor: 'blue', | ||
height: '40%', | ||
transform: [{ scale: 2 }, { rotate: '45deg' }], | ||
}, | ||
[{ height: '100%' }], | ||
[[{ width: '50%' }]], | ||
styles.container, | ||
]} | ||
/> | ||
); | ||
|
||
const view = screen.getByTestId('view'); | ||
expect(view).toHaveStyle({ backgroundColor: 'blue' }); | ||
expect(view).toHaveStyle({ height: '100%' }); | ||
expect(view).toHaveStyle({ backgroundColor: 'blue', height: '100%' }); | ||
expect(view).toHaveStyle([{ backgroundColor: 'blue' }, { height: '100%' }]); | ||
|
||
expect(view).toHaveStyle({ borderBottomColor: 'white' }); | ||
expect(view).toHaveStyle({ width: '50%' }); | ||
expect(view).toHaveStyle([[{ width: '50%' }]]); | ||
expect(view).toHaveStyle({ | ||
transform: [{ scale: 2 }, { rotate: '45deg' }], | ||
}); | ||
|
||
expect(view).not.toHaveStyle({ backgroundColor: 'red' }); | ||
expect(view).not.toHaveStyle({ height: '50%' }); | ||
expect(view).not.toHaveStyle({ backgroundColor: 'blue', height: '50%' }); | ||
expect(view).not.toHaveStyle([ | ||
{ backgroundColor: 'blue' }, | ||
{ height: '50%' }, | ||
]); | ||
expect(view).not.toHaveStyle({ | ||
transform: [{ scale: 2 }], | ||
}); | ||
expect(view).not.toHaveStyle({ | ||
transform: [{ rotate: '45deg' }, { scale: 2 }], | ||
}); | ||
}); | ||
|
||
test('toHaveStyle error messages', () => { | ||
const screen = render( | ||
<View | ||
testID="view" | ||
style={{ | ||
backgroundColor: 'blue', | ||
borderBottomColor: 'black', | ||
height: '100%', | ||
transform: [{ scale: 2 }, { rotate: '45deg' }], | ||
}} | ||
/> | ||
); | ||
|
||
const view = screen.getByTestId('view'); | ||
expect(() => expect(view).toHaveStyle({ backgroundColor: 'red' })) | ||
.toThrowErrorMatchingInlineSnapshot(` | ||
"expect(element).toHaveStyle() | ||
- Expected | ||
+ Received | ||
- backgroundColor: red; | ||
+ backgroundColor: blue;" | ||
`); | ||
|
||
expect(() => | ||
expect(view).toHaveStyle({ | ||
backgroundColor: 'blue', | ||
transform: [{ scale: 1 }], | ||
}) | ||
).toThrowErrorMatchingInlineSnapshot(` | ||
"expect(element).toHaveStyle() | ||
- Expected | ||
+ Received | ||
backgroundColor: blue; | ||
transform: [ | ||
{ | ||
- "scale": 1 | ||
+ "scale": 2 | ||
+ }, | ||
+ { | ||
+ "rotate": "45deg" | ||
} | ||
];" | ||
`); | ||
|
||
expect(() => expect(view).not.toHaveStyle({ backgroundColor: 'blue' })) | ||
.toThrowErrorMatchingInlineSnapshot(` | ||
"expect(element).not.toHaveStyle() | ||
Expected element not to have style: | ||
backgroundColor: blue; | ||
Received: | ||
backgroundColor: blue;" | ||
`); | ||
|
||
expect(() => expect(view).toHaveStyle({ fontWeight: 'bold' })) | ||
.toThrowErrorMatchingInlineSnapshot(` | ||
"expect(element).toHaveStyle() | ||
- Expected | ||
+ Received | ||
- fontWeight: bold;" | ||
`); | ||
|
||
expect(() => expect(view).not.toHaveStyle({ backgroundColor: 'blue' })) | ||
.toThrowErrorMatchingInlineSnapshot(` | ||
"expect(element).not.toHaveStyle() | ||
Expected element not to have style: | ||
backgroundColor: blue; | ||
Received: | ||
backgroundColor: blue;" | ||
`); | ||
}); | ||
|
||
test('toHaveStyle() supports missing "style" prop', () => { | ||
const screen = render(<View testID="view" />); | ||
|
||
const view = screen.getByTestId('view'); | ||
expect(view).not.toHaveStyle({ fontWeight: 'bold' }); | ||
}); | ||
|
||
test('toHaveStyle() supports undefined "transform" style', () => { | ||
const screen = render( | ||
<View | ||
testID="view" | ||
style={{ | ||
backgroundColor: 'blue', | ||
transform: undefined, | ||
}} | ||
/> | ||
); | ||
|
||
const view = screen.getByTestId('view'); | ||
expect(() => expect(view).toHaveStyle({ transform: [{ scale: 1 }] })) | ||
.toThrowErrorMatchingInlineSnapshot(` | ||
"expect(element).toHaveStyle() | ||
- Expected | ||
+ Received | ||
- transform: [ | ||
- { | ||
- "scale": 1 | ||
- } | ||
- ]; | ||
+ transform: undefined;" | ||
`); | ||
}); | ||
|
||
test('toHaveStyle() supports Pressable with function "style" prop', () => { | ||
const screen = render( | ||
<Pressable testID="view" style={() => ({ backgroundColor: 'blue' })} /> | ||
); | ||
|
||
expect(screen.getByTestId('view')).toHaveStyle({ backgroundColor: 'blue' }); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import type { ReactTestInstance } from 'react-test-renderer'; | ||
import { | ||
ImageStyle, | ||
StyleProp, | ||
StyleSheet, | ||
TextStyle, | ||
ViewStyle, | ||
} from 'react-native'; | ||
import { matcherHint, diff } from 'jest-matcher-utils'; | ||
import { checkHostElement, formatMessage } from './utils'; | ||
|
||
export type Style = ViewStyle | TextStyle | ImageStyle; | ||
|
||
type StyleLike = Record<string, unknown>; | ||
|
||
export function toHaveStyle( | ||
this: jest.MatcherContext, | ||
element: ReactTestInstance, | ||
style: StyleProp<Style> | ||
) { | ||
checkHostElement(element, toHaveStyle, this); | ||
|
||
const expected = (StyleSheet.flatten(style) as StyleLike) ?? {}; | ||
const received = (StyleSheet.flatten(element.props.style) as StyleLike) ?? {}; | ||
|
||
const pass = Object.keys(expected).every((key) => | ||
this.equals(expected[key], received[key]) | ||
); | ||
|
||
return { | ||
pass, | ||
message: () => { | ||
const to = this.isNot ? 'not to' : 'to'; | ||
const matcher = matcherHint( | ||
`${this.isNot ? '.not' : ''}.toHaveStyle`, | ||
'element', | ||
'' | ||
); | ||
|
||
if (pass) { | ||
return formatMessage( | ||
matcher, | ||
`Expected element ${to} have style`, | ||
formatStyles(expected), | ||
'Received', | ||
formatStyles(pickReceivedStyles(expected, received)) | ||
); | ||
} else { | ||
return [matcher, '', expectedDiff(expected, received)].join('\n'); | ||
} | ||
}, | ||
}; | ||
} | ||
|
||
/** | ||
* Generate diff between `expected` and `received` styles. | ||
*/ | ||
function expectedDiff(expected: StyleLike, received: StyleLike) { | ||
const receivedNarrow = pickReceivedStyles(expected, received); | ||
return diff(formatStyles(expected), formatStyles(receivedNarrow)); | ||
} | ||
|
||
/** | ||
* Pick from `received` style only the keys present in `expected` style. | ||
*/ | ||
function pickReceivedStyles(expected: StyleLike, received: StyleLike) { | ||
const result: StyleLike = {}; | ||
Object.keys(received).forEach((key) => { | ||
if (expected[key] !== undefined) { | ||
result[key] = received[key]; | ||
} | ||
}); | ||
|
||
return result; | ||
} | ||
|
||
function formatStyles(style: StyleLike) { | ||
return Object.keys(style) | ||
.sort() | ||
.map((prop) => | ||
Array.isArray(style[prop]) | ||
? `${prop}: ${JSON.stringify(style[prop], null, 2)};` | ||
: `${prop}: ${style[prop]};` | ||
) | ||
.join('\n'); | ||
} |