@kadconsulting/dry
Version:
KAD Reusable Component Library
160 lines • 7.85 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { mockedMatchMediaValue, actualMatchMediaValue, } from '../../../jest.setup';
import { ViewportSizes } from 'types';
import { DEFAULT_BREAKPOINTS } from './config';
import lightTheme from 'themes/default/palette/light';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from 'components/ThemeProvider';
import { ViewportBreakpointProvider, useViewportBreakpoint } from './';
const originalWindowInnerWidth = window.innerWidth;
const originalWindowInnerHeight = window.innerHeight;
const originalVisualViewport = window.visualViewport;
describe('ViewportBreakpointProvider', () => {
it('renders its children', () => {
// ARRANGE
const children = 'Hello world';
// ACT
render(_jsx(ViewportBreakpointProvider, { children: children }));
// ASSERT
expect(screen.getByText(children)).toBeInTheDocument();
});
});
describe.each([
[
ViewportSizes.Mobile,
DEFAULT_BREAKPOINTS.mobileMax - 1,
0,
DEFAULT_BREAKPOINTS.tabletMax,
],
[
ViewportSizes.Tablet,
DEFAULT_BREAKPOINTS.tabletMax - 1,
DEFAULT_BREAKPOINTS.tabletMin,
DEFAULT_BREAKPOINTS.tabletMax,
],
[
ViewportSizes.Desktop,
DEFAULT_BREAKPOINTS.desktopMin + 1,
DEFAULT_BREAKPOINTS.desktopMin,
Infinity,
],
])('%s', (deviceType, width, deviceMin, deviceMax) => {
beforeAll(() => Object.defineProperty(window, 'matchMedia', mockedMatchMediaValue({ matches: false })));
afterAll(() => {
window.matchMedia = actualMatchMediaValue;
});
afterEach(() => {
window.visualViewport = originalVisualViewport;
window.innerWidth = originalWindowInnerWidth;
window.innerHeight = originalWindowInnerHeight;
});
it('renders correct layout and width with no ThemeProvider when execution context supports visualViewport', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Just to be sure our default mock isn't misconfigured, we can assert it
* falls within the expected range before proceeding with the test.
*/
expect(width).toBeGreaterThan(deviceMin);
expect(width).toBeLessThan(deviceMax);
window.visualViewport = {
width,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useViewportBreakpoint();
return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": layoutTestId, children: layout }), _jsx("div", { "data-testid": widthTestId, children: windowInnerWidth }), _jsx("div", { "data-testid": heightTestId, children: windowInnerHeight })] }));
};
// ARRANGE
render(_jsx(ViewportBreakpointProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(deviceType);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(width.toString());
});
it('renders correct layout and width with ThemeProvider when execution context supports visualViewport', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Just to be sure our default mock isn't misconfigured, we can assert it
* falls within the expected range before proceeding with the test.
*/
expect(width).toBeGreaterThan(deviceMin);
expect(width).toBeLessThan(deviceMax);
window.visualViewport = {
width,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useViewportBreakpoint();
return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": layoutTestId, children: layout }), _jsx("div", { "data-testid": widthTestId, children: windowInnerWidth }), _jsx("div", { "data-testid": heightTestId, children: windowInnerHeight })] }));
};
// ARRANGE
render(_jsx(ThemeProvider, { themes: { light: lightTheme }, children: _jsx(ViewportBreakpointProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(deviceType);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(width.toString());
});
it('renders correct layout and width device with no ThemeProvider when execution context supports innerWidth', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Just to be sure our default mock isn't misconfigured, we can assert it
* falls within the expected range before proceeding with the test.
*/
expect(width).toBeGreaterThan(deviceMin);
expect(width).toBeLessThan(deviceMax);
window.innerWidth = width;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useViewportBreakpoint();
return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": layoutTestId, children: layout }), _jsx("div", { "data-testid": widthTestId, children: windowInnerWidth }), _jsx("div", { "data-testid": heightTestId, children: windowInnerHeight })] }));
};
// ARRANGE
render(_jsx(ViewportBreakpointProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(deviceType);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(width.toString());
});
it('renders correct layout and width device with ThemeProvider when execution context supports innerWidth', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Just to be sure our default mock isn't misconfigured, we can assert it
* falls within the expected range before proceeding with the test.
*/
expect(width).toBeGreaterThan(deviceMin);
expect(width).toBeLessThan(deviceMax);
window.innerWidth = width;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useViewportBreakpoint();
return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": layoutTestId, children: layout }), _jsx("div", { "data-testid": widthTestId, children: windowInnerWidth }), _jsx("div", { "data-testid": heightTestId, children: windowInnerHeight })] }));
};
// ARRANGE
render(_jsx(ThemeProvider, { themes: { light: lightTheme }, children: _jsx(ViewportBreakpointProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(deviceType);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(width.toString());
});
});
//# sourceMappingURL=ViewportBreakpointProvider.test.js.map