vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
295 lines • 9.63 kB
JavaScript
import React from 'react';
import { Text, convertBaselineValues, renameBaselineKeys, convertBaselineKeys, createBaselineAdjustments } from '.';
import createSnapshot from '../../test/create-snapshot';
import render from '../../test/render';
describe('<Text />', function () {
it('renders <Text /> component correctly with default props', function () {
var snapshot = createSnapshot(React.createElement(Text, null, "Hello world!"));
expect(snapshot).toMatchSnapshot();
});
it('passes through custom theme object to extend', function () {
var snapshot = createSnapshot(React.createElement(Text, {
extend: function extend(_ref) {
var theme = _ref.theme;
return {
color: theme.color.foreground.secondary
};
}
}, "Hello world!"));
expect(snapshot).toMatchSnapshot();
});
describe('Type Scales + Sub Styles', function () {
describe('Peary', function () {
it('Standard', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "peary"
}, "Peary"));
expect(snapshot).toMatchSnapshot();
});
});
describe('Cook', function () {
it('Standard', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "cook"
}, "Cook"));
expect(snapshot).toMatchSnapshot();
});
});
describe('Ootah', function () {
it('Standard', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "ootah"
}, "Ootah"));
expect(snapshot).toMatchSnapshot();
});
});
describe('Hillary', function () {
it('Standard', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "hillary"
}, "Hillary"));
expect(snapshot).toMatchSnapshot();
});
it('Inline Link', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "hillary",
subStyle: "inline-link"
}, "Hillary - Inline Link"));
expect(snapshot).toMatchSnapshot();
});
it('Emphasis', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "hillary",
subStyle: "emphasis"
}, "Hillary - Inline Link"));
expect(snapshot).toMatchSnapshot();
});
});
describe('Columbus', function () {
it('Standard', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "columbus"
}, "Columbus"));
expect(snapshot).toMatchSnapshot();
});
it('Inline Link', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "columbus",
subStyle: "inline-link"
}, "Columbus - Inline Link"));
expect(snapshot).toMatchSnapshot();
});
it('Emphasis', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "columbus",
subStyle: "emphasis"
}, "Columbus - Inline Link"));
expect(snapshot).toMatchSnapshot();
});
});
describe('Bates', function () {
it('Standard', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "bates"
}, "Bates"));
expect(snapshot).toMatchSnapshot();
});
it('Inline Link', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "bates",
subStyle: "inline-link"
}, "Bates - Inline Link"));
expect(snapshot).toMatchSnapshot();
});
it('Emphasis', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "bates",
subStyle: "emphasis"
}, "Bates - Inline Link"));
expect(snapshot).toMatchSnapshot();
});
});
it('Amundsen', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "amundsen"
}, "Amundsen"));
expect(snapshot).toMatchSnapshot();
});
it('Armstrong', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "armstrong"
}, "Armstrong"));
expect(snapshot).toMatchSnapshot();
});
it('Jemison', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "jemison"
}, "Jemison"));
expect(snapshot).toMatchSnapshot();
});
it('Ride', function () {
var snapshot = createSnapshot(React.createElement(Text, {
variant: "ride"
}, "Ride"));
expect(snapshot).toMatchSnapshot();
});
});
it('renders with custom root element', function () {
var snapshot = createSnapshot(React.createElement(Text, {
as: "blockquote"
}, "Custom element"));
expect(snapshot).toMatchSnapshot();
});
it('renders with custom root element and non-default variant', function () {
var snapshot = createSnapshot(React.createElement(Text, {
as: "div",
variant: "peary"
}, "Peary Custom element"));
expect(snapshot).toMatchSnapshot();
});
it('can disable baseline adjustments', function () {
var snapshot = createSnapshot(React.createElement(Text, {
alignBaseline: false
}, "Baseline adjustment disabled"));
expect(snapshot).toMatchSnapshot();
});
it('can extend styles', function () {
var snapshot = createSnapshot(React.createElement(Text, {
extend: {
color: 'red'
}
}, "Red color"));
expect(snapshot).toMatchSnapshot();
});
it('can add custom DOM attributes', function () {
var snapshot = createSnapshot(React.createElement(Text, {
"data-test": "foo"
}, "Custom data attributes"));
expect(snapshot).toMatchSnapshot();
});
it('handles nested sub-styles', function () {
React.createElement(Text, null, "Hello ", React.createElement(Text, {
subStyle: "emphasis"
}, "World"), "!");
});
it('correctly implements ref prop', function () {
var mockRef = React.createRef();
render(React.createElement(Text, {
ref: mockRef
}, "Hello world"));
expect(mockRef.current).not.toBe(null);
});
describe('convertBaselineValues()', function () {
it('correctly maps an object of baseline adjustments to pixel values', function () {
var mockData = {
top: 'mockTop',
bottom: 'mockBottom',
'mock-media': {
top: 'mockMediaTop',
bottom: 'mockMediaBottom'
}
};
var result = convertBaselineValues(mockData);
expect(result).toEqual({
top: 'mockToppx 0 0',
bottom: '0 0 mockBottompx',
'mock-media': {
top: 'mockMediaToppx 0 0',
bottom: '0 0 mockMediaBottompx'
}
});
});
});
describe('renameBaselineKeys()', function () {
it('correctly renames keys on given baselineAdjustment object', function () {
var result = renameBaselineKeys({
top: 'mockTop',
bottom: 'mockBottom'
});
expect(result).toEqual({
padding: 'mockTop',
margin: 'mockBottom'
});
});
});
describe('convertBaselineKeys()', function () {
it('correctly converts keys to margin/paddings on given baselineAdjustments object', function () {
var result = convertBaselineKeys({
top: 'mockTop',
bottom: 'mockBottom',
'mock-media': {
top: 'mockMediaTop',
bottom: 'mockMediaBottom'
}
});
expect(result).toEqual({
padding: 'mockTop',
margin: 'mockBottom',
'mock-media': {
padding: 'mockMediaTop',
margin: 'mockMediaBottom'
}
});
});
});
describe('createBaselineAdjustments()', function () {
it('correctly converts baselineAdjustments object to valid css format when element is at the root', function () {
var result = createBaselineAdjustments({
isRootElement: true,
shouldAdjustBaseline: true,
baselineAdjustments: {
top: 'mockTop',
bottom: 'mockBottom',
'mock-media': {
top: 'mockMediaTop',
bottom: 'mockMediaBottom'
}
}
});
expect(result).toEqual({
padding: 'mockToppx 0 0',
margin: '0 0 mockBottompx',
'mock-media': {
padding: 'mockMediaToppx 0 0',
margin: '0 0 mockMediaBottompx'
}
});
});
it('correctly converts baselineAdjustments object to valid css format when element is not at the root', function () {
var result = createBaselineAdjustments({
isRootElement: false,
shouldAdjustBaseline: true,
baselineAdjustments: {
top: 'mockTop',
bottom: 'mockBottom',
'mock-media': {
top: 'mockMediaTop',
bottom: 'mockMediaBottom'
}
}
});
expect(result).toEqual({
padding: 0,
margin: 0
});
});
it('correctly converts baselineAdjustments object to valid css format when user defines no baselineAdjustments', function () {
var result = createBaselineAdjustments({
isRootElement: false,
shouldAdjustBaseline: true,
baselineAdjustments: {
top: 'mockTop',
bottom: 'mockBottom',
'mock-media': {
top: 'mockMediaTop',
bottom: 'mockMediaBottom'
}
}
});
expect(result).toEqual({
padding: 0,
margin: 0
});
});
});
});