@navinc/base-react-components
Version:
Nav's Pattern Library
138 lines • 6.79 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { describe, expect, it } from 'vitest';
import { renderWithContext } from './tests/with-app-context.js';
import { screen } from '@testing-library/react';
import { Copy, getSize, getFromSize, getVariableSize, getFromVariableSize, sizeVariants, defaultSize } from './copy.js';
import { objectKeys } from '@navinc/utils';
const sizes = objectKeys(sizeVariants);
describe('Base Components: Copy', () => {
describe('render', () => {
it('renders Copy', () => {
renderWithContext(_jsx(Copy, { children: "test text" }));
expect(screen.getByText('test text')).toBeInTheDocument();
expect(screen.getByText('test text').tagName).toBe('P');
});
});
});
describe('utils', () => {
describe('getSize', () => {
it('returns the style object for the given size', () => {
const size = 'xs';
expect(getSize({ size })).toEqual(sizeVariants[size]);
});
it('returns the style object for default size if no size is provided', () => {
const size = undefined;
expect(getSize({ size })).toEqual(sizeVariants[defaultSize]);
});
it('returns the style object for default size if an invalid size is provided', () => {
const size = 'foo';
expect(getSize({ size })).toEqual(sizeVariants[defaultSize]);
});
});
describe('getFromSize', () => {
it('returns the given property from the style object for the given size', () => {
Object.entries(sizeVariants).forEach(([size, styleObj]) => {
objectKeys(styleObj).forEach((prop) => {
expect(getFromSize(prop)({ size })).toEqual(sizeVariants[size][prop]);
});
});
});
it('returns the given property from the style object for the default size if no size is given', () => {
const size = undefined;
Object.entries(sizeVariants).forEach(([_, styleObj]) => {
objectKeys(styleObj).forEach((prop) => {
expect(getFromSize(prop)({ size })).toEqual(sizeVariants[defaultSize][prop]);
});
});
});
it('returns the given property from the style object for the default size if an invalid size is given', () => {
const size = 'foo';
Object.entries(sizeVariants).forEach(([_, styleObj]) => {
objectKeys(styleObj).forEach((prop) => {
expect(getFromSize(prop)({ size })).toEqual(sizeVariants[defaultSize][prop]);
});
});
});
});
describe('getVariableSize', () => {
it('returns the given style object for one size larger than the given size', () => {
Object.entries(sizeVariants).forEach(([size, _styleObj], _i) => {
const expectedIndex = Math.min(sizes.indexOf(size) + 1, sizes.length - 1);
const expectedSize = sizes[expectedIndex];
const expectedSizeObj = sizeVariants[expectedSize];
expect(getVariableSize({
size,
shouldScaleFont: true,
})).toEqual(expectedSizeObj);
});
});
it('returns the given style object for one size larger than the default size if no size is given', () => {
const size = undefined;
const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1);
const expectedSize = sizes[expectedIndex];
const expectedSizeObj = sizeVariants[expectedSize];
Object.entries(sizeVariants).forEach(([_, _styleObj], _i) => {
expect(getVariableSize({
size,
shouldScaleFont: true,
})).toEqual(expectedSizeObj);
});
});
it('returns the given style object for the default size if an invalid size is given', () => {
const size = 'foo';
const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1);
const expectedSize = sizes[expectedIndex];
const expectedSizeObj = sizeVariants[expectedSize];
Object.entries(sizeVariants).forEach(([_, _styleObj], _i) => {
expect(getVariableSize({
size,
shouldScaleFont: true,
})).toEqual(expectedSizeObj);
});
});
});
describe('getFromVariableSize', () => {
it('returns the given property from the style object for one size larger than the given size', () => {
Object.entries(sizeVariants).forEach(([size, styleObj], _i) => {
const expectedIndex = Math.min(sizes.indexOf(size) + 1, sizes.length - 1);
const expectedSize = sizes[expectedIndex];
const expectedSizeObj = sizeVariants[expectedSize];
objectKeys(styleObj).forEach((prop) => {
expect(getFromVariableSize(prop)({
size,
shouldScaleFont: true,
})).toEqual(expectedSizeObj[prop]);
});
});
});
it('returns the given property from the style object for one size larger than the default size if no size is given', () => {
const size = undefined;
const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1);
const expectedSize = sizes[expectedIndex];
const expectedSizeObj = sizeVariants[expectedSize];
Object.entries(sizeVariants).forEach(([_, styleObj], _i) => {
objectKeys(styleObj).forEach((prop) => {
expect(getFromVariableSize(prop)({
size,
shouldScaleFont: true,
})).toEqual(expectedSizeObj[prop]);
});
});
});
it('returns the given property from the style object for the default size if an invalid size is given', () => {
const size = 'foo';
const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1);
const expectedSize = sizes[expectedIndex];
const expectedSizeObj = sizeVariants[expectedSize];
Object.entries(sizeVariants).forEach(([_, styleObj], _i) => {
objectKeys(styleObj).forEach((prop) => {
expect(getFromVariableSize(prop)({
size,
shouldScaleFont: true,
})).toEqual(expectedSizeObj[prop]);
});
});
});
});
});
//# sourceMappingURL=copy.spec.js.map