Merge branch 'master' into loading-x-tokens

src/globals/grid/__tests__/grid-test.js

@@ -8,12 +8,38 @@
  */
 
 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}
+`);
+
+const isClassic = async () => {
+  const { calls } = await renderClassic(`
+@import '../../scss/functions';
+$t: test(feature-flag-enabled('breaking-changes-x'));
+`);
+  return !convert(calls[0][0]);
+};
 
 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,
@@ -60,10 +86,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();
 `);
@@ -72,8 +96,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));
@@ -89,7 +113,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((await isClassic()) ? 1 : 2);
 
     // This should fail because `breakpoint('unknown')` does not return a
     // value
@@ -98,17 +123,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'];
@@ -123,9 +148,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'];

src/globals/scss/__tests__/__snapshots__/typography-test.js.snap

@@ -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;
@@ -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; }

src/globals/scss/__tests__/css--font-face-test.js

@@ -7,11 +7,19 @@
  * @jest-environment node
  */
 
-const { renderSass } = require('../../../../tools/jest/scss');
+const { createSassRenderer } = require('@carbon/test-utils/scss');
+
+const render = createSassRenderer(__dirname);
+const renderClassic = content =>
+  render(`
+$feature-flags: (components-x: false, breaking-changes-x: false);
+${content}
+`);
 
 describe('_css--font-face.scss', () => {
   it('should not output CSS if $css--font-face is false', async () => {
-    const { result } = await renderSass(`
+    const { result } = await renderClassic(`
+$css--reset: false;
 $css--font-face: false;
 @import './src/globals/scss/css--font-face';
 `);
@@ -22,7 +30,8 @@ $css--font-face: false;
   });
 
   it('should output helvetica if $css--font-face is true and $css--plex is false', async () => {
-    const { result } = await renderSass(`
+    const { result } = await renderClassic(`
+$css--reset: false;
 $css--font-face: true;
 $css--plex: false;
 @import './src/globals/scss/css--font-face';
@@ -33,7 +42,8 @@ $css--plex: false;
   });
 
   it('should output plex if $css--font-face and $css--plex are true', async () => {
-    const { result } = await renderSass(`
+    const { result } = await renderClassic(`
+$css--reset: false;
 $css--font-face: true;
 $css--plex: true;
 @import './src/globals/scss/css--font-face';
@@ -45,7 +55,8 @@ $css--plex: true;
 
   describe('experimental', () => {
     it('should output @font-face blocks from elements if components-x flag is enabled', async () => {
-      const { result } = await renderSass(`
+      const { result } = await render(`
+$css--reset: false;
 $css--font-face: true;
 $css--plex: true;
 $feature-flags: (components-x: true);

src/globals/scss/__tests__/css--plex-core-test.js

@@ -7,14 +7,29 @@
  * @jest-environment node
  */
 
-const { convert, renderSass } = require('../../../../tools/jest/scss');
+const { convert, createSassRenderer } = require('@carbon/test-utils/scss');
 
 const variables = ['font-path', 'unicodes', 'families', 'fallbacks', 'weights'];
+const render = createSassRenderer(__dirname);
+const renderClassic = content =>
+  render(`
+$css--reset: false;
+$feature-flags: (components-x: false, breaking-changes-x: false);
+${content}
+`);
+
+const isClassic = async () => {
+  const { calls } = await renderClassic(`
+@import '../../scss/functions';
+$t: test(feature-flag-enabled('breaking-changes-x'));
+`);
+  return !convert(calls[0][0]);
+};
 
 describe('_css--plex-core', () => {
   it.each(variables)('should export the variable $%s', async name => {
-    const { calls } = await renderSass(`
-@import './src/globals/scss/css--plex-core';
+    const { calls } = await renderClassic(`
+@import '../css--plex-core';
 
 $c: test(global-variable-exists(${name}));
 $value: test($${name});
@@ -26,33 +41,36 @@ $value: test($${name});
 
   describe('check-default-font-path', () => {
     it('should warn if the default $font-path uses unpkg', async () => {
-      const { output } = await renderSass(`
-@import './src/globals/scss/css--plex-core';
+      const { output } = await renderClassic(`
+@import '../css--plex-core';
 
 @include check-default-font-path() {
   $test: true;
 };
 `);
-      expect(output.warn).toHaveBeenCalledTimes(1);
+
+      // This should be called twice now that feature flags have diverged in v10
+      expect(output.warn).toHaveBeenCalledTimes((await isClassic()) ? 1 : 2);
     });
 
     it('should not warn if $font-path is set and does not contain unpkg', async () => {
-      const { output } = await renderSass(`
+      const { output } = await renderClassic(`
 $font-path: 'https://my-custom-cdn.com';
-@import './src/globals/scss/css--plex-core';
+@import '../css--plex-core';
 
 @include check-default-font-path() {
   $test: true;
 };
 `);
-      expect(output.warn).not.toHaveBeenCalled();
+      // In v10, one call comes from feature flag divergence
+      expect(output.warn).toHaveBeenCalledTimes((await isClassic()) ? 0 : 1);
     });
   });
 
   describe('plex-font-face', () => {
     it('should output @font-face files based on families, weights, and unicodes', async () => {
-      const { result } = await renderSass(`
-@import './src/globals/scss/css--plex-core';
+      const { result } = await renderClassic(`
+@import '../css--plex-core';
 
 @include plex-font-face();
 `);