From e31d29379a740dc6132bfce1f250d62015974098 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 3 Aug 2021 10:43:17 -0400
Subject: [PATCH] test(Styles): add styles public api tests (#9231)

* 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
---
 .../__snapshots__/styles-test.js.snap         |  79 ++++++++++++
 packages/styles/__tests__/styles-test.js      | 114 +++++++++++++++++-
 packages/styles/scss/components/_index.scss   |  50 ++++----
 3 files changed, 214 insertions(+), 29 deletions(-)
 create mode 100644 packages/styles/__tests__/__snapshots__/styles-test.js.snap

diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
new file mode 100644
index 000000000000..e68a84901dd0
--- /dev/null
+++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -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",
+]
+`;
diff --git a/packages/styles/__tests__/styles-test.js b/packages/styles/__tests__/styles-test.js
index 3366303ba2fe..02d5a5a95021 100644
--- a/packages/styles/__tests__/styles-test.js
+++ b/packages/styles/__tests__/styles-test.js
@@ -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,
+    });
   });
 });
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 8c808c2b6a57..8e3e319175ff 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -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';