chore(SCSS): created skeleton for testing SCSS (#1521)

ISSUES CLOSED: #952

.eslintrc.ci.js

@@ -14,5 +14,17 @@ module.exports = {
         ]
       }
     ]
-  }
+  },
+  'overrides': [
+    {
+      'files': [
+        '**/*.spec.ts',
+        '**/*.mock.ts',
+        '**/test-sass.js',
+      ],
+      'env': {
+        'jest': true,
+      },
+    },
+  ],
 }

.eslintrc.js

@@ -14,5 +14,17 @@ module.exports = {
         ]
       }
     ]
-  }
+  },
+  'overrides': [
+    {
+      'files': [
+        '**/*.spec.ts',
+        '**/*.mock.ts',
+        '**/test-sass.js',
+      ],
+      'env': {
+        'jest': true,
+      },
+    },
+  ],
 }

jest.config.js

@@ -1,44 +1,43 @@
 module.exports = {
-  "globals": {
-    "ts-jest": {
-      "tsConfigFile": "./terminus-ui/tsconfig.spec.json",
-      "ignoreCoverageForAllDecorators": true,
+  globals: {
+    'ts-jest': {
+      tsConfigFile: './terminus-ui/tsconfig.spec.json',
+      ignoreCoverageForAllDecorators: true,
     },
-    "__TRANSFORM_HTML__": true,
+    '__TRANSFORM_HTML__': true,
   },
-  "transform": {
-    "^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
-  },
-  "testMatch": [
-    "<rootDir>/**/?(*.)spec.ts?(x)",
+  transform: {'^.+\\.(ts|js|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js' },
+  testMatch: [
+    '<rootDir>/**/?(*.)spec.ts?(x)',
+    '<rootDir>/**/?(*.)test-sass.js?(x)',
   ],
-  "testPathIgnorePatterns": [
-    "<rootDir>/node_modules/",
-    "<rootDir>/demo/app",
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/demo/app',
   ],
-  "transformIgnorePatterns": [
-    "node_modules/(?!@ngrx)",
+  transformIgnorePatterns: [
+    'node_modules/(?!@ngrx)',
   ],
-  "reporters": ["default", [ "jest-junit", { output: "./coverage/junit/report.xml" } ]],
-  "clearMocks": true,
-  "collectCoverageFrom": [
-    "terminus-ui/**/!(index|public-api|*.module|*.interface|*.constant|*.mock|*.d).ts",
-    "!terminus-ui/**/testing/**"
+  reporters: ['default', ['jest-junit', { output: './coverage/junit/report.xml' }]],
+  clearMocks: true,
+  collectCoverageFrom: [
+    'terminus-ui/**/!(index|public-api|*.module|*.interface|*.constant|*.mock|*.d).ts',
+    '!terminus-ui/**/testing/**',
   ],
-  "moduleFileExtensions": [
-    "ts",
-    "js",
-    "html",
+  moduleFileExtensions: [
+    'ts',
+    'js',
+    'html',
   ],
-  "coverageDirectory": "<rootDir>/coverage/",
-  "setupFilesAfterEnv": [
-    "<rootDir>/tooling/jest-setup.ts",
+  coverageDirectory: '<rootDir>/coverage/',
+  setupFilesAfterEnv: [
+    '<rootDir>/tooling/jest-setup.ts',
   ],
-  "moduleNameMapper": {
-    "app/(.*)": "<rootDir>/demo/app/$1",
-    "assets/(.*)": "<rootDir>/demo/assets/$1",
-    "environments/(.*)": "<rootDir>/demo/environments/$1",
-    "^@terminus/ui(.*)$": "<rootDir>/terminus-ui$1/src/public-api.ts",
-    "^@terminus/ui(.*)/testing$": "<rootDir>/terminus-ui$1/testing/src/public-api.ts",
+  moduleNameMapper: {
+    'app/(.*)': '<rootDir>/demo/app/$1',
+    'assets/(.*)': '<rootDir>/demo/assets/$1',
+    'environments/(.*)': '<rootDir>/demo/environments/$1',
+    '^@terminus/ui(.*)$': '<rootDir>/terminus-ui$1/src/public-api.ts',
+    '^@terminus/ui(.*)/testing$': '<rootDir>/terminus-ui$1/testing/src/public-api.ts',
   },
 }

package.json

@@ -264,6 +264,7 @@
     "rxjs": "^6.3.3",
     "sass-lint": "^1.12.1",
     "sass-module-importer": "^1.4.0",
+    "sass-true": "^4.0.0",
     "scssfmt": "^1.0.6",
     "semantic-release": "^15.13.3",
     "source-map-explorer": "^1.6.0",

terminus-ui/scss/helpers/_a11y.spec.scss

@@ -0,0 +1,28 @@
+@import 'true';
+@import './a11y';
+
+@include describe ('a11y') {
+  @include test ('should correctly render cdk-a11y') {
+    @include assert {
+      @include output {
+        @include cdk-a11y();
+      }
+      @include expect {
+        .cdk-visually-hidden {
+          -webkit-appearance: none;
+          -moz-appearance: none;
+
+          border: 0;
+          clip: rect(0 0 0 0);
+          height: 1px;
+          margin: -1px;
+          outline: 0;
+          overflow: hidden;
+          padding: 0;
+          position: absolute;
+          width: 1px;
+        }
+      }
+    }
+  }
+}

terminus-ui/scss/helpers/_animation.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './animation';

terminus-ui/scss/helpers/_assets.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './assets';

terminus-ui/scss/helpers/_breakpoints.spec.scss

@@ -0,0 +1,16 @@
+@import 'true';
+@import './breakpoints';
+
+/* @include describe ('breakpoints') {
+  @include test ('should correctly render bp') {
+        @include assert {
+      @include output {
+        @include bp(layout-xs);
+      }
+      // is there a way to tests @media queries?
+      @include expect {
+
+      }
+    }
+  }
+} */

terminus-ui/scss/helpers/_buttons.spec.scss

@@ -0,0 +1,27 @@
+@import 'true';
+@import './buttons';
+
+@include describe ('button') {
+  @include test ('should correctly render button-base') {
+    @include assert {
+      @include output {
+        .button-test {
+          @include button-base();
+        }
+      }
+      @include expect {
+        .button-test {
+          background-color: transparent;
+          border: 0;
+          cursor: pointer;
+          outline: 0;
+          text-align: center;
+        }
+
+        .button-test:focus {
+          outline: 0;
+        }
+      }
+    }
+  }
+}

terminus-ui/scss/helpers/_card.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './card';

terminus-ui/scss/helpers/_color.spec.scss

@@ -0,0 +1,89 @@
+@import 'true';
+@import './color';
+
+@include describe ('color') {
+  @include test('should return the correct color based on palette and tone') {
+    $test: color(warn, dark);
+    $expect: #b55949;
+
+    @include assert-equal($test, $expect);
+  }
+
+  /*   @include test('should return the correct theme (this seems to fail due to class being added by true)') {
+    @include assert{
+      @include output {
+        @include theme-color(background-color);
+      }
+      @include expect {
+        ::ng-deep .u-theme--primary .test-output {
+          background-color: #00538a;
+          color: #fafafa;
+        }
+
+        ::ng-deep .u-theme--primary .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+
+        ::ng-deep .u-theme--accent .test-output {
+          background-color: #2f854d;
+          color: #fafafa;
+        }
+
+        ::ng-deep .u-theme--accent .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+
+        ::ng-deep .u-theme--error .test-output {
+          background-color: #c8604d;
+          color: #fafafa;
+        }
+
+        ::ng-deep .u-theme--error .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+
+        ::ng-deep .u-theme--warn .test-output {
+          background-color: #dea83b;
+          color: #fafafa;
+        }
+
+        ::ng-deep .u-theme--warn .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+
+        ::ng-deep .u-theme--highlight .test-output {
+          background-color: #efe557;
+          color: #302d35;
+        }
+
+        ::ng-deep .u-theme--highlight .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+
+        ::ng-deep .u-theme--pure .test-output {
+          background-color: #fafafa;
+        }
+
+        ::ng-deep .u-theme--pure .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+
+        ::ng-deep .u-theme--utility .test-output {
+          background-color: #999;
+          color: #fafafa;
+        }
+
+        ::ng-deep .u-theme--utility .test-output[disabled] {
+          background-color: #cecdd1;
+          color: #999;
+        }
+      }
+    }
+  } */
+}

terminus-ui/scss/helpers/_cursors.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './cursors';

terminus-ui/scss/helpers/_input-placeholder.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './input-placeholder';

terminus-ui/scss/helpers/_layout.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './layout';

terminus-ui/scss/helpers/_menu.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './menu';

terminus-ui/scss/helpers/_opposite-direction.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './opposite-direction';

terminus-ui/scss/helpers/_reset.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './reset';

terminus-ui/scss/helpers/_shadows.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './shadows';

terminus-ui/scss/helpers/_spacing.spec.scss

@@ -0,0 +1,56 @@
+@import 'true';
+@import './spacing';
+
+@include describe ('spacing') {
+  @include describe ('default') {
+    @include test('should return the correct default spacing') {
+      $test: spacing();
+      $expect: 16px;
+
+      @include assert-equal($test, $expect);
+    }
+  }
+
+  @include describe ('small') {
+    @include test('should return the correct small spacing') {
+      $test1: spacing(small);
+      $expect1: 12px;
+
+      $test2: spacing(small, 1);
+      $expect2: 8px;
+
+      $test3: spacing(small, 2);
+      $expect3: 4px;
+
+      @include assert-equal($test1, $expect1);
+      @include assert-equal($test2, $expect2);
+      @include assert-equal($test3, $expect3);
+    }
+  }
+
+  @include describe ('large') {
+    @include test('should return the correct large spacing') {
+      $test1: spacing(large);
+      $expect1: 24px;
+
+      $test2: spacing(large, 3);
+      $expect2: 48px;
+
+      $test3: spacing(large, 6);
+      $expect3: 96px;
+
+      @include assert-equal($test1, $expect1);
+      @include assert-equal($test2, $expect2);
+      @include assert-equal($test3, $expect3);
+    }
+  }
+
+  @include describe('failures') {
+    @include test('should fail with mismatched values') {
+      $test: spacing(large, 2);
+      $expect: 24px;
+
+      @include assert-unequal($test, $expect);
+    }
+  }
+}

terminus-ui/scss/helpers/_theme.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './theme';

terminus-ui/scss/helpers/_triangle.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './triangle';

terminus-ui/scss/helpers/_typography.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './typography';

terminus-ui/scss/helpers/_z-index.spec.scss

@@ -0,0 +1,2 @@
+@import 'true';
+@import './z-index';

terminus-ui/scss/helpers/test-sass.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const sassTrue = require('sass-true');
+const glob = require('glob');
+
+describe('Sass', () => {
+  const sassTestFiles = glob.sync(
+    path.resolve(process.cwd(), 'terminus-ui/**/*.spec.scss')
+  )
+
+  sassTestFiles.forEach(file => sassTrue.runSass({ file }, describe, test))
+})