blob: 0fd986eb14d70a9ca2ef65759ba8aa18bcf16be9 (
plain)
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
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import { Flip } from './flip';
import { FlipSide } from './flip-side';
describe('Flip', () => {
it('renders the back and front sides', () => {
const front = 'laboriosam sint rem';
const back = 'tempore autem ea';
render(
<Flip>
<FlipSide>{front}</FlipSide>
<FlipSide isBack>{back}</FlipSide>
</Flip>
);
expect(rtlScreen.getByText(front)).toBeInTheDocument();
expect(rtlScreen.getByText(back)).toBeInTheDocument();
});
it('can be animated horizontally', () => {
const front = 'repudiandae maiores sunt';
const back = 'facilis nostrum voluptatibus';
render(
<Flip direction="horizontal">
<FlipSide>{front}</FlipSide>
<FlipSide isBack>{back}</FlipSide>
</Flip>
);
expect(rtlScreen.getByText(front).parentElement).toHaveClass(
'wrapper--horizontal'
);
});
it('can be animated vertically', () => {
const front = 'quis et id';
const back = 'quis est itaque';
render(
<Flip direction="vertical">
<FlipSide>{front}</FlipSide>
<FlipSide isBack>{back}</FlipSide>
</Flip>
);
expect(rtlScreen.getByText(front).parentElement).toHaveClass(
'wrapper--vertical'
);
});
it('can be animated manually', () => {
const front = 'quis et id';
const back = 'quis est itaque';
render(
<Flip showBack>
<FlipSide>{front}</FlipSide>
<FlipSide isBack>{back}</FlipSide>
</Flip>
);
expect(rtlScreen.getByText(front).parentElement).toHaveClass(
'wrapper--manual'
);
expect(rtlScreen.getByText(front).parentElement).toHaveClass(
'wrapper--is-back'
);
});
});
|
