From 2fa3cf7f37259199cda3898c752b5e96c4678d90 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 24 Mar 2017 13:58:00 -0700 Subject: [PATCH] Add UI Framework Jest tests to npm test script. Create separate scripts for watching and generating coverage reports. --- package.json | 3 +- tasks/test.js | 1 + tasks/ui_framework_test.js | 67 +++++++++++++------------ tasks/utils/ui_framework_test.js | 8 +++ tasks/utils/ui_framework_test_config.js | 27 ++++++++++ ui_framework/README.md | 7 +++ 6 files changed, 79 insertions(+), 34 deletions(-) create mode 100644 tasks/utils/ui_framework_test.js create mode 100644 tasks/utils/ui_framework_test_config.js diff --git a/package.json b/package.json index 2b21a531eefd4..a1892dc7b4a9f 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,8 @@ "mocha:debug": "mocha --debug-brk", "sterilize": "grunt sterilize", "uiFramework:start": "grunt uiFramework:start", - "uiFramework:test": "node tasks/ui_framework_test --env=jsdom" + "uiFramework:dev": "node tasks/utils/ui_framework_test --env=jsdom --watch", + "uiFramework:coverage": "node tasks/utils/ui_framework_test --env=jsdom --coverage" }, "repository": { "type": "git", diff --git a/tasks/test.js b/tasks/test.js index 91729f70b43f3..a5ae3869c7e14 100644 --- a/tasks/test.js +++ b/tasks/test.js @@ -51,6 +51,7 @@ module.exports = function (grunt) { grunt.registerTask('test:coverage', [ 'run:testCoverageServer', 'karma:coverage' ]); grunt.registerTask('test:quick', [ + 'uiFramework:test', 'test:server', 'test:ui', 'test:browser', diff --git a/tasks/ui_framework_test.js b/tasks/ui_framework_test.js index 5bfa4c7c426c0..aef875ee85d49 100644 --- a/tasks/ui_framework_test.js +++ b/tasks/ui_framework_test.js @@ -1,36 +1,37 @@ -const jest = require('jest'); -const path = require('path'); - -const rootDir = 'ui_framework'; -const resolve = relativePath => path.resolve(__dirname, '..', '', relativePath); - -const config = { - rootDir, - collectCoverage: true, - collectCoverageFrom: [ - 'components/**/*.js', - // Seems to be a bug with jest or micromatch, in which the above glob doesn't match subsequent - // levels of directories, making this glob necessary. - 'components/**/**/*.js', - '!components/index.js', - '!components/**/*/index.js', - ], - coverageDirectory: '/jest/report', - coverageReporters: ['html'], - moduleFileExtensions: ['jsx', 'js', 'json'], - moduleNameMapper: { - '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'), - '^.+\\.css$': resolve('config/jest/CSSStub.js'), - '^.+\\.scss$': resolve('config/jest/CSSStub.js') - }, - testPathIgnorePatterns: ['/(dist|doc_site|jest)/'], - testEnvironment: 'node', - testRegex: '.*\.test\.(js|jsx)$', - snapshotSerializers: ['/../node_modules/enzyme-to-json/serializer'] -}; +const platform = require('os').platform(); +const config = require('./utils/ui_framework_test_config'); + +module.exports = function (grunt) { + grunt.registerTask('uiFramework:test', function () { + const done = this.async(); + Promise.all([uiFrameworkTest()]).then(done); + }); + + function uiFrameworkTest() { + const serverCmd = { + cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\jest.cmd' : './node_modules/.bin/jest', + args: [ + '--env=jsdom', + `--config=${JSON.stringify(config)}`, + ], + opts: { stdio: 'inherit' } + }; + + return new Promise((resolve, reject) => { + grunt.util.spawn(serverCmd, (error, result, code) => { + if (error || code !== 0) { + const message = result.stderr || result.stdout; -const argv = process.argv.slice(2); + grunt.log.error(message); -argv.push('--config', JSON.stringify(config)); + return reject(); + } -jest.run(argv); + grunt.log.writeln(result); + + resolve(); + }); + + }); + } +}; diff --git a/tasks/utils/ui_framework_test.js b/tasks/utils/ui_framework_test.js new file mode 100644 index 0000000000000..6a9bf528ed7c1 --- /dev/null +++ b/tasks/utils/ui_framework_test.js @@ -0,0 +1,8 @@ +const jest = require('jest'); +const config = require('./ui_framework_test_config'); + +const argv = process.argv.slice(2); + +argv.push('--config', JSON.stringify(config)); + +jest.run(argv); diff --git a/tasks/utils/ui_framework_test_config.js b/tasks/utils/ui_framework_test_config.js new file mode 100644 index 0000000000000..9b62770f40048 --- /dev/null +++ b/tasks/utils/ui_framework_test_config.js @@ -0,0 +1,27 @@ +const path = require('path'); +const rootDir = 'ui_framework'; +const resolve = relativePath => path.resolve(__dirname, '..', '', relativePath); + +module.exports = { + rootDir, + collectCoverageFrom: [ + 'components/**/*.js', + // Seems to be a bug with jest or micromatch, in which the above glob doesn't match subsequent + // levels of directories, making this glob necessary. + 'components/**/**/*.js', + '!components/index.js', + '!components/**/*/index.js', + ], + coverageDirectory: '/jest/report', + coverageReporters: ['html'], + moduleFileExtensions: ['jsx', 'js', 'json'], + moduleNameMapper: { + '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'), + '^.+\\.css$': resolve('config/jest/CSSStub.js'), + '^.+\\.scss$': resolve('config/jest/CSSStub.js') + }, + testPathIgnorePatterns: ['/(dist|doc_site|jest)/'], + testEnvironment: 'node', + testRegex: '.*\.test\.(js|jsx)$', + snapshotSerializers: ['/../node_modules/enzyme-to-json/serializer'] +}; diff --git a/ui_framework/README.md b/ui_framework/README.md index f25402095aa7a..8d82c6ce8b670 100644 --- a/ui_framework/README.md +++ b/ui_framework/README.md @@ -78,6 +78,13 @@ content. You can check how well the components have been covered by the tests by viewing the generated report at `ui_framework/jest/report/index.html`. +#### React component development tips + +You can run `npm run uiFramework:dev` to watch your files and automatically run the tests when you +make changes. Under this command, the tests will run faster than under `uiFramework:test` because +they'll only test the files you've changed -- the code coverage report won't be re-genereated, +however. + ## Principles ### Logically-grouped components