Convert validation tests to jest (#1748)

* Convert validation tests to jest

* Rename acceptance files

* Fix duplicate lockfile dependencies

* Fix linters and update script

* Fix test errors except for thinking helper files are tests

* Stricter Jest test matching pattern

* Update CSS tests to return promise

* Fix HTML test promises

* Use babel-plugin-transform-globals for html-inspector

* Fix test filename

* Implement mock createRange in test

* Clean up unused code

* Remove commented code

* Fix karma tests by adding back webpack import loader

* Fix tests

.eslintrc.json

@@ -67,7 +67,10 @@
         "node": true,
         "jest": true
       },
-      "files": ["**/{__factories__,__mocks__,__tests__}/*.js{,x}"],
+      "files": [
+        "**/{__factories__,__mocks__,__tests__}/**/*.js{,x}",
+        "jest-setup.js"
+      ],
       "rules": {
         "jest/no-alias-methods": "warn",
         "jest/no-disabled-tests": "warn",

__mocks__/html-inspector/index.js

@@ -0,0 +1,2 @@
+jest.requireActual('html-inspector/html-inspector');
+export default window.HTMLInspector;

__mocks__/html-inspector/window.js

@@ -0,0 +1 @@
+export default {};

__mocks__/i18next.js

@@ -0,0 +1,6 @@
+export function t(key) {
+  if (key === 'utility.or') {
+    return ' or ';
+  }
+  return '';
+}

babel.config.js

@@ -39,5 +39,18 @@ module.exports = api => {
     ],
     plugins,
     compact: false,
+    overrides: isJest
+      ? [
+          {
+            test: './node_modules/html-inspector/html-inspector.js',
+            plugins: [
+              [
+                'transform-globals',
+                {import: {'html-inspector/window': {window: 'default'}}},
+              ],
+            ],
+          },
+        ]
+      : [],
   };
 };

config/lintignore

@@ -3,5 +3,6 @@
 /dist
 /node_modules
 /nodeenv
-/test/data
+/src/validations/__tests__/acceptance.json
+/src/validations/__tests__/acceptance
 /templates

jest-setup.js

@@ -0,0 +1,43 @@
+function createRange() {
+  // createRange is always called with a Document context
+  /* eslint-disable no-invalid-this, consistent-this */
+  const context = this;
+  let end;
+  return {
+    setEndBefore(el) {
+      end = el;
+    },
+
+    // Finds all text nodes up to the target node, and returns them
+    // This is used to count newlines for the error reporting
+    toString() {
+      let hasFoundNode = false;
+      const newLines = [];
+      const iterator = context.createNodeIterator(
+        context.documentElement,
+        NodeFilter.SHOW_ALL,
+        {
+          acceptNode(node) {
+            if (hasFoundNode) {
+              return NodeFilter.FILTER_REJECT;
+            }
+            if (node.isEqualNode(end)) {
+              hasFoundNode = true;
+            }
+            if (node.nodeType === Node.TEXT_NODE) {
+              newLines.push(node.textContent);
+            }
+            return NodeFilter.FILTER_ACCEPT;
+          },
+        },
+      );
+      const nodes = [];
+      let node;
+      while ((node = iterator.nextNode())) {
+        nodes.push(node);
+      }
+      return newLines.join('');
+    },
+  };
+}
+global.Document.prototype.createRange = createRange;

jest.config.js

@@ -9,8 +9,10 @@ module.exports = {
   moduleNameMapper: {
     '@factories/(.*)$': '<rootDir>/__factories__/$1',
     '\\.(html|svg)': '<rootDir>/__mocks__/fileMock.js',
+    i18next: '<rootDir>/__mocks__/i18next.js',
   },
+  testMatch: ['**/__tests__/**/*.test.js?(x)'],
   testPathIgnorePatterns: ['/node_modules/', '/bower_components/', '/nodeenv/'],
   transformIgnorePatterns: ['node_modules/(?!(lodash-es)/)'],
-  setupFilesAfterEnv: ['jest-extended'],
+  setupFilesAfterEnv: ['jest-extended', './jest-setup.js'],
 };

script/update-validation-acceptance

@@ -3,23 +3,24 @@
 /* eslint-env node */
 
 const fs = require('fs');
+
 const path = require('path');
 
 const output = {};
 
-['html', 'css', 'javascript'].forEach((language) => {
-  const dir = `./test/data/acceptance/${language}`;
+['html', 'css', 'javascript'].forEach(language => {
+  const dir = `./src/validations/__tests__/acceptance/${language}`;
 
   output[language] = [];
 
-  fs.readdirSync(dir).forEach((file) => {
+  fs.readdirSync(dir).forEach(file => {
     output[language].push(
       fs.readFileSync(path.join(dir, file), {encoding: 'utf8'}),
     );
   });
 });
 
 fs.writeFile(
-  './test/data/acceptance.json',
+  './src/validations/__tests__/acceptance.json',
   JSON.stringify(output, null, 2),
 );

src/validations/__tests__/css.test.js

@@ -0,0 +1,160 @@
+import css from '../css';
+
+import testValidatorAcceptance from './testValidatorAcceptance';
+import validationTest from './validationHelper';
+
+describe('css validation', () => {
+  test('valid flexbox', () =>
+    validationTest(
+      `.flex-container {
+      display: flex;
+      flex-flow: nowrap column;
+      align-content: flex-end;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .flex-item {
+      flex: 1 0 auto;
+      align-self: flex-end;
+      order: 2;
+    }`,
+      css,
+    ));
+
+  test('valid filter', () =>
+    validationTest(
+      `img {
+      filter: grayscale(100%);
+    }`,
+      css,
+    ));
+
+  test('valid text-shadow declaration', () =>
+    validationTest(
+      `p {
+      text-shadow: rgba(0,0,0,0.1) 0 -5px, rgba(0,0,0,0.1) 0 -1px, \
+      rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, \
+      rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+    }`,
+      css,
+    ));
+
+  test('valid background-position declarations', () =>
+    validationTest(
+      `img {
+      background-position-x: 10px;
+      background-position-y: 15%;
+    }`,
+      css,
+    ));
+
+  test('bogus flex value', () =>
+    validationTest('.flex-item { flex: bogus; }', css, {
+      reason: 'invalid-value',
+      row: 0,
+      payload: {error: 'bogus'},
+    }));
+
+  test('fails with bogus filter value', () =>
+    validationTest('img { filter: whitescale(100%); }', css, {
+      reason: 'invalid-value',
+      row: 0,
+      payload: {error: 'whitescale('},
+    }));
+
+  test('no opening curly brace', () =>
+    validationTest(
+      `p
+      display: block;`,
+      css,
+      {reason: 'block-expected', row: 0, payload: {error: 'p'}},
+    ));
+
+  test('no closing curly brace', () =>
+    validationTest(
+      `p {
+      display: block;`,
+      css,
+      {reason: 'missing-closing-curly', row: 0},
+    ));
+
+  test('bogus character in selector', () =>
+    validationTest('p; div { display: block; }', css, {
+      reason: 'invalid-token-in-selector',
+      row: 0,
+      payload: {token: ';'},
+    }));
+
+  test('invalid negative value', () =>
+    validationTest('p { padding-left: -2px; }', css, {
+      reason: 'invalid-negative-value',
+      row: 0,
+      payload: {error: '-2px'},
+    }));
+
+  test('invalid fractional value', () =>
+    validationTest('p { z-index: 2.4; }', css, {
+      reason: 'invalid-fractional-value',
+      row: 0,
+      payload: {error: '2.4'},
+    }));
+
+  test('missing semicolon at end of block', () =>
+    validationTest(
+      `p {
+      display: block
+    }`,
+      css,
+      {reason: 'missing-semicolon', row: 1},
+    ));
+
+  test('missing semicolon within block', () =>
+    validationTest(
+      `
+      p {
+        margin: 10px
+        padding: 5px;
+      }
+    `,
+      css,
+      {reason: 'missing-semicolon', row: 2},
+    ));
+
+  test('extra tokens after value', () =>
+    validationTest(
+      `
+      p {
+        padding: 5px 5px 5px 5px 5px;
+      }
+    `,
+      css,
+      {reason: 'extra-tokens-after-value', row: 2, payload: {token: '5px'}},
+    ));
+
+  test('potentially missing semicolon before first line', () =>
+    validationTest(
+      `button{border:20px solid b;
+    }`,
+      css,
+      {reason: 'extra-tokens-after-value', row: 0, payload: {token: 'b'}},
+    ));
+
+  test('extra token that is prefix of the beginning of the line', () =>
+    validationTest(
+      `
+      p {
+        border: 20px solid b;
+      }
+    `,
+      css,
+      {reason: 'extra-tokens-after-value', row: 2, payload: {token: 'b'}},
+    ));
+
+  test('thoroughly unparseable CSS', () =>
+    validationTest('<a href="http;.facebook.com>', css, {
+      reason: 'invalid-token',
+      row: 0,
+    }));
+
+  testValidatorAcceptance(css, 'css');
+});