From 38b09f0d98de828782af5a7eb32a7bf1f71f6467 Mon Sep 17 00:00:00 2001 From: Luke Sheard Date: Sun, 11 Jun 2017 14:06:39 +0000 Subject: [PATCH] Inferno Mega Refactor (#1125) * Mega refactor test * Other files copied * Update README.md * Examples * Update package.jsons * Test different build process * Fixed build * Correct .travis.yml file * Test against node 4,6,8 * Fix up karma * Revert updates test * Karma stuff * Fix failing tests * Change Travis and Coverage * stuff * Port 3.4.3 * Apply jestcodemods * Jest fix * Fix all tests * fix merge * Docs working * Fix travis script * Fix travis * Fix travis script * Remove custom travis script * Fix package.json * Set coverage minimums * Remove inferno/test/utils * Stupidly didn't test * Remove lerna changelog * prepublishOnly hook * Testing github pages deploy * Make fixture for packaging nicer * Remove deploy * Use npm@5 --- .babelrc | 33 +- .eslintignore | 3 - .eslintrc.json | 154 -- .github/COMMIT_TEMPLATE.md | 28 + .github/ISSUE_TEMPLATE.md | 7 +- .gitignore | 39 +- .npmignore | 14 - .travis.yml | 26 +- bin/link | 12 - bin/rollup | 142 -- config/index.html | 56 - config/webpack.dev.conf.js | 81 - examples/package.json | 15 + fixtures/browser/karma.conf.js | 102 + fixtures/browser/package.json | 33 + fixtures/packaging/browserify/dev/input.js | 5 +- fixtures/packaging/browserify/prod/input.js | 5 +- .../packaging/brunch/dev/app/initialize.js | 5 +- fixtures/packaging/brunch/dev/config.js | 8 +- fixtures/packaging/brunch/dev/input.js | 5 +- .../packaging/brunch/prod/app/initialize.js | 7 - fixtures/packaging/brunch/prod/config.js | 16 +- fixtures/packaging/brunch/prod/input.js | 5 +- fixtures/packaging/build-all.js | 98 +- fixtures/packaging/package.json | 12 + fixtures/packaging/rjs/dev/config.js | 4 +- fixtures/packaging/rjs/dev/input.js | 5 +- fixtures/packaging/rjs/prod/config.js | 4 +- fixtures/packaging/rjs/prod/input.js | 5 +- .../packaging/systemjs-builder/dev/config.js | 4 +- .../packaging/systemjs-builder/dev/input.js | 5 +- .../packaging/systemjs-builder/prod/config.js | 4 +- .../packaging/systemjs-builder/prod/input.js | 5 +- .../packaging/webpack-alias/dev/config.js | 10 +- fixtures/packaging/webpack-alias/dev/input.js | 5 +- .../packaging/webpack-alias/dev/package.json | 2 +- .../packaging/webpack-alias/prod/config.js | 10 +- .../packaging/webpack-alias/prod/input.js | 5 +- .../packaging/webpack-alias/prod/package.json | 2 +- fixtures/packaging/webpack/dev/config.js | 6 +- fixtures/packaging/webpack/dev/input.js | 5 +- fixtures/packaging/webpack/prod/config.js | 10 +- fixtures/packaging/webpack/prod/input.js | 5 +- fixtures/react/jest.config.js | 15 + fixtures/react/package.json | 15 + fixtures/react/packages/inferno-component.js | 3 + .../react/packages/inferno-create-class.js | 3 + .../react/packages/inferno-create-element.js | 3 + .../react/packages/inferno-vnode-flags.js | 24 + fixtures/react/packages/inferno.js | 20 + fixtures/react/tsconfig.json | 3 + flip.js | 537 ----- jest.config.js | 60 + lerna.json | 17 +- package.json | 216 +- .../__tests__/compat_children.spec.jsx | 64 +- .../__tests__/isValidElement.spec.jsx | 46 +- .../__tests__/lifecycle.spec.jsx | 78 +- .../inferno-compat/__tests__/svg.spec.jsx | 19 +- .../__tests__/componentlifecycle.spec.jsx | 38 +- .../__tests__/setState.spec.jsx | 31 +- .../__tests__/state.spec.jsx | 11 +- .../__tests__/createClass.spec.browser.js | 22 +- .../__tests__/createClass.spec.browser.jsx | 24 +- .../{benchmarks => }/createClass.spec.jsx | 2 +- .../__tests__/blueprints.spec.jsx | 24 +- .../__tests__/children.spec.browser.js | 122 +- .../__tests__/children.spec.jsx | 400 ++-- .../__tests__/cloneVNode.spec.jsx | 64 +- .../__tests__/clonenode.spec.jsx | 2 +- .../__tests__/columnrender.spec.jsx | 82 +- .../__tests__/components.spec.browser.js | 1925 ++++++++--------- .../__tests__/components.spec.jsx | 584 ++--- .../__tests__/components2.spec.jsx | 50 +- .../__tests__/createElement.spec.browser.js | 38 +- .../__tests__/creation.spec.browser.js | 20 +- .../__tests__/elements.spec.jsx | 620 +++--- .../__tests__/error.spec.jsx | 20 +- .../__tests__/events.spec.browser.js | 186 +- .../__tests__/findDOMNodes.spec.jsx | 22 +- .../__tests__/formelements.spec.jsx | 200 +- .../__tests__/functional.spec.jsx | 33 +- .../__tests__/hooks.spec.browser.js | 56 +- .../__tests__/hooks.spec.jsx | 300 +-- .../__tests__/instancenull.spec.jsx.js | 23 +- .../__tests__/linkEvent.spec.jsx | 24 +- .../__tests__/mixedFormElements.spec.jsx | 180 +- .../__tests__/normalization.spec.jsx | 10 +- .../__tests__/normalizeProps.spec.jsx | 4 +- .../patchKeyedChildren.spec.browser.js | 346 +-- .../__tests__/patchMixedKeyed.spec.browser.js | 198 +- .../patchNonKeyedChildren.spec.browser.js | 296 +-- .../__tests__/patching.spec.browser.js | 66 +- .../__tests__/select.spec.browser.js | 197 +- .../__tests__/select.spec.jsx | 229 +- .../__tests__/styles.spec.browser-skip.js | 477 ++++ .../__tests__/styles.spec.browser.js | 477 ---- .../__tests__/styles.spec.jsx | 50 +- .../__tests__/svg.spec.browser.js | 182 +- .../__tests__/svg.spec.jsx | 124 +- .../__tests__/svgXlink.spec.jsx | 28 +- .../__tests__/text.spec.browser.js | 182 +- .../__tests__/update.spec.browser.js | 622 +++--- .../__tests__/update.spec.jsx | 116 +- .../__tests__/hyperscript.spec.browser.js | 62 +- .../inferno-mobx/__tests__/connect.spec.js | 25 +- .../__tests__/eventemitter.spec.js | 14 +- .../__tests__/makeReactive.spec.jsx | 26 +- .../inferno-mobx/__tests__/provider.spec.jsx | 22 +- .../inferno-mobx/__tests__/tracking.spec.js | 6 +- .../inferno-redux/__tests__/connect.spec.jsx | 24 +- .../inferno-redux/__tests__/provider.spec.jsx | 31 +- .../inferno-redux/__tests__/utils.spec.jsx | 19 +- .../__tests__/components.spec.jsx | 84 +- .../__tests__/createRoutes.spec.jsx | 7 +- .../inferno-router/__tests__/router.spec.jsx | 107 +- .../__tests__/transition.spec.jsx | 38 +- .../inferno-router/__tests__/utils.spec.jsx | 14 +- .../creation-queuestream.spec.browser.js | 20 +- .../__tests__/creation-stream.spec.browser.js | 15 +- .../__tests__/creation-stream.spec.js | 20 +- .../__tests__/creation.spec.browser.js | 4 +- .../__tests__/creation.spec.jsx | 6 +- .../__tests__/hydration-ext.spec.jsx | 9 +- .../__tests__/hydration.spec.browser.js | 12 +- .../__tests__/hydration.spec.jsx | 44 +- packages/inferno-server/index.js | 1 - .../__tests__/testUtils.spec.browser.jsx | 355 ++- .../__tests__/testutilevents.spec.jsx | 12 +- .../__tests__/utils.spec.jsx} | 199 +- packages/inferno-utils/index.js | 2 + packages/inferno-utils/package.json | 13 + .../utils.ts => inferno-utils/src/index.ts} | 17 +- .../__tests__/inferno.spec.jsx} | 0 packages/inferno/__tests__/patching.spec.js | 22 +- packages/inferno/__tests__/rendering.spec.js | 24 +- scripts/check-version.js | 36 + scripts/release/check-version.js | 30 - scripts/release/update-version.js | 30 - scripts/rollup/build.js | 44 + scripts/rollup/bundle.js | 38 + scripts/rollup/plugins/alias.js | 18 + scripts/rollup/plugins/index.js | 72 + scripts/rollup/plugins/optimize.js | 12 + scripts/rollup/rollup.js | 25 + scripts/test/jasmine-polyfill.js | 3 + scripts/test/requestAnimationFrame.ts | 37 + scripts/typings/build.js | 20 + test/data/separate-render/childseparate.tsx | 30 - .../separate-render/parentfirstseparate.tsx | 19 - .../separate-render/parentsecondseparate.tsx | 19 - test/karma/bench.js | 67 - test/karma/karma.base.conf.js | 118 - test/karma/karma.bench.conf.js | 47 - test/karma/karma.unit.conf.js | 59 - test/karma/sauce.js | 56 - test/lint/letter-only-props.js | 27 - test/mocha.opts | 9 - test/mocha/DOM.js | 46 - tsconfig.json | 33 +- tslint.json | 19 +- typedoc.js | 13 + 162 files changed, 5993 insertions(+), 7025 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.json create mode 100644 .github/COMMIT_TEMPLATE.md delete mode 100644 .npmignore delete mode 100644 bin/link delete mode 100644 bin/rollup delete mode 100644 config/index.html delete mode 100644 config/webpack.dev.conf.js create mode 100644 examples/package.json create mode 100644 fixtures/browser/karma.conf.js create mode 100644 fixtures/browser/package.json delete mode 100644 fixtures/packaging/brunch/prod/app/initialize.js create mode 100644 fixtures/packaging/package.json create mode 100644 fixtures/react/jest.config.js create mode 100644 fixtures/react/package.json create mode 100644 fixtures/react/packages/inferno-component.js create mode 100644 fixtures/react/packages/inferno-create-class.js create mode 100644 fixtures/react/packages/inferno-create-element.js create mode 100644 fixtures/react/packages/inferno-vnode-flags.js create mode 100644 fixtures/react/packages/inferno.js create mode 100644 fixtures/react/tsconfig.json delete mode 100644 flip.js create mode 100644 jest.config.js rename packages/inferno-create-class/__tests__/{benchmarks => }/createClass.spec.jsx (99%) create mode 100644 packages/inferno-create-element/__tests__/styles.spec.browser-skip.js delete mode 100644 packages/inferno-create-element/__tests__/styles.spec.browser.js rename packages/{inferno-test-utils/__tests__/utils.spec.browser.jsx => inferno-utils/__tests__/utils.spec.jsx} (50%) create mode 100644 packages/inferno-utils/index.js create mode 100644 packages/inferno-utils/package.json rename packages/{inferno/src/test/utils.ts => inferno-utils/src/index.ts} (90%) rename packages/{inferno-create-element/__tests__/benchmarks/functionalComponent.spec.jsx => inferno/__tests__/inferno.spec.jsx} (100%) create mode 100755 scripts/check-version.js delete mode 100644 scripts/release/check-version.js delete mode 100644 scripts/release/update-version.js create mode 100644 scripts/rollup/build.js create mode 100644 scripts/rollup/bundle.js create mode 100644 scripts/rollup/plugins/alias.js create mode 100644 scripts/rollup/plugins/index.js create mode 100644 scripts/rollup/plugins/optimize.js create mode 100644 scripts/rollup/rollup.js create mode 100644 scripts/test/jasmine-polyfill.js create mode 100644 scripts/test/requestAnimationFrame.ts create mode 100644 scripts/typings/build.js delete mode 100644 test/data/separate-render/childseparate.tsx delete mode 100644 test/data/separate-render/parentfirstseparate.tsx delete mode 100644 test/data/separate-render/parentsecondseparate.tsx delete mode 100644 test/karma/bench.js delete mode 100644 test/karma/karma.base.conf.js delete mode 100644 test/karma/karma.bench.conf.js delete mode 100644 test/karma/karma.unit.conf.js delete mode 100644 test/karma/sauce.js delete mode 100644 test/lint/letter-only-props.js delete mode 100644 test/mocha.opts delete mode 100644 test/mocha/DOM.js create mode 100644 typedoc.js diff --git a/.babelrc b/.babelrc index 42c33685d..2ec88d6bc 100644 --- a/.babelrc +++ b/.babelrc @@ -8,22 +8,19 @@ "transform-class-properties", "transform-object-rest-spread", "babel-plugin-syntax-jsx", - ["babel-plugin-inferno", {"imports": true}], - ["module-resolver", { - "extensions": [".js", ".jsx"], - "alias": { - "inferno-compat": "./packages/inferno-compat/dist-es", - "inferno-component": "./packages/inferno-component/dist-es", - "inferno-create-class": "./packages/inferno-create-class/dist-es", - "inferno-create-element": "./packages/inferno-create-element/dist-es", - "inferno-shared": "./packages/inferno-shared/dist-es", - "inferno-hyperscript": "./packages/inferno-hyperscript/dist-es", - "inferno-mobx": "./packages/inferno-mobx/dist-es", - "inferno-redux": "./packages/inferno-redux/dist-es", - "inferno-router": "./packages/inferno-router/dist-es", - "inferno-server": "./packages/inferno-server/dist-es", - "inferno": "./packages/inferno/dist-es" - } - }] - ] + ["babel-plugin-inferno", {"imports": true}] + ], + "env": { + "test": { + "presets": [ + "es2015" + ], + "plugins": [ + "transform-class-properties", + "transform-object-rest-spread", + "babel-plugin-syntax-jsx", + ["babel-plugin-inferno", {"imports": true}] + ] + } + } } diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 78f794d22..000000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -**/*.min.js -packages/inferno/dist/* -examples/**/dist/* diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 2636c8681..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,154 +0,0 @@ -{ - "root": true, - "parser": "babel-eslint", - "globals": { - "document": true, - "window": true, - "spy": true, - "mocha": true, - "stub": true, - "beforeEach": true, - "useFakeTimers": true, - "useFakeXMLHttpRequest": true, - "useFakeServer": true, - "suite": true, - "benchmark": true - }, - "ecmaFeatures": { - "jsx": true, - "modules": true, - "es6": true - }, - "env": { - "browser": true, - "es6": true, - "mocha": true, - "node": true - }, - "rules": { - "comma-dangle": [2, "never"], - "no-cond-assign": [2, "except-parens"], - "no-console": 0, - "no-constant-condition": 2, - "no-debugger": 1, - "no-dupe-args": 2, - "no-dupe-keys": 2, - "no-duplicate-case": 2, - "no-empty-character-class": 2, - "no-ex-assign": 2, - "no-extra-semi": 2, - "no-func-assign": 2, - "no-inner-declarations": [2, "both"], - "no-invalid-regexp": 2, - "no-irregular-whitespace": 2, - "no-negated-in-lhs": 2, - "no-obj-calls": 2, - "no-regex-spaces": 2, - "no-sparse-arrays": 2, - "no-unreachable": 2, - "use-isnan": 2, - "valid-typeof": 2, - "no-unexpected-multiline": 2, - "accessor-pairs": [2, { - "setWithoutGet": true - }], - "curly": [2, "all"], - "eqeqeq": [2, "allow-null"], - "no-alert": 1, - "no-div-regex": 2, - "no-eq-null": 2, - "no-eval": 2, - "no-fallthrough": 2, - "no-floating-decimal": 2, - "no-implied-eval": 2, - "no-invalid-this": 2, - "no-loop-func": 2, - "no-multi-spaces": 2, - "no-multi-str": 2, - "no-native-reassign": 2, - "no-new-func": 2, - "no-new-wrappers": 2, - "no-new": 2, - "no-octal": 2, - "no-redeclare": [2, { - "builtinGlobals":true - }], - "no-return-assign": [2, "except-parens"], - "no-with": 2, - "radix": 2, - "vars-on-top": 2, - "wrap-iife": [2, "inside"], - "yoda": 2, - "strict": [2, "never"], - "no-mixed-operators": 0, - "no-delete-var": 2, - "no-shadow-restricted-names": 2, - "no-unused-vars": 0, - "no-use-before-define": [2, "nofunc"], - "array-bracket-spacing": [2, "always", { - "singleValue": false, - "objectsInArrays": false, - "arraysInArrays": false - }], - "indent": [2, "tab", { - "SwitchCase": 1 - }], - "key-spacing": [2, { - "afterColon": true - }], - "lines-around-comment": [2, { - "beforeBlockComment": true, - "allowBlockStart": true, - "allowBlockEnd": true, - "allowObjectStart": true, - "allowObjectEnd": true - }], - "linebreak-style": [0, "unix"], - "new-cap": [2, { - "newIsCap": true, - "capIsNew":true, - "capIsNewExceptions": ["Component"] - }], - "new-parens": 2, - "newline-after-var": [0, "always"], - "no-array-constructor": 2, - "no-mixed-spaces-and-tabs": 2, - "no-multiple-empty-lines": [2, { - "max": 2 - }], - "no-new-object": 2, - "no-spaced-func": 2, - "no-trailing-spaces": 2, - "object-curly-spacing": [2, "always", { - "arraysInObjects": true, - "objectsInObjects": true - }], - "padded-blocks": [0, "never"], - "quote-props": [2, "as-needed"], - "quotes": [2, "single", "avoid-escape"], - "semi-spacing": [2, { - "after": true - }], - "semi": [2, "always"], - "keyword-spacing": 2, - "space-before-function-paren": [2, { - "anonymous": "always", - "named": "never" - }], - "space-in-parens": [2, "never"], - "space-infix-ops": 2, - "space-unary-ops": [2, { - "words": true - }], - "spaced-comment": [2, "always", { - "exceptions": ["*"] - }], - "wrap-regex": 2, - "constructor-super": 2, - "no-class-assign": 2, - "no-const-assign": 2, - "no-this-before-super": 2, - "no-var": 2, - "prefer-spread": 2 - } -} diff --git a/.github/COMMIT_TEMPLATE.md b/.github/COMMIT_TEMPLATE.md new file mode 100644 index 000000000..fa53d6b5b --- /dev/null +++ b/.github/COMMIT_TEMPLATE.md @@ -0,0 +1,28 @@ +# : (If applied, this commit will...) (Max 50 char) +# |<---- Using a Maximum Of 50 Characters ---->| + + +# Explain why this change is being made +# |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->| + +# Provide links or keys to any relevant tickets, articles or other resources +# Example: Github issue #23 + +# --- COMMIT END --- +# Type can be +# feat (new feature) +# fix (bug fix) +# refactor (refactoring production code) +# style (formatting, missing semi colons, etc; no code change) +# docs (changes to documentation) +# test (adding or refactoring tests; no production code change) +# chore (updating grunt tasks etc; no production code change) +# -------------------- +# Remember to +# Capitalize the subject line +# Use the imperative mood in the subject line +# Do not end the subject line with a period +# Separate subject from body with a blank line +# Use the body to explain what and why vs. how +# Can use multiple lines with "-" for bullet points in body +# -------------------- diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 5684b4f52..34344518e 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,5 +1,6 @@ *Before* submitting an issue please: -- Check that you are using the latest version of Inferno. Either using unpkg [CDN @ Master](http://unpkg.com/inferno@latest/dist/inferno.js) or by checking the tags on [NPM](http://www.npmjs.com/package/inferno). +- Check that you are using the latest version of Inferno. Either using our [CDN @ Master](http://cdn.infernojs.org/latest/inferno.js) or by checking the tags on [NPM](http://www.npmjs.com/package/inferno). +- Check that the bug has not been fixed in the latest development version. Use our [CDN @ Edge](http://cdn.infernojs.org/edge/inferno.js). - Check that the issue has not been brought up before on [Github issues](http://www.github.com/infernojs/inferno/issues). **If you can, please distill your problem down and include a JSFiddle example for illustration. Also when requesting bug fix please include at least one test to avoid regression.** @@ -13,9 +14,9 @@ Inferno is... **Expected Current Behaviour** -Inferno should... +Inferno should... **Inferno Metadata** macOS / Windowx / Linux -Safari / Chrome / Firefox / ... +Safari / Chrome / Firefox / ... diff --git a/.gitignore b/.gitignore index 715aa032c..514d2cba1 100755 --- a/.gitignore +++ b/.gitignore @@ -1,39 +1,18 @@ -_site -.history -.git -build -.build -.git -.history .idea -.jshintrc -.nyc_output -.sass-cache .vscode -build -coverage -jsconfig.json -Gemfile.lock -node_modules + .DS_Store -*.map +.rpt2_cache* +.changelog + *.log -*.log* -*.swp -*~ -test/data/result.json -*.orig +build +coverage +docs +node_modules -packages/*/tsconfig.* -packages/*/.npmignore packages/*/dist-es packages/*/dist -test/data/baseline.json -test/data/result.json - -.fliphub -.fusebox -.changelog -.npm-debug.log* package-lock.json + diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 4d9e4ced6..000000000 --- a/.npmignore +++ /dev/null @@ -1,14 +0,0 @@ -.* -*.log -*.swp -*.yml -bower.json -coverage -config -dist/*.map -test -__tests__ - -tsconfig.json -tsconfig.*.json -npm-debug.log* diff --git a/.travis.yml b/.travis.yml index 0e64b106a..e006613b4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,6 +3,12 @@ language: node_js node_js: - '6' +cache: + directories: + - node_modules + - fixtures/browser/node_modules + - fixtures/packaging/node_modules + notifications: email: on_success: change @@ -16,15 +22,21 @@ addons: chrome: stable firefox: latest -script: - - npm run lint - - npm run test:browser - - npm run test:server - - npm run test:package +before_install: + - npm install -g npm@5 before_script: - "export DISPLAY=:99.0" - "sh -e /etc/init.d/xvfb start" -after_script: - - npm run test:publish +jobs: + include: + - script: npm run lint + - script: + - npm run test:coverage + - npm run coveralls + - script: npm run test:browser + - stage: Build + script: + - npm run build + - npm run test:package diff --git a/bin/link b/bin/link deleted file mode 100644 index 50dc75d33..000000000 --- a/bin/link +++ /dev/null @@ -1,12 +0,0 @@ -#!/usr/bin/env node - -const { ensureSymlinkSync } = require('fs-extra'); -const { resolve, join } = require('path'); -const rimraf = require('rimraf'); - -const PROJECT_FOLDER = resolve(__dirname, '..'); - -const cwd = process.cwd(); - -ensureSymlinkSync(join(PROJECT_FOLDER, 'tsconfig.json'), join(cwd, 'tsconfig.json')); -ensureSymlinkSync(join(PROJECT_FOLDER, '.npmignore'), join(cwd, '.npmignore')); diff --git a/bin/rollup b/bin/rollup deleted file mode 100644 index d5d38a03d..000000000 --- a/bin/rollup +++ /dev/null @@ -1,142 +0,0 @@ -#!/usr/bin/env node - -const { resolve, join } = require('path'); -const { rollup } = require('rollup'); -const buble = require('rollup-plugin-buble'); -const replace = require('rollup-plugin-replace'); -const uglify = require('rollup-plugin-uglify'); -const filesize = require('rollup-plugin-filesize'); -const alias = require('rollup-plugin-alias'); -const chalk = require('chalk'); -const boxen = require('boxen'); -const optimizeJs = require('optimize-js'); - -const nodeResolve = require('rollup-plugin-node-resolve'); -const commonjs = require('rollup-plugin-commonjs'); - -const PROJECT_FOLDER = resolve(__dirname, '..'); -const rootPackageJson = require(join(PROJECT_FOLDER, 'package.json')); - -const { NODE_ENV } = process.env; - -const COPYRIGHT_YEAR = new Date().getFullYear(); - -const cwd = process.cwd(); -const pkgJson = require(join(cwd, 'package.json')); - -const { - name, - version, - dependencies = {}, - 'inferno:main': entryFile, - rollup: rollupConfig = {} -} = pkgJson; - -const copyright = ` -/*! - * ${rollupConfig.moduleName || name} v${version} - * (c) ${COPYRIGHT_YEAR} ${rootPackageJson.author.name}' - * Released under the ${rootPackageJson.license} License. - */ -`; - -const entry = require.resolve(resolve(cwd, entryFile)); -let filename = name; -if (NODE_ENV === 'production') { - filename += '.min.js'; -} else { - filename += '.js'; -} -const dest = join(cwd, 'dist', filename); -const bundleConfig = { - dest, - format: 'umd', - exports: 'named', - moduleName: rollupConfig.moduleName || name, - globals: rollupConfig.moduleGlobals, - banner: copyright, - sourceMap: false -}; - -const optJs = { - name: 'optimizeJs', - - transformBundle: function (code) { - return optimizeJs(code); - } -}; -const external = Object.keys(dependencies).filter(n => !(rollupConfig.bundledDependencies || []).includes(n)); - -const plugins = [ - alias({ - 'inferno-compat': resolve(__dirname, '../packages/inferno-compat/dist-es/index.js'), - 'inferno-component': resolve(__dirname, '../packages/inferno-component/dist-es/index.js'), - 'inferno-create-class': resolve(__dirname, '../packages/inferno-create-class/dist-es/index.js'), - 'inferno-create-element': resolve(__dirname, '../packages/inferno-create-element/dist-es/index.js'), - 'inferno-shared': resolve(__dirname, '../packages/inferno-shared/dist-es/index.js'), - 'inferno-hyperscript': resolve(__dirname, '../packages/inferno-hyperscript/dist-es/index.js'), - 'inferno-mobx': resolve(__dirname, '../packages/inferno-mobx/dist-es/index.js'), - 'inferno-redux': resolve(__dirname, '../packages/inferno-redux/dist-es/index.js'), - 'inferno-router': resolve(__dirname, '../packages/inferno-router/dist-es/index.js'), - 'inferno-server': resolve(__dirname, '../packages/inferno-server/dist-es/index.js'), - inferno: resolve(__dirname, '../packages/inferno/dist-es/index.js') - }), - nodeResolve({ - jsnext: true - }), - commonjs({ - include: 'node_modules/**' - }), - buble() -]; - -if (NODE_ENV === 'production') { - plugins.push( - uglify({ - warnings: false, - parse: { - // parse options - html5_comments: false, - shebang: false - }, - compress: { - // compress options - dead_code: true, - drop_debugger: true, - booleans: true, - unused: true - }, - sourceMap: false, - toplevel: false, - ie8: false - }) - ); - plugins.push( - replace({ - VERSION: rootPackageJson.version, - 'process.env.NODE_ENV': JSON.stringify('production') - }) - ); - plugins.push(optJs); -} else { - plugins.push( - replace({ - VERSION: rootPackageJson.version, - 'process.env.NODE_ENV': JSON.stringify('development') - }) - ); -} -// Filesize plugin needs to be last to report correct filesizes when minified -plugins.push(filesize({ - render: function (options, size, gzip) { - return boxen(chalk.green.bold(filename + ' size: ') + chalk.yellow.bold(size) + ', ' + - chalk.green.bold('Gzipped size: ') + chalk.yellow.bold(gzip), { padding: 1 }); - } -})); - -rollup({ - entry, - plugins, - external -}) -.then(({ write }) => write(bundleConfig)).catch(console.error); diff --git a/config/index.html b/config/index.html deleted file mode 100644 index f04e227e4..000000000 --- a/config/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - Tests - - - - - -
-
- - - - - - - -
- - diff --git a/config/webpack.dev.conf.js b/config/webpack.dev.conf.js deleted file mode 100644 index 2d6011337..000000000 --- a/config/webpack.dev.conf.js +++ /dev/null @@ -1,81 +0,0 @@ -/* tslint:disable */ - -const webpack = require('webpack'); -const glob = require('glob'); -const path = require('path'); - -const DEVSERVER_FILTER = process.env.DEVSERVER_FILTER || '*'; -const testFiles = glob.sync(`./packages/${DEVSERVER_FILTER}/*__tests__*/**/*.js*`); -console.log({ DEVSERVER_FILTER }); - -module.exports = { - watch: true, - entry: testFiles, - // devtool: 'source-map', - output: { - filename: '__spec-build.js' - }, - performance: { - hints: false - }, - module: { - loaders: [ - { - test: /\.jsx?$/, - loader: 'babel-loader', - query: { - // TODO: This is workaround because some of devDeps are shipping ES6... - babelrc: false, - presets: [ - [ 'es2015', { loose: true, modules: false }], - 'stage-2' - ], - plugins: [ - 'transform-class-properties', - 'transform-object-rest-spread', - 'babel-plugin-syntax-jsx', - [ 'babel-plugin-inferno', { imports: true }], - [ 'module-resolver', { - extensions: [ '.js', '.jsx' ], - alias: { - 'inferno-compat': './packages/inferno-compat/dist-es', - 'inferno-component': './packages/inferno-component/dist-es', - 'inferno-create-class': './packages/inferno-create-class/dist-es', - 'inferno-create-element': './packages/inferno-create-element/dist-es', - 'inferno-shared': './packages/inferno-shared/dist-es', - 'inferno-hyperscript': './packages/inferno-hyperscript/dist-es', - 'inferno-mobx': './packages/inferno-mobx/dist-es', - 'inferno-redux': './packages/inferno-redux/dist-es', - 'inferno-router': './packages/inferno-router/dist-es', - 'inferno-server': './packages/inferno-server/dist-es', - inferno: './packages/inferno/dist-es' - } - }] - ] - } - } - ] - }, - devServer: { - contentBase: './', - port: 8080, - noInfo: false, - hot: true, - inline: true, - historyApiFallback: { - index: '/config/index.html' - } - }, - resolve: { - extensions: [ '.js', '.jsx' ], - mainFields: [ 'browser', 'inferno:main', 'module', 'main' ] - }, - plugins: [ - // By default, webpack does `n=>n` compilation with entry files. This concatenates - // them into a single chunk. - new webpack.optimize.LimitChunkCountPlugin({ - maxChunks: 1 - }), - new webpack.HotModuleReplacementPlugin() - ] -}; diff --git a/examples/package.json b/examples/package.json new file mode 100644 index 000000000..c94510069 --- /dev/null +++ b/examples/package.json @@ -0,0 +1,15 @@ +{ + "name": "inferno-build-examples", + "version": "1.0.0", + "description": "", + "scripts": { + "prestart": "npm install", + "start": "serve --port 8080 ../" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "serve": "^5.2.1" + } +} diff --git a/fixtures/browser/karma.conf.js b/fixtures/browser/karma.conf.js new file mode 100644 index 000000000..d7f125464 --- /dev/null +++ b/fixtures/browser/karma.conf.js @@ -0,0 +1,102 @@ +const path = require('path'); +const resolve = package => path.join(__dirname, '../../packages', package, 'src'); + +module.exports = function(config) { + config.set({ + basePath: '../../', + + frameworks: ['detectBrowsers', 'jasmine', 'jasmine-matchers'], + + detectBrowsers: { + postDetection(browserList) { + const results = browserList.indexOf('PhantomJS') && browserList.length === 1 ? ['PhantomJS'] : []; + + if (browserList.indexOf('Chrome') > -1) { + results.push('Chrome'); + } + + if (browserList.indexOf('Firefox') > -1) { + results.push('Firefox'); + } + + return results; + }, + }, + + files: [ + require.resolve('es5-shim'), + require.resolve('es6-shim'), + require.resolve('babel-polyfill/dist/polyfill'), + './scripts/test/jasmine-polyfill.js', + './packages/*/__tests__/*', + './packages/*/__tests__/**/*', + ], + + preprocessors: { + './packages/*/__tests__/**/*': ['webpack', 'sourcemap'], + './packages/*/__tests__/*': ['webpack', 'sourcemap'], + }, + + reporters: [ + process.env.CI ? 'failed' : 'progress' + ], + + browserConsoleLogOptions: { + level: 'warn', + terminal: false + }, + colors: true, + singleRun: true, + autoWatch: false, + concurrency: 1, + + webpackMiddleware: { + stats: 'errors-only', + noInfo: true, + }, + webpack: { + devtool: 'inline-source-map', + module: { + rules: [ + { + test: /\.jsx?$/, + loader: 'babel-loader', + exclude: /node_modules/, + }, + { + test: /\.tsx?$/, + loaders: ['babel-loader', 'ts-loader'], + }, + ], + }, + resolve: { + alias: { + inferno: resolve('inferno'), + 'inferno-compat': resolve('inferno-compat'), + 'inferno-component': resolve('inferno-component'), + 'inferno-create-class': resolve('inferno-create-class'), + 'inferno-create-element': resolve('inferno-create-element'), + 'inferno-devtools': resolve('inferno-devtools'), + 'inferno-hyperscript': resolve('inferno-hyperscript'), + 'inferno-mobx': resolve('inferno-mobx'), + 'inferno-redux': resolve('inferno-redux'), + 'inferno-router': resolve('inferno-router'), + 'inferno-server': resolve('inferno-server'), + 'inferno-shared': resolve('inferno-shared'), + 'inferno-test-utils': resolve('inferno-test-utils'), + 'inferno-utils': resolve('inferno-utils'), + 'inferno-vnode-flags': resolve('inferno-vnode-flags'), + }, + extensions: ['.js', '.jsx', '.ts', '.tsx'], + mainFields: ['inferno:main', 'module', 'main'], + }, + devServer: { + noInfo: true, + }, + stats: 'errors-only', + performance: { + hints: false, + }, + }, + }); +}; diff --git a/fixtures/browser/package.json b/fixtures/browser/package.json new file mode 100644 index 000000000..494c992c7 --- /dev/null +++ b/fixtures/browser/package.json @@ -0,0 +1,33 @@ +{ + "name": "inferno-fixture-browser", + "private": true, + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "pretest": "npm install", + "test": "karma start" + }, + "keywords": [], + "author": "", + "license": "MIT", + "devDependencies": { + "babel-core": "^6.25.0", + "babel-loader": "^7.0.0", + "babel-polyfill": "^6.23.0", + "es5-shim": "^4.5.9", + "es6-shim": "^0.35.3", + "jasmine-core": "^2.6.2", + "karma": "^1.7.0", + "karma-chrome-launcher": "^2.1.1", + "karma-detect-browsers": "^2.2.5", + "karma-failed-reporter": "0.0.3", + "karma-firefox-launcher": "^1.0.1", + "karma-jasmine": "^1.1.0", + "karma-jasmine-matchers": "^3.7.0", + "karma-phantomjs-launcher": "^1.0.4", + "karma-sourcemap-loader": "^0.3.7", + "karma-webpack": "^2.0.3", + "ts-loader": "^2.1.0" + } +} diff --git a/fixtures/packaging/browserify/dev/input.js b/fixtures/packaging/browserify/dev/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/browserify/dev/input.js +++ b/fixtures/packaging/browserify/dev/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/browserify/prod/input.js b/fixtures/packaging/browserify/prod/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/browserify/prod/input.js +++ b/fixtures/packaging/browserify/prod/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/brunch/dev/app/initialize.js b/fixtures/packaging/brunch/dev/app/initialize.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/brunch/dev/app/initialize.js +++ b/fixtures/packaging/brunch/dev/app/initialize.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/brunch/dev/config.js b/fixtures/packaging/brunch/dev/config.js index dac9abf2c..3e0e61cc1 100644 --- a/fixtures/packaging/brunch/dev/config.js +++ b/fixtures/packaging/brunch/dev/config.js @@ -1,10 +1,10 @@ exports.config = { files: { javascripts: { - joinTo: 'output.js', - }, + joinTo: 'output.js' + } }, paths: { - public: '.', - }, + public: '.' + } }; diff --git a/fixtures/packaging/brunch/dev/input.js b/fixtures/packaging/brunch/dev/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/brunch/dev/input.js +++ b/fixtures/packaging/brunch/dev/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/brunch/prod/app/initialize.js b/fixtures/packaging/brunch/prod/app/initialize.js deleted file mode 100644 index 29bd7203f..000000000 --- a/fixtures/packaging/brunch/prod/app/initialize.js +++ /dev/null @@ -1,7 +0,0 @@ -var Inferno = require('inferno'); -var createElement = require('inferno-create-element'); - -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); diff --git a/fixtures/packaging/brunch/prod/config.js b/fixtures/packaging/brunch/prod/config.js index ba12fc72c..92eb5d611 100644 --- a/fixtures/packaging/brunch/prod/config.js +++ b/fixtures/packaging/brunch/prod/config.js @@ -1,10 +1,10 @@ exports.config = { - paths: { - public: '.', - }, - files: { - javascripts: { - joinTo: 'output.js', - }, - }, + paths: { + public: '.' + }, + files: { + javascripts: { + joinTo: 'output.js' + } + } }; diff --git a/fixtures/packaging/brunch/prod/input.js b/fixtures/packaging/brunch/prod/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/brunch/prod/input.js +++ b/fixtures/packaging/brunch/prod/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/build-all.js b/fixtures/packaging/build-all.js index 0fba4d797..ef2b552d6 100644 --- a/fixtures/packaging/build-all.js +++ b/fixtures/packaging/build-all.js @@ -1,48 +1,76 @@ -const fs = require('fs'); +const chalk = require('chalk'); +const Table = require('cli-table'); +const { existsSync, openSync, readdirSync, statSync } = require('fs'); const path = require('path'); -const child_process = require('child_process'); +const { spawnSync } = require('child_process'); -const fixtureDirs = fs.readdirSync(__dirname).filter((file) => { - return fs.statSync(path.join(__dirname, file)).isDirectory(); +const fixtureDirs = readdirSync(__dirname).filter(file => statSync(path.join(__dirname, file)).isDirectory()); + +const table = new Table({ + head: [ + chalk.gray.yellow('Fixture'), + chalk.gray.yellow('Environment'), + chalk.gray.yellow('Passed'), + chalk.gray.yellow('Message') + ] }); -const cmdArgs = [ - {cmd: 'npm', args: ['install']}, - {cmd: 'npm', args: ['run', 'build']}, -]; +function addResult(tool, environment, result) { + table.push([ + chalk.white.bold(tool), + chalk.white.bold(environment), + result.passed ? chalk.green.bold('Passed') : chalk.red.bold('Failed'), + result.message === void 0 ? '' : chalk.white(result.message) + ]); +} + +function buildFixture(tool, environment) { + // Let console know what's going on + console.log(`Running ${tool}:${environment}`); -function buildFixture(cmdArg, cwdPath) { + // setup options const opts = { - cwd: cwdPath, - stdio: 'inherit', + cwd: path.join(__dirname, tool, environment), + stdio: [ + 'pipe', + 'pipe', + 'inherit' + ] }; - const result = child_process.spawnSync(cmdArg.cmd, cmdArg.args, opts); - if (result.status !== 0 || result.error) { - throw new Error(`Failed to build fixtures!`); + + // Run an NPM install + const install_result = spawnSync('npm', [ 'install' ], opts); + if (install_result.status !== 0 || install_result.error) { + return { + passed: false, + message: install_result.error + }; + } + + // Run the test + const test_result = spawnSync('npm', [ 'run', 'build' ], opts); + if (test_result.status !== 0 || test_result.error) { + return { + passed: false, + message: test_result.error + }; } + + return { + passed: true + }; } fixtureDirs.forEach(dir => { - cmdArgs.forEach(cmdArg => { - // we only care about directories that have DEV and PROD directories in - // otherwise they don't need to be built - const devPath = path.join(__dirname, dir, 'dev'); - - if (fs.existsSync(devPath)) { - buildFixture(cmdArg, devPath); - } - const prodPath = path.join(__dirname, dir, 'prod'); - - if (fs.existsSync(prodPath)) { - buildFixture(cmdArg, prodPath); - } - }); + + const devPath = path.join(__dirname, dir, 'dev'); + if (existsSync(devPath)) { + addResult( dir, 'dev', buildFixture(dir, 'dev')); + } + const prodPath = path.join(__dirname, dir, 'prod'); + if (existsSync(prodPath)) { + addResult( dir, 'prod', buildFixture(dir, 'prod')); + } }); -console.log(`------------------------- -All fixtures were built!'); -Now ensure all frames display a welcome message:'); - npm install -g serve'); - serve ../..'); - open http://localhost:5000/fixtures/packaging/'); --------------------------`); +console.log(table.toString()); diff --git a/fixtures/packaging/package.json b/fixtures/packaging/package.json new file mode 100644 index 000000000..4e96a9d3d --- /dev/null +++ b/fixtures/packaging/package.json @@ -0,0 +1,12 @@ +{ + "name": "inferno-fixture-packaging", + "version": "1.0.0", + "description": "This folder exists for **React contributors** only. If you use React you don't need to worry about it.", + "main": "build-all.js", + "scripts": { + "test": "node build-all.js" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/fixtures/packaging/rjs/dev/config.js b/fixtures/packaging/rjs/dev/config.js index 7978a49e7..ecee70103 100644 --- a/fixtures/packaging/rjs/dev/config.js +++ b/fixtures/packaging/rjs/dev/config.js @@ -6,6 +6,6 @@ module.exports = { paths: { inferno: '../../../../packages/inferno/dist/inferno', 'inferno-create-element': '../../../../packages/inferno-create-element/dist/inferno-create-element', - 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared', - }, + 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared' + } }; diff --git a/fixtures/packaging/rjs/dev/input.js b/fixtures/packaging/rjs/dev/input.js index d2d5b2f07..45732035b 100644 --- a/fixtures/packaging/rjs/dev/input.js +++ b/fixtures/packaging/rjs/dev/input.js @@ -1,6 +1,3 @@ require(['inferno', 'inferno-create-element'], function(Inferno, createElement) { - Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') - ); + Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); }); diff --git a/fixtures/packaging/rjs/prod/config.js b/fixtures/packaging/rjs/prod/config.js index bfaaf3bca..3c39599c2 100644 --- a/fixtures/packaging/rjs/prod/config.js +++ b/fixtures/packaging/rjs/prod/config.js @@ -6,6 +6,6 @@ module.exports = { paths: { inferno: '../../../../packages/inferno/dist/inferno.min', 'inferno-create-element': '../../../../packages/inferno-create-element/dist/inferno-create-element.min', - 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared.min', - }, + 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared.min' + } }; diff --git a/fixtures/packaging/rjs/prod/input.js b/fixtures/packaging/rjs/prod/input.js index d2d5b2f07..45732035b 100644 --- a/fixtures/packaging/rjs/prod/input.js +++ b/fixtures/packaging/rjs/prod/input.js @@ -1,6 +1,3 @@ require(['inferno', 'inferno-create-element'], function(Inferno, createElement) { - Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') - ); + Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); }); diff --git a/fixtures/packaging/systemjs-builder/dev/config.js b/fixtures/packaging/systemjs-builder/dev/config.js index 6808ba1fb..51df2cc2c 100644 --- a/fixtures/packaging/systemjs-builder/dev/config.js +++ b/fixtures/packaging/systemjs-builder/dev/config.js @@ -2,6 +2,6 @@ System.config({ paths: { inferno: '../../../../packages/inferno/dist/inferno.js', 'inferno-create-element': '../../../../packages/inferno-create-element/dist/inferno-create-element.js', - 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared.js', - }, + 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared.js' + } }); diff --git a/fixtures/packaging/systemjs-builder/dev/input.js b/fixtures/packaging/systemjs-builder/dev/input.js index 3e38a1136..3a31888b7 100644 --- a/fixtures/packaging/systemjs-builder/dev/input.js +++ b/fixtures/packaging/systemjs-builder/dev/input.js @@ -1,7 +1,4 @@ import Inferno from 'inferno'; import createElement from 'inferno-create-element'; -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/systemjs-builder/prod/config.js b/fixtures/packaging/systemjs-builder/prod/config.js index 9f40426b3..f300d5e76 100644 --- a/fixtures/packaging/systemjs-builder/prod/config.js +++ b/fixtures/packaging/systemjs-builder/prod/config.js @@ -2,6 +2,6 @@ System.config({ paths: { inferno: '../../../../packages/inferno/dist/inferno.min.js', 'inferno-create-element': '../../../../packages/inferno-create-element/dist/inferno-create-element.min.js', - 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared.js', - }, + 'inferno-shared': '../../../../packages/inferno-shared/dist/inferno-shared.js' + } }); diff --git a/fixtures/packaging/systemjs-builder/prod/input.js b/fixtures/packaging/systemjs-builder/prod/input.js index 3e38a1136..3a31888b7 100644 --- a/fixtures/packaging/systemjs-builder/prod/input.js +++ b/fixtures/packaging/systemjs-builder/prod/input.js @@ -1,7 +1,4 @@ import Inferno from 'inferno'; import createElement from 'inferno-create-element'; -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/webpack-alias/dev/config.js b/fixtures/packaging/webpack-alias/dev/config.js index 123bac5ec..1f5394271 100644 --- a/fixtures/packaging/webpack-alias/dev/config.js +++ b/fixtures/packaging/webpack-alias/dev/config.js @@ -3,13 +3,13 @@ var path = require('path'); module.exports = { entry: './input', output: { - filename: 'output.js', + filename: 'output.js' }, resolve: { alias: { - 'inferno': 'inferno/dist/inferno', - 'inferno-create-element': 'inferno-create-element/dist/inferno-create-element', + inferno: 'inferno/dist/inferno', + 'inferno-create-element': 'inferno-create-element/dist/inferno-create-element' }, - root: path.resolve('../../../../packages'), - }, + root: path.resolve('../../../../packages') + } }; diff --git a/fixtures/packaging/webpack-alias/dev/input.js b/fixtures/packaging/webpack-alias/dev/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/webpack-alias/dev/input.js +++ b/fixtures/packaging/webpack-alias/dev/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/webpack-alias/dev/package.json b/fixtures/packaging/webpack-alias/dev/package.json index 0e0d09e91..801d53e9b 100644 --- a/fixtures/packaging/webpack-alias/dev/package.json +++ b/fixtures/packaging/webpack-alias/dev/package.json @@ -1,5 +1,5 @@ { - "name": "webpack-dev-test", + "name": "webpack-alias-dev-test", "private": true, "dependencies": { "webpack": "^1.14.0" diff --git a/fixtures/packaging/webpack-alias/prod/config.js b/fixtures/packaging/webpack-alias/prod/config.js index e6eabd613..6829aff01 100644 --- a/fixtures/packaging/webpack-alias/prod/config.js +++ b/fixtures/packaging/webpack-alias/prod/config.js @@ -3,13 +3,13 @@ var path = require('path'); module.exports = { entry: './input', output: { - filename: 'output.js', + filename: 'output.js' }, resolve: { alias: { - 'inferno': 'inferno/dist/inferno.min', - 'inferno-create-element': 'inferno-create-element/dist/inferno-create-element.min', + inferno: 'inferno/dist/inferno.min', + 'inferno-create-element': 'inferno-create-element/dist/inferno-create-element.min' }, - root: path.resolve('../../../../packages'), - }, + root: path.resolve('../../../../packages') + } }; diff --git a/fixtures/packaging/webpack-alias/prod/input.js b/fixtures/packaging/webpack-alias/prod/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/webpack-alias/prod/input.js +++ b/fixtures/packaging/webpack-alias/prod/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/webpack-alias/prod/package.json b/fixtures/packaging/webpack-alias/prod/package.json index 5124e486f..401b5355a 100644 --- a/fixtures/packaging/webpack-alias/prod/package.json +++ b/fixtures/packaging/webpack-alias/prod/package.json @@ -1,5 +1,5 @@ { - "name": "webpack-prod-test", + "name": "webpack-alias-prod-test", "private": true, "dependencies": { "webpack": "^1.14.0" diff --git a/fixtures/packaging/webpack/dev/config.js b/fixtures/packaging/webpack/dev/config.js index 4fc7f2f71..a983c09d3 100644 --- a/fixtures/packaging/webpack/dev/config.js +++ b/fixtures/packaging/webpack/dev/config.js @@ -3,9 +3,9 @@ var path = require('path'); module.exports = { entry: './input', output: { - filename: 'output.js', + filename: 'output.js' }, resolve: { - root: path.resolve('../../../../packages/'), - }, + root: path.resolve('../../../../packages/') + } }; diff --git a/fixtures/packaging/webpack/dev/input.js b/fixtures/packaging/webpack/dev/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/webpack/dev/input.js +++ b/fixtures/packaging/webpack/dev/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/packaging/webpack/prod/config.js b/fixtures/packaging/webpack/prod/config.js index 14f3c7d86..a53157eed 100644 --- a/fixtures/packaging/webpack/prod/config.js +++ b/fixtures/packaging/webpack/prod/config.js @@ -4,16 +4,16 @@ var webpack = require('webpack'); module.exports = { entry: './input', output: { - filename: 'output.js', + filename: 'output.js' }, plugins: [ new webpack.DefinePlugin({ - 'process.env': { - 'NODE_ENV': JSON.stringify('production') - } + 'process.env': { + NODE_ENV: JSON.stringify('production') + } }) ], resolve: { - root: path.resolve('../../../../packages/'), + root: path.resolve('../../../../packages/') } }; diff --git a/fixtures/packaging/webpack/prod/input.js b/fixtures/packaging/webpack/prod/input.js index 29bd7203f..9737e3644 100644 --- a/fixtures/packaging/webpack/prod/input.js +++ b/fixtures/packaging/webpack/prod/input.js @@ -1,7 +1,4 @@ var Inferno = require('inferno'); var createElement = require('inferno-create-element'); -Inferno.render( - createElement('h1', null, 'Hello World!'), - document.getElementById('container') -); +Inferno.render(createElement('h1', null, 'Hello World!'), document.getElementById('container')); diff --git a/fixtures/react/jest.config.js b/fixtures/react/jest.config.js new file mode 100644 index 000000000..9ceed6fb3 --- /dev/null +++ b/fixtures/react/jest.config.js @@ -0,0 +1,15 @@ +const { join } = require('path'); + +const baseConfig = require('../../jest.config'); + +module.exports = Object.assign({}, baseConfig, { + moduleNameMapper: Object.assign({}, baseConfig.moduleNameMapper, { + '^inferno-component': '/fixtures/react-suite/packages/inferno-component', + '^inferno-create-class': '/fixtures/react-suite/packages/inferno-create-class', + '^inferno-create-element': '/fixtures/react-suite/packages/inferno-create-element', + '^inferno-vnode-flags': '/fixtures/react-suite/packages/inferno-vnode-flags', + '^inferno$': '/fixtures/react-suite/packages/inferno', + }), + rootDir: join(__dirname, '../../'), + testPathIgnorePatterns: ['/node_modules/', '/inferno-server/'], +}); diff --git a/fixtures/react/package.json b/fixtures/react/package.json new file mode 100644 index 000000000..06ce7b5e8 --- /dev/null +++ b/fixtures/react/package.json @@ -0,0 +1,15 @@ +{ + "name": "inferno-fixture-react", + "private": true, + "version": "4.0.0", + "scripts": { + "pretest": "npm install", + "test": "jest" + }, + "devDependencies": { + "@types/react": "^15.0.25", + "@types/react-dom": "^15.5.0", + "react": "^15.5.4", + "react-dom": "^15.5.4" + } +} diff --git a/fixtures/react/packages/inferno-component.js b/fixtures/react/packages/inferno-component.js new file mode 100644 index 000000000..c0625cff3 --- /dev/null +++ b/fixtures/react/packages/inferno-component.js @@ -0,0 +1,3 @@ +import * as React from 'react'; + +export default React.Component; diff --git a/fixtures/react/packages/inferno-create-class.js b/fixtures/react/packages/inferno-create-class.js new file mode 100644 index 000000000..06b87c8ba --- /dev/null +++ b/fixtures/react/packages/inferno-create-class.js @@ -0,0 +1,3 @@ +import * as React from 'react'; + +export default React.createClass; diff --git a/fixtures/react/packages/inferno-create-element.js b/fixtures/react/packages/inferno-create-element.js new file mode 100644 index 000000000..d1503ced5 --- /dev/null +++ b/fixtures/react/packages/inferno-create-element.js @@ -0,0 +1,3 @@ +import * as React from 'react'; + +export default React.createElement; diff --git a/fixtures/react/packages/inferno-vnode-flags.js b/fixtures/react/packages/inferno-vnode-flags.js new file mode 100644 index 000000000..2c232d7b4 --- /dev/null +++ b/fixtures/react/packages/inferno-vnode-flags.js @@ -0,0 +1,24 @@ +const enum VNodeFlags { + Text = 1, + HtmlElement = 1 << 1, + + ComponentClass = 1 << 2, + ComponentFunction = 1 << 3, + ComponentUnknown = 1 << 4, + + HasKeyedChildren = 1 << 5, + HasNonKeyedChildren = 1 << 6, + + SvgElement = 1 << 7, + MediaElement = 1 << 8, + InputElement = 1 << 9, + TextareaElement = 1 << 10, + SelectElement = 1 << 11, + Void = 1 << 12, + + FormElement = InputElement | TextareaElement | SelectElement, + Element = HtmlElement | SvgElement | MediaElement | InputElement | TextareaElement | SelectElement, + Component = ComponentFunction | ComponentClass | ComponentUnknown +} + +export default VNodeFlags; diff --git a/fixtures/react/packages/inferno.js b/fixtures/react/packages/inferno.js new file mode 100644 index 000000000..3c80df64e --- /dev/null +++ b/fixtures/react/packages/inferno.js @@ -0,0 +1,20 @@ +import { cloneElement, createElement } from 'react'; +export { findDOMNode, render } from 'react-dom'; + +export function createVNode(flags, type, className?, children?, props?, key?, ref?, noNormalise?) { + return createElement( + type, + { + className, + ...props + }, + children + ); +} + +export function cloneVNode(vNodeToClone, props?, ..._children) { + return cloneElement(vNodeToClone, props, ..._children); +} + +export const EMPTY_OBJ = {}; +export const NO_OP = () => ({}); diff --git a/fixtures/react/tsconfig.json b/fixtures/react/tsconfig.json new file mode 100644 index 000000000..1864d58c1 --- /dev/null +++ b/fixtures/react/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/flip.js b/flip.js deleted file mode 100644 index d1caeab0a..000000000 --- a/flip.js +++ /dev/null @@ -1,537 +0,0 @@ -const pkg = require('./package.json'); -const { - fs, - inspect, - read, - write, - envrmts, - program, - inquirer, - FlipHubCli, - argv -} = require('fliphub-cli-inferno'); - -const flip = new FlipHubCli(__dirname, '*'); - -function runner(packages, opts) { - console.log('-- using nameless command option, is not implemented yet --'); -} - -// @TODO: https://github.com/tj/commander.js/blob/master/examples/env#L5 -program - .version(pkg.version) - .command('[packages]') - .option('-c, --clean', 'runs clean') - .option('-t, --test', 'tests') - .option('-n, --bench', 'benchmark') - .option('-p, --production', 'use production env') - .option('-d, --development', 'use development env') - .option('-l, --lint', 'do linting') - .option('-s, --server', 'use server') - .option('-b, --build', 'build packages') - .option('-o, --output', 'outputs only the command to run with npm or lerna @TODO') - .action(runner); - - -// @TODO: extract flags elsewhere? -program - .command('clean [packages]') - .option('-p, --purge', 'removes node modules') - .option('-r, --reinstall', 'reinstall') - .option('-d, --dist', 'remove coverage/ and dist files (default)') - .option('-l, --lerna', 'use lerna clean') - .action(function (packages, options) { - flip.runScriptFor('rimraf', 'coverage/ packages/*/dist*/'); - if (options.lerna) { - flip.runScriptFor('lerna', 'clean'); - } - if (options.purge) { - flip.runScriptFor('rimraf', 'node_modules'); - } - if (options.reinstall) { - flip.execSync('npm i'); - } -}); - -program -.command('bench [packages]') -.option('-l, --log', 'logLevel') -.option('-a, --after', 'after tests') -.option('-b, --before', 'before tests') -.option('-b, --browser', 'build for browser') -.option('-p, --production', 'build for prod') -.option('-d, --development', 'build for dev') -.action(function (packages, options) { - const glob = flip.envScope('BENCH_FILTER', packages) || '*'; - const globScoped = flip.globScope(packages) || '*'; - const BENCH_FILTER = `${glob}`; - return flip.execSync(' npm run test:bench ' + globScoped); -}); - - -function handleTestWrapped(packages, options, flaggedWithEnv) { - const { karma, mocha, chrome, ie, ff, quick, filter, server, coverage, nyc } = options; - let browsers = options.browsers; - const hasBrowsers = (ff || chrome || ie); - if (!browsers && hasBrowsers) { - browsers = ''; - if (ff) {browsers += 'Firefox,';} - if (ie) {browsers += 'IE,';} - if (chrome) {browsers += 'Chrome,';} - browsers = browsers.slice(0, browsers.length - 1); - } - const globScoped = flip.globScope(packages) || '*'; - const envScope = flip.envScope('PKG_FILTER', packages); - let flagged = flaggedWithEnv + globScoped; - if (browsers) { - browsers.split(',').forEach(browser => { - // also could do flip.execSync(flagged + 'npm run karma:' + browser.toLowerCase()) - flip.runScriptForBin('karma', 'start test/karma/karma.unit.conf.js --browsers=' + browsers + ' ' + flagged); - }); - } - else if (!karma && !quick && !server && !coverage) { - flip.execSync(' npm run karma:chrome ' + flagged); - flip.execSync(' npm run karma:firefox ' + flagged); - flip.execSync(' npm run karma:ie ' + flagged); - flip.execSync(' npm run test:server ' + flagged); - } - else if (karma) { - flip.execSync(' npm run karma:chrome ' + flagged); - flip.execSync(' npm run karma:ff ' + flagged); - flip.execSync(' npm run karma:ie ' + flagged); - } - if (quick) { - flip.execSync(' npm run test:quick ' + flagged); - } - if (server) { - if (nyc) { - flip.execSync(' npm run test:server '); - // flip.runNodeForModule('nyc', ' mocha ', { env: flaggedWithEnv }); - } else { - // is test:server:quick - flip.execSync(' npm run test:quick '); - } - } else if (mocha) { - // @TODO - // flip.runNodeForModule('mocha', ' ', { env: flaggedWithEnv }); - } - if (coverage) { - flip.execSync(' npm run test:publish ' + flagged); - } -} - -const mochaOptsBackupFile = './.fliphub/mocha.opts'; -const mochaOptsFile = './test/mocha.opts'; -const infernoOptionsFile = './packages/inferno/src/core/options.ts'; -let recyclingEnabled = false; - -// wrap in try catch to be safe for recycling -function handleTest(packages, options, flaggedWithEnv) { - if (recyclingEnabled) { - try { - const result = handleTestWrapped(packages, options, flaggedWithEnv); - return result; - } catch (e) { - console.log('failed with recycling:'); - console.log('\n\n\n ------ '); - console.log(e); - console.log('\n\n\n ------ '); - console.log(inspect(e)); - } - } else { - return handleTestWrapped(packages, options, flaggedWithEnv); - } -} - -function enableRecycling(state) { - recyclingEnabled = state; - let ogInfernoOptions = infernoOptions = read(infernoOptionsFile); - infernoOptions = infernoOptions - .replace('export default ', '') - .replace(/[{};]/gmi, '') - .split(',') - .map(line => { - if (line.includes('recyclingEnabled')) { - return '\n\trecyclingEnabled: ' + state + ''; - } - return line; -}); - - // back to a string, replace the last extra empty line - let backToString = 'export default {' + infernoOptions.join(',') + '};'; - backToString = backToString.replace(/(\n\n)/gmi, ''); - backToString = backToString.replace(/(\n\}\;$)/, '\n};'); - backToString = backToString.replace('null};', 'null\n};'); - backToString += '\n'; - - // if it is the same, don't write it - if (backToString.length === ogInfernoOptions.length) { - console.log('recycling unchanged'); - return; - } - console.log(backToString); - - write(infernoOptionsFile, backToString); -} - -function filterMochaOpts(filter) { - let ogMochaOpts = mochaOpts = read(mochaOptsFile); - - // back it up if we haven't before - if (!fs.existsSync(mochaOptsBackupFile)) { - write(mochaOptsBackupFile, ogMochaOpts); - } - - // pop off the last one, change it to our filer - mochaOpts = mochaOpts.split('\n'); - let last = mochaOpts.length - 1; - let mochaFilter = mochaOpts[last]; - if (mochaFilter === '') { - last -= 1; - } - - let globScoped = '*'; - if (filter !== '*') { - globScoped = flip.filterer.globFlag('inferno', filter) || '*'; - } - - mochaFilter = `packages/${globScoped}/__tests__/**/*.js*`; - mochaOpts[last] = mochaFilter; - const backToString = mochaOpts.join('\n') + '\n'; - if (globScoped !== '*') { - console.log('updating mochaOptsLog'); - write(mochaOptsFile, backToString); - } else { - write(mochaOptsFile, read(mochaOptsBackupFile)); - } -} - -program - .command('test [packages]') - .option('-a, --all', 'all tests') - .option('-b, --browsers', 'browser') - .option('-C, --chrome', 'karma.Chrome') - .option('-I, --ie', 'karma.IE') - .option('-F, --ff', 'karma.firefox') - .option('-k, --karma', 'karma') - .option('-m, --mocha', 'mocha') - .option('-q, --quick', 'test quick') - .option('-s, --server', 'use the server tests') - .option('-c, --coverage, --publish, --coveralls', 'test the coverage for publish with coveralls') - .option('-n, --nyc', 'use nyc to check code coverage') - .option('-p, --production', 'for prod env') - .option('-d, --development', 'for dev env') - .option('-r, --browser', 'browser env') - .option('-y, --recycling', 'turns recycling on (default recycling is off)') - .option('-o, --only', 'grep to run only tests matching this filter / grep') - .option('-f, --filter', 'filter / packages to use (can be used when you grep)') - .option('-g, --og', 'restore original mocha file') - .action(function (packages, options) { - let { production, development, browser, server } = options; - if (!production && !development) { - production = true; - } - - if (options.recycling) { - enableRecycling(true); - } else { - enableRecycling(false); - } - let flagged = ''; - if (argv.only) { - let only = argv.only; - only = only.split('-').join(' '); - flagged += flip.defineEnv('TEST_GREP_FILTER', JSON.stringify(only)); - } - if (production && !server) { - flagged += flip.defineEnv('NODE_ENV', 'production') || ''; - handleTest(packages, options, flagged); - } - if (development && !server) { - flagged += flip.defineEnv('NODE_ENV', 'development') || ''; - handleTest(packages, options, flagged); - } - if (browser) { - flagged += flip.defineEnv('NODE_ENV', 'browser') || ''; - handleTest(packages, options, flagged); - } - if (server) { - filterMochaOpts(packages); - try { - handleTest(packages, options, flagged); - filterMochaOpts('*'); - } catch (e) { - filterMochaOpts('*'); - } - } -}); - -program -.command('browser [packages]') -.action(function (packages, options) { - const globScoped = flip.globScope(packages) || '*'; - const globFlag = flip.filterer.globFlag('inferno', packages) || '*'; - const flagged = flip.defineEnv('DEVSERVER_FILTER', globFlag); - return flip.execSync(' npm run browser '); - -}); - -program -.command('lint [packages]') -.option('-j, --js', 'lint js') -.option('-t, --ts', 'lint ts') -.option('-p, --production', 'use production env (should not need to be here)') -.option('-d, --development', 'use development env (should not need to be here)') -.option('-b, --browser', 'build for browse (should not need to be herer') -.action(function (packages, options) { - if (options.js) {flip.execSync('npm run lint:js');} - if (options.ts) {flip.execSync('npm run lint:ts');} - // flip.execSync('npm run lint:js'); -}); - -program - .command('build [packages]') - .option('-n, --nobuild', 'no build') - .option('-b, --browser', 'build for browser') - .option('-p, --production', 'build for prod') - .option('-d, --development', 'build for dev') - .option('-l, --log', 'log output') - .option('-s, --silent', 'no log output @TODO') - .option('-r, --rollup', 'rollup') - .option('-f, --fusebox', 'fusebox') - .option('-t, --ts', 'typescript') - .action(function (name, options) { - const { scope, log } = options; - console.log({ scope, log, name }); - - if (options.fusebox) { - return infernoFuse(name); - } - - try { - flip.lerna.execWith({ - scope: name || scope, - bin: 'tsc', - log: log || 'info' - }); - - flip.lerna.execFrom({ - bin: 'rollup', - envs: [ 'production', 'browser', 'development' ], - log: log || 'info', - options - }); - } catch (e) { - console.log(`could not build - - if you are trying to build only a couple packages - without first building inferno, - it will not work. Running the full build now.`); - flip.execSync(' npm run build '); - } -}); - -function checkboxPresets(name, packages, options) { - const choices = { - view: [ - new inquirer.Separator(' ==== Testing ==== '), - new inquirer.Separator(' => Server (server with jsdom)'), - // ... - { - name: 'chrome', - value: 'test.browser.chrome', - checked: true - }, - { - name: 'firefox', - value: 'test.browser.ff', - checked: true - }, - { - name: 'ie', - value: 'test.browser.ie', - checked: false - }, - { - name: 'mocha (server)', - value: 'test.mocha', - checked: true - }, - // { - // name: 'karma (runs all browsers)', - // value: 'test.karma', - // checked: false, - // }, - new inquirer.Separator(' => Browser '), - { - name: 'dev server (webpack dev server)', - value: 'test.browser.devserver', - checked: false - }, - - new inquirer.Separator(' = Envs = '), - { - name: 'production', - value: 'env.production', - checked: true - }, - { - name: 'development', - value: 'env.development', - checked: true - }, - - // { - // name: 'karma (browsers with jsdom)', - // value: 'karma', - // checked: true, - // }, - new inquirer.Separator(' = Bench = '), - // @TODO: make this toggle automatically? - { - name: 'before tests', - value: 'bench.before', - checked: false - // disabled: true, - }, - { - name: 'after tests', - value: 'bench.after', - checked: true - }, - - // @TODO: how best to add building true-false and also have env opts? - // before each test? needs thought... - new inquirer.Separator(' = Build (before tests) = '), - { - name: 'production', - value: 'build.production', - checked: false - }, - { - name: 'development', - value: 'build.development', - checked: false - }, - { - name: 'browser', - value: 'build.browser', - checked: false - }, - new inquirer.Separator(' = Cleaning (before tests) = '), - { - name: 'dists (clean built before tests)', - value: 'clean.dist', - checked: false - }, - { - name: 'node_modules (warning -- careful)', - value: 'clean.purge', - checked: false - }, - { - name: 'uninstall (all packages node_modules)', - value: 'clean.uninstall', - checked: false - }, - { - name: 'reinstall', - value: 'clean.reinstall', - checked: false, - - // @TODO: - when: (answers) => { - answers['clean.uninstall'] !== false; - } - }, - - new inquirer.Separator(' = Lint = '), - // @TODO: make this toggle automatically? - { - name: 'js', - value: 'lint.js', - checked: false - }, - { - name: 'ts', - value: 'lint.ts', - checked: false - } - ] - }; - - const steps = [ - { - type: 'checkbox', - name: 'presets', - message: 'options:', - choices: choices.view, - default: false - } - ]; - inquirer.prompt(steps).then(answers => { - answers.name = name; - answers.packages = packages; - flip.presets.add(answers, [ 'env', 'clean', 'build', 'test', 'bench' ]); - }); -} - -function interactivePresets(name, options) {} - -program - .command('make-preset [name] [packages]') - .option('-c, --checkbox', '(default) use checkbox mode') - .option('-i, --interactive', 'use interactive mode') - .action(function (name, packages, opts) { - if (opts.interactive) { - return interactivePresets(name, packages, opts); - } - checkboxPresets(name, packages, opts); -}); - - -function infernoFuse(name) { - const { FuseBox, UglifyJSPlugin, ReplacePlugin } = require('fuse-box'); - const isProd = process.argv.includes('--production'); - const fuse = FuseBox.init({ - src: 'packages', - outFile: 'inferno.fused.js', - plugins: [ - ReplacePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), - isProd && UglifyJSPlugin() - ], - rollup: { - bundle: { - moduleName: 'Inferno' - }, - entry: 'packages/inferno/src/index.js' - }, - debug: true, - alias: { // this can be automatically assigned - 'inferno-compat': '~/packages/inferno-compat', - 'inferno-component': '~/packages/inferno-component/dist-es', - 'inferno-create-class': '~/packages/inferno-create-class/dist-es', - 'inferno-create-element': '~/packages/inferno-create-element/dist-es', - 'inferno-shared': '~/packages/inferno-shared/dist-es', - 'inferno-hyperscript': '~/packages/inferno-hyperscript/dist-es', - 'inferno-mobx': '~/packages/inferno-mobx/dist-es', - 'inferno-redux': '~/packages/inferno-redux/dist-es', - 'inferno-router': '~/packages/inferno-router/dist-es', - 'inferno-server': '~/packages/inferno-server/dist-es', - inferno: '~/packages/inferno/dist-es' - } - }); - - fuse.bundle('packages/inferno/src/index.ts'); -} - -process.argv = process.argv.map(argv => { - if (argv && argv.includes && argv.includes('only')) { - return '--only'; - } - return argv; -}); - -program.parse(process.argv); -if (!program.args.length) { - program.help(); -} diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 000000000..281a3fe48 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,60 @@ +const fs = require('fs'); +const path = require('path'); +const read = require('fs-readdir-recursive'); + +module.exports = { + collectCoverageFrom: ['packages/*/src/**/*.ts', '!**/*.ts.js', '!**/inferno-utils/**/*', '!**/inferno-devtools/**/*' ], + coverageDirectory: 'coverage', + coverageReporters: ['html', 'lcov', 'text'], + coverageThreshold: { + global: { + statements: 80, + branches: 75, + functions: 85, + lines: 85 + } + }, + globals: { + usingJSDOM: true, + usingJest: true + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], + moduleNameMapper: { + '^inferno$': '/packages/inferno/src', + '^inferno-compat': '/packages/inferno-compat/src', + '^inferno-component': '/packages/inferno-component/src', + '^inferno-create-class': '/packages/inferno-create-class/src', + '^inferno-create-element': '/packages/inferno-create-element/src', + '^inferno-devtools': '/packages/inferno-devtools/src', + '^inferno-hyperscript': '/packages/inferno-hyperscript/src', + '^inferno-mobx': '/packages/inferno-mobx/src', + '^inferno-redux': '/packages/inferno-redux/src', + '^inferno-router': '/packages/inferno-router/src', + '^inferno-router/utils': '/packages/inferno-router/src/utils', + '^inferno-server': '/packages/inferno-server/src', + '^inferno-shared': '/packages/inferno-shared/src', + '^inferno-test-utils': '/packages/inferno-test-utils/src', + '^inferno-utils': '/packages/inferno-utils/src', + '^inferno-vnode-flags': '/packages/inferno-vnode-flags/src', + '^inferno/core/VNodes': '/packages/inferno/src/core/VNodes', + }, + projects: [ + '/packages/inferno', + '/packages/inferno-component', + '/packages/inferno-create-class', + '/packages/inferno-create-element', + '/packages/inferno-shared', + '/packages/inferno-vnode-flags', + ], + setupFiles: ['/scripts/test/requestAnimationFrame.ts' ], + testMatch: [ + '/packages/*/__tests__/**/*spec.js?(x)', + '/packages/*/__tests__/**/*spec.ts?(x)', + '/packages/*/__tests__/**/*spec.browser.js?(x)', + '/packages/*/__tests__/**/*spec.browser.ts?(x)', + ], + transform: { + '^.+\\.jsx?$': 'babel-jest', + '^.+\\.tsx?$': '/node_modules/ts-jest/preprocessor.js', + }, +}; diff --git a/lerna.json b/lerna.json index ebf91617f..b97a76b99 100644 --- a/lerna.json +++ b/lerna.json @@ -1,17 +1,12 @@ { "lerna": "2.0.0-rc.5", + "command": { + "init": { + "exact": true + } + }, "packages": [ "packages/*" ], - "version": "3.4.3", - "changelog": { - "repo": "infernojs/inferno", - "labels": { - "greenkeeper": ":nail_care: Dependency upgrades", - "maintenance & build tools": ":nail_care: Maintenance", - "bug": ":bug: Bugs", - "enhancement": ":rocket: Enhancements" - }, - "cacheDir": ".changelog" - } + "version": "3.4.3" } diff --git a/package.json b/package.json index 5a2f9743e..5f363d381 100644 --- a/package.json +++ b/package.json @@ -10,194 +10,96 @@ "bugs": { "url": "https://github.com/infernojs/inferno/issues" }, + "homepage": "https://github.com/infernojs/inferno#readme", + "repository": { + "type": "git", + "url": "git+ssh://git@github.com/infernojs/inferno.git" + }, + "pre-commit": { + "silent": true, + "run": [ + "test" + ] + }, + "scripts": { + "clean": "lerna exec -- rimraf dist", + "coveralls": "coveralls < coverage/lcov.info || true", + "prebuild": "npm run clean", + "postbuild": "rimraf build", + "build": "npm-run-all -l --parallel build:**", + "prebuild:typings": "rimraf build", + "build:typings": "tsc && lerna exec -- node ../../scripts/typings/build.js", + "build:es": "npm run rollup -- --format=es --optimize=false --name=index.es --uglify=false", + "build:node": "npm run rollup -- --format=cjs --replace=false --name=index --uglify=false", + "build:umd:dev": "npm run rollup --", + "build:umd:prod": "npm run rollup -- --env=production", + "changelog": "lerna-changelog", + "predocs": "rimraf docs", + "docs": "typedoc", + "examples": "npm run --prefix examples start", + "lint": "tslint -p tsconfig.json --fix --type-check", + "prepublishOnly": "npm run build", + "postinstall": "lerna bootstrap", + "rollup": "lerna exec -- node ../../scripts/rollup/build.js", + "test": "jest", + "test:coverage": "jest --coverage", + "test:browser": "npm run --prefix fixtures/browser test", + "test:react": "npm run --prefix fixtures/react test", + "test:package": "node fixtures/packaging/build-all.js", + "uninstall": "lerna clean && rm -rf node_modules" + }, "devDependencies": { - "@types/benchmark": "^1", - "@types/chai": "^4.0.0", "@types/history": "^4.5.2", - "@types/mocha": "^2.2.41", - "@types/node": "^7.0.29", + "@types/jest": "^19.2.3", + "@types/node": "^7.0.28", "babel-cli": "^6.24.1", - "babel-core": "^6.25.0", - "babel-eslint": "^7.2.3", + "babel-core": "^6.24.1", + "babel-jest": "^20.0.3", "babel-loader": "^7.0.0", "babel-plugin-inferno": "^3.2.0", - "babel-plugin-module-resolver": "^2.7.1", + "babel-plugin-module-resolver": "^2.7.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-object-rest-spread": "^6.13.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", - "babel-plugin-transform-inline-environment-variables": "^6.8.0", "babel-plugin-transform-object-assign": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.23.0", - "babel-plugin-transform-undefined-to-void": "^6.8.2", + "babel-plugin-transform-undefined-to-void": "^6.8.0", "babel-polyfill": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", - "babel-register": "^6.24.1", - "boxen": "^1.1.0", - "buble": "^0.15.2", - "chai": "^4.0.2", - "chalk": "^1.1.3", + "cli-table": "^0.3.1", "concat-stream-es6": "0.0.1", - "convert-source-map": "^1.5.0", "coveralls": "^2.13.1", - "cross-env": "^5.0.1", - "es5-shim": "^4.5.9", - "es6-shim": "^0.35.3", - "eslint": "^3.19.0", - "eslint-plugin-babel": "^4.1.1", - "fliphub-cli-inferno": "^0.1.4", - "fs-extra": "^3.0.1", - "glob": "^7.1.2", - "history": "4.6.1", - "jsdom": "11.0.0", - "karma": "^1.7.0", - "karma-benchmark": "^0.7.1", - "karma-benchmark-reporter": "^0.1.1", - "karma-chai": "^0.1.0", - "karma-chrome-launcher": "^2.1.1", - "karma-failed-reporter": "0.0.3", - "karma-firefox-launcher": "^1.0.1", - "karma-ie-launcher": "^1.0.0", - "karma-json-result-reporter": "^1.0.0", - "karma-mocha": "^1.3.0", - "karma-mocha-reporter": "^2.2.3", - "karma-safari-launcher": "^1.0.0", - "karma-sauce-launcher": "^1.1.0", - "karma-webpack": "2.0.3", + "dts-bundle": "^0.7.2", + "history": "^4.6.1", + "jest": "^20.0.4", "lerna": "^2.0.0-rc.5", - "lerna-changelog": "^0.5.0", - "lodash": "^4.17.4", - "merge-source-map": "^1.0.3", - "mkdirp": "^0.5.1", - "mobx": "^3.1.14", - "mocha": "^3.4.2", - "mocha-lcov-reporter": "^1.3.0", + "minimist": "^1.2.0", "most": "^1.4.1", "most-subject": "^5.3.0", "npm-run-all": "^4.0.2", - "nyc": "^11.0.2", - "object.entries": "^1.0.4", "optimize-js": "^1.0.3", "pre-commit": "^1.2.2", - "progress": "^2.0.0", - "redux": "^3.6.0", "rimraf": "^2.6.1", "rollup": "0.42.0", "rollup-plugin-alias": "^1.3.1", - "rollup-plugin-babel": "^2.7.1", "rollup-plugin-buble": "^0.15.0", "rollup-plugin-commonjs": "^8.0.2", - "rollup-plugin-filesize": "^1.3.2", + "rollup-plugin-node-builtins": "^2.1.2", + "rollup-plugin-node-globals": "^1.1.0", "rollup-plugin-node-resolve": "^3.0.0", "rollup-plugin-replace": "^1.1.1", + "rollup-plugin-typescript2": "^0.4.2", "rollup-plugin-uglify": "^2.0.1", - "sinon": "2.3.3", - "ts-loader": "^2.1.0", - "ts-node": "^3.0.6", - "tslint": "^5.4.3", + "sinon": "^2.3.2", + "ts-jest": "^20.0.5", + "tslint": "^5.2.0", + "typedoc": "^0.7.1", + "typedoc-plugin-external-module-name": "^1.0.9", "typescript": "^2.3.4", - "typescript-eslint-parser": "^3.0.0", "union-type-es": "^0.1.0", - "webpack": "^2.6.1", - "webpack-dev-server": "^2.4.5" - }, - "files": [ - "src" - ], - "homepage": "https://github.com/infernojs/inferno#readme", - "keywords": [ - "babel", - "react", - "inferno", - "framework", - "interfaces", - "user interfaces", - "html", - "renderToString", - "server", - "dom", - "browser", - "rollup" - ], - "nyc": { - "all": true, - "check-coverage": true, - "lines": 85, - "statements": 85, - "functions": 85, - "branches": 70, - "sourceMap": false, - "include": [ - "packages/*/dist-es/**/*.js" - ], - "exclude": [ - "packages/inferno-vnode-flags", - "packages/inferno-compat/dist-es/index.js", - "packages/inferno-devtools", - "packages/**/*.ts", - "examples", - "benchmarks", - "typings" - ], - "extension": [ - ".js" - ], - "reporter": [ - "lcov", - "html", - "text" - ], - "require": [ - "babel-register" - ] - }, - "repository": { - "type": "git", - "url": "git+ssh://git@github.com/infernojs/inferno.git" - }, - "scripts": { - "help": "node flip --help", - "browser": "webpack-dev-server --config config/webpack.dev.conf.js", - "tdd": "run-p build:watch browser", - "build:packages": "npm run build:packages-cjs && npm run build:packages-es", - "build:packages-cjs": "lerna exec -- tsc --module commonjs --outDir dist --target es5", - "build:packages-es": "lerna exec -- tsc", - "build:watch": "lerna exec --parallel --no-sort -- tsc --watch", - "build:dev": "lerna exec -- node ../../bin/rollup", - "build:prod": "cross-env NODE_ENV=production lerna exec -- node ../../bin/rollup", - "build": "npm run clean && npm run build:packages && npm run build:dev && npm run build:prod", - "clean": "rimraf coverage/ packages/*/dist*/", - "karma:all": "npm run karma:firefox && npm run karma:chrome && npm run karma:ie", - "karma:chrome": "karma start test/karma/karma.unit.conf.js --browsers=Chrome", - "karma:firefox": "karma start test/karma/karma.unit.conf.js --browsers=Firefox", - "karma:ie": "karma start test/karma/karma.unit.conf.js --browsers=IE", - "lint:js": "eslint config examples src packages/*/__tests__/*", - "lint:ts": "tslint packages/*/src/*.ts packages/*/src/**/*.ts", - "lint:jts": "eslint packages/inferno/src/*.ts packages/inferno-compat/src/*.ts packages/inferno-create-element/src/*.ts packages/inferno-hyperscript/src/*.ts packages/inferno-router/src/*.ts packages/inferno-shared/src/*.ts packages/inferno-vnode-flags/src/*.ts packages/inferno-server/src/*.ts packages/inferno-mobx/src/*.ts --config test/lint/letter-only-props.js --no-eslintrc", - "lint": "npm run lint:ts && npm run lint:js", - "packages:purge": "rimraf node_modules", - "packages:reinstall": "npm run packages:purge && npm install", - "postinstall": "lerna bootstrap && lerna exec --no-sort --concurrency 1 -- node ../../bin/link", - "prepublish": "npm run build", - "pretest:bench": "karma start test/karma/karma.bench.conf.js --log-level debug", - "test:bench": "node test/karma/bench.js", - "test:browser": "karma start test/karma/karma.unit.conf.js", - "test:publish": "coveralls < coverage/lcov.info && rimraf coverage", - "test:package": "node fixtures/packaging/build-all.js", - "test:quick": "cross-env mocha", - "tsc:dev": "lerna exec --no-sort --concurrency `ls -d packages/* | wc -l` -- tsc -w", - "test:server": "cross-env nyc mocha", - "test": "npm run lint && npm run build && npm run test:browser && npm run test:server", - "uninstall": "rm -rf node_modules && lerna exec -- rm -rf node_modules", - "cross-env": "cross-env", - "lerna": "lerna", - "karma": "karma", - "mocha": "mocha" - }, - "pre-commit": [ - "lint", - "test" - ] + "webpack": "^2.6.1" + } } diff --git a/packages/inferno-compat/__tests__/compat_children.spec.jsx b/packages/inferno-compat/__tests__/compat_children.spec.jsx index 6dee1f856..4b92fd285 100644 --- a/packages/inferno-compat/__tests__/compat_children.spec.jsx +++ b/packages/inferno-compat/__tests__/compat_children.spec.jsx @@ -1,6 +1,6 @@ import { render } from 'inferno'; -import { innerHTML } from 'inferno/test/utils'; -import { createElement, isValidElement } from '../dist-es'; +import { innerHTML } from 'inferno-utils'; +import { createElement, isValidElement } from 'inferno-compat'; describe('Compat Children', () => { let container; @@ -22,86 +22,86 @@ describe('Compat Children', () => { it('should create a VNode with the correct className', function () { const element = createElement('div', { className: 'foo', test: 'hi' }); - expect(element.className).to.equal('foo'); - expect(element.props).to.eql({ test: 'hi', className: 'foo' }); + expect(element.className).toBe('foo'); + expect(element.props).toEqual({ test: 'hi', className: 'foo' }); }); it('Should render element with a text string', function () { const element = createElement('div', null, 'body text'); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
body text
')); + expect(container.innerHTML).toBe(innerHTML('
body text
')); }); it('Should render element with an array of one text string', function () { const element = createElement('div', null, ['body text']); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
body text
')); + expect(container.innerHTML).toBe(innerHTML('
body text
')); }); it('Should render element with an array of two text strings', function () { const element = createElement('div', null, [ 'first text', 'second text' ]); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
first textsecond text
')); + expect(container.innerHTML).toBe(innerHTML('
first textsecond text
')); }); it('Should render element with child element', function () { const child = createElement('span', null, 'child body text'); - expect(isValidElement(child)).to.be.true; + expect(isValidElement(child)).toBe(true); const element = createElement('div', null, child); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
child body text
')); + expect(container.innerHTML).toBe(innerHTML('
child body text
')); }); it('Should render element with an array of one child element', function () { const child = createElement('span', null, 'child body text'); - expect(isValidElement(child)).to.be.true; + expect(isValidElement(child)).toBe(true); const element = createElement('div', null, [child]); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
child body text
')); + expect(container.innerHTML).toBe(innerHTML('
child body text
')); }); it('Should render element with an array of two child elements', function () { const first_child = createElement('span', null, 'first text'); - expect(isValidElement(first_child)).to.be.true; + expect(isValidElement(first_child)).toBe(true); const second_child = createElement('span', null, 'second text'); - expect(isValidElement(second_child)).to.be.true; + expect(isValidElement(second_child)).toBe(true); const element = createElement('div', null, [ first_child, second_child ]); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
first textsecond text
')); + expect(container.innerHTML).toBe(innerHTML('
first textsecond text
')); }); it('Should render element with an array of a string and a child element', function () { const second_child = createElement('span', null, 'second text'); - expect(isValidElement(second_child)).to.be.true; + expect(isValidElement(second_child)).toBe(true); const element = createElement('div', null, [ 'first text', second_child ]); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
first textsecond text
')); + expect(container.innerHTML).toBe(innerHTML('
first textsecond text
')); }); function arrayAsBasicIterator(array) { @@ -124,37 +124,39 @@ describe('Compat Children', () => { it('Should render element with an iterable of one text string', function () { const iterable = arrayAsBasicIterator(['generated body text']); const element = createElement('div', null, iterable); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
generated body text
')); + expect(container.innerHTML).toBe(innerHTML('
generated body text
')); }); it('Should render element with an iterable of one child element', function () { const child = createElement('span', null, 'generated child body text'); - expect(isValidElement(child)).to.be.true; + expect(isValidElement(child)).toBe(true); const iterable = arrayAsBasicIterator([child]); const element = createElement('div', null, iterable); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
generated child body text
')); + expect(container.innerHTML).toBe(innerHTML('
generated child body text
')); }); it('Should render element with an iterable of a child element and a string', function () { const child = createElement('span', null, 'generated child body text'); - expect(isValidElement(child)).to.be.true; + expect(isValidElement(child)).toBe(true); const iterable = arrayAsBasicIterator([ child, 'generated body text' ]); const element = createElement('div', null, iterable); - expect(isValidElement(element)).to.be.true; + expect(isValidElement(element)).toBe(true); renderCompatTestElement(element); - expect(container.innerHTML).to.equal(innerHTML('
generated child body textgenerated body text
')); + expect(container.innerHTML).toBe( + innerHTML('
generated child body textgenerated body text
') + ); }); }); diff --git a/packages/inferno-compat/__tests__/isValidElement.spec.jsx b/packages/inferno-compat/__tests__/isValidElement.spec.jsx index cd46e79e9..dbddb4a69 100644 --- a/packages/inferno-compat/__tests__/isValidElement.spec.jsx +++ b/packages/inferno-compat/__tests__/isValidElement.spec.jsx @@ -1,5 +1,5 @@ import createElement from 'inferno-create-element'; -import isValidElement from '../dist-es/isValidElement'; +import { isValidElement } from 'inferno-compat'; import { cloneVNode } from 'inferno'; import h from 'inferno-hyperscript'; import Component from 'inferno-component'; @@ -7,34 +7,34 @@ import Component from 'inferno-component'; describe('isValidElement', () => { it('Should not work with non-object', () => { - expect(isValidElement(33)).to.equal(false); - expect(isValidElement(false)).to.equal(false); - expect(isValidElement(true)).to.equal(false); - expect(isValidElement('some text')).to.equal(false); - expect(isValidElement(0)).to.equal(false); - expect(isValidElement(undefined)).to.equal(false); + expect(isValidElement(33)).toBe(false); + expect(isValidElement(false)).toBe(false); + expect(isValidElement(true)).toBe(false); + expect(isValidElement('some text')).toBe(false); + expect(isValidElement(0)).toBe(false); + expect(isValidElement(undefined)).toBe(false); }); it('Should not work with invalid object', () => { - expect(isValidElement(null)).to.equal(false, 'object should not be null'); - expect(isValidElement({})).to.equal(false, 'object should not be empty'); - expect(isValidElement({ dom: 'fake data' })).to.equal(false, 'object should not have just a dom property'); + expect(isValidElement(null)).toBe(false); + expect(isValidElement({})).toBe(false); + expect(isValidElement({ dom: 'fake data' })).toBe(false); }); it('Should not work with a number', () => { - expect(isValidElement(33)).to.equal(false); + expect(isValidElement(33)).toBe(false); }); it('Should work with createElement (element)', () => { const el = createElement('div', null, 'Do a thing'); - expect(isValidElement(el)).to.equal(true); + expect(isValidElement(el)).toBe(true); }); it('Should work with createElement (stateless component)', () => { const el = createElement('div', null, 'Do a thing'); const Comp = () => el; const comp = createElement(Comp); - expect(isValidElement(comp)).to.equal(true); + expect(isValidElement(comp)).toBe(true); }); it('Should work with createElement (stateful component)', () => { @@ -44,30 +44,30 @@ describe('isValidElement', () => { } } const comp = createElement(Comp); - expect(isValidElement(comp)).to.equal(true); + expect(isValidElement(comp)).toBe(true); }); it('Should work with JSX', () => { const node =
Hello world
; - expect(isValidElement(node)).to.equal(true); + expect(isValidElement(node)).toBe(true); }); it('Should work with cloneVNode', () => { const node =
Hello world
; const clonedNode = cloneVNode(node, null, 'Hello world 2!'); - expect(isValidElement(clonedNode)).to.equal(true); + expect(isValidElement(clonedNode)).toBe(true); }); it('Should work with hyperscript (element)', () => { const el = h('div', 'Do a thing'); - expect(isValidElement(el)).to.equal(true); + expect(isValidElement(el)).toBe(true); }); it('Should work with hyperscript (stateless component)', () => { const el = h('div', 'Do a thing'); const Comp = () => el; const comp = h(Comp); - expect(isValidElement(comp)).to.equal(true); + expect(isValidElement(comp)).toBe(true); }); it('Should work with hyperscript (stateful component)', () => { @@ -77,19 +77,19 @@ describe('isValidElement', () => { } } const comp = h(Comp); - expect(isValidElement(comp)).to.equal(true); + expect(isValidElement(comp)).toBe(true); }); it('Should not work with a stateless component (using createElement)', () => { const el = createElement('div', null, 'Do a thing'); const Comp = () => el; - expect(isValidElement(Comp)).to.equal(false); + expect(isValidElement(Comp)).toBe(false); }); it('Should not work with a stateless component (using hyperscript)', () => { const el = h('div', 'Do a thing'); const Comp = () => el; - expect(isValidElement(Comp)).to.equal(false); + expect(isValidElement(Comp)).toBe(false); }); it('Should not work with a stateful component (using createElement)', () => { @@ -98,7 +98,7 @@ describe('isValidElement', () => { return createElement('div', null, 'Do a thing'); } } - expect(isValidElement(Comp)).to.equal(false); + expect(isValidElement(Comp)).toBe(false); }); it('Should not work with a stateful component (using hyperscript)', () => { @@ -107,6 +107,6 @@ describe('isValidElement', () => { return h('div', 'Do a thing'); } } - expect(isValidElement(Comp)).to.equal(false); + expect(isValidElement(Comp)).toBe(false); }); }); diff --git a/packages/inferno-compat/__tests__/lifecycle.spec.jsx b/packages/inferno-compat/__tests__/lifecycle.spec.jsx index d6230213d..8ccb9e417 100644 --- a/packages/inferno-compat/__tests__/lifecycle.spec.jsx +++ b/packages/inferno-compat/__tests__/lifecycle.spec.jsx @@ -1,7 +1,7 @@ import { render } from 'inferno'; -import { spy } from 'sinon'; -import { innerHTML } from 'inferno/test/utils'; -import { Component, createElement } from '../dist-es'; +import sinon from 'sinon'; +import { innerHTML } from 'inferno-utils'; +import { Component, createElement } from 'inferno-compat'; describe('Inferno-compat LifeCycle', () => { let container; @@ -21,7 +21,7 @@ describe('Inferno-compat LifeCycle', () => { it('Should go as per React (minus doubles)', () => { // We spy console log to verify order of callbacks // React implementation: https://jsfiddle.net/zg7ay23g/ - const consoleSpy = spy(console, 'log'); + const consoleSpy = sinon.spy(console, 'log'); class Hello2 extends Component { componentWillMount() { @@ -130,47 +130,47 @@ describe('Inferno-compat LifeCycle', () => { ); const array = consoleSpy.getCalls(); - expect(array.length).to.eql(34); + expect(array.length).toEqual(34); // mount - expect(array[ 0 ].args).to.eql(['Will mount']); - expect(array[ 1 ].args).to.eql(['Will mount sub']); - expect(array[ 2 ].args).to.eql([ 'S2b', 'stringRef' ]); - expect(array[ 3 ].args).to.eql([ 'S1', 'stringRef' ]); - expect(array[ 4 ].args).to.eql([ 'Did mount sub', 'stringRef' ]); - expect(array[ 5 ].args).to.eql([ '4a', null ]); - expect(array[ 6 ].args).to.eql([ '4b', null ]); - expect(array[ 7 ].args).to.eql([ '3b', 'stringRef' ]); - expect(array[ 8 ].args).to.eql([ '2a', 'stringRef' ]); - expect(array[ 9 ].args).to.eql([ '2b', 'stringRef' ]); - expect(array[ 10 ].args).to.eql([ '1', 'stringRef' ]); - expect(array[ 11 ].args).to.eql([ 'Did mount', 'stringRef' ]); + expect(array[ 0 ].args).toEqual(['Will mount']); + expect(array[ 1 ].args).toEqual(['Will mount sub']); + expect(array[ 2 ].args).toEqual([ 'S2b', 'stringRef' ]); + expect(array[ 3 ].args).toEqual([ 'S1', 'stringRef' ]); + expect(array[ 4 ].args).toEqual([ 'Did mount sub', 'stringRef' ]); + expect(array[ 5 ].args).toEqual([ '4a', null ]); + expect(array[ 6 ].args).toEqual([ '4b', null ]); + expect(array[ 7 ].args).toEqual([ '3b', 'stringRef' ]); + expect(array[ 8 ].args).toEqual([ '2a', 'stringRef' ]); + expect(array[ 9 ].args).toEqual([ '2b', 'stringRef' ]); + expect(array[ 10 ].args).toEqual([ '1', 'stringRef' ]); + expect(array[ 11 ].args).toEqual([ 'Did mount', 'stringRef' ]); // update - expect(array[ 12 ].args).to.eql(['UPDATE']); - expect(array[ 13 ].args).to.eql([ 'Will update', 'stringRef' ]); - expect(array[ 14 ].args).to.eql([ 'Will update sub', 'stringRef' ]); - expect(array[ 15 ].args).to.eql([ 'Did update sub', 'stringRef' ]); - expect(array[ 16 ].args).to.eql([ 'Did update', 'stringRef' ]); - expect(array[ 17 ].args).to.eql([ 'S2b', 'stringRef' ]); - expect(array[ 18 ].args).to.eql([ 'S1', 'stringRef' ]); - expect(array[ 19 ].args).to.eql([ '4a', 'stringRef' ]); - expect(array[ 20 ].args).to.eql([ '4b', 'stringRef' ]); - expect(array[ 21 ].args).to.eql([ '3b', 'stringRef' ]); - expect(array[ 22 ].args).to.eql([ '2a', 'stringRef' ]); - expect(array[ 23 ].args).to.eql([ '2b', 'stringRef' ]); - expect(array[ 24 ].args).to.eql([ '1', 'stringRef' ]); + expect(array[ 12 ].args).toEqual(['UPDATE']); + expect(array[ 13 ].args).toEqual([ 'Will update', 'stringRef' ]); + expect(array[ 14 ].args).toEqual([ 'Will update sub', 'stringRef' ]); + expect(array[ 15 ].args).toEqual([ 'Did update sub', 'stringRef' ]); + expect(array[ 16 ].args).toEqual([ 'Did update', 'stringRef' ]); + expect(array[ 17 ].args).toEqual([ 'S2b', 'stringRef' ]); + expect(array[ 18 ].args).toEqual([ 'S1', 'stringRef' ]); + expect(array[ 19 ].args).toEqual([ '4a', 'stringRef' ]); + expect(array[ 20 ].args).toEqual([ '4b', 'stringRef' ]); + expect(array[ 21 ].args).toEqual([ '3b', 'stringRef' ]); + expect(array[ 22 ].args).toEqual([ '2a', 'stringRef' ]); + expect(array[ 23 ].args).toEqual([ '2b', 'stringRef' ]); + expect(array[ 24 ].args).toEqual([ '1', 'stringRef' ]); // unmount - expect(array[ 25 ].args).to.eql(['REMOVAL']); - expect(array[ 26 ].args).to.eql([ '1', 'stringRef' ]); - expect(array[ 27 ].args).to.eql([ '2a', 'stringRef' ]); - expect(array[ 28 ].args).to.eql([ 'S1', 'stringRef' ]); - expect(array[ 29 ].args).to.eql([ 'S2b', null ]); - expect(array[ 30 ].args).to.eql([ '4a', null ]); - expect(array[ 31 ].args).to.eql([ '4b', null ]); - expect(array[ 32 ].args).to.eql([ '3b', null ]); - expect(array[ 33 ].args).to.eql([ '2b', null ]); + expect(array[ 25 ].args).toEqual(['REMOVAL']); + expect(array[ 26 ].args).toEqual([ '1', 'stringRef' ]); + expect(array[ 27 ].args).toEqual([ '2a', 'stringRef' ]); + expect(array[ 28 ].args).toEqual([ 'S1', 'stringRef' ]); + expect(array[ 29 ].args).toEqual([ 'S2b', null ]); + expect(array[ 30 ].args).toEqual([ '4a', null ]); + expect(array[ 31 ].args).toEqual([ '4b', null ]); + expect(array[ 32 ].args).toEqual([ '3b', null ]); + expect(array[ 33 ].args).toEqual([ '2b', null ]); }); }); }); diff --git a/packages/inferno-compat/__tests__/svg.spec.jsx b/packages/inferno-compat/__tests__/svg.spec.jsx index 83c022d60..232fa71af 100644 --- a/packages/inferno-compat/__tests__/svg.spec.jsx +++ b/packages/inferno-compat/__tests__/svg.spec.jsx @@ -1,6 +1,5 @@ - import { render } from 'inferno'; -import { createElement } from '../dist-es'; +import { createElement } from 'inferno-compat'; describe('svg', () => { let container; @@ -26,12 +25,12 @@ describe('svg', () => { }) ]), container); - expect(container.firstChild.getAttribute('viewBox')).to.equal('0 0 1024 1024'); - expect(container.firstChild.getAttribute('height')).to.equal('16'); - expect(container.firstChild.getAttribute('width')).to.equal('16'); - expect(container.firstChild.firstChild.tagName).to.equal('stop'); - expect(container.firstChild.firstChild.getAttribute('stop-color')).to.equal('white'); - expect(container.firstChild.firstChild.getAttribute('stop-opacity')).to.equal('0.5'); + expect(container.firstChild.getAttribute('viewBox')).toBe('0 0 1024 1024'); + expect(container.firstChild.getAttribute('height')).toBe('16'); + expect(container.firstChild.getAttribute('width')).toBe('16'); + expect(container.firstChild.firstChild.tagName).toBe('stop'); + expect(container.firstChild.firstChild.getAttribute('stop-color')).toBe('white'); + expect(container.firstChild.firstChild.getAttribute('stop-opacity')).toBe('0.5'); }); it('Should work with namespace svg attributes', () => { @@ -41,7 +40,7 @@ describe('svg', () => { }) ]), container); - expect(container.firstChild.firstChild.tagName).to.equal('image'); - expect(container.firstChild.firstChild.getAttribute('xlink:href')).to.equal('http://i.imgur.com/w7GCRPb.png'); + expect(container.firstChild.firstChild.tagName).toBe('image'); + expect(container.firstChild.firstChild.getAttribute('xlink:href')).toBe('http://i.imgur.com/w7GCRPb.png'); }); }); diff --git a/packages/inferno-component/__tests__/componentlifecycle.spec.jsx b/packages/inferno-component/__tests__/componentlifecycle.spec.jsx index 6af52bdb2..22ab7bb69 100644 --- a/packages/inferno-component/__tests__/componentlifecycle.spec.jsx +++ b/packages/inferno-component/__tests__/componentlifecycle.spec.jsx @@ -1,7 +1,7 @@ import { render } from 'inferno'; -import { innerHTML } from 'inferno/test/utils'; -import Component from '../dist-es'; +import { innerHTML } from 'inferno-utils'; +import Component from 'inferno-component'; describe('Component lifecycle', () => { let container; @@ -22,8 +22,8 @@ describe('Component lifecycle', () => { class Com extends Component { componentWillUpdate(nextProps, nextState) { callCount++; - expect(this.props.value).to.equal(1); - expect(nextProps.value).to.equal(2); + expect(this.props.value).toBe(1); + expect(nextProps.value).toBe(2); } render() { @@ -35,12 +35,12 @@ describe('Component lifecycle', () => { render(, container); - expect(innerHTML(container.innerHTML)).to.equal(innerHTML('
1
')); + expect(innerHTML(container.innerHTML)).toBe(innerHTML('
1
')); render(, container); - expect(callCount).to.equal(1); - expect(innerHTML(container.innerHTML)).to.equal(innerHTML('
2
')); + expect(callCount).toBe(1); + expect(innerHTML(container.innerHTML)).toBe(innerHTML('
2
')); }); it('Current state in componentWillUpdate should not equal nextState if setState is called from componentWillReceiveProps', (done) => { @@ -62,8 +62,8 @@ describe('Component lifecycle', () => { } componentWillUpdate(nextProps, nextState) { - expect(this.state.active).to.equal(false); - expect(nextState.active).to.equal(true); + expect(this.state.active).toBe(false); + expect(nextState.active).toBe(true); } render() { @@ -110,8 +110,8 @@ describe('Component lifecycle', () => { class Com extends Component { shouldComponentUpdate(nextProps, nextState) { callCount++; - expect(this.props.value).to.equal(1); - expect(nextProps.value).to.equal(2); + expect(this.props.value).toBe(1); + expect(nextProps.value).toBe(2); return true; } @@ -125,12 +125,12 @@ describe('Component lifecycle', () => { render(, container); - expect(innerHTML(container.innerHTML)).to.equal(innerHTML('
1
')); + expect(innerHTML(container.innerHTML)).toBe(innerHTML('
1
')); render(, container); - expect(callCount).to.equal(1); - expect(innerHTML(container.innerHTML)).to.equal(innerHTML('
2
')); + expect(callCount).toBe(1); + expect(innerHTML(container.innerHTML)).toBe(innerHTML('
2
')); }); it('Should call componentWillUnmount before node is removed from DOM tree', () => { @@ -156,7 +156,7 @@ describe('Component lifecycle', () => { class Child extends Component { componentWillUnmount() { // verify its not removed from DOM tree yet. - expect(this.element.parentElement.parentElement).to.equal(container); + expect(this.element.parentElement.parentElement).toBe(container); } render() { @@ -166,10 +166,10 @@ describe('Component lifecycle', () => { } render(, container); - expect(container.querySelectorAll('.foobar').length).to.equal(1); + expect(container.querySelectorAll('.foobar').length).toBe(1); render(, container); // Verify the specific div is removed now - expect(container.querySelectorAll('.foobar').length).to.equal(0); + expect(container.querySelectorAll('.foobar').length).toBe(0); }); it('Should not fail if componentDidUpdate is undefined #922', () => { @@ -179,8 +179,8 @@ describe('Component lifecycle', () => { class Com extends Component { componentDidUpdate(nextProps, nextState) { callCount++; - expect(this.props.value).to.equal(1); - expect(nextProps.value).to.equal(2); + expect(this.props.value).toBe(1); + expect(nextProps.value).toBe(2); return true; } diff --git a/packages/inferno-component/__tests__/setState.spec.jsx b/packages/inferno-component/__tests__/setState.spec.jsx index da2d0180c..4248022e4 100644 --- a/packages/inferno-component/__tests__/setState.spec.jsx +++ b/packages/inferno-component/__tests__/setState.spec.jsx @@ -1,6 +1,7 @@ import { render } from 'inferno'; -import Component from '../dist-es'; +import Component from 'inferno-component'; +import sinon from 'sinon'; describe('setState', () => { let container; @@ -23,7 +24,7 @@ describe('setState', () => { } } - expect(render.bind(render, , container)).to.throw(Error); + expect(render.bind(render, , container)).toThrowError(Error); }); it('callback should be fired after state has changed', (done) => { @@ -39,7 +40,7 @@ describe('setState', () => { checkSetState() { const value = this.state.value; - expect(value).to.equal('__NEWVALUE__'); + expect(value).toBe('__NEWVALUE__'); setTimeout(function () { done(); }, 100); @@ -91,7 +92,7 @@ describe('setState', () => { checkSetState() { const value = this.state.value; - expect(value).to.equal('__NEWVALUE__'); + expect(value).toBe('__NEWVALUE__'); setTimeout(function () { done(); }, 100); @@ -397,7 +398,7 @@ describe('setState', () => { } callback() { - expect(container.firstChild.firstChild.innerHTML).to.equal('bar2'); + expect(container.firstChild.firstChild.innerHTML).toBe('bar2'); done(); } @@ -418,7 +419,7 @@ describe('setState', () => { render(, container); - expect(container.firstChild.firstChild.innerHTML).to.equal('bar'); + expect(container.firstChild.firstChild.innerHTML).toBe('bar'); changeFoo(); }); @@ -486,9 +487,9 @@ describe('setState', () => { render(, container); - expect(container.firstChild.firstChild.innerHTML).to.equal('4'); - expect(spy.callCount).to.equal(5); - expect(renderCount).to.equal(1); + expect(container.firstChild.firstChild.innerHTML).toBe('4'); + expect(spy.callCount).toBe(5); + expect(renderCount).toBe(1); }); // Should work as Per react: https://jsfiddle.net/f12u8xzb/ @@ -666,15 +667,15 @@ describe('setState', () => { render(, container); // Set state must go sync when nothing pending - expect(container.firstChild.innerHTML).to.equal('b'); + expect(container.firstChild.innerHTML).toBe('b'); doSomething('1'); - expect(container.firstChild.innerHTML).to.equal('1'); + expect(container.firstChild.innerHTML).toBe('1'); doSomething('2'); - expect(container.firstChild.innerHTML).to.equal('2'); + expect(container.firstChild.innerHTML).toBe('2'); doSomething('3'); - expect(container.firstChild.innerHTML).to.equal('3'); + expect(container.firstChild.innerHTML).toBe('3'); doSomething('4'); - expect(container.firstChild.innerHTML).to.equal('4'); + expect(container.firstChild.innerHTML).toBe('4'); }); it('Set state callback should have context of caller component (forced) - as per React', () => { @@ -682,7 +683,7 @@ describe('setState', () => { class Com extends Component { doTest() { - expect(this.state.a).to.equal(cnt); + expect(this.state.a).toBe(cnt); } componentWillMount() { diff --git a/packages/inferno-component/__tests__/state.spec.jsx b/packages/inferno-component/__tests__/state.spec.jsx index 0d82a41bb..b74404a7e 100644 --- a/packages/inferno-component/__tests__/state.spec.jsx +++ b/packages/inferno-component/__tests__/state.spec.jsx @@ -1,5 +1,5 @@ import { createVNode, render } from 'inferno'; -import Component from '../dist-es'; +import Component from 'inferno-component'; import VNodeFlags from 'inferno-vnode-flags'; class TestCWRP extends Component { @@ -48,13 +48,13 @@ describe('state', () => { constructor(p, c) { super(p, c); - expect(this.state).to.be.a('null'); + expect(this.state).toBeNull(); } } const f = new Foo({}, {}); - expect(f).not.to.be.a('null'); + expect(f).not.toBeNull(); }); describe('setting state', () => { @@ -81,15 +81,14 @@ describe('state', () => { } componentWillReceiveProps(nextProps) { - console.log('CWRP', nextProps.scrollTop); if (nextProps.scrollTop !== 0){ this.setState({ testScrollTop: nextProps.scrollTop }); } } componentDidUpdate(prevProps, prevState) { - expect(prevState.testScrollTop).to.equal(0); - expect(this.state.testScrollTop).to.equal(200); + expect(prevState.testScrollTop).toBe(0); + expect(this.state.testScrollTop).toBe(200); } render(){ diff --git a/packages/inferno-create-class/__tests__/createClass.spec.browser.js b/packages/inferno-create-class/__tests__/createClass.spec.browser.js index 230dba5c0..b30e3dc27 100644 --- a/packages/inferno-create-class/__tests__/createClass.spec.browser.js +++ b/packages/inferno-create-class/__tests__/createClass.spec.browser.js @@ -1,19 +1,19 @@ import { render } from 'inferno'; +import createClass from 'inferno-create-class'; import createElement from 'inferno-create-element'; -import { innerHTML } from 'inferno/test/utils'; -import createClass from '../dist-es'; +import { innerHTML } from 'inferno-utils'; describe('Components createClass (non-JSX)', () => { let container; - beforeEach(function () { + beforeEach(function() { container = document.createElement('div'); container.style.display = 'none'; document.body.appendChild(container); }); - afterEach(function () { + afterEach(function() { document.body.removeChild(container); render(null, container); }); @@ -26,7 +26,7 @@ describe('Components createClass (non-JSX)', () => { it('should render a basic component', () => { render(createElement(BasicComponent), container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world!
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world!
')); }); it('should render a basic component with lifecycle', () => { let componentWillUpdate = false; @@ -41,7 +41,7 @@ describe('Components createClass (non-JSX)', () => { render(createElement(LifecycleComponent1, {}), container); render(createElement(LifecycleComponent1, {}), container); - expect(componentWillUpdate).to.equal(true); + expect(componentWillUpdate).toBe(true); }); it('should have context available in getInitialState', (done) => { @@ -61,7 +61,7 @@ describe('Components createClass (non-JSX)', () => { render(createElement(BoundComponent), container); setTimeout(() => { - expect(context === context2).to.equal(true); + expect(context === context2).toBe(true); done(); }, 2); }); @@ -78,7 +78,7 @@ describe('Components createClass (non-JSX)', () => { } }); - expect(Component.propTypes).to.equal(propTypes); + expect(Component.propTypes).toBe(propTypes); }); it('should not have propTypes on created class when not specified', () => { const Component = createClass({ @@ -87,7 +87,7 @@ describe('Components createClass (non-JSX)', () => { } }); - expect(Component.propTypes).to.be.undefined; + expect(Component.propTypes).toBeUndefined(); }); it('should have mixins on created class', () => { const mixins = [{ @@ -100,7 +100,7 @@ describe('Components createClass (non-JSX)', () => { } }); render(createElement(Component, {}), container); - expect(Component.mixins).to.have.property('func1'); + expect(Component.mixins.func1).toBeDefined(); }); it('should have nested mixins on created class', () => { const mixins = [{ @@ -117,6 +117,6 @@ describe('Components createClass (non-JSX)', () => { } }); render(createElement(Component, {}), container); - expect(Component.mixins).to.have.property('nestedMixin'); + expect(Component.mixins.nestedMixin).toBeDefined(); }); }); diff --git a/packages/inferno-create-class/__tests__/createClass.spec.browser.jsx b/packages/inferno-create-class/__tests__/createClass.spec.browser.jsx index a5250cd33..01dc00768 100644 --- a/packages/inferno-create-class/__tests__/createClass.spec.browser.jsx +++ b/packages/inferno-create-class/__tests__/createClass.spec.browser.jsx @@ -1,7 +1,7 @@ import { render } from 'inferno'; -import { innerHTML } from 'inferno/test/utils'; -import createClass from '../dist-es'; +import { innerHTML } from 'inferno-utils'; +import createClass from 'inferno-create-class'; describe('Components createClass (JSX)', () => { let container; @@ -42,8 +42,8 @@ describe('Components createClass (JSX)', () => { a = i; }}/>, container); - expect(a.someState).to.eql(1); - expect(a.anotherState).to.eql(2); + expect(a.someState).toEqual(1); + expect(a.anotherState).toEqual(2); }); it('returns result through instance', () => { @@ -61,7 +61,7 @@ describe('Components createClass (JSX)', () => { }); render(, container); - expect(container.innerHTML).to.eql(innerHTML('
test
')); + expect(container.innerHTML).toEqual(innerHTML('
test
')); }); it('works as a lifecycle method even when a matching method is already defined', () => { @@ -85,7 +85,7 @@ describe('Components createClass (JSX)', () => { a = i; }}/>, container); - expect(a.someState).to.eql(1); + expect(a.someState).toEqual(1); }); }); @@ -100,7 +100,7 @@ describe('Components createClass (JSX)', () => { } }); - expect(Foo.defaultProps).to.eql({ + expect(Foo.defaultProps).toEqual({ a: true }); }); @@ -119,7 +119,7 @@ describe('Components createClass (JSX)', () => { } }); - expect(Foo.defaultProps).to.eql({ + expect(Foo.defaultProps).toEqual({ a: true, b: true, c: true @@ -137,7 +137,7 @@ describe('Components createClass (JSX)', () => { render() { return
; } - })).to.throw(Error); + })).toThrowError(Error); }); }); @@ -161,7 +161,7 @@ describe('Components createClass (JSX)', () => { a = i; }}/>, container); - expect(a.state).to.eql({ + expect(a.state).toEqual({ a: true, b: true, c: true @@ -183,7 +183,7 @@ describe('Components createClass (JSX)', () => { expect(() => { render(, container); - }).to.throw(); + }).toThrowError(); }); }); }); @@ -249,7 +249,7 @@ describe('Components createClass (JSX)', () => { ), container); - expect(container.innerHTML).to.eql(innerHTML('
Hello bar baz
Hai bar baz
')); + expect(container.innerHTML).toEqual(innerHTML('
Hello bar baz
Hai bar baz
')); }); }); }); diff --git a/packages/inferno-create-class/__tests__/benchmarks/createClass.spec.jsx b/packages/inferno-create-class/__tests__/createClass.spec.jsx similarity index 99% rename from packages/inferno-create-class/__tests__/benchmarks/createClass.spec.jsx rename to packages/inferno-create-class/__tests__/createClass.spec.jsx index aba33af19..6a57a8d06 100644 --- a/packages/inferno-create-class/__tests__/benchmarks/createClass.spec.jsx +++ b/packages/inferno-create-class/__tests__/createClass.spec.jsx @@ -1,5 +1,5 @@ import { render } from 'inferno'; -import createClass from '../../dist-es'; +import createClass from 'inferno-create-class'; function runBenchmark(container) { const Link0 = createClass({ diff --git a/packages/inferno-create-element/__tests__/blueprints.spec.jsx b/packages/inferno-create-element/__tests__/blueprints.spec.jsx index 0d1ef1216..0a31eec35 100644 --- a/packages/inferno-create-element/__tests__/blueprints.spec.jsx +++ b/packages/inferno-create-element/__tests__/blueprints.spec.jsx @@ -1,7 +1,7 @@ import { render } from 'inferno'; import Component from 'inferno-component'; -import { innerHTML } from 'inferno/test/utils'; +import { innerHTML } from 'inferno-utils'; describe('Blueprints (JSX)', () => { let container; @@ -75,9 +75,9 @@ describe('Blueprints (JSX)', () => { expect( container.innerHTML - ).to.equal( - innerHTML('

Saab B

Volvo B

BMW B

') - ); + ).toBe( + innerHTML('

Saab B

Volvo B

BMW B

') + ); render(null, container); }); @@ -92,9 +92,9 @@ describe('Blueprints (JSX)', () => { requestAnimationFrame(() => { expect( container.innerHTML - ).to.equal( - innerHTML('

Saab
A

Volvo
A

BMW
A

') - ); + ).toBe( + innerHTML('

Saab
A

Volvo
A

BMW
A

') + ); render(null, container); done(); }); @@ -138,7 +138,7 @@ describe('Blueprints (JSX)', () => { render(, container); setTimeout(() => { - expect(container.innerHTML).to.equal(innerHTML('
animate
')); + expect(container.innerHTML).toBe(innerHTML('
animate
')); done(); }, 10); }); @@ -154,8 +154,8 @@ describe('Blueprints (JSX)', () => { } componentDidMount() { - expect(this._first).to.not.equal(null); - expect(this._second).to.not.equal(null); + expect(this._first).not.toBe(null); + expect(this._second).not.toBe(null); } render() { @@ -190,11 +190,11 @@ describe('Blueprints (JSX)', () => { render(, container); let input = container.querySelector('input'); - expect(input.disabled).to.equal(true); + expect(input.disabled).toBe(true); render(, container); input = container.querySelector('input'); - expect(input.disabled).to.equal(false); + expect(input.disabled).toBe(false); }); }); }); diff --git a/packages/inferno-create-element/__tests__/children.spec.browser.js b/packages/inferno-create-element/__tests__/children.spec.browser.js index 5a1249378..256234b12 100644 --- a/packages/inferno-create-element/__tests__/children.spec.browser.js +++ b/packages/inferno-create-element/__tests__/children.spec.browser.js @@ -1,17 +1,17 @@ import { render } from 'inferno'; -import createElement from '../dist-es'; +import createElement from 'inferno-create-element'; describe('Children - (non-JSX)', () => { let container; - beforeEach(function () { + beforeEach(function() { container = document.createElement('div'); document.body.appendChild(container); }); - afterEach(function () { + afterEach(function() { render(null, container); container.innerHTML = ''; document.body.removeChild(container); @@ -194,11 +194,11 @@ describe('Children - (non-JSX)', () => { it(test.description, () => { render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); }); }); }); @@ -213,15 +213,15 @@ describe('Children - (non-JSX)', () => { it(test.description, () => { render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(arg.expected); render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(arg.expected); }); }); @@ -237,15 +237,15 @@ describe('Children - (non-JSX)', () => { it(test.description, () => { render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(arg.expected); render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(arg.expected); }); }); @@ -262,69 +262,69 @@ describe('Children - (non-JSX)', () => { it(test.description, () => { render(test.template(arg.value), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); render(test.template(arg.value), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); render(test.template(arg.value), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); }); it(test.description, () => { render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); render(test.template(arg.value), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); }); it(test.description, () => { render(test.template(null), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); render(test.template(arg.value), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); }); it(test.description, () => { render(test.template(arg.value), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(arg.expected); render(test.template(null), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); }); it(test.description, () => { render(test.template(), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); render(test.template(undefined), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); }); it(test.description, () => { render(test.template(null), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); render(test.template(null), container); - expect(container.firstChild.nodeType).to.equal(1); - expect(container.firstChild.textContent).to.equal(''); + expect(container.firstChild.nodeType).toBe(1); + expect(container.firstChild.textContent).toBe(''); }); @@ -341,20 +341,20 @@ describe('Children - (non-JSX)', () => { it(test.description, () => { render(test.template(arg.value), container); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(arg.expected); render(test.template(arg.value), container); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(arg.expected); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(arg.expected); render(test.template(null), container); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(''); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(''); render(test.template(undefined), container); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(''); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(''); render(test.template(), container); - expect(container.firstChild.firstChild.nodeType).to.equal(1); - expect(container.firstChild.firstChild.textContent).to.equal(''); + expect(container.firstChild.firstChild.nodeType).toBe(1); + expect(container.firstChild.firstChild.textContent).toBe(''); }); }); }); diff --git a/packages/inferno-create-element/__tests__/children.spec.jsx b/packages/inferno-create-element/__tests__/children.spec.jsx index c30be28ab..ad6e7eaa0 100644 --- a/packages/inferno-create-element/__tests__/children.spec.jsx +++ b/packages/inferno-create-element/__tests__/children.spec.jsx @@ -1,8 +1,8 @@ import { render } from 'inferno'; import Component from 'inferno-component'; -import { assert, spy } from 'sinon'; -import { innerHTML } from 'inferno/test/utils'; +import sinon from 'sinon'; +import { innerHTML } from 'inferno-utils'; describe('Children - (JSX)', () => { let container; @@ -57,19 +57,29 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
Add
') + ); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
New 5
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
New 4
New 5
Add
') + ); }); it('Should append child node to correct location when its empty at the beginning ', function () { @@ -109,13 +119,17 @@ describe('Children - (JSX)', () => { } renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Add
')); + expect(container.innerHTML).toBe(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
New 1
Add
') + ); }); it('Should append child node to correct location when its empty at the beginning ', function () { @@ -155,13 +169,17 @@ describe('Children - (JSX)', () => { } renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Add
')); + expect(container.innerHTML).toBe(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
')); + expect(container.innerHTML).toBe( + innerHTML('
Add
New 0
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
New 1
')); + expect(container.innerHTML).toBe( + innerHTML('
Add
New 0
New 1
') + ); }); it('Should append child node to correct location when its empty at the beginning ', function () { @@ -207,13 +225,17 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Add
')); + expect(container.innerHTML).toBe(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
New 0
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
Add
New 0
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
New 0
New 1
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
New 1
Add
New 0
New 1
') + ); }); it('Should appendx3 to correct location when it keyed list has siblings', function () { @@ -256,10 +278,14 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
Add
') + ); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
') + ); }); it('Should unshiftx3 to correct location when it keyed list has siblings', function () { @@ -302,10 +328,14 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
Add
') + ); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 4
New 3
New 2
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
New 4
New 3
New 2
Item A
Item B
Add
') + ); }); it('Inline text element before array list', function () { @@ -336,12 +366,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); + expect(container.innerHTML).toBe(innerHTML('
inlineText
')); _tabs.push({ title: 'New ' + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
inlineText
New 0
')); + expect(container.innerHTML).toBe(innerHTML('
inlineText
New 0
')); }); it('Inline text element after array list', function () { @@ -372,12 +402,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); + expect(container.innerHTML).toBe(innerHTML('
inlineText
')); _tabs.push({ title: 'New ' + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
inlineText
')); + expect(container.innerHTML).toBe(innerHTML('
New 0
inlineText
')); }); }); @@ -418,19 +448,29 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
Add
') + ); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
New 5
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
New 4
New 5
Add
') + ); }); it('Should append child node to correct location when its empty at the beginning ', function () { @@ -468,13 +508,17 @@ describe('Children - (JSX)', () => { } renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Add
')); + expect(container.innerHTML).toBe(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
Add
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
New 1
Add
') + ); }); it('Should append child node to correct location when its empty at the beginning ', function () { @@ -513,12 +557,16 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Add
')); + expect(container.innerHTML).toBe(innerHTML('
Add
')); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
')); + expect(container.innerHTML).toBe( + innerHTML('
Add
New 0
') + ); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
New 1
')); + expect(container.innerHTML).toBe( + innerHTML('
Add
New 0
New 1
') + ); }); it('Should append child node to correct location when its empty at the beginning ', function () { @@ -561,13 +609,17 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Add
')); + expect(container.innerHTML).toBe(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
New 0
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
Add
New 0
') + ); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
New 0
New 1
')); + expect(container.innerHTML).toBe( + innerHTML('
New 0
New 1
Add
New 0
New 1
') + ); }); it('Should appendx3 to correct location when it list has siblings', function () { @@ -608,10 +660,14 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
Add
') + ); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
') + ); }); it('Should unshiftx3 to correct location when it list has siblings', function () { @@ -652,10 +708,14 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
Item A
Item B
Add
') + ); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal(innerHTML('
New 4
New 3
New 2
Item A
Item B
Add
')); + expect(container.innerHTML).toBe( + innerHTML('
New 4
New 3
New 2
Item A
Item B
Add
') + ); }); it('Inline text element before array list', function () { @@ -685,12 +745,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); + expect(container.innerHTML).toBe(innerHTML('
inlineText
')); _tabs.push({ title: 'New ' + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
inlineText
New 0
')); + expect(container.innerHTML).toBe(innerHTML('
inlineText
New 0
')); }); it('Inline text element after array list', function () { @@ -720,12 +780,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); + expect(container.innerHTML).toBe(innerHTML('
inlineText
')); _tabs.push({ title: 'New ' + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal(innerHTML('
New 0
inlineText
')); + expect(container.innerHTML).toBe(innerHTML('
New 0
inlineText
')); }); }); @@ -764,22 +824,22 @@ describe('Children - (JSX)', () => { visible = true; activeOne = items; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

')); + expect(container.innerHTML).toBe(innerHTML('

static

a

b

c

')); visible = false; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

v

a

')); + expect(container.innerHTML).toBe(innerHTML('

v

a

')); visible = true; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

v

a

')); + expect(container.innerHTML).toBe(innerHTML('

static

v

a

')); visible = true; activeOne = emptyArray; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

')); + expect(container.innerHTML).toBe(innerHTML('

static

')); }); it('NONKEYED - should remove children from correct location when there is 2 dynamic static items and 2 lists', function () { @@ -832,28 +892,32 @@ describe('Children - (JSX)', () => { visibleTwo = false; activeTwo = emptyArray; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

')); + expect(container.innerHTML).toBe(innerHTML('

static

a

b

c

')); visibleOne = true; activeOne = emptyArray; visibleTwo = true; activeTwo = items; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

static

a

b

c

')); + expect(container.innerHTML).toBe( + innerHTML('

static

static

a

b

c

') + ); visibleOne = false; activeOne = items3; visibleTwo = false; activeTwo = emptyArray; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

v

a

')); + expect(container.innerHTML).toBe(innerHTML('

v

a

')); visibleOne = true; activeOne = items; visibleTwo = true; activeTwo = emptyArray; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

static

')); + expect(container.innerHTML).toBe( + innerHTML('

static

a

b

c

static

') + ); }); it('KEYED - should remove children from correct location when there is dynamic static item', function () { @@ -891,22 +955,22 @@ describe('Children - (JSX)', () => { visible = true; activeOne = items; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

')); + expect(container.innerHTML).toBe(innerHTML('

static

a

b

c

')); visible = false; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

v

a

')); + expect(container.innerHTML).toBe(innerHTML('

v

a

')); visible = true; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

v

a

')); + expect(container.innerHTML).toBe(innerHTML('

static

v

a

')); visible = true; activeOne = emptyArray; renderIt(); - expect(container.innerHTML).to.equal(innerHTML('

static

')); + expect(container.innerHTML).toBe(innerHTML('

static

')); }); }); @@ -953,15 +1017,19 @@ describe('Children - (JSX)', () => { } render(, container); - expect(container.innerHTML).to.equal(innerHTML('

1

abc

2

def

3

')); + expect(container.innerHTML).toBe( + innerHTML('

1

abc

2

def

3

') + ); updaterFirst(); - expect(container.innerHTML).to.equal(innerHTML('

1

2

def

3

')); + expect(container.innerHTML).toBe(innerHTML('

1

2

def

3

')); updaterSecond(); - expect(container.innerHTML).to.equal(innerHTML('

1

2

3

')); + expect(container.innerHTML).toBe(innerHTML('

1

2

3

')); updaterSecond(); - expect(container.innerHTML).to.equal(innerHTML('

1

2

def

3

')); + expect(container.innerHTML).toBe(innerHTML('

1

2

def

3

')); updaterFirst(); - expect(container.innerHTML).to.equal(innerHTML('

1

abc

2

def

3

')); + expect(container.innerHTML).toBe( + innerHTML('

1

abc

2

def

3

') + ); }); }); @@ -1033,12 +1101,12 @@ describe('Children - (JSX)', () => { } } - const unmountSpy = spy(B.prototype, 'componentWillUnmount'); + const unmountSpy = sinon.spy(B.prototype, 'componentWillUnmount'); render(}/>, container); - expect(container.innerHTML).to.equal(innerHTML('

B

')); + expect(container.innerHTML).toBe(innerHTML('

B

')); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
')); - expect(unmountSpy.callCount).to.equal(1); + expect(container.innerHTML).toBe(innerHTML('
')); + expect(unmountSpy.callCount).toBe(1); }); }); @@ -1053,16 +1121,22 @@ describe('Children - (JSX)', () => { ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
123
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
123
end
') + ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
321
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
321
end
') + ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
987
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
987
end
') + ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
end
')); + expect(container.innerHTML).toBe(innerHTML('
test
end
')); }); it('Should not clear nodes when keyed inside vFragment', () => { @@ -1075,16 +1149,22 @@ describe('Children - (JSX)', () => { ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
123
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
123
end
') + ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
321
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
321
end
') + ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
987
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
987
end
') + ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
end
')); + expect(container.innerHTML).toBe(innerHTML('
test
end
')); }); it('Should not clear nodes when keyed inside vFragment #2', () => { @@ -1097,16 +1177,18 @@ describe('Children - (JSX)', () => { ); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
1
end
')); + expect(container.innerHTML).toBe(innerHTML('
test
1
end
')); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
end
')); + expect(container.innerHTML).toBe(innerHTML('
test
end
')); render(null, container); - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).toBe(''); render(, container); - expect(container.innerHTML).to.equal(innerHTML('
test
123
end
')); + expect(container.innerHTML).toBe( + innerHTML('
test
123
end
') + ); }); }); @@ -1127,7 +1209,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
1
2
3
'); + expect(container.innerHTML).toEqual('
1
2
3
'); render( @@ -1138,7 +1220,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
3
2
1
'); + expect(container.innerHTML).toEqual('
3
2
1
'); render( @@ -1149,7 +1231,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
3
2
11
'); + expect(container.innerHTML).toEqual('
3
2
11
'); }); it('Should be able to swap from keyed to nonkeyed when nextNode no longer is keyed', () => { @@ -1174,7 +1256,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
1
2
3
'); + expect(container.innerHTML).toEqual('
1
2
3
'); render( @@ -1184,7 +1266,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
3
2
'); + expect(container.innerHTML).toEqual('
3
2
'); render( @@ -1195,7 +1277,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
3
2
11
'); + expect(container.innerHTML).toEqual('
3
2
11
'); }); it('Should handle previous being empty array', () => { @@ -1213,7 +1295,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
'); + expect(container.innerHTML).toEqual('
'); render( @@ -1224,7 +1306,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
1
2
3
'); + expect(container.innerHTML).toEqual('
1
2
3
'); }); it('Should handle next being empty array', () => { @@ -1243,7 +1325,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
1
2
3
'); + expect(container.innerHTML).toEqual('
1
2
3
'); const child = []; render( @@ -1253,7 +1335,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
'); + expect(container.innerHTML).toEqual('
'); }); it('Should handle last/next being empty', () => { @@ -1271,7 +1353,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
'); + expect(container.innerHTML).toEqual('
'); const childB = []; @@ -1282,7 +1364,7 @@ describe('Children - (JSX)', () => { , container ); - expect(container.innerHTML).to.eql('
'); + expect(container.innerHTML).toEqual('
'); }); }); @@ -1319,15 +1401,15 @@ describe('Children - (JSX)', () => { } } - const spyUnmount = spy(UnMountTest.prototype, 'componentWillUnmount'); - const notCalled = assert.notCalled; + const spyUnmount = sinon.spy(UnMountTest.prototype, 'componentWillUnmount'); + const notCalled = sinon.assert.notCalled; render(, container); // initial render - expect(container.innerHTML).to.eql('
a
1
C
'); + expect(container.innerHTML).toEqual('
a
1
C
'); notCalled(spyUnmount); render(, container); - expect(container.innerHTML).to.eql('
a
b
1
C
'); + expect(container.innerHTML).toEqual('
a
b
1
C
'); notCalled(spyUnmount); }); }); @@ -1387,20 +1469,20 @@ describe('Children - (JSX)', () => { render(, container); - const unMountSpy = spy(FooBar.prototype, 'componentWillUnmount'); - const mountSpy = spy(FooBar.prototype, 'componentWillMount'); + const unMountSpy = sinon.spy(FooBar.prototype, 'componentWillUnmount'); + const mountSpy = sinon.spy(FooBar.prototype, 'componentWillMount'); - const calledOnce = assert.calledOnce; - const notCalled = assert.notCalled; + const calledOnce = sinon.assert.calledOnce; + const notCalled = sinon.assert.notCalled; - expect(container.innerHTML).to.eql('
foobarinitial
'); + expect(container.innerHTML).toEqual('
foobarinitial
'); mountSpy.reset(); unMountSpy.reset(); toggle(); // Unmount child component setTimeout(() => { - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); calledOnce(unMountSpy); notCalled(mountSpy); @@ -1460,20 +1542,20 @@ describe('Children - (JSX)', () => { render(, container); - const unMountSpy = spy(Test.prototype, 'componentWillUnmount'); - const mountSpy = spy(Test.prototype, 'componentWillMount'); + const unMountSpy = sinon.spy(Test.prototype, 'componentWillUnmount'); + const mountSpy = sinon.spy(Test.prototype, 'componentWillMount'); - const calledOnce = assert.calledOnce; - const notCalled = assert.notCalled; + const calledOnce = sinon.assert.calledOnce; + const notCalled = sinon.assert.notCalled; - expect(container.innerHTML).to.eql('
foobarf
'); + expect(container.innerHTML).toEqual('
foobarf
'); mountSpy.reset(); unMountSpy.reset(); toggle(); // Unmount child component setTimeout(() => { - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); calledOnce(unMountSpy); notCalled(mountSpy); @@ -1540,19 +1622,19 @@ describe('Children - (JSX)', () => { render(, container); - const unMountSpy = spy(Test.prototype, 'componentWillUnmount'); - const unMountSpy2 = spy(Foo.prototype, 'componentWillUnmount'); + const unMountSpy = sinon.spy(Test.prototype, 'componentWillUnmount'); + const unMountSpy2 = sinon.spy(Foo.prototype, 'componentWillUnmount'); - const calledOnce = assert.calledOnce; + const calledOnce = sinon.assert.calledOnce; - expect(container.innerHTML).to.eql('
foobarff
'); + expect(container.innerHTML).toEqual('
foobarff
'); unMountSpy2.reset(); unMountSpy.reset(); toggle(); // Unmount child component setTimeout(() => { - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); calledOnce(unMountSpy2); calledOnce(unMountSpy); done(); @@ -1638,17 +1720,19 @@ describe('Children - (JSX)', () => { render(, container); - const unMountSpy = spy(Test5.prototype, 'componentWillUnmount'); + const unMountSpy = sinon.spy(Test5.prototype, 'componentWillUnmount'); - const calledOnce = assert.calledOnce; + const calledOnce = sinon.assert.calledOnce; - expect(container.innerHTML).to.eql('
foobar

ShouldUnMountMe

'); + expect(container.innerHTML).toEqual( + '
foobar

ShouldUnMountMe

' + ); unMountSpy.reset(); toggle(); // Unmount child component setTimeout(() => { - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); calledOnce(unMountSpy); done(); }); @@ -1694,19 +1778,19 @@ describe('Children - (JSX)', () => { render(, container); - const unMountSpy = spy(Wrapper.prototype, 'componentWillUnmount'); - const unMountSpy2 = spy(FooBar.prototype, 'componentWillUnmount'); + const unMountSpy = sinon.spy(Wrapper.prototype, 'componentWillUnmount'); + const unMountSpy2 = sinon.spy(FooBar.prototype, 'componentWillUnmount'); - const calledOnce = assert.calledOnce; + const calledOnce = sinon.assert.calledOnce; - expect(container.innerHTML).to.eql('
foobarf
'); + expect(container.innerHTML).toEqual('
foobarf
'); unMountSpy.reset(); unMountSpy2.reset(); render(null, container); setTimeout(() => { - expect(container.innerHTML).to.eql(''); + expect(container.innerHTML).toEqual(''); calledOnce(unMountSpy); calledOnce(unMountSpy2); @@ -1787,29 +1871,29 @@ describe('Children - (JSX)', () => { render(, container); - const unMountSpy = spy(Wrapper.prototype, 'componentWillUnmount'); - const unMountSpy2 = spy(FooBar.prototype, 'componentWillUnmount'); + const unMountSpy = sinon.spy(Wrapper.prototype, 'componentWillUnmount'); + const unMountSpy2 = sinon.spy(FooBar.prototype, 'componentWillUnmount'); - const notCalled = assert.notCalled; + const notCalled = sinon.assert.notCalled; - expect(container.innerHTML).to.eql('
foobar
aa
'); + expect(container.innerHTML).toEqual('
foobar
aa
'); render(, container); setTimeout(() => { - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); notCalled(unMountSpy); notCalled(unMountSpy2); // This component is actually unmounted but fastUnmount skips unmount loop so unmounted remains false - expect(dirtyReference._unmounted).to.eql(true); + expect(dirtyReference._unmounted).toEqual(true); // Try to do setState and verify it doesn't fail updateFastUnmountedComponent(); setTimeout(() => { - expect(dirtyReference._unmounted).to.eql(true); - expect(container.innerHTML).to.eql('
foobar
'); + expect(dirtyReference._unmounted).toEqual(true); + expect(container.innerHTML).toEqual('
foobar
'); done(); }, 10); @@ -1856,18 +1940,18 @@ describe('Children - (JSX)', () => { } } - const unMountSpy = spy(Parent.prototype, 'componentWillUnmount'); - const unMountSpy2 = spy(HasLife.prototype, 'componentWillUnmount'); + const unMountSpy = sinon.spy(Parent.prototype, 'componentWillUnmount'); + const unMountSpy2 = sinon.spy(HasLife.prototype, 'componentWillUnmount'); - const notCalled = assert.notCalled; - const calledOnce = assert.calledOnce; + const notCalled = sinon.assert.notCalled; + const calledOnce = sinon.assert.calledOnce; render(, container); notCalled(unMountSpy); notCalled(unMountSpy2); - expect(container.innerHTML).to.eql('
haslifenolife
'); + expect(container.innerHTML).toEqual('
haslifenolife
'); render(null, container); @@ -1909,16 +1993,16 @@ describe('Children - (JSX)', () => { render(, container); - expect(container.innerHTML).to.eql('
foobarinitial
'); + expect(container.innerHTML).toEqual('
foobarinitial
'); - expect(mountCalls).to.eql(1); - expect(unMountCalls).to.eql(0); + expect(mountCalls).toEqual(1); + expect(unMountCalls).toEqual(0); render(, container); // Unmount child component - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); - expect(mountCalls).to.eql(1); - expect(unMountCalls).to.eql(1); + expect(mountCalls).toEqual(1); + expect(unMountCalls).toEqual(1); }); it('Should call componentWillUnmount for nested children', () => { @@ -1960,16 +2044,16 @@ describe('Children - (JSX)', () => { render(, container); - expect(container.innerHTML).to.eql('
foobarf
'); + expect(container.innerHTML).toEqual('
foobarf
'); - expect(mountCalls).to.eql(1); - expect(unMountCalls).to.eql(0); + expect(mountCalls).toEqual(1); + expect(unMountCalls).toEqual(0); render(, container); // Unmount child component - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); - expect(mountCalls).to.eql(1); - expect(unMountCalls).to.eql(1); + expect(mountCalls).toEqual(1); + expect(unMountCalls).toEqual(1); }); it('Should call componentWillUnmount for nested children #2', () => { @@ -2015,12 +2099,12 @@ describe('Children - (JSX)', () => { render(, container); - expect(container.innerHTML).to.eql('
foobarff
'); + expect(container.innerHTML).toEqual('
foobarff
'); render(, container); - expect(container.innerHTML).to.eql('
foobar
'); - expect(unMountTest).to.eql(1); - expect(unMountFoo).to.eql(1); + expect(container.innerHTML).toEqual('
foobar
'); + expect(unMountTest).toEqual(1); + expect(unMountFoo).toEqual(1); }); it('Should call componentWillUnmount for deeply nested children', () => { @@ -2079,12 +2163,14 @@ describe('Children - (JSX)', () => { render(, container); - expect(container.innerHTML).to.eql('
foobar

ShouldUnMountMe

'); + expect(container.innerHTML).toEqual( + '
foobar

ShouldUnMountMe

' + ); render(, container); - expect(container.innerHTML).to.eql('
foobar
'); + expect(container.innerHTML).toEqual('
foobar
'); - expect(unMountTest).to.eql(1); + expect(unMountTest).toEqual(1); }); it('Should call componentWillUnmount for parent when children dont have componentWIllUnmount', (done) => { @@ -2123,14 +2209,14 @@ describe('Children - (JSX)', () => { render(, container); - expect(container.innerHTML).to.eql('
foobarf
'); + expect(container.innerHTML).toEqual('
foobarf
'); render(null, container); setTimeout(() => { - expect(container.innerHTML).to.eql(''); + expect(container.innerHTML).toEqual(''); - expect(unMountTest).to.eql(1); - expect(unMountTwoTest).to.eql(1); + expect(unMountTest).toEqual(1); + expect(unMountTwoTest).toEqual(1); done(); }, 10); }); diff --git a/packages/inferno-create-element/__tests__/cloneVNode.spec.jsx b/packages/inferno-create-element/__tests__/cloneVNode.spec.jsx index b5eaee797..34bc279a1 100644 --- a/packages/inferno-create-element/__tests__/cloneVNode.spec.jsx +++ b/packages/inferno-create-element/__tests__/cloneVNode.spec.jsx @@ -1,6 +1,6 @@ import { cloneVNode, render } from 'inferno'; -import { innerHTML } from 'inferno/test/utils'; +import { innerHTML } from 'inferno-utils'; // React Fiddle for Cloning https://jsfiddle.net/es4u02jv/ describe('cloneVNode (JSX)', () => { @@ -13,19 +13,19 @@ describe('cloneVNode (JSX)', () => { it('should clone a tag', () => { const node = cloneVNode(, null); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('')); + expect(container.innerHTML).toBe(innerHTML('')); }); it('should clone with third argument array', () => { const node = cloneVNode(
, null, []); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
')); + expect(container.innerHTML).toBe(innerHTML('
')); }); it('should clone with third argument overriding props and cloned node children', () => { const node = cloneVNode(
f
, { children: 'x' }, [1]); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('')); + expect(container.innerHTML).toBe(innerHTML('')); }); it('should clone OPT_ELEMENT', () => { @@ -39,57 +39,61 @@ describe('cloneVNode (JSX)', () => { onComponentWillUpdate={ noop } />, { children: [] }); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
')); + expect(container.innerHTML).toBe(innerHTML('
')); }); it('should clone a basic element with array children', () => { const node = cloneVNode(
, { children: [] }); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
')); + expect(container.innerHTML).toBe(innerHTML('
')); }); it('should clone a basic element with children in props and as third argument', () => { const node1 = cloneVNode(
, { children: arr1a }, arr2b); render(node1, container); - expect(container.innerHTML).to.equal(innerHTML('
arr2b
')); + expect(container.innerHTML).toBe(innerHTML('
arr2b
')); const node2 = cloneVNode(
, { children: [arr2a] }, arr2b); render(node2, container); - expect(container.innerHTML).to.equal(innerHTML('
arr2b
')); + expect(container.innerHTML).toBe(innerHTML('
arr2b
')); const node3 = cloneVNode(
, { children: [arr3a] }, [arr3b]); render(node3, container); - expect(container.innerHTML).to.equal(innerHTML('
arr3b
')); + expect(container.innerHTML).toBe(innerHTML('
arr3b
')); }); it('Should support multiple parameters as children', () => { const node = cloneVNode(
, null, arr3a, arr3b, arr3c); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
arr3aarr3barr3c
')); + expect(container.innerHTML).toBe( + innerHTML('
arr3aarr3barr3c
') + ); }); it('Should support multiple nodes as children inside array', () => { const node = cloneVNode(
, null, [ arr3a, arr3b, arr3c ]); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
arr3aarr3barr3c
')); + expect(container.innerHTML).toBe( + innerHTML('
arr3aarr3barr3c
') + ); }); it('Should support single node as children', () => { const node = cloneVNode(
, null, arr3a); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
arr3a
')); + expect(container.innerHTML).toBe(innerHTML('
arr3a
')); }); it('Should support single node as children inside array', () => { const node = cloneVNode(
, null, [arr3a]); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
arr3a
')); + expect(container.innerHTML).toBe(innerHTML('
arr3a
')); }); it('should clone a basic element with null children', () => { const node = cloneVNode(
, { children: null }); render(node, container); - expect(container.innerHTML).to.equal(innerHTML('
')); + expect(container.innerHTML).toBe(innerHTML('
')); }); it('should clone a basic element with key and ref', () => { @@ -97,26 +101,26 @@ describe('cloneVNode (JSX)', () => { }; const node = cloneVNode(
, { key: 'foo', ref }); - expect(node.key).to.equal('foo'); - expect(node.ref).to.equal(ref); + expect(node.key).toBe('foo'); + expect(node.ref).toBe(ref); }); it('should clone a basic element with different children and props', () => { const node1 =
Hello world
; render(node1, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world
')); const node2 = cloneVNode(node1, null, 'Hello world 2!'); render(node2, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world 2!
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world 2!
')); const node3 = cloneVNode(node2, { className: 'foo' }, 'Hello world 2!'); render(node3, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world 2!
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world 2!
')); const node4 = cloneVNode(node1, { className: 'foo' }, 'Hello world 3!'); render(node4, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world 3!
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world 3!
')); }); function StatelessComponent(props) { @@ -127,15 +131,15 @@ describe('cloneVNode (JSX)', () => { const node1 = ; render(node1, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world
')); const node2 = cloneVNode(node1, { children: 'Hello world 2!' }); render(node2, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world 2!
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world 2!
')); const node3 = cloneVNode(node1, { children: 'Hello world 3!', className: 'yo' }); render(node3, container); - expect(container.innerHTML).to.equal(innerHTML('
Hello world 3!
')); + expect(container.innerHTML).toBe(innerHTML('
Hello world 3!
')); }); it('Should prefer children in order', () => { @@ -154,19 +158,19 @@ describe('cloneVNode (JSX)', () => { container ); - expect(container.innerHTML).to.equal('
First
'); + expect(container.innerHTML).toBe('
First
'); render(cloneVNode(nodeToClone, { children: 'Second' }), container); - expect(container.innerHTML).to.equal('
Second
'); + expect(container.innerHTML).toBe('
Second
'); render(cloneVNode(nodeToClone, { children: 'Second' }, 'Third'), container); - expect(container.innerHTML).to.equal('
Third
'); + expect(container.innerHTML).toBe('
Third
'); render(cloneVNode(nodeToClone, { children: 'Second' }, 'Third', 'Fourth'), container); - expect(container.innerHTML).to.equal('
ThirdFourth
'); + expect(container.innerHTML).toBe('
ThirdFourth
'); }); it('Should prefer children in order #2', () => { @@ -185,15 +189,15 @@ describe('cloneVNode (JSX)', () => { container ); - expect(container.innerHTML).to.equal('
First
'); + expect(container.innerHTML).toBe('
First
'); render(cloneVNode(nodeToClone, null), container); - expect(container.innerHTML).to.equal('
First
'); + expect(container.innerHTML).toBe('
First
'); render(cloneVNode(nodeToClone, null, null), container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).toBe('
'); }); }); diff --git a/packages/inferno-create-element/__tests__/clonenode.spec.jsx b/packages/inferno-create-element/__tests__/clonenode.spec.jsx index 04660c2ac..b3a2b94ed 100644 --- a/packages/inferno-create-element/__tests__/clonenode.spec.jsx +++ b/packages/inferno-create-element/__tests__/clonenode.spec.jsx @@ -20,6 +20,6 @@ describe('CloneVNode use cases', () => { render(
{[ a, a, a, a ]}
, container); - expect(container.innerHTML).to.eql('
foobarfoobarfoobarfoobar
'); + expect(container.innerHTML).toEqual('
foobarfoobarfoobarfoobar
'); }); }); diff --git a/packages/inferno-create-element/__tests__/columnrender.spec.jsx b/packages/inferno-create-element/__tests__/columnrender.spec.jsx index 2a41513a2..fc62596bc 100644 --- a/packages/inferno-create-element/__tests__/columnrender.spec.jsx +++ b/packages/inferno-create-element/__tests__/columnrender.spec.jsx @@ -2,7 +2,7 @@ import { render } from 'inferno'; import Component from 'inferno-component'; import { isNullOrUndef } from 'inferno-shared'; -import { spy } from 'sinon'; +import sinon from 'sinon'; describe('Columns like tests - (JSX)', () => { let container; @@ -132,20 +132,20 @@ describe('Columns like tests - (JSX)', () => { const root = _container.firstChild; const rootChildNodes = filterPlaceholders(root.childNodes); - expect(rootChildNodes.length).to.equal(columns.length); + expect(rootChildNodes.length).toBe(columns.length); // Verify columns for (let i = 0; i < rootChildNodes.length; i++) { const columnRoot = rootChildNodes[ i ]; const columnChildNodes = filterPlaceholders(columnRoot.childNodes); - expect(columnChildNodes.length).to.equal(columns[ i ].items.length + 1, `Column data: ${JSON.stringify(columns[ i ].items)} Rendered: ${columnRoot.innerHTML}`); - expect(columnRoot.firstChild.innerHTML).to.equal('column', 'Column first child check'); + expect(columnChildNodes.length).toBe(columns[ i ].items.length + 1); + expect(columnRoot.firstChild.innerHTML).toBe('column'); // Verify items // Skip first - its hardcoded for (let j = 1; j < columnChildNodes.length; j++) { const itemRoot = columnChildNodes[ j ]; - expect(itemRoot.innerHTML).to.equal(columns[ i ].items[ j - 1 ].text.toString(), 'item content check'); + expect(itemRoot.innerHTML).toBe(columns[ i ].items[ j - 1 ].text.toString()); } } } @@ -242,12 +242,12 @@ describe('Columns like tests - (JSX)', () => { let updateItemSpy = null; beforeEach(function () { - mountedColumnSpy = spy(ColumnKeyed.prototype, 'componentWillMount'); - unmountColumnSpy = spy(ColumnKeyed.prototype, 'componentWillUnmount'); - updateColumnSpy = spy(ColumnKeyed.prototype, 'componentWillUpdate'); - mountedItemSpy = spy(ItemKeyed.prototype, 'componentWillMount'); - unmountItemSpy = spy(ItemKeyed.prototype, 'componentWillUnmount'); - updateItemSpy = spy(ItemKeyed.prototype, 'componentWillUpdate'); + mountedColumnSpy = sinon.spy(ColumnKeyed.prototype, 'componentWillMount'); + unmountColumnSpy = sinon.spy(ColumnKeyed.prototype, 'componentWillUnmount'); + updateColumnSpy = sinon.spy(ColumnKeyed.prototype, 'componentWillUpdate'); + mountedItemSpy = sinon.spy(ItemKeyed.prototype, 'componentWillMount'); + unmountItemSpy = sinon.spy(ItemKeyed.prototype, 'componentWillUnmount'); + updateItemSpy = sinon.spy(ItemKeyed.prototype, 'componentWillUpdate'); }); afterEach(function () { @@ -296,13 +296,13 @@ describe('Columns like tests - (JSX)', () => { // Do initial render render(, container); verifyRenderResult(testCase.initial, container); - expect(mountedColumnSpy.callCount).to.equal(testCase.initial.length, 'Column Initial MOUNT'); // Initial all mounted - expect(unmountColumnSpy.callCount).to.equal(0, 'Column Initial unMount'); // Initial render none unmounted - expect(updateColumnSpy.callCount).to.equal(0, 'Column Initial update'); // Initial render none to update + expect(mountedColumnSpy.callCount).toBe(testCase.initial.length); // Initial all mounted + expect(unmountColumnSpy.callCount).toBe(0); // Initial render none unmounted + expect(updateColumnSpy.callCount).toBe(0); // Initial render none to update - expect(mountedItemSpy.callCount).to.equal(initialItemsCount, 'Item Initial Mount'); // Initial render - mount all items once - expect(updateItemSpy.callCount).to.equal(0, 'Item initial update'); // Initial render none to update - expect(unmountItemSpy.callCount).to.equal(0, 'Item initial unmount'); // Initial render none unmounted + expect(mountedItemSpy.callCount).toBe(initialItemsCount); // Initial render - mount all items once + expect(updateItemSpy.callCount).toBe(0); // Initial render none to update + expect(unmountItemSpy.callCount).toBe(0); // Initial render none unmounted // reset call counts mountedColumnSpy.reset(); @@ -316,12 +316,12 @@ describe('Columns like tests - (JSX)', () => { render(, container); verifyRenderResult(testCase.update, container); - expect(mountedColumnSpy.callCount).to.equal(columnsToBeAdded.length, 'mount'); // mount count should equal to added count - expect(unmountColumnSpy.callCount).to.equal(columnsToRemove.length, 'unmount'); // Initial render none unmounted - expect(updateColumnSpy.callCount).to.equal(columnsToUpdate.length, 'update'); // Initial render none unmounted - expect(mountedItemSpy.callCount).to.equal(itemsToBeAdded.length, `itemsToBeAdded ${JSON.stringify(itemsToBeAdded)} componentWillMount called: ${mountedItemSpy.callCount} times.`); // Initial render - mount all items once - expect(updateItemSpy.callCount).to.equal(itemsToUpdate.length, 'item update callback count'); // Initial render none to update - expect(unmountItemSpy.callCount).to.equal(itemsToRemove.length, 'item unmount callback count'); // Initial render none unmounted + expect(mountedColumnSpy.callCount).toBe(columnsToBeAdded.length); // mount count should equal to added count + expect(unmountColumnSpy.callCount).toBe(columnsToRemove.length); // Initial render none unmounted + expect(updateColumnSpy.callCount).toBe(columnsToUpdate.length); // Initial render none unmounted + expect(mountedItemSpy.callCount).toBe(itemsToBeAdded.length); // Initial render - mount all items once + expect(updateItemSpy.callCount).toBe(itemsToUpdate.length); // Initial render none to update + expect(unmountItemSpy.callCount).toBe(itemsToRemove.length); // Initial render none unmounted }); }); }); @@ -402,12 +402,12 @@ describe('Columns like tests - (JSX)', () => { let updateItemSpy = null; beforeEach(function () { - mountedColumnSpy = spy(Column.prototype, 'componentWillMount'); - unmountColumnSpy = spy(Column.prototype, 'componentWillUnmount'); - updateColumnSpy = spy(Column.prototype, 'componentWillUpdate'); - mountedItemSpy = spy(Item.prototype, 'componentWillMount'); - unmountItemSpy = spy(Item.prototype, 'componentWillUnmount'); - updateItemSpy = spy(Item.prototype, 'componentWillUpdate'); + mountedColumnSpy = sinon.spy(Column.prototype, 'componentWillMount'); + unmountColumnSpy = sinon.spy(Column.prototype, 'componentWillUnmount'); + updateColumnSpy = sinon.spy(Column.prototype, 'componentWillUpdate'); + mountedItemSpy = sinon.spy(Item.prototype, 'componentWillMount'); + unmountItemSpy = sinon.spy(Item.prototype, 'componentWillUnmount'); + updateItemSpy = sinon.spy(Item.prototype, 'componentWillUpdate'); }); afterEach(function () { @@ -456,13 +456,13 @@ describe('Columns like tests - (JSX)', () => { // Do initial render render(, container); verifyRenderResult(testCase.initial, container); - expect(mountedColumnSpy.callCount).to.equal(testCase.initial.length, 'Column Initial MOUNT'); // Initial all mounted - expect(unmountColumnSpy.callCount).to.equal(0, 'Column Initial unMount'); // Initial render none unmounted - expect(updateColumnSpy.callCount).to.equal(0, 'Column Initial update'); // Initial render none to update + expect(mountedColumnSpy.callCount).toBe(testCase.initial.length); // Initial all mounted + expect(unmountColumnSpy.callCount).toBe(0); // Initial render none unmounted + expect(updateColumnSpy.callCount).toBe(0); // Initial render none to update - expect(mountedItemSpy.callCount).to.equal(initialItemsCount, 'Item Initial Mount'); // Initial render - mount all items once - expect(updateItemSpy.callCount).to.equal(0, 'Item initial update'); // Initial render none to update - expect(unmountItemSpy.callCount).to.equal(0, 'Item initial unmount'); // Initial render none unmounted + expect(mountedItemSpy.callCount).toBe(initialItemsCount); // Initial render - mount all items once + expect(updateItemSpy.callCount).toBe(0); // Initial render none to update + expect(unmountItemSpy.callCount).toBe(0); // Initial render none unmounted // reset call counts mountedColumnSpy.reset(); @@ -476,12 +476,12 @@ describe('Columns like tests - (JSX)', () => { render(, container); verifyRenderResult(testCase.update, container); - expect(mountedColumnSpy.callCount).to.equal(columnsToBeAdded.length, 'mount'); // mount count should equal to added count - expect(unmountColumnSpy.callCount).to.equal(columnsToRemove.length, 'unmount'); // Initial render none unmounted - expect(updateColumnSpy.callCount).to.equal(columnsToUpdate.length, 'update'); // Initial render none unmounted - expect(mountedItemSpy.callCount).to.equal(itemsToBeAdded.length, `itemsToBeAdded ${JSON.stringify(itemsToBeAdded)} componentWillMount called: ${mountedItemSpy.callCount} times.`); // Initial render - mount all items once - expect(updateItemSpy.callCount).to.equal(itemsToUpdate.length, 'item update callback count'); // Initial render none to update - expect(unmountItemSpy.callCount).to.equal(itemsToRemove.length, 'item unmount callback count'); // Initial render none unmounted + expect(mountedColumnSpy.callCount).toBe(columnsToBeAdded.length); // mount count should equal to added count + expect(unmountColumnSpy.callCount).toBe(columnsToRemove.length); // Initial render none unmounted + expect(updateColumnSpy.callCount).toBe(columnsToUpdate.length); // Initial render none unmounted + expect(mountedItemSpy.callCount).toBe(itemsToBeAdded.length); // Initial render - mount all items once + expect(updateItemSpy.callCount).toBe(itemsToUpdate.length); // Initial render none to update + expect(unmountItemSpy.callCount).toBe(itemsToRemove.length); // Initial render none unmounted }); }); }); diff --git a/packages/inferno-create-element/__tests__/components.spec.browser.js b/packages/inferno-create-element/__tests__/components.spec.browser.js index bd3cdcc9b..47325026d 100644 --- a/packages/inferno-create-element/__tests__/components.spec.browser.js +++ b/packages/inferno-create-element/__tests__/components.spec.browser.js @@ -1,1164 +1,1143 @@ import { render } from 'inferno'; import Component from 'inferno-component'; -import createElement from '../dist-es'; -import { innerHTML, waits } from 'inferno/test/utils'; +import createElement from 'inferno-create-element'; +import { innerHTML, waits } from 'inferno-utils'; let global; describe('Components (non-JSX)', () => { let container; - beforeEach(function () { + beforeEach(function() { container = document.createElement('div'); document.body.appendChild(container); }); - afterEach(function () { + afterEach(function() { render(null, container); document.body.removeChild(container); }); - class BasicComponent1 extends Component { - render() { - const template = (name, title) => - createElement('div', - { - className: 'basic' - }, - createElement('span', { - className: name - }, 'The title is ', title) - ); - return template(this.props.name, this.props.title); - } - } - - it('should render a basic component', () => { - let template = (Component, title) => - createElement('div', null, - createElement(Component, { - title, - name: 'basic-render' - }) - ); - - expect(() => { - render(template(null, 'abc'), container); - }).to.throw(); - - expect(() => { - render(template({}, 'abc'), container); - }).to.throw(); + it('should pass', () => { + expect(true).toBeTruthy(); + }); - render(template(BasicComponent1, 'abc'), container); + if (typeof global !== 'undefined' && !global.usingJSDOM) { - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is abc'); + class BasicComponent1 extends Component { + render() { + const template = (name, title) => + createElement('div', + { + className: 'basic' + }, + createElement('span', { + className: name + }, 'The title is ', title) + ); + return template(this.props.name, this.props.title); + } + } - expect(() => { - render(template({}, 'abc'), container); - }).to.throw(); + it('should render a basic component', () => { + const template = (Component, title) => + createElement('div', null, + createElement(Component, { + title, + name: 'basic-render' + }) + ); - expect(() => render(template(BasicComponent1, {}), container)).to.throw; + expect(() => { + render(template(null, 'abc'), container); + }).toThrowError(); - render(template(BasicComponent1, []), container); + expect(() => { + render(template({}, 'abc'), container); + }).toThrowError(); - render(template(BasicComponent1, 'abcdef'), container); + render(template(BasicComponent1, 'abc'), container); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is abcdef'); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('basic-render'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe('The title is abc'); - render(template(BasicComponent1, null), container); + expect(() => { + render(template({}, 'abc'), container); + }).toThrowError(); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is '); + expect(() => render(template(BasicComponent1, {}), container)).toThrow(); - render(template(BasicComponent1, undefined), container); + render(template(BasicComponent1, []), container); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is '); + render(template(BasicComponent1, 'abcdef'), container); - render(template(BasicComponent1, '1234'), container); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('basic-render'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe('The title is abcdef'); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is 1234'); - }); + render(template(BasicComponent1, null), container); - class BasicComponent1b extends Component { - render() { - const template = (isChecked, title) => - createElement('div', - { - className: 'basic' - }, - createElement('label', {}, - createElement('input', { - type: 'checkbox', - checked: isChecked - }), - 'The title is ', - title - ) - ); - return template(this.props.isChecked, this.props.title); - } - } -// - it('should render a basic component with inputs', () => { - let template = (Component, title, isChecked) => - createElement('div', null, - createElement(Component, { - title, - isChecked - }) - ); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('basic-render'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe('The title is '); - render(null, container); + render(template(BasicComponent1, undefined), container); - render(template(BasicComponent1b, 'abc', true), container); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).to.equal('checkbox'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('LABEL'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal(innerHTML('The title is abc')); - expect(container.querySelector('input').checked).to.equal(true); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('basic-render'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe('The title is '); - render(null, container); - render(null, container); + render(template(BasicComponent1, '1234'), container); - render(template(BasicComponent1b, 'abc', null), container); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).to.equal('checkbox'); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('LABEL'); - expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal(innerHTML('The title is abc')); - expect(container.querySelector('input').checked).to.equal(false); - }); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('basic-render'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe('The title is 1234'); + }); - class BasicComponent1c extends Component { - render() { - const template = (isEnabled, title, type) => - createElement('div', - { - className: 'basic' - }, - createElement('label', {}, - createElement('input', { - type, - disabled: !isEnabled - }), - 'The title is ', - title - ) - ); - return template(this.props.isEnabled, this.props.title, this.props.type); + class BasicComponent1b extends Component { + render() { + const template = (isChecked, title) => + createElement('div', + { + className: 'basic' + }, + createElement('label', {}, + createElement('input', { + type: 'checkbox', + checked: isChecked + }), + 'The title is ', + title + ) + ); + return template(this.props.isChecked, this.props.title); + } } - } + // + it('should render a basic component with inputs', () => { + const template = (Component, title, isChecked) => + createElement('div', null, + createElement(Component, { + title, + isChecked + }) + ); - it('should render a basic component with input tag and attributes', () => { - let template = (Component, title, isEnabled) => - createElement('div', null, - createElement(Component, { - title, - isEnabled, - type: 'password' - }) - ); + render(null, container); + + render(template(BasicComponent1b, 'abc', true), container); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).toBe('checkbox'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('LABEL'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe(innerHTML('The title is abc')); + expect(container.querySelector('input').checked).toBe(true); + + render(null, container); + render(null, container); + + render(template(BasicComponent1b, 'abc', null), container); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).toBe('checkbox'); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('LABEL'); + expect(container.firstChild.firstChild.firstChild.innerHTML).toBe(innerHTML('The title is abc')); + expect(container.querySelector('input').checked).toBe(false); + }); - render(template(BasicComponent1c, 'abc', true), container); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('LABEL'); - expect(container.firstChild.firstChild.firstChild.firstChild.tagName).to.equal('INPUT'); - expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).to.equal('password'); - expect(container.firstChild.firstChild.firstChild.firstChild.disabled).to.equal(false); - expect(container.firstChild.firstChild.firstChild.textContent).to.equal('The title is abc'); - render(template(BasicComponent1c, ['abc'], true), container); - expect(container.firstChild.firstChild.tagName).to.equal('DIV'); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('LABEL'); - expect(container.firstChild.firstChild.firstChild.firstChild.tagName).to.equal('INPUT'); - expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).to.equal('password'); - expect(container.firstChild.firstChild.firstChild.firstChild.disabled).to.equal(false); - expect(container.firstChild.firstChild.firstChild.textContent).to.equal('The title is abc'); - }); + class BasicComponent1c extends Component { + render() { + const template = (isEnabled, title, type) => + createElement('div', + { + className: 'basic' + }, + createElement('label', {}, + createElement('input', { + type, + disabled: !isEnabled + }), + 'The title is ', + title + ) + ); + return template(this.props.isEnabled, this.props.title, this.props.type); + } + } - class BasicComponent1d extends Component { - render() { - const template = (isDisabled, title) => - createElement('div', { className: 'basic' }, - createElement('label', {}, - createElement('input', { type: 'password', disabled: isDisabled }), - 'The title is ', - title - ) + it('should render a basic component with input tag and attributes', () => { + const template = (Component, title, isEnabled) => + createElement('div', null, + createElement(Component, { + title, + isEnabled, + type: 'password' + }) ); - return template(this.props.isDisabled, this.props.title); - } - } - it('should render a basic component with inputs #3 #3', () => { - let template = (Component, title, isDisabled) => - createElement('div', null, - createElement(Component, { title, isDisabled }) - ); - render(template(BasicComponent1d, 'abc', true), container); - expect( - innerHTML(container.innerHTML) - ).to.equal( - innerHTML('
') - ); - expect( - container.querySelector('input').disabled - ).to.equal( - true - ); - - render(template(BasicComponent1d, '123', false), container); - expect( - innerHTML(container.innerHTML) - ).to.equal( - '
' - ); - expect( - container.querySelector('input').disabled - ).to.equal( - false - ); - }); + render(template(BasicComponent1c, 'abc', true), container); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('LABEL'); + expect(container.firstChild.firstChild.firstChild.firstChild.tagName).toBe('INPUT'); + expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).toBe('password'); + expect(container.firstChild.firstChild.firstChild.firstChild.disabled).toBe(false); + expect(container.firstChild.firstChild.firstChild.textContent).toBe('The title is abc'); + render(template(BasicComponent1c, ['abc'], true), container); + expect(container.firstChild.firstChild.tagName).toBe('DIV'); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('LABEL'); + expect(container.firstChild.firstChild.firstChild.firstChild.tagName).toBe('INPUT'); + expect(container.firstChild.firstChild.firstChild.firstChild.getAttribute('type')).toBe('password'); + expect(container.firstChild.firstChild.firstChild.firstChild.disabled).toBe(false); + expect(container.firstChild.firstChild.firstChild.textContent).toBe('The title is abc'); + }); - it('should render a basic component and remove property if null #1', () => { - let template = (Component, title, name) => - createElement('div', null, - createElement(Component, { title, name }) - ); + class BasicComponent1d extends Component { + render() { + const template = (isDisabled, title) => + createElement('div', { className: 'basic' }, + createElement('label', {}, + createElement('input', { type: 'password', disabled: isDisabled }), + 'The title is ', + title + ) + ); + return template(this.props.isDisabled, this.props.title); + } + } - render(template(BasicComponent1, 'abc', 'basic-render'), container); + it('should render a basic component with inputs #3 #3', () => { + const template = (Component, title, isDisabled) => + createElement('div', null, + createElement(Component, { title, isDisabled }) + ); + render(template(BasicComponent1d, 'abc', true), container); + expect( + innerHTML(container.innerHTML) + ).toBe( + innerHTML('
') + ); + expect( + container.querySelector('input').disabled + ).toBe(true); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); + render(template(BasicComponent1d, '123', false), container); + expect( + innerHTML(container.innerHTML) + ).toBe( + '
' + ); + expect( + container.querySelector('input').disabled + ).toBe(false); + }); - render(template(BasicComponent1, '123', null), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - }); + it('should render a basic component and remove property if null #1', () => { + const template = (Component, title, name) => + createElement('div', null, + createElement(Component, { title, name }) + ); - it('should render a basic component and remove property if null #2', () => { + render(template(BasicComponent1, 'abc', 'basic-render'), container); - let template = (Component, title, name) => - createElement('div', null, - createElement(Component, { title, name }) - ); + expect( + container.innerHTML + ).toBe( + '
The title is abc
' + ); - render(template(BasicComponent1, 'abc', null), container); + render(template(BasicComponent1, '123', null), container); + expect( + container.innerHTML + ).toBe('
The title is 123
'); + }); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); + it('should render a basic component and remove property if null #2', () => { - render(null, container); + const template = (Component, title, name) => + createElement('div', null, + createElement(Component, { title, name }) + ); - render(template(BasicComponent1, '123', 'basic-update'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - }); + render(template(BasicComponent1, 'abc', null), container); - it('should render a basic root component', () => { - let template = (Component, title, name) => - createElement(Component, { title, name }); + expect( + container.innerHTML + ).toBe('
The title is abc
'); - render(template(BasicComponent1, 'abc', 'basic-render'), container); + render(null, container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); - render(template(BasicComponent1, 'abc', 'basic-render'), container); + render(template(BasicComponent1, '123', 'basic-update'), container); + expect( + container.innerHTML + ).toBe( + '
The title is 123
' + ); + }); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); + it('should render a basic root component', () => { + const template = (Component, title, name) => + createElement(Component, { title, name }); - render(template(BasicComponent1, 'abc', {}), container); + render(template(BasicComponent1, 'abc', 'basic-render'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); + expect( + container.innerHTML + ).toBe( + '
The title is abc
' + ); + render(template(BasicComponent1, 'abc', 'basic-render'), container); - render(null, container); + expect( + container.innerHTML + ).toBe( + '
The title is abc
' + ); - expect( - container.innerHTML - ).to.equal( - '' - ); - }); + render(template(BasicComponent1, 'abc', {}), container); - class BasicComponent2 extends Component { - render() { - const template = (name, title, children) => - createElement('div', - { - className: 'basic' - }, - createElement('span', { - className: name - }, 'The title is ', title), - children - ) - ; - return template(this.props.name, this.props.title, this.props.children); - } - } + expect( + container.innerHTML + ).toBe( + '
The title is abc
' + ); - it('should render a basic component with children', () => { - let template = (Component, title, name) => - createElement('div', null, - createElement(Component, - { - title, - name - }, - createElement('span', null, 'I\'m a child') - ) - ); + render(null, container); - render(template(BasicComponent2, 'abc', 'basic-render'), container); - - expect( - container.innerHTML - ).to.equal( - '
The title is abcI\'m a child
' - ); - render(template(BasicComponent2, 'abc', 'basic-render'), container); - - expect( - container.innerHTML - ).to.equal( - '
The title is abcI\'m a child
' - ); - - render( - template(BasicComponent2, '123', 'basic-update'), container - ); - expect( - container.innerHTML - ).to.equal( - '
The title is 123I\'m a child
' - ); - render( - template(BasicComponent2, '1234', 'basic-update'), container - ); - expect( - container.innerHTML - ).to.equal( - '
The title is 1234I\'m a child
' - ); - }); + expect( + container.innerHTML + ).toBe(''); + }); - class BasicComponent2b extends Component { - render() { - const template = (children) => - createElement('div', null, - createElement('span', null, 'component!'), - createElement('div', null, children) - ) - ; - return template(this.props.children); + class BasicComponent2 extends Component { + render() { + const template = (name, title, children) => + createElement('div', + { + className: 'basic' + }, + createElement('span', { + className: name + }, 'The title is ', title), + children + ) + ; + return template(this.props.name, this.props.title, this.props.children); + } } - } - class BasicComponent2c extends Component { - render() { - const template = (children) => + it('should render a basic component with children', () => { + const template = (Component, title, name) => createElement('div', null, - createElement('span', null, 'other component!'), - createElement('div', null, children) - ) - ; - return template(this.props.children); - } - } - - class BasicComponent3 extends Component { - render() { - const template = (styles, title) => - createElement('div', - { - style: styles - }, - createElement('span', { - style: styles - }, 'The title is ', title) - ) - ; - - return template(this.props.styles, this.props.title); - } - } - - if (typeof global !== 'undefined' && !global.usingJSDOM) { - it('should render a basic component with styling', () => { - - let template = (Component, props) => - createElement(Component, props); + createElement(Component, + { + title, + name + }, + createElement('span', null, 'I\'m a child') + ) + ); - render(template(BasicComponent3, { - title: 'styled!', - styles: { - color: 'red', - paddingLeft: '10px' - } - }), container); + render(template(BasicComponent2, 'abc', 'basic-render'), container); expect( container.innerHTML - ).to.equal( - '
The title is styled!
' - ); - render(template(BasicComponent3, { - title: 'styled!', - styles: { - color: 'red', - paddingLeft: '10px' - } - }), container); + ).toBe( + '
The title is abcI\'m a child
' + ); + render(template(BasicComponent2, 'abc', 'basic-render'), container); expect( container.innerHTML - ).to.equal( - '
The title is styled!
' - ); + ).toBe( + '
The title is abcI\'m a child
' + ); - render(template(BasicComponent3, { - title: 'styled (again)!', - styles: { - color: 'blue', - paddingRight: '20px' - } - }), container); + render( + template(BasicComponent2, '123', 'basic-update'), container + ); expect( container.innerHTML - ).to.equal( - '
The title is styled (again)!
' + ).toBe( + '
The title is 123I\'m a child
' + ); + render( + template(BasicComponent2, '1234', 'basic-update'), container ); + expect( + container.innerHTML + ).toBe( + '
The title is 1234I\'m a child
' + ); }); - } - - it('should render a basic component with component children', () => { - let template = (Component1, Component2, Component3) => - createElement(Component1, null, - createElement(Component2, null, - createElement(Component3, null) - ) - ); - render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); - - expect( - container.innerHTML - ).to.equal( - '
component!
component!
component!
' - ); - - render(null, container); - - render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); - expect( - container.innerHTML - ).to.equal( - '
component!
component!
component!
' - ); - - render(template(BasicComponent2b, BasicComponent2b, BasicComponent2c), container); - expect( - container.innerHTML - ).to.equal( - '
component!
component!
other component!
' - ); - - render(template(BasicComponent2b, BasicComponent2c, BasicComponent2c), container); - expect( - container.innerHTML - ).to.equal( - '
component!
other component!
other component!
' - ); - - render(template(BasicComponent2b, BasicComponent2c, BasicComponent2c), container); - expect( - container.innerHTML - ).to.equal( - '
component!
other component!
other component!
' - ); - - render(template(BasicComponent2c, BasicComponent2c, BasicComponent2c), container); - expect( - container.innerHTML - ).to.equal( - '
other component!
other component!
other component!
' - ); - render(template(BasicComponent2c, BasicComponent2c, BasicComponent2c), container); - expect( - container.innerHTML - ).to.equal( - '
other component!
other component!
other component!
' - ); - }); - - it('should render a basic component and correctly mount', () => { - let template; - let componentWillMountCount; - class ComponentLifecycleCheck extends Component { + class BasicComponent2b extends Component { render() { - const _template = (children) => + const template = (children) => createElement('div', null, createElement('span', null, 'component!'), createElement('div', null, children) - ); - return _template(this.props.children); + ) + ; + return template(this.props.children); + } + } + + class BasicComponent2c extends Component { + render() { + const template = (children) => + createElement('div', null, + createElement('span', null, 'other component!'), + createElement('div', null, children) + ) + ; + return template(this.props.children); } + } + + class BasicComponent3 extends Component { + render() { + const template = (styles, title) => + createElement('div', + { + style: styles + }, + createElement('span', { + style: styles + }, 'The title is ', title) + ) + ; - componentWillMount() { - componentWillMountCount++; + return template(this.props.styles, this.props.title); } } - componentWillMountCount = 0; - template = (Component1, Component2, Component3) => - createElement(Component1, null, - createElement(Component2, null, - createElement(Component3, null) - ) - ); + if (typeof global !== 'undefined' && !global.usingJSDOM) { + it('should render a basic component with styling', () => { - render(template(ComponentLifecycleCheck, ComponentLifecycleCheck, ComponentLifecycleCheck), container); - expect( - componentWillMountCount - ).to.equal( - 3 - ); - - render(template(ComponentLifecycleCheck, ComponentLifecycleCheck, ComponentLifecycleCheck), container); - expect( - componentWillMountCount - ).to.equal( - 3 - ); - }); + const template = (Component, props) => + createElement(Component, props); - describe('should render multiple components', () => { - it('should render multiple components', () => { - let template = (Component, title1, name1, Component2, title2, name2) => - createElement('div', null, - createElement(Component, { - title: title1, - name: name1 - }), - createElement(Component2, { - title: title2, - name: name2 - }) + render(template(BasicComponent3, { + title: 'styled!', + styles: { + color: 'red', + paddingLeft: '10px' + } + }), container); + + expect( + container.innerHTML + ).toBe( + '
The title is styled!
' + ); + render(template(BasicComponent3, { + title: 'styled!', + styles: { + color: 'red', + paddingLeft: '10px' + } + }), container); + + expect( + container.innerHTML + ).toBe( + '
The title is styled!
' + ); + + render(template(BasicComponent3, { + title: 'styled (again)!', + styles: { + color: 'blue', + paddingRight: '20px' + } + }), container); + expect( + container.innerHTML + ).toBe( + '
The title is styled (again)!
' + ); + }); + } + + it('should render a basic component with component children', () => { + const template = (Component1, Component2, Component3) => + createElement(Component1, null, + createElement(Component2, null, + createElement(Component3, null) + ) ); + render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); + + expect( + container.innerHTML + ).toBe( + '
component!
component!
component!
' + ); - render(template(BasicComponent1, 'component 1', 'basic-render', BasicComponent1, 'component 2', 'basic-render'), container); + render(null, container); + render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); expect( container.innerHTML - ).to.equal( - '
The title is component 1
' + '
The title is component 2
' - ); + ).toBe( + '
component!
component!
component!
' + ); - render(template(BasicComponent1, 'component 1', 'basic-render', BasicComponent1, 'component 2', 'basic-render'), container); + render(template(BasicComponent2b, BasicComponent2b, BasicComponent2c), container); + expect( + container.innerHTML + ).toBe( + '
component!
component!
other component!
' + ); + render(template(BasicComponent2b, BasicComponent2c, BasicComponent2c), container); expect( container.innerHTML - ).to.equal( - '
The title is component 1
' + '
The title is component 2
' - ); - }); - }); + ).toBe( + '
component!
other component!
other component!
' + ); - it('should mount and unmount a basic component', () => { - let mountCount; - let unmountCount; - let template; + render(template(BasicComponent2b, BasicComponent2c, BasicComponent2c), container); + expect( + container.innerHTML + ).toBe( + '
component!
other component!
other component!
' + ); - class ComponentLifecycleCheck extends Component { - render() { - const _template = () => - createElement('div', null, - createElement('span', null) + render(template(BasicComponent2c, BasicComponent2c, BasicComponent2c), container); + expect( + container.innerHTML + ).toBe( + '
other component!
other component!
other component!
' ); - return _template(); - } + render(template(BasicComponent2c, BasicComponent2c, BasicComponent2c), container); + expect( + container.innerHTML + ).toBe( + '
other component!
other component!
other component!
' + ); + }); - componentDidMount() { - mountCount++; - } + it('should render a basic component and correctly mount', () => { + let template; + let componentWillMountCount; - componentWillUnmount() { - unmountCount++; + class ComponentLifecycleCheck extends Component { + render() { + const _template = (children) => + createElement('div', null, + createElement('span', null, 'component!'), + createElement('div', null, children) + ); + return _template(this.props.children); + } + + componentWillMount() { + componentWillMountCount++; + } } - } - mountCount = 0; - unmountCount = 0; - template = (Component) => - createElement(Component, null); - render(template(ComponentLifecycleCheck), container); + componentWillMountCount = 0; + template = (Component1, Component2, Component3) => + createElement(Component1, null, + createElement(Component2, null, + createElement(Component3, null) + ) + ); - expect(mountCount).to.equal(1); - render(null, container); - expect(unmountCount).to.equal(1); - }); + render(template(ComponentLifecycleCheck, ComponentLifecycleCheck, ComponentLifecycleCheck), container); + expect( + componentWillMountCount + ).toBe(3); - it('should mount and unmount a basic component #2', () => { - let mountCount; - let unmountCount; + render(template(ComponentLifecycleCheck, ComponentLifecycleCheck, ComponentLifecycleCheck), container); + expect( + componentWillMountCount + ).toBe(3); + }); - class ComponentLifecycleCheck extends Component { - render() { - return createElement('div', null, - createElement('span', null) - ); - } + describe('should render multiple components', () => { + it('should render multiple components', () => { + const template = (Component, title1, name1, Component2, title2, name2) => + createElement('div', null, + createElement(Component, { + title: title1, + name: name1 + }), + createElement(Component2, { + title: title2, + name: name2 + }) + ); - componentDidMount() { - mountCount++; - } + render(template(BasicComponent1, 'component 1', 'basic-render', BasicComponent1, 'component 2', 'basic-render'), container); - componentWillUnmount() { - unmountCount++; - } - } + expect( + container.innerHTML + ).toBe( + '
The title is component 1
' + '
The title is component 2
' + ); - mountCount = 0; - unmountCount = 0; + render(template(BasicComponent1, 'component 1', 'basic-render', BasicComponent1, 'component 2', 'basic-render'), container); - render(createElement(ComponentLifecycleCheck, null), container); - expect(mountCount).to.equal(1); - render(null, container); - expect(unmountCount).to.equal(1); - render(createElement(ComponentLifecycleCheck, null), container); - expect(mountCount).to.equal(2); - render(null, container); - expect(unmountCount).to.equal(2); - }); + expect( + container.innerHTML + ).toBe( + '
The title is component 1
' + '
The title is component 2
' + ); + }); + }); - describe('state changes should trigger all lifecycle events for an update', () => { - let componentWillMountCount; - let template; + it('should mount and unmount a basic component', () => { + let mountCount; + let unmountCount; + let template; - class ComponentLifecycleCheck extends Component { - constructor() { - super(null); - this.state = { - counter: 0 - }; - } + class ComponentLifecycleCheck extends Component { + render() { + const _template = () => + createElement('div', null, + createElement('span', null) + ); + return _template(); + } - render() { - const _template = (counter) => - createElement('div', null, - createElement('span', {}, counter) - ) - ; - return _template(this.state.counter); - } + componentDidMount() { + mountCount++; + } - componentWillMount() { - componentWillMountCount++; - this.setState({ - counter: this.state.counter + 1 - }); + componentWillUnmount() { + unmountCount++; + } } - } - beforeEach((done) => { - componentWillMountCount = 0; + mountCount = 0; + unmountCount = 0; template = (Component) => - createElement(Component, null) - ; + createElement(Component, null); render(template(ComponentLifecycleCheck), container); - waits(30, done); - }); - it('componentWillMountCount to have fired once', () => { - expect(componentWillMountCount).to.equal(1); - }); - it('the element in the component should show the new state', () => { - expect(container.innerHTML).to.equal( - '
1
' - ); + expect(mountCount).toBe(1); + render(null, container); + expect(unmountCount).toBe(1); }); - }); - describe('state changes should trigger all lifecycle events for an update #2', () => { - let componentWillMountCount; - let shouldComponentUpdateCount; - let componentDidUpdateCount; - let componentWillUpdateCount; - let template; - - class ComponentLifecycleCheck extends Component { - constructor() { - super(null); - this.state = { - counter: 0 - }; - } + it('should mount and unmount a basic component #2', () => { + let mountCount; + let unmountCount; - render() { - const _template = (counter) => - createElement('div', null, - createElement('span', {}, counter) - ) - ; - return _template(this.state.counter); + class ComponentLifecycleCheck extends Component { + render() { + return createElement('div', null, + createElement('span', null) + ); + } + + componentDidMount() { + mountCount++; + } + + componentWillUnmount() { + unmountCount++; + } } - componentWillMount() { - componentWillMountCount++; - setTimeout(() => { + mountCount = 0; + unmountCount = 0; + + render(createElement(ComponentLifecycleCheck, null), container); + expect(mountCount).toBe(1); + render(null, container); + expect(unmountCount).toBe(1); + render(createElement(ComponentLifecycleCheck, null), container); + expect(mountCount).toBe(2); + render(null, container); + expect(unmountCount).toBe(2); + }); + + describe('state changes should trigger all lifecycle events for an update', () => { + let componentWillMountCount; + let template; + + class ComponentLifecycleCheck extends Component { + constructor() { + super(null); + this.state = { + counter: 0 + }; + } + + render() { + const _template = (counter) => + createElement('div', null, + createElement('span', {}, counter) + ) + ; + return _template(this.state.counter); + } + + componentWillMount() { + componentWillMountCount++; this.setState({ counter: this.state.counter + 1 }); - }, 1); + } } - shouldComponentUpdate() { - shouldComponentUpdateCount++; - return true; - } + beforeEach((done) => { + componentWillMountCount = 0; + template = (Component) => + createElement(Component, null) + ; + render(template(ComponentLifecycleCheck), container); + waits(30, done); + }); - componentDidUpdate() { - componentDidUpdateCount++; - } + it('componentWillMountCount to have fired once', () => { + expect(componentWillMountCount).toBe(1); + }); + it('the element in the component should show the new state', () => { + expect(container.innerHTML).toBe('
1
'); + }); + }); - componentWillUpdate() { - componentWillUpdateCount++; - } - } + describe('state changes should trigger all lifecycle events for an update #2', () => { + let componentWillMountCount; + let shouldComponentUpdateCount; + let componentDidUpdateCount; + let componentWillUpdateCount; + let template; - beforeEach((done) => { - componentWillMountCount = 0; - shouldComponentUpdateCount = 0; - componentDidUpdateCount = 0; - componentWillUpdateCount = 0; - template = (Component) => - createElement(Component, null) - ; - render(template(ComponentLifecycleCheck), container); - waits(30, done); - }); + class ComponentLifecycleCheck extends Component { + constructor() { + super(null); + this.state = { + counter: 0 + }; + } - it('componentWillMountCount to have fired once', () => { - expect(componentWillMountCount).to.equal(1); - }); - it('shouldComponentUpdateCount to have fired once', () => { - expect(shouldComponentUpdateCount).to.equal(1); - }); - it('componentWillUpdateCount to have fired once', () => { - expect(componentWillUpdateCount).to.equal(1); - }); - it('componentDidUpdateCount to have fired once', () => { - expect(componentDidUpdateCount).to.equal(1); - }); - it('the element in the component should show the new state', () => { - expect(container.innerHTML).to.equal( - '
1
' - ); - }); - }); + render() { + const _template = (counter) => + createElement('div', null, + createElement('span', {}, counter) + ) + ; + return _template(this.state.counter); + } - describe('should render a basic component with conditional fragment', () => { - const tpl3625453295 = function () { - return createElement('h1', null, 'BIG'); - }; - const tpl4021787591 = function () { - return createElement('h2', null, 'small'); - }; + componentWillMount() { + componentWillMountCount++; + setTimeout(() => { + this.setState({ + counter: this.state.counter + 1 + }); + }, 1); + } - class ConditionalComponent extends Component { - render() { - return createElement('div', null, [ this.props.condition ? tpl3625453295() : tpl4021787591(), - createElement('p', null, 'test') - ]); - } - } + shouldComponentUpdate() { + shouldComponentUpdateCount++; + return true; + } - it('Initial render (creation)', () => { - render(createElement(ConditionalComponent, { condition: true }), container); - expect(container.innerHTML).to.equal( - '

BIG

test

' - ); - render(createElement(ConditionalComponent, { condition: false }), container); - expect(container.innerHTML).to.equal( - '

small

test

' - ); - }); - }); + componentDidUpdate() { + componentDidUpdateCount++; + } - describe('should render a basic component with a list of values from state', () => { - const tpl2026545261 = function (v0) { - return createElement('ul', { class: 'login-organizationlist' }, - '', - v0, - '' - ); - }; - const tpl3192647933 = function (v0) { - return createElement('li', null, v0); - }; - const tpl1546018623 = function (v0) { - return createElement(v0, null); - }; - - class ValueComponent extends Component { - constructor(props) { - super(props); - this.state = { - organizations: [ - { name: 'test1', key: '1' }, - { name: 'test2', key: 2 }, - { name: 'test3', key: '3' }, - { name: 'test4', key: '4' }, - { name: 'test5', key: '5' }, - { name: 'test6', key: '6' } - ] - }; + componentWillUpdate() { + componentWillUpdateCount++; + } } - render() { - return tpl2026545261(this.state.organizations.map(function (result) { - return tpl3192647933(result.name); - })); - } - } + beforeEach((done) => { + componentWillMountCount = 0; + shouldComponentUpdateCount = 0; + componentDidUpdateCount = 0; + componentWillUpdateCount = 0; + template = (Component) => + createElement(Component, null) + ; + render(template(ComponentLifecycleCheck), container); + waits(30, done); + }); - it('Initial render (creation)', () => { - render(tpl1546018623(ValueComponent), container); - expect(container.innerHTML).to.equal( - '' - ); - render(tpl1546018623(ValueComponent), container); - expect(container.innerHTML).to.equal( - '' - ); - render(tpl1546018623(ValueComponent), container); - expect(container.innerHTML).to.equal( - '' - ); + it('componentWillMountCount to have fired once', () => { + expect(componentWillMountCount).toBe(1); + }); + it('shouldComponentUpdateCount to have fired once', () => { + expect(shouldComponentUpdateCount).toBe(1); + }); + it('componentWillUpdateCount to have fired once', () => { + expect(componentWillUpdateCount).toBe(1); + }); + it('componentDidUpdateCount to have fired once', () => { + expect(componentDidUpdateCount).toBe(1); + }); + it('the element in the component should show the new state', () => { + expect(container.innerHTML).toBe('
1
'); + }); }); - }); - function BasicStatelessComponent1({ - name, - title - }) { - - const template = (_name, _title) => - createElement('div', - { - className: 'basic' - }, - createElement('span', { - className: _name - }, 'The title is ', _title) - ) - ; - return template(name, title); - } + describe('should render a basic component with conditional fragment', () => { + const tpl3625453295 = function() { + return createElement('h1', null, 'BIG'); + }; + const tpl4021787591 = function() { + return createElement('h2', null, 'small'); + }; - it('should render a stateless component', () => { - let template = (Component, title) => - createElement('div', null, - createElement(Component, { - title, - name: 'Hello, World!' - }) - ) - ; - - render(template(BasicStatelessComponent1, 'abc'), container); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('Hello, World!'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.textContent).to.equal('The title is abc'); - render(template(BasicStatelessComponent1, null), container); - render(template(BasicStatelessComponent1, 'abc'), container); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('Hello, World!'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.textContent).to.equal('The title is abc'); - - render(template(BasicStatelessComponent1), container); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('Hello, World!'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.textContent).to.equal('The title is '); - - render(template(BasicStatelessComponent1), container); - expect(container.firstChild.childNodes.length).to.equal(1); - expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic'); - expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('Hello, World!'); - expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN'); - expect(container.firstChild.firstChild.firstChild.textContent).to.equal('The title is '); - }); + class ConditionalComponent extends Component { + render() { + return createElement('div', null, [ this.props.condition ? tpl3625453295() : tpl4021787591(), + createElement('p', null, 'test') + ]); + } + } - describe('should render a component with a conditional state item', () => { - const tpl3578458729 = function (v0) { - return createElement('div', { className: 'login-view bg-visma' }, v0); - }; - const tpl188998005 = function () { - return createElement('div', null, 'VISIBLE'); - }; - - const tpl3754840163 = function (v0) { - return createElement('div', null, - createElement('button', { onclick: v0 }, 'Make visible') - ); - }; + it('Initial render (creation)', () => { + render(createElement(ConditionalComponent, { condition: true }), container); + expect(container.innerHTML).toBe('

BIG

test

'); + render(createElement(ConditionalComponent, { condition: false }), container); + expect(container.innerHTML).toBe('

small

test

'); + }); + }); - class TEST extends Component { - constructor(props) { - super(props); - this.state = { - show: false - }; + describe('should render a basic component with a list of values from state', () => { + const tpl2026545261 = function(v0) { + return createElement('ul', { class: 'login-organizationlist' }, + '', + v0, + '' + ); + }; + const tpl3192647933 = function(v0) { + return createElement('li', null, v0); + }; + const tpl1546018623 = function(v0) { + return createElement(v0, null); + }; + + class ValueComponent extends Component { + constructor(props) { + super(props); + this.state = { + organizations: [ + { name: 'test1', key: '1' }, + { name: 'test2', key: 2 }, + { name: 'test3', key: '3' }, + { name: 'test4', key: '4' }, + { name: 'test5', key: '5' }, + { name: 'test6', key: '6' } + ] + }; + } - this.makeVisible = function () { - this.setState({ - show: true - }); - }.bind(this); + render() { + return tpl2026545261(this.state.organizations.map(function(result) { + return tpl3192647933(result.name); + })); + } } - render() { - return tpl3578458729((function () { - if (this.state.show === true) { - return tpl188998005(); - } else { - return tpl3754840163(this.makeVisible); - } - }).call(this)); - } + it('Initial render (creation)', () => { + render(tpl1546018623(ValueComponent), container); + expect(container.innerHTML).toBe( + '' + ); + render(tpl1546018623(ValueComponent), container); + expect(container.innerHTML).toBe( + '' + ); + render(tpl1546018623(ValueComponent), container); + expect(container.innerHTML).toBe( + '' + ); + }); + }); + + function BasicStatelessComponent1({ + name, + title + }) { + + const template = (_name, _title) => + createElement('div', + { + className: 'basic' + }, + createElement('span', { + className: _name + }, 'The title is ', _title) + ) + ; + return template(name, title); } - const tpl79713834 = function (v0) { - return createElement(v0, null); - }; + it('should render a stateless component', () => { + const template = (Component, title) => + createElement('div', null, + createElement(Component, { + title, + name: 'Hello, World!' + }) + ) + ; - it('Initial render (creation)', () => { - render(tpl79713834(TEST), container); - expect( - container.innerHTML - ).to.equal( - innerHTML('') - ); + render(template(BasicStatelessComponent1, 'abc'), container); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('Hello, World!'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.textContent).toBe('The title is abc'); + render(template(BasicStatelessComponent1, null), container); + render(template(BasicStatelessComponent1, 'abc'), container); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('Hello, World!'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.textContent).toBe('The title is abc'); + + render(template(BasicStatelessComponent1), container); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('Hello, World!'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.textContent).toBe('The title is '); + + render(template(BasicStatelessComponent1), container); + expect(container.firstChild.childNodes.length).toBe(1); + expect(container.firstChild.firstChild.getAttribute('class')).toBe('basic'); + expect(container.firstChild.firstChild.firstChild.getAttribute('class')).toBe('Hello, World!'); + expect(container.firstChild.firstChild.firstChild.tagName).toBe('SPAN'); + expect(container.firstChild.firstChild.firstChild.textContent).toBe('The title is '); }); - it('Second render (update with state change)', (done) => { - render(tpl79713834(TEST), container); - render(tpl79713834(TEST), container); - const buttons = Array.prototype.slice.call(container.querySelectorAll('button')); - - buttons.forEach((button) => button.click()); + describe('should render a component with a conditional state item', () => { + const tpl3578458729 = function(v0) { + return createElement('div', { className: 'login-view bg-visma' }, v0); + }; + const tpl188998005 = function() { + return createElement('div', null, 'VISIBLE'); + }; - requestAnimationFrame(() => { - expect( - container.innerHTML - ).to.equal( - innerHTML('