@kadconsulting/dry
Version:
KAD Reusable Component Library
413 lines • 21.6 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { mockedMatchMediaValue, actualMatchMediaValue, } from '../../../jest.setup';
import { Layouts } from '../../types';
import { DEFAULT_BREAKPOINTS } from './config';
import { LayoutProvider, useLayout } from './';
import lightTheme from '~themes/default/palette/light';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '~components/ThemeProvider';
const originalWindowInnerWidth = window.innerWidth;
const originalWindowInnerHeight = window.innerHeight;
const originalVisualViewport = window.visualViewport;
describe('LayoutProvider', () => {
beforeAll(() => Object.defineProperty(window, 'matchMedia', mockedMatchMediaValue({ matches: false })));
afterAll(() => {
window.matchMedia = actualMatchMediaValue;
});
afterEach(() => {
window.visualViewport = originalVisualViewport;
window.innerWidth = originalWindowInnerWidth;
window.innerHeight = originalWindowInnerHeight;
});
it('renders its children', () => {
// ARRANGE
const children = 'Hello world';
// ACT
render(_jsx(LayoutProvider, { children: children }));
// ASSERT
expect(screen.getByText(children)).toBeInTheDocument();
});
it('| mobile | visualVewport | ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const mobileWidth = DEFAULT_BREAKPOINTS.mobileMax - 1;
/**
* 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(mobileWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.mobileMin);
expect(mobileWidth).toBeLessThan(DEFAULT_BREAKPOINTS.mobileMax);
window.visualViewport = {
width: mobileWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Mobile);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(mobileWidth.toString());
});
it('| mobile | visualVewport | no ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const mobileWidth = DEFAULT_BREAKPOINTS.mobileMax - 1;
/**
* 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(mobileWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.mobileMin);
expect(mobileWidth).toBeLessThan(DEFAULT_BREAKPOINTS.mobileMax);
window.visualViewport = {
width: mobileWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Mobile);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(mobileWidth.toString());
});
it('| mobile | innerWidth | ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const mobileWidth = DEFAULT_BREAKPOINTS.mobileMax - 1;
/**
* 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(mobileWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.mobileMin);
expect(mobileWidth).toBeLessThan(DEFAULT_BREAKPOINTS.mobileMax);
window.visualViewport = {
width: mobileWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Mobile);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(mobileWidth.toString());
});
it('| mobile | innerWidth | no ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const mobileWidth = DEFAULT_BREAKPOINTS.mobileMax - 1;
/**
* 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(mobileWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.mobileMin);
expect(mobileWidth).toBeLessThan(DEFAULT_BREAKPOINTS.mobileMax);
window.innerWidth = mobileWidth;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Mobile);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(mobileWidth.toString());
});
it('| tablet | visualVewport | ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const tabletWidth = DEFAULT_BREAKPOINTS.tabletMax - 1;
/**
* 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(tabletWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.tabletMin);
expect(tabletWidth).toBeLessThan(DEFAULT_BREAKPOINTS.tabletMax);
window.visualViewport = {
width: tabletWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Tablet);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(tabletWidth.toString());
});
it('| tablet | visualVewport | no ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const tabletWidth = DEFAULT_BREAKPOINTS.tabletMax - 1;
/**
* 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(tabletWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.tabletMin);
expect(tabletWidth).toBeLessThan(DEFAULT_BREAKPOINTS.tabletMax);
window.visualViewport = {
width: tabletWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Tablet);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(tabletWidth.toString());
});
it('| tablet | innerWidth | ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const tabletWidth = DEFAULT_BREAKPOINTS.tabletMax - 1;
/**
* 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(tabletWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.tabletMin);
expect(tabletWidth).toBeLessThan(DEFAULT_BREAKPOINTS.tabletMax);
window.innerWidth = tabletWidth;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Tablet);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(tabletWidth.toString());
});
it('| tablet | innerWidth | no ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one less than the mobile max breakpoint.
*/
const tabletWidth = DEFAULT_BREAKPOINTS.tabletMax - 1;
/**
* 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(tabletWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.tabletMin);
expect(tabletWidth).toBeLessThan(DEFAULT_BREAKPOINTS.tabletMax);
window.innerWidth = tabletWidth;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Tablet);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(tabletWidth.toString());
});
it('| desktop | visualVewport | ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one more than the desktop min breakpoint.
*/
const desktopWidth = DEFAULT_BREAKPOINTS.desktopMin + 1;
/**
* 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(desktopWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.desktopMin);
window.visualViewport = {
width: desktopWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Desktop);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(desktopWidth.toString());
});
it('| desktop | visualVewport | no ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one more than the desktop min breakpoint.
*/
const desktopWidth = DEFAULT_BREAKPOINTS.desktopMin + 1;
/**
* 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(desktopWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.desktopMin);
window.visualViewport = {
width: desktopWidth,
height,
};
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Desktop);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(desktopWidth.toString());
});
it('| desktop | innerWidth | ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one more than the desktop min breakpoint.
*/
const desktopWidth = DEFAULT_BREAKPOINTS.desktopMin + 1;
/**
* 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(desktopWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.desktopMin);
window.innerWidth = desktopWidth;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Desktop);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(desktopWidth.toString());
});
it('| desktop | innerWidth | no ThemeProvider |', () => {
// ARRANGE
const widthTestId = 'width';
const heightTestId = 'height';
const layoutTestId = 'layout';
const height = 700;
/**
* Assuming the mock's min and max values are correctly configured,
* a safe value to use is one more than the desktop min breakpoint.
*/
const desktopWidth = DEFAULT_BREAKPOINTS.desktopMin + 1;
/**
* 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(desktopWidth).toBeGreaterThan(DEFAULT_BREAKPOINTS.desktopMin);
window.innerWidth = desktopWidth;
window.innerHeight = height;
// Trigger the window resize event.
window.dispatchEvent(new Event('resize'));
const TestConsumer = () => {
const { layout, windowInnerHeight, windowInnerWidth } = useLayout();
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(LayoutProvider, { children: _jsx(TestConsumer, {}) }));
// ASSERT
expect(screen.getByTestId(layoutTestId)).toHaveTextContent(Layouts.Desktop);
expect(screen.getByTestId(widthTestId)).toHaveTextContent(desktopWidth.toString());
});
});
//# sourceMappingURL=LayoutProvider.test.js.map