-
Notifications
You must be signed in to change notification settings - Fork 2
/
serializer.test.tsx
87 lines (78 loc) · 2.06 KB
/
serializer.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { css, StyleSheet } from 'aphrodite';
import * as React from 'react';
import { aphroditeSerializer } from '.';
import { checkSnapshotForEachMethod} from './testUtil';
expect.addSnapshotSerializer(aphroditeSerializer);
const Wrapper: React.SFC = props => {
const styles = StyleSheet.create({
wrapper: {
background: 'papayawhip',
padding: '4em',
},
});
return <section className={css(styles.wrapper)} {...props} />;
};
const Title: React.SFC = props => {
const styles = StyleSheet.create({
title: {
color: 'palevioletred',
fontSize: '1.5em',
textAlign: 'center',
},
});
return <h1 className={css(styles.title)} {...props} />;
};
test('Wrapper', () => {
checkSnapshotForEachMethod(
<Wrapper>
<Title>
Hello World, this is my first component styled with aphrodite!
</Title>
</Wrapper>
);
});
test('when the root element does not have styles', () => {
checkSnapshotForEachMethod(
<div>
<Wrapper />
</div>
);
});
test(`doesn't fail for nodes without styles`, () => {
checkSnapshotForEachMethod(<div />);
});
test('joins multiple classes', () => {
const styles = StyleSheet.create({
first: { color: 'red' },
second: { backgroundColor: 'black' },
third: { color: 'blue' },
});
checkSnapshotForEachMethod(<div className={css(styles.first, styles.second, styles.third)} />);
});
test('supports mediaQueries', () => {
const styles = StyleSheet.create({
root: {
color: 'red',
'@media(min-width: 200px)': {
color: 'black',
},
},
});
checkSnapshotForEachMethod(<div className={css(styles.root)} />);
});
test('supports pseudo selectors', () => {
const styles = StyleSheet.create({
root: {
color: 'red',
':hover': {
color: 'green',
},
'@media(min-width: 200px)': {
':hover': {
color: 'black',
},
},
},
});
checkSnapshotForEachMethod(<div className={css(styles.root)} />);
});