Skip to content

Commit 612776b

Browse files
committed
add test cases for no args or 1-dimension arg
1 parent 47a277e commit 612776b

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

src/index.test.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import '@testing-library/jest-dom';
2+
import React from 'react';
3+
import { render, screen, act, fireEvent } from '@testing-library/react';
4+
import useViewportSizes from './index';
5+
6+
function BasicUseCase() {
7+
const [vpW, vpH] = useViewportSizes();
8+
return (
9+
<div>
10+
<div data-testid='vpw'>{vpW}</div>
11+
<div data-testid='vph'>{vpH}</div>
12+
</div>
13+
);
14+
}
15+
16+
function WithDimensionArgument({ options }) {
17+
const [dimension] = useViewportSizes(options);
18+
return (
19+
<div>
20+
<div data-testid='dimension'>{dimension}</div>
21+
</div>
22+
);
23+
}
24+
25+
function setViewportDimensions(width, height) {
26+
act(() => {
27+
window.innerWidth = width;
28+
window.innerHeight = height;
29+
});
30+
31+
fireEvent(window, new Event('resize'));
32+
}
33+
34+
describe('useViewportSizes', () => {
35+
describe('calling with no options', () => {
36+
test('renders viewport width/height when run with no arguments', async () => {
37+
setViewportDimensions(640, 480);
38+
render(<BasicUseCase />);
39+
expect(screen.getByTestId('vpw').textContent).toEqual('640');
40+
expect(screen.getByTestId('vph').textContent).toEqual('480');
41+
});
42+
43+
test('updates viewport width/height read when the window is resized', async () => {
44+
setViewportDimensions(640, 480);
45+
render(<BasicUseCase />);
46+
expect(screen.getByTestId('vpw').textContent).toEqual('640');
47+
expect(screen.getByTestId('vph').textContent).toEqual('480');
48+
49+
setViewportDimensions(50, 100);
50+
expect(screen.getByTestId('vpw').textContent).toEqual('50');
51+
expect(screen.getByTestId('vph').textContent).toEqual('100');
52+
});
53+
});
54+
55+
describe('calling with one dimension option passed', () => {
56+
test('renders width of viewport when passed dimension: `w`, and updates this', async () => {
57+
setViewportDimensions(640, 480);
58+
render(<WithDimensionArgument options={{ dimension: 'w' }} />);
59+
expect(screen.getByTestId('dimension').textContent).toEqual('640');
60+
61+
setViewportDimensions(44, 80);
62+
expect(screen.getByTestId('dimension').textContent).toEqual('44');
63+
});
64+
65+
test('renders width of viewport when passed dimension: `h`, and updates this', async () => {
66+
setViewportDimensions(640, 480);
67+
render(<WithDimensionArgument options={{ dimension: 'h' }} />);
68+
expect(screen.getByTestId('dimension').textContent).toEqual('480');
69+
70+
setViewportDimensions(44, 80);
71+
expect(screen.getByTestId('dimension').textContent).toEqual('80');
72+
});
73+
});
74+
});

0 commit comments

Comments
 (0)