Skip to content

Commit

Permalink
refactor(test): update tests that are meant for classic mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshblack
joshblack committed Mar 26, 2019
1 parent 889059d commit df29f85
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 126 deletions.
49 changes: 33 additions & 16 deletions src/globals/grid/__tests__/grid-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,30 @@
*/

const { types } = require('node-sass');
const { convert, renderSass } = require('../../../../tools/jest/scss');
const { convert, createSassRenderer } = require('@carbon/test-utils/scss');

const sassRender = createSassRenderer(__dirname);
const render = content =>
sassRender(`
$css--font-face: false;
$css--helpers: false;
$css--body: false;
$css--use-layer: false;
$css--reset: false;
$css--typography: false;
$css--plex: false;
${content}
`);
const renderClassic = content =>
render(`
$feature-flags: (components-x: false, breaking-changes-x: false, grid: false);
${content}
`);

describe('_grid.scss', () => {
it('should export grid variables', async () => {
const { calls } = await renderSass(`
@import './src/globals/grid/grid';
const { calls } = await renderClassic(`
@import '../grid';
$variables: (
'max-width': $max-width,
Expand Down Expand Up @@ -60,10 +78,8 @@ Object {
});

it('should support the grid mixin', async () => {
const { result } = await renderSass(`
$css--reset: false;
$css--helpers: false;
@import './src/globals/grid/grid';
const { result } = await renderClassic(`
@import '../grid';
@include grid();
`);
Expand All @@ -72,8 +88,8 @@ $css--helpers: false;
});

it('should support the breakpoint function', async () => {
const { calls, error, output } = await renderSass(`
@import './src/globals/grid/grid';
const { calls, error, output } = await renderClassic(`
@import '../grid';
@each $key, $value in $grid-breakpoints {
$t: test($key, breakpoint($key));
Expand All @@ -89,7 +105,8 @@ $t: test('unknown', breakpoint('unknown'));
}

// `breakpoint` is expected to warn on the unknown test case
expect(output.warn).toHaveBeenCalledTimes(1);
// Should be called twice now since feature flags have diverged in v10
expect(output.warn).toHaveBeenCalledTimes(2);

// This should fail because `breakpoint('unknown')` does not return a
// value
Expand All @@ -98,17 +115,17 @@ $t: test('unknown', breakpoint('unknown'));

describe('grid--x', () => {
it('should generate grid code when the grid feature flag is on', async () => {
const { result } = await renderSass(`
const { result } = await render(`
$feature-flags: (grid: true);
@import './src/globals/grid/grid';
@import '../grid';
`);
expect(result.css.toString()).toMatchSnapshot();
});

it('should export a 12 column grid by default', async () => {
const { result } = await renderSass(`
const { result } = await render(`
$feature-flags: (grid: true);
@import './src/globals/grid/grid';
@import '../grid';
`);
const output = result.css.toString();
const breakpoints = ['lg', 'xlg', 'max'];
Expand All @@ -123,9 +140,9 @@ $feature-flags: (grid: true);
});

it('should export a 16 column grid behind a flag', async () => {
const { result } = await renderSass(`
const { result } = await render(`
$feature-flags: (grid: true, grid-columns-16: true);
@import './src/globals/grid/grid';
@import '../grid';
`);
const output = result.css.toString();
const breakpoints = ['lg', 'xlg', 'max'];
Expand Down
42 changes: 0 additions & 42 deletions src/globals/scss/__tests__/__snapshots__/typography-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,39 +79,6 @@ Object {
}
`;

exports[`_typography.scss font-size mixin should output a font-size property if given a valid size 1`] = `
".test-76 {
font-size: 4.75rem; }
.test-54 {
font-size: 3.375rem; }
.test-36 {
font-size: 2.25rem; }
.test-28 {
font-size: 1.75rem; }
.test-20 {
font-size: 1.25rem; }
.test-18 {
font-size: 1.125rem; }
.test-16 {
font-size: 1rem; }
.test-14 {
font-size: 0.875rem; }
.test-12 {
font-size: 0.75rem; }
.test-11 {
font-size: 0.6875rem; }
"
`;

exports[`_typography.scss font-smoothing mixin should output font-smoothing properties 1`] = `
".test {
-webkit-font-smoothing: antialiased;
Expand All @@ -131,15 +98,6 @@ exports[`_typography.scss letter-spacing mixin should output letter-spacing prop
"
`;

exports[`_typography.scss line-height should output valid line-heights for specific elements, otherwise it should warn 1`] = `
".test-heading {
line-height: 1.25; }
.test-body {
line-height: 1.5; }
"
`;

exports[`_typography.scss typescale mixin should return a font-size value for a valid size 1`] = `
".test-giga {
font-size: 4.75rem; }
Expand Down
99 changes: 31 additions & 68 deletions src/globals/scss/__tests__/typography-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @jest-environment node
*/

const { convert, renderSass } = require('../../../../tools/jest/scss');
const { convert, createSassRenderer } = require('@carbon/test-utils/scss');

const variables = [
'font-family-mono',
Expand All @@ -19,20 +19,27 @@ const variables = [
'font-size-map',
];

const render = createSassRenderer(__dirname);
const renderClassic = content =>
render(`
$feature-flags: (components-x: false, breaking-changes-x: false);
${content}
`);

describe('_typography.scss', () => {
describe.each(variables)('$%s', name => {
it('should be exported', async () => {
const { calls } = await renderSass(`
@import './src/globals/scss/typography';
const { calls } = await renderClassic(`
@import '../typography';
$t: test(global-variable-exists(${name}));
`);
// Check that global-variable-exists returned true
expect(calls[0][0].getValue()).toBe(true);
});

it('should match export value', async () => {
const { calls } = await renderSass(`
@import './src/globals/scss/typography';
const { calls } = await renderClassic(`
@import '../typography';
$t: test($${name});
`);
expect(convert(calls[0][0])).toMatchSnapshot();
Expand All @@ -49,28 +56,30 @@ $t: test($${name});
}
`
);
const { result } = await renderSass(`
@import './src/globals/scss/typography';
const { result } = await renderClassic(`
@import '../typography';
${tests.join('\n')}
`);
expect(result.css.toString()).toMatchSnapshot();
});

it('should warn if given invalid size', async () => {
const { output } = await renderSass(`
@import './src/globals/scss/typography';
const { output } = await renderClassic(`
@import '../typography';
.test {
@include typescale('<unknown>');
}
`);
expect(output.warn).toHaveBeenCalledTimes(1);
// `output.warn` is called twice now since feature flags have diverged in
// v10
expect(output.warn).toHaveBeenCalledTimes(2);
});
});

describe('unit mixin', () => {
it('should output the appropriate unit derived from a pixel value', async () => {
const { calls } = await renderSass(`
@import './src/globals/scss/typography';
const { calls } = await renderClassic(`
@import '../typography';
$t: test(rem(16px));
$t: test(em(16px));
Expand All @@ -83,8 +92,8 @@ $t: test(em(16px));

describe('helvetica mixin', () => {
it('should output a font-family value', async () => {
const { result } = await renderSass(`
@import './src/globals/scss/typography';
const { result } = await renderClassic(`
@import '../typography';
.test {
@include helvetica();
}
Expand All @@ -96,8 +105,8 @@ $t: test(em(16px));

describe('font-family mixin', () => {
it('should output IBM Plex if css--plex is set to true', async () => {
const { result } = await renderSass(`
@import './src/globals/scss/typography';
const { result } = await renderClassic(`
@import '../typography';
$css--plex: true;
.test {
Expand All @@ -109,8 +118,8 @@ $css--plex: true;
});

it('should output IBM Helvetica if css--plex is set to false', async () => {
const { result } = await renderSass(`
@import './src/globals/scss/typography';
const { result } = await renderClassic(`
@import '../typography';
$css--plex: false;
.test {
Expand All @@ -122,32 +131,10 @@ $css--plex: false;
});
});

describe('line-height', () => {
it('should output valid line-heights for specific elements, otherwise it should warn', async () => {
const { output, result } = await renderSass(`
@import './src/globals/scss/typography';
.test-heading {
@include line-height('heading');
}
.test-body {
@include line-height('body');
}
.test-unknown {
@include line-height('<unknown>');
}
`);
expect(result.css.toString()).toMatchSnapshot();
expect(output.warn).toHaveBeenCalledTimes(1);
});
});

describe('font-smoothing mixin', () => {
it('should output font-smoothing properties', async () => {
const { result } = await renderSass(`
@import './src/globals/scss/typography';
const { result } = await renderClassic(`
@import '../typography';
.test {
@include font-smoothing();
Expand All @@ -159,8 +146,8 @@ $css--plex: false;

describe('letter-spacing mixin', () => {
it('should output letter-spacing properties', async () => {
const { result } = await renderSass(`
@import './src/globals/scss/typography';
const { result } = await renderClassic(`
@import '../typography';
.test {
@include letter-spacing();
Expand All @@ -169,28 +156,4 @@ $css--plex: false;
expect(result.css.toString()).toMatchSnapshot();
});
});

describe('font-size mixin', () => {
it('should output a font-size property if given a valid size', async () => {
const sizes = ['76', '54', '36', '28', '20', '18', '16', '14', '12', '11'];
const tests = sizes.map(
size => `
.test-${size} {
@include font-size('${size}');
}
`
);
const { output, result } = await renderSass(`
@import './src/globals/scss/typography';
${tests.join('\n')}
.test-unknown {
@include font-size('<unknown>');
}
`);

expect(result.css.toString()).toMatchSnapshot();
expect(output.warn).toHaveBeenCalledTimes(1);
});
});
});

0 comments on commit df29f85

Please sign in to comment.