test(test): Add <Comment> and <KeepAlive> tests

assets/README.md

+

jest.config.js

@@ -11,6 +11,7 @@ module.exports = {
     "^.+\\.js$": "babel-jest",
     ".(ts|tsx)": "ts-jest",
   },
+  testURL: 'http://localhost:3002/',
   collectCoverage: true,
   coverageDirectory: './coverage',
 };

src/components/Provider.tsx

@@ -47,7 +47,6 @@ export interface IKeepAliveProviderProps {
   exclude?: string | string[] | RegExp;
 }
 
-// TODO: include max exclude
 export default class KeepAliveProvider extends React.PureComponent<IKeepAliveProviderProps> implements IKeepAliveProviderImpl {
   public static displayName = keepAliveProviderTypeName;
 
@@ -100,27 +99,6 @@ export default class KeepAliveProvider extends React.PureComponent<IKeepAlivePro
     warn('[React Keep Alive] Cached components have duplicates. Please check the <KeepAlive> component of the key duplication!');
   }
 
-  // private getMax = () => {
-  //   return this.props.max ? parseInt(this.props.max) : null;
-  // }
-
-  // private shiftKey = () => {
-  //   const max = this.getMax();
-  //   const {keys, cache} = this;
-  //   if (!max || keys.length <= max) {
-  //     return;
-  //   }
-  //   for (let i = 0; i < keys.length; i++) {
-  //     const key = keys[i];
-  //     const currentCache = cache[key];
-  //     if (currentCache && !currentCache.activated) {
-  //       keys.splice(i, 1);
-  //       delete cache[key];
-  //       return;
-  //     }
-  //   }
-  // }
-
   public unactivate = (identification: string) => {
     const {cache} = this;
     this.cache[identification] = {

test/Comment.test.js

+import React from 'react';
+import {mount} from 'enzyme';
+import Comment from '../src/components/Comment';
+
+describe('<Comment>', () => {
+  it('the render function will render a div element', () => {
+    const wrapper = mount(<Comment>test</Comment>);
+    expect(wrapper.html()).toEqual('<div></div>');
+  });
+
+
+  it('rendered <div> will be replaced with comment nodes', () => {
+    const wrapper = mount(
+      <div>
+        <Comment>test</Comment>
+      </div>
+    );
+    expect(wrapper.html()).toContain('<!--test-->');
+  });
+
+  it('the comment node will be restored to <div> when uninstalling', () => {
+    const componentWillUnmount = Comment.prototype.componentWillUnmount;
+    const wrapper = mount(
+      <div>
+        <Comment>test</Comment>
+      </div>
+    );
+    Comment.prototype.componentWillUnmount = function () {
+      componentWillUnmount.call(this);
+      expect(wrapper.html()).toContain('<div><div></div></div>');
+    }
+    wrapper.unmount();
+    Comment.prototype.componentWillUnmount = componentWillUnmount;
+  });
+
+  it('children of <Comment> will become empty strings if they are not of type string', () => {
+    const wrapper = mount(
+      <div>
+        <Comment><div /></Comment>
+      </div>
+    );
+    expect(wrapper.html()).toContain('<!---->');
+  });
+});

test/KeepAlive.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import {mount} from 'enzyme';
+import KeepAlive from '../src/components/KeepAlive';
+
+class Test extends React.Component {
+  state = {
+    index: 0,
+  };
+
+  handleAdd = () => {
+    this.setState(({index}) => ({
+      index: index + 1,
+    }));
+  }
+
+  render() {
+    return this.state.index;
+  }
+}
+
+describe('<KeepAlive>', () => {
+  const node = document.createElement("div");
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(node);
+  });
+
+  it('<KeepAlive> not <Provider> will report an error', () => {
+    expect(() => {
+      mount(
+        <KeepAlive>
+          <Test />
+        </KeepAlive>,
+      );
+    }).toThrow('[React Keep Alive]');
+  });
+});

test/setup.js

 import {configure} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
+console.error = jest.fn(error => {
+  throw new Error(error);
+});
+
 configure({
   adapter: new Adapter(),
 });