UNPKG

4.48 kBJavaScriptView Raw
1import React from 'react';
2import { render, screen } from '@testing-library/react';
3import '@testing-library/jest-dom';
4import user from '@testing-library/user-event';
5import { Carousel, UncontrolledCarousel } from '..';
6
7const items = [
8 {
9 src: '',
10 altText: 'a',
11 caption: 'caption 1',
12 key: '1',
13 },
14 {
15 src: '',
16 altText: 'b',
17 caption: 'caption 2',
18 key: '2',
19 },
20 {
21 src: '',
22 altText: 'c',
23 caption: 'caption 3',
24 key: '3',
25 },
26];
27
28describe('UncontrolledCarousel', () => {
29 beforeEach(() => {
30 jest.useFakeTimers();
31 });
32
33 afterEach(() => {
34 jest.clearAllTimers();
35 });
36
37 it('should have active element default to 0', () => {
38 render(<UncontrolledCarousel items={items} />);
39 expect(screen.getByAltText('a').parentElement).toHaveClass('active');
40 });
41
42 it('should autoplay by default', () => {
43 render(<UncontrolledCarousel items={items} />);
44 expect(screen.getByAltText('a').parentElement).toHaveClass('active');
45 jest.advanceTimersByTime(5000);
46 expect(screen.getByAltText('b').parentElement).toHaveClass(
47 'carousel-item carousel-item-start carousel-item-next',
48 );
49 jest.advanceTimersByTime(600);
50 expect(screen.getByAltText('b').parentElement).toHaveClass('active');
51 });
52
53 it('should not play automatically when autoPlay is false', () => {
54 render(<UncontrolledCarousel items={items} autoPlay={false} />);
55 expect(screen.getByAltText('a').parentElement).toHaveClass('active');
56 jest.advanceTimersByTime(5000);
57 expect(screen.getByAltText('b').parentElement).not.toHaveClass(
58 'carousel-item carousel-item-start carousel-item-next',
59 );
60 jest.advanceTimersByTime(600);
61 expect(screen.getByAltText('b').parentElement).not.toHaveClass('active');
62 });
63
64 it('should move to next slide when next button is clicked', () => {
65 render(<UncontrolledCarousel items={items} autoPlay={false} />);
66 user.click(screen.getByText(/next/i));
67 jest.advanceTimersByTime(600);
68 expect(screen.getByAltText('b').parentElement).toHaveClass(
69 'carousel-item active',
70 );
71 });
72
73 it('should not move to next slide while animating', () => {
74 render(<UncontrolledCarousel items={items} />);
75 user.click(screen.getByText(/next/i));
76 expect(screen.getByAltText('b').parentElement).toHaveClass(
77 'carousel-item carousel-item-start carousel-item-next',
78 );
79 user.click(screen.getByText(/next/i));
80 expect(screen.getByAltText('c').parentElement).not.toHaveClass(
81 'carousel-item carousel-item-start carousel-item-next',
82 );
83 });
84
85 it('should wrap to first slide on reaching the end', () => {
86 render(<UncontrolledCarousel items={items} autoPlay={false} />);
87 user.click(screen.getByText(/next/i));
88 jest.advanceTimersByTime(600);
89 expect(screen.getByAltText('b').parentElement).toHaveClass('active');
90
91 user.click(screen.getByText(/next/i));
92 jest.advanceTimersByTime(600);
93 expect(screen.getByAltText('c').parentElement).toHaveClass('active');
94
95 user.click(screen.getByText(/next/i));
96 jest.advanceTimersByTime(600);
97 expect(screen.getByAltText('a').parentElement).toHaveClass('active');
98 });
99
100 it('should move to previous slide when previous button is clicked', () => {
101 render(<UncontrolledCarousel items={items} autoPlay={false} />);
102 user.click(screen.getByText(/next/i));
103 jest.advanceTimersByTime(600);
104 expect(screen.getByAltText('b').parentElement).toHaveClass(
105 'carousel-item active',
106 );
107
108 user.click(screen.getByText(/previous/i));
109 jest.advanceTimersByTime(600);
110 expect(screen.getByAltText('a').parentElement).toHaveClass(
111 'carousel-item active',
112 );
113 });
114
115 it('should not move to previous slide while animating', () => {
116 render(<UncontrolledCarousel items={items} />);
117 user.click(screen.getByText(/next/i));
118 expect(screen.getByAltText('b').parentElement).toHaveClass(
119 'carousel-item carousel-item-start carousel-item-next',
120 );
121 user.click(screen.getByText(/previous/i));
122 expect(screen.getByAltText('a').parentElement).not.toHaveClass(
123 'carousel-item carousel-item-start carousel-item-next',
124 );
125 });
126
127 it('should wrap to last slide on reaching the beginning', () => {
128 render(<UncontrolledCarousel items={items} autoPlay={false} />);
129 user.click(screen.getByText(/previous/i));
130 jest.advanceTimersByTime(600);
131 expect(screen.getByAltText('c').parentElement).toHaveClass('active');
132 });
133});