From 4706f05b8497348e05573584cba79cd9e12e9962 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Thu, 21 Mar 2019 10:39:12 -0700
Subject: [PATCH] test(feature-targeting): verify that Sass compiles when
 requesting all features (#4528)

---
 test/scss/_feature-targeting-test.scss       | 128 +++++++++++++++++++
 test/scss/feature-targeting-select-all.scss  |   3 +
 test/scss/feature-targeting-select-none.scss |   3 +
 test/scss/feature-targeting.scss             | 127 ------------------
 test/scss/verify-feature-targeting.js        |   9 +-
 5 files changed, 142 insertions(+), 128 deletions(-)
 create mode 100644 test/scss/_feature-targeting-test.scss
 create mode 100644 test/scss/feature-targeting-select-all.scss
 create mode 100644 test/scss/feature-targeting-select-none.scss
 delete mode 100644 test/scss/feature-targeting.scss

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
new file mode 100644
index 00000000000..8f1479c7b40
--- /dev/null
+++ b/test/scss/_feature-targeting-test.scss
@@ -0,0 +1,128 @@
+@import "@material/button/mixins";
+@import "@material/card/mixins";
+@import "@material/checkbox/mixins";
+@import "@material/elevation/mixins";
+@import "@material/form-field/mixins";
+@import "@material/list/mixins";
+@import "@material/menu-surface/mixins";
+@import "@material/menu/mixins";
+@import "@material/radio/mixins";
+@import "@material/ripple/mixins";
+@import "@material/shape/mixins";
+@import "@material/switch/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+
+@mixin mdc-feature-targeting-test($query) {
+  .mdc-test {
+    // Button
+    @include mdc-button-core-styles($query: $query);
+    @include mdc-button-filled-accessible(red, $query: $query);
+    @include mdc-button-container-fill-color(red, $query: $query);
+    @include mdc-button-outline-color(red, $query: $query);
+    @include mdc-button-icon-color(red, $query: $query);
+    @include mdc-button-ink-color(red, $query: $query);
+    @include mdc-button-shape-radius(0, $query: $query);
+    @include mdc-button-horizontal-padding(0, $query: $query);
+    @include mdc-button-outline-width(0, $query: $query);
+    @include mdc-button-ripple($query: $query);
+    @include mdc-button-without-ripple($query: $query);
+
+    // Card
+    @include mdc-card-core-styles($query: $query);
+    @include mdc-card-fill-color(red, $query: $query);
+    @include mdc-card-outline(red, $query: $query);
+    @include mdc-card-shape-radius(0, $query: $query);
+    @include mdc-card-media-aspect-ratio(1, 1, $query: $query);
+    @include mdc-card-ripple($query: $query);
+    @include mdc-card-without-ripple($query: $query);
+
+    // Checkbox
+    @include mdc-checkbox-core-styles($query: $query);
+    @include mdc-checkbox-container-colors($query: $query);
+    @include mdc-checkbox-ink-color(red, $query: $query);
+    @include mdc-checkbox-focus-indicator-color(red, $query: $query);
+    @include mdc-checkbox-ripple($query: $query);
+    @include mdc-checkbox-without-ripple($query: $query);
+
+    // Elevation
+    @include mdc-elevation-core-styles($query: $query);
+    @include mdc-elevation(0, $query: $query);
+
+    // Form Field
+    @include mdc-form-field-core-styles($query: $query);
+
+    // List
+    @include mdc-list-core-styles($query: $query);
+    @include mdc-list-item-primary-text-ink-color(red, $query: $query);
+    @include mdc-list-item-secondary-text-ink-color(red, $query: $query);
+    @include mdc-list-item-graphic-fill-color(red, $query: $query);
+    @include mdc-list-item-graphic-ink-color(red, $query: $query);
+    @include mdc-list-item-meta-ink-color(red, $query: $query);
+    @include mdc-list-item-shape-radius(42, $rtl-reflexive: false, $query: $query);
+    @include mdc-list-divider-color(red, $query: $query);
+    @include mdc-list-group-subheader-ink-color(red, $query: $query);
+    @include mdc-list-ripple($query: $query);
+    @include mdc-list-without-ripple($query: $query);
+
+    // Menu
+    @include mdc-menu-core-styles($query: $query);
+    @include mdc-menu-width(0, $query: $query);
+
+    // Menu Surface
+    @include mdc-menu-surface-core-styles($query: $query);
+    @include mdc-menu-surface-fill-color(surface, $query: $query);
+    @include mdc-menu-surface-ink-color(on-surface, $query: $query);
+    @include mdc-menu-surface-shape-radius(medium, $query: $query);
+
+    // Radio
+    @include mdc-radio-core-styles($query: $query);
+    @include mdc-radio-unchecked-stroke-color(red, $query: $query);
+    @include mdc-radio-checked-stroke-color(red, $query: $query);
+    @include mdc-radio-ink-color(red, $query: $query);
+    @include mdc-radio-focus-indicator-color(red, $query: $query);
+    @include mdc-radio-ripple($query: $query);
+    @include mdc-radio-without-ripple($query: $query);
+
+    // Ripple
+    @include mdc-ripple-core-styles($query: $query);
+    @include mdc-ripple-common($query: $query);
+    @include mdc-ripple-surface($query: $query);
+    @include mdc-states-base-color(red, $query: $query);
+    @include mdc-states-hover-opacity(1, $query: $query);
+    @include mdc-states-focus-opacity(1, $query: $query);
+    @include mdc-states-press-opacity(1, $query: $query);
+    @include mdc-states($query: $query);
+    @include mdc-states-activated(red, $query: $query);
+    @include mdc-states-selected(red, $query: $query);
+    @include mdc-ripple-radius-bounded($query: $query);
+    @include mdc-ripple-radius-unbounded($query: $query);
+
+    // Shape
+    @include mdc-shape-radius(1px 2px, true, $query: $query);
+
+    // Switch
+    @include mdc-switch-core-styles($query: $query);
+    @include mdc-switch-toggled-on-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-off-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-on-ripple-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-off-ripple-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-on-track-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-on-thumb-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-off-track-color(on-surface, $query: $query);
+    @include mdc-switch-toggled-off-thumb-color(on-surface, $query: $query);
+    @include mdc-switch-ripple($query: $query);
+    @include mdc-switch-without-ripple($query: $query);
+
+    // Theme
+    @include mdc-theme-core-styles($query: $query);
+
+    // Typography
+    @include mdc-typography-core-styles($query: $query);
+    @include mdc-typography-base($query: $query);
+    @include mdc-typography(button, $query: $query);
+    @include mdc-typography-overflow-ellipsis($query: $query);
+    @include mdc-typography-baseline-top(0, $query: $query);
+    @include mdc-typography-baseline-bottom(0, $query: $query);
+  }
+}
diff --git a/test/scss/feature-targeting-select-all.scss b/test/scss/feature-targeting-select-all.scss
new file mode 100644
index 00000000000..c07709c5614
--- /dev/null
+++ b/test/scss/feature-targeting-select-all.scss
@@ -0,0 +1,3 @@
+@import "@material/feature-targeting/functions";
+@import "./feature-targeting-test";
+@include mdc-feature-targeting-test(mdc-feature-all());
diff --git a/test/scss/feature-targeting-select-none.scss b/test/scss/feature-targeting-select-none.scss
new file mode 100644
index 00000000000..d63c87ea986
--- /dev/null
+++ b/test/scss/feature-targeting-select-none.scss
@@ -0,0 +1,3 @@
+@import "@material/feature-targeting/functions";
+@import "./feature-targeting-test";
+@include mdc-feature-targeting-test(mdc-feature-any());
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
deleted file mode 100644
index eace7af2233..00000000000
--- a/test/scss/feature-targeting.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@import "@material/button/mixins";
-@import "@material/card/mixins";
-@import "@material/checkbox/mixins";
-@import "@material/elevation/mixins";
-@import "@material/feature-targeting/functions";
-@import "@material/form-field/mixins";
-@import "@material/list/mixins";
-@import "@material/menu-surface/mixins";
-@import "@material/menu/mixins";
-@import "@material/radio/mixins";
-@import "@material/ripple/mixins";
-@import "@material/shape/mixins";
-@import "@material/switch/mixins";
-@import "@material/theme/mixins";
-@import "@material/typography/mixins";
-
-.mdc-test {
-  // Button
-  @include mdc-button-core-styles($query: mdc-feature-any());
-  @include mdc-button-filled-accessible(red, $query: mdc-feature-any());
-  @include mdc-button-container-fill-color(red, $query: mdc-feature-any());
-  @include mdc-button-outline-color(red, $query: mdc-feature-any());
-  @include mdc-button-icon-color(red, $query: mdc-feature-any());
-  @include mdc-button-ink-color(red, $query: mdc-feature-any());
-  @include mdc-button-shape-radius(0, $query: mdc-feature-any());
-  @include mdc-button-horizontal-padding(0, $query: mdc-feature-any());
-  @include mdc-button-outline-width(0, $query: mdc-feature-any());
-  @include mdc-button-ripple($query: mdc-feature-any());
-  @include mdc-button-without-ripple($query: mdc-feature-any());
-
-  // Card
-  @include mdc-card-core-styles($query: mdc-feature-any());
-  @include mdc-card-fill-color(red, $query: mdc-feature-any());
-  @include mdc-card-outline(red, $query: mdc-feature-any());
-  @include mdc-card-shape-radius(0, $query: mdc-feature-any());
-  @include mdc-card-media-aspect-ratio(1, 1, $query: mdc-feature-any());
-  @include mdc-card-ripple($query: mdc-feature-any());
-  @include mdc-card-without-ripple($query: mdc-feature-any());
-
-  // Checkbox
-  @include mdc-checkbox-core-styles($query: mdc-feature-any());
-  @include mdc-checkbox-container-colors($query: mdc-feature-any());
-  @include mdc-checkbox-ink-color(red, $query: mdc-feature-any());
-  @include mdc-checkbox-focus-indicator-color(red, $query: mdc-feature-any());
-  @include mdc-checkbox-ripple($query: mdc-feature-any());
-  @include mdc-checkbox-without-ripple($query: mdc-feature-any());
-
-  // Elevation
-  @include mdc-elevation-core-styles($query: mdc-feature-any());
-  @include mdc-elevation(0, $query: mdc-feature-any());
-
-  // Form Field
-  @include mdc-form-field-core-styles($query: mdc-feature-any());
-
-  // List
-  @include mdc-list-core-styles($query: mdc-feature-any());
-  @include mdc-list-item-primary-text-ink-color(red, $query: mdc-feature-any());
-  @include mdc-list-item-secondary-text-ink-color(red, $query: mdc-feature-any());
-  @include mdc-list-item-graphic-fill-color(red, $query: mdc-feature-any());
-  @include mdc-list-item-graphic-ink-color(red, $query: mdc-feature-any());
-  @include mdc-list-item-meta-ink-color(red, $query: mdc-feature-any());
-  @include mdc-list-item-shape-radius(42, $rtl-reflexive: false, $query: mdc-feature-any());
-  @include mdc-list-divider-color(red, $query: mdc-feature-any());
-  @include mdc-list-group-subheader-ink-color(red, $query: mdc-feature-any());
-  @include mdc-list-ripple($query: mdc-feature-any());
-  @include mdc-list-without-ripple($query: mdc-feature-any());
-
-  // Menu
-  @include mdc-menu-core-styles($query: mdc-feature-any());
-  @include mdc-menu-width(0, $query: mdc-feature-any());
-
-  // Menu Surface
-  @include mdc-menu-surface-core-styles($query: mdc-feature-any());
-  @include mdc-menu-surface-fill-color(surface, $query: mdc-feature-any());
-  @include mdc-menu-surface-ink-color(on-surface, $query: mdc-feature-any());
-  @include mdc-menu-surface-shape-radius(medium, $query: mdc-feature-any());
-
-  // Radio
-  @include mdc-radio-core-styles($query: mdc-feature-any());
-  @include mdc-radio-unchecked-stroke-color(red, $query: mdc-feature-any());
-  @include mdc-radio-checked-stroke-color(red, $query: mdc-feature-any());
-  @include mdc-radio-ink-color(red, $query: mdc-feature-any());
-  @include mdc-radio-focus-indicator-color(red, $query: mdc-feature-any());
-  @include mdc-radio-ripple($query: mdc-feature-any());
-  @include mdc-radio-without-ripple($query: mdc-feature-any());
-
-  // Ripple
-  @include mdc-ripple-core-styles($query: mdc-feature-any());
-  @include mdc-ripple-common($query: mdc-feature-any());
-  @include mdc-ripple-surface($query: mdc-feature-any());
-  @include mdc-states-base-color(red, $query: mdc-feature-any());
-  @include mdc-states-hover-opacity(1, $query: mdc-feature-any());
-  @include mdc-states-focus-opacity(1, $query: mdc-feature-any());
-  @include mdc-states-press-opacity(1, $query: mdc-feature-any());
-  @include mdc-states($query: mdc-feature-any());
-  @include mdc-states-activated(red, $query: mdc-feature-any());
-  @include mdc-states-selected(red, $query: mdc-feature-any());
-  @include mdc-ripple-radius-bounded($query: mdc-feature-any());
-  @include mdc-ripple-radius-unbounded($query: mdc-feature-any());
-
-  // Shape
-  @include mdc-shape-radius(1px 2px, true, $query: mdc-feature-any());
-
-  // Switch
-  @include mdc-switch-core-styles($query: mdc-feature-any());
-  @include mdc-switch-toggled-on-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-off-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-on-ripple-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-off-ripple-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-on-track-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-on-thumb-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-off-track-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-toggled-off-thumb-color(on-surface, $query: mdc-feature-any());
-  @include mdc-switch-ripple($query: mdc-feature-any());
-  @include mdc-switch-without-ripple($query: mdc-feature-any());
-
-  // Theme
-  @include mdc-theme-core-styles($query: mdc-feature-any());
-
-  // Typography
-  @include mdc-typography-core-styles($query: mdc-feature-any());
-  @include mdc-typography-base($query: mdc-feature-any());
-  @include mdc-typography(button, $query: mdc-feature-any());
-  @include mdc-typography-overflow-ellipsis($query: mdc-feature-any());
-  @include mdc-typography-baseline-top(0, $query: mdc-feature-any());
-  @include mdc-typography-baseline-bottom(0, $query: mdc-feature-any());
-}
diff --git a/test/scss/verify-feature-targeting.js b/test/scss/verify-feature-targeting.js
index 96fc09efc87..5bdf3d8f62c 100644
--- a/test/scss/verify-feature-targeting.js
+++ b/test/scss/verify-feature-targeting.js
@@ -29,8 +29,15 @@ function materialImporter(url) {
   return {file: url};
 }
 
+// Verify that the Sass compiles when we ask for all features.
+sass.renderSync({
+  file: path.join(__dirname, 'feature-targeting-select-all.scss'),
+  importer: materialImporter,
+});
+
+// Verify that the Sass produces no CSS when we ask for no features.
 const result = sass.renderSync({
-  file: path.join(__dirname, 'feature-targeting.scss'),
+  file: path.join(__dirname, 'feature-targeting-select-none.scss'),
   importer: materialImporter,
 });
 const css = result.css.toString('utf8').trim();