Hotfix SSR inferno-animation (#1578)

* Fix bug in server-side rendering

* The server-side rendering test of StaticRouter shouldn't depend om DOM

* Add SSR test without DOM

* Added test of transitionEnd with jsdom

* Include tests without jsdom for SSR

* Run StaticRouter SSR-test without DOM

* Delete package-lock.json

Co-authored-by: Sampo Kivistö <sampo.kivisto@live.fi>

jest.config-nodom.js

@@ -0,0 +1,35 @@
+module.exports = {
+  collectCoverageFrom: [
+    "packages/*/src/**/*.ts",
+    "!**/*.ts.js",
+    "!**/inferno-utils/**/*",
+    "!**/inferno-router/**/utils.ts",
+  ],
+  coverageDirectory: "coverage",
+  coverageReporters: ["html", "lcov", "text"],
+  globals: {
+    usingJSDOM: true,
+    usingJest: true
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  moduleNameMapper: {
+    "^inferno-router/utils": "<rootDir>/packages/inferno-router/src/utils",
+    "^inferno(.*?)$": "<rootDir>/packages/inferno$1/src/index.ts",
+    "mobx": "<rootDir>/node_modules/mobx"
+  },
+  rootDir: __dirname,
+  setupFiles: [],
+  testMatch: [
+    "<rootDir>/packages/*/__tests__/**/*spec.server-nodom.@(js|ts)?(x)"
+  ],
+  testPathIgnorePatterns: [
+    "<rootDir>/packages/inferno/__tests__/transition.spec.jsx",
+  ],
+  transform: {
+    "^.+\\.jsx?$": "<rootDir>/jest.babel.transform.js",
+    "^.+\\.tsx?$": "<rootDir>/jest.ts.transform.js"
+  },
+  testEnvironment: "node",
+  testRunner: "jest-jasmine2",
+  reporters: [["jest-silent-reporter", { "useDots": true }]]
+};

package.json

@@ -59,8 +59,9 @@
     "prettier:fixtures": "prettier --print-width 160 --trailing-comma none --single-quote true --write --list-different fixtures/**/*.{js,jsx}",
     "prettier:scripts": "prettier --print-width 160 --trailing-comma none --single-quote true --write --list-different scripts/**/*.{js,jsx}",
     "postinstall": "lerna bootstrap --no-ci && run-p install:* && npm run build",
-    "test": "npm run test:node && npm run test:browser",
-    "test:node": "cross-env NODE_ENV=test jest --no-watchman",
+    "test": "npm run test:node && npm run test:node-nodom && npm run test:browser",
+    "test:node": "cross-env NODE_ENV=test jest --config --no-watchman",
+    "test:node-nodom": "cross-env NODE_ENV=test jest --config ./jest.config-nodom.js --no-watchman",
     "test:coverage": "cross-env NODE_ENV=test jest --runInBand --coverage --no-watchman",
     "test:browser": "npm run test:browser:nocompat && npm run test:browser:compat",
     "test:browser:compat": "cross-env InfernoCompat=1 npm run --prefix fixtures/browser local",

packages/inferno-animation/__tests__/utils.spec.server-nodom.tsx

@@ -0,0 +1,9 @@
+import {
+  transitionEndName
+} from '../src/utils';
+
+describe('inferno-animation utils SSR', () => {
+  it('transitionEnd is empty string', () => {
+    expect(transitionEndName).toEqual('');
+  });
+});

packages/inferno-animation/__tests__/utils.spec.tsx

@@ -6,7 +6,8 @@ import {
   registerTransitionListener,
   removeClassName,
   setDimensions,
-  setDisplay
+  setDisplay,
+  transitionEndName,
 } from '../src/utils';
 
 describe('inferno-animation utils', () => {
@@ -122,4 +123,8 @@ describe('inferno-animation utils', () => {
     });
     el.dispatchEvent(new Event('load'));
   });
+
+  it('transitionEnd is valid', () => {
+    expect(transitionEndName).toEqual('transitionend');
+  });
 });

packages/inferno-animation/src/utils.ts

@@ -167,7 +167,9 @@ function _getMaxTransitionDuration(nodes) {
   };
 }
 
-const transitionEndName: string = (function () {
+export const transitionEndName: string = (function () {
+  if (typeof document === 'undefined') return '';
+
   const elementStyle = document.createElement('div').style;
   // tslint:disable:object-literal-sort-keys
   const transitions = {

packages/inferno-server/__tests__/StaticRouter.spec.server.jsx → packages/inferno-server/__tests__/StaticRouter.spec.server-nodom.jsx

@@ -65,11 +65,10 @@ describe('A <StaticRouter>', () => {
   it('warns when passed a history prop', () => {
     const context = {};
     const history = {};
-    const node = document.createElement('div');
 
     spyOn(console, 'error');
 
-    render(<StaticRouter context={context} history={history} />, node);
+    renderToStaticMarkup(<StaticRouter context={context} history={history} />);
 
     expect(console.error).toHaveBeenCalledTimes(1);
     expect(console.error.calls.argsFor(0)[0]).toContain('<StaticRouter> ignores the history prop');
@@ -194,34 +193,29 @@ describe('A <StaticRouter>', () => {
   describe('no basename', () => {
     it('createHref does not append extra leading slash', () => {
       const context = {};
-      const node = document.createElement('div');
       const pathname = '/test-path-please-ignore';
 
       const Link = ({ to, children }) => <Route children={({ history: { createHref } }) => <a href={createHref(to)}>{children}</a>} />;
 
-      render(
+      const outp = renderToStaticMarkup(
         <StaticRouter context={context}>
           <Link to={pathname} />
-        </StaticRouter>,
-        node
+        </StaticRouter>
       );
 
-      const a = node.getElementsByTagName('a')[0];
-      expect(a.getAttribute('href')).toEqual(pathname);
+      expect(outp).toEqual(`<a href="${pathname}"></a>`);
     });
   });
 
   describe('render a <Prompt>', () => {
     it('does nothing', () => {
       const context = {};
-      const node = document.createElement('div');
 
       expect(() => {
-        render(
+        renderToStaticMarkup(
           <StaticRouter context={context}>
             <Prompt message="this is only a test" />
-          </StaticRouter>,
-          node
+          </StaticRouter>
         );
       }).not.toThrow();
     });