Skip to content

Commit

Permalink
test(Styles): add styles public api tests (#9231)
Browse files Browse the repository at this point in the history
* test(Styles): add styles public api tests

* test(Tag): add tag to test

* test(styles): add snapshots, plex test

* test(styles): add font-face to tests

* test(snapshot): update snapshots

* test(Popover): add popover to tests

* test(snapshot): update snapshots
  • Loading branch information
tw15egan authored Aug 3, 2021
1 parent cc00f4d commit e31d293
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 29 deletions.
79 changes: 79 additions & 0 deletions packages/styles/__tests__/__snapshots__/styles-test.js.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Snapshot Tests should match snapshots 1`] = `
Array [
"scss/breakpoint",
"scss/colors",
"scss/config",
"scss/feature-flags",
"scss/font-face",
"scss/grid",
"scss/motion",
"scss/reset",
"scss/spacing",
"scss/theme",
"scss/themes",
"scss/type",
"scss/utilities/box-shadow",
"scss/utilities/button-reset",
"scss/utilities/component-reset",
"scss/utilities/component-tokens",
"scss/utilities/convert",
"scss/utilities/custom-property",
"scss/utilities/focus-outline",
"scss/utilities/high-contrast-mode",
"scss/utilities/keyframes",
"scss/utilities/layer-set",
"scss/utilities/placeholder-colors",
"scss/utilities/rotate",
"scss/utilities/skeleton",
"scss/utilities/text-overflow",
"scss/utilities/tooltip",
"scss/utilities/visually-hidden",
"scss/utilities/z-index",
"scss/components",
"scss/components/accordion",
"scss/components/breadcrumb",
"scss/components/button",
"scss/components/checkbox",
"scss/components/code-snippet",
"scss/components/combo-box",
"scss/components/content-switcher",
"scss/components/copy-button",
"scss/components/data-table",
"scss/components/date-picker",
"scss/components/dropdown",
"scss/components/file-uploader",
"scss/components/form",
"scss/components/inline-loading",
"scss/components/link",
"scss/components/list",
"scss/components/list-box",
"scss/components/loading",
"scss/components/menu",
"scss/components/modal",
"scss/components/multiselect",
"scss/components/notification",
"scss/components/number-input",
"scss/components/overflow-menu",
"scss/components/pagination",
"scss/components/pagination-nav",
"scss/components/popover",
"scss/components/progress-indicator",
"scss/components/radio-button",
"scss/components/search",
"scss/components/select",
"scss/components/slider",
"scss/components/structured-list",
"scss/components/tabs",
"scss/components/tag",
"scss/components/text-area",
"scss/components/text-input",
"scss/components/tile",
"scss/components/time-picker",
"scss/components/toggle",
"scss/components/tooltip",
"scss/components/treeview",
"scss/components/ui-shell",
]
`;
114 changes: 109 additions & 5 deletions packages/styles/__tests__/styles-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,114 @@ const { SassRenderer } = require('@carbon/test-utils/scss');

const { render } = SassRenderer.create(__dirname);

describe('@carbon/styles', () => {
test('Public API', async () => {
await expect(
render(`@use '../index.scss' as styles;`)
).resolves.toBeDefined();
const filepaths = [
'scss/breakpoint',
'scss/colors',
'scss/config',
'scss/feature-flags',
'scss/font-face',
'scss/grid',
'scss/motion',
'scss/reset',
'scss/spacing',
'scss/theme',
'scss/themes',
'scss/type',
'scss/utilities/box-shadow',
'scss/utilities/button-reset',
'scss/utilities/component-reset',
'scss/utilities/component-tokens',
'scss/utilities/convert',
'scss/utilities/custom-property',
'scss/utilities/focus-outline',
'scss/utilities/high-contrast-mode',
'scss/utilities/keyframes',
'scss/utilities/layer-set',
'scss/utilities/placeholder-colors',
'scss/utilities/rotate',
'scss/utilities/skeleton',
'scss/utilities/text-overflow',
'scss/utilities/tooltip',
'scss/utilities/visually-hidden',
'scss/utilities/z-index',
'scss/components',
'scss/components/accordion',
'scss/components/breadcrumb',
'scss/components/button',
'scss/components/checkbox',
'scss/components/code-snippet',
'scss/components/combo-box',
'scss/components/content-switcher',
'scss/components/copy-button',
'scss/components/data-table',
'scss/components/date-picker',
'scss/components/dropdown',
'scss/components/file-uploader',
'scss/components/form',
'scss/components/inline-loading',
'scss/components/link',
'scss/components/list',
'scss/components/list-box',
'scss/components/loading',
'scss/components/menu',
'scss/components/modal',
'scss/components/multiselect',
'scss/components/notification',
'scss/components/number-input',
'scss/components/overflow-menu',
'scss/components/pagination',
'scss/components/pagination-nav',
'scss/components/popover',
'scss/components/progress-indicator',
'scss/components/radio-button',
'scss/components/search',
'scss/components/select',
'scss/components/slider',
'scss/components/structured-list',
'scss/components/tabs',
'scss/components/tag',
'scss/components/text-area',
'scss/components/text-input',
'scss/components/tile',
'scss/components/time-picker',
'scss/components/toggle',
'scss/components/tooltip',
'scss/components/treeview',
'scss/components/ui-shell',
];
describe.each(filepaths)('%s', (filepath) => {
it('should be importable', async () => {
await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined();
});
});

describe('Snapshot Tests', () => {
it('should match snapshots', async () => {
expect(filepaths).toMatchSnapshot();
});
});

describe('@carbon/styles/scss/config', () => {
test('Config overrides', async () => {
const { get } = await render(`
@use 'sass:meta';
@use '../scss/config' with (
$prefix: 'custom-prefix',
$css--font-face: false,
$css--plex-arabic: true,
);
$_: get('config', (
prefix: config.$prefix,
css--font-face: config.$css--font-face,
css--plex-arabic: config.$css--plex-arabic,
));
`);

expect(get('config').value).toEqual({
prefix: 'custom-prefix',
['css--font-face']: false,
['css--plex-arabic']: true,
});
});
});
50 changes: 26 additions & 24 deletions packages/styles/scss/components/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,50 @@
//

@use 'accordion';
@use 'button';
@use 'breadcrumb';
@use 'button';
@use 'checkbox';
@use 'code-snippet';
@use 'combo-box';
@use 'content-switcher';
@use 'copy-button';
@use 'data-table';
@use 'data-table/action';
@use 'data-table/expandable';
@use 'data-table/skeleton';
@use 'data-table/sort';
@use 'date-picker';
@use 'dropdown';
@use 'file-uploader';
@use 'form';
@use 'inline-loading';
@use 'link';
@use 'list';
@use 'list-box';
@use 'loading';
@use 'menu';
@use 'tooltip';
@use 'radio-button';
@use 'modal';
@use 'multiselect';
@use 'notification';
@use 'number-input';
@use 'overflow-menu';
@use 'pagination';
@use 'pagination-nav';
@use 'popover';
@use 'progress-bar';
@use 'progress-indicator';
@use 'radio-button';
@use 'search';
@use 'data-table';
@use 'data-table/action';
@use 'data-table/expandable';
@use 'data-table/skeleton';
@use 'data-table/sort';
@use 'select';
@use 'slider';
@use 'structured-list';
@use 'tabs';
@use 'tag';
@use "slider";
@use 'text-area';
@use 'text-input';
@use 'structured-list';
@use 'overflow-menu';
@use 'number-input';
@use 'popover';
@use 'tile';
@use 'time-picker';
@use 'treeview';
@use 'toggle';
@use 'pagination';
@use 'pagination-nav';
@use 'select';
@use 'progress-bar';
@use 'progress-indicator';
@use 'tabs';
@use 'tooltip';
@use 'treeview';
@use 'ui-shell';
@use 'list-box';
@use 'combo-box';
@use 'dropdown';
@use 'multiselect';

0 comments on commit e31d293

Please sign in to comment.