From 0c160775e6ae10630c8f374afbcafe3ce08c8045 Mon Sep 17 00:00:00 2001
From: lubin <lu.bin.lu.bin@gmail.com>
Date: Mon, 20 May 2019 23:32:02 -0400
Subject: [PATCH] kent example

---
 package-lock.json                       | 27 +++++++++++++++++++
 package.json                            |  2 ++
 src/testing-lib/hidden-message.test.tsx | 35 +++++++++++++++++++++++++
 src/testing-lib/hidden-message.tsx      | 33 +++++++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 src/testing-lib/hidden-message.test.tsx
 create mode 100644 src/testing-lib/hidden-message.tsx

diff --git a/package-lock.json b/package-lock.json
index 9db2978..1e21cbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1417,6 +1417,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.1.tgz",
+      "integrity": "sha512-1usq4DRUVBFnxc9KGJAlJO9EpQrLZGDDEC8wDOn2+2ODSyudYo8FiIzPDRaX/hfQjHqGeeoNaNdA2bj0l35hZQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -4374,6 +4383,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -10621,6 +10638,16 @@
         "dom-testing-library": "^4.1.0"
       }
     },
+    "react-transition-group": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.0.1.tgz",
+      "integrity": "sha512-SsLcBYhO4afXJC9esL8XMxi/y0ZvEc7To0TvtrBELqzpjXQHPZOTxvuPh2/4EhYc0uSMfp2SExIxsyJ0pBdNzg==",
+      "requires": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 64a1751..c9693f9 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
+    "react-transition-group": "^4.0.1",
     "rxjs": "^6.5.2",
     "typescript": "3.4.5"
   },
@@ -41,6 +42,7 @@
     "@types/axios": "^0.14.0",
     "@types/enzyme": "^3.9.2",
     "@types/ramda": "^0.26.8",
+    "@types/react-transition-group": "^2.9.1",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.0",
     "jest-dom": "^3.2.2",
diff --git a/src/testing-lib/hidden-message.test.tsx b/src/testing-lib/hidden-message.test.tsx
new file mode 100644
index 0000000..ba814af
--- /dev/null
+++ b/src/testing-lib/hidden-message.test.tsx
@@ -0,0 +1,35 @@
+import 'react-testing-library/cleanup-after-each';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { render, fireEvent } from 'react-testing-library';
+import HiddenMessage from './hidden-message';
+
+// NOTE: you do NOT have to do this in every test.
+// Learn more about Jest's __mocks__ directory:
+// https://jestjs.io/docs/en/manual-mocks
+jest.mock('react-transition-group', () => {
+  return {
+    CSSTransition: jest.fn(({ children, in: show }) => (show ? children : null))
+  };
+});
+test('you can mock things with jest.mock', () => {
+  const { getByText, queryByText } = render(
+    <HiddenMessage initialShow={true} />
+  );
+  const toggleButton = getByText('Toggle');
+  const context = expect.any(Object);
+  const children = expect.any(Object);
+  const defaultProps = { children, timeout: 1000, className: 'fade' };
+  expect(CSSTransition).toHaveBeenCalledWith(
+    { in: true, ...defaultProps },
+    context
+  );
+  expect(getByText('Hello world')).not.toBeNull();
+  CSSTransition.mockClear();
+  fireEvent.click(toggleButton);
+  expect(queryByText('Hello world')).toBeNull();
+  expect(CSSTransition).toHaveBeenCalledWith(
+    { in: false, ...defaultProps },
+    context
+  );
+});
diff --git a/src/testing-lib/hidden-message.tsx b/src/testing-lib/hidden-message.tsx
new file mode 100644
index 0000000..9b9311c
--- /dev/null
+++ b/src/testing-lib/hidden-message.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+function Fade(props: { children: any; in: boolean }) {
+  return (
+    <CSSTransition in={props.in} timeout={1000} className="fade">
+      {props.children}
+    </CSSTransition>
+  );
+}
+
+export default class HiddenMessage extends React.Component<
+  {
+    initialShow: boolean;
+  },
+  { show: boolean }
+> {
+  static defaultProps = { initialShow: false };
+  state = { show: this.props.initialShow };
+  toggle = () => {
+    this.setState(({ show }) => ({ show: !show }));
+  };
+  render() {
+    return (
+      <div>
+        <button onClick={this.toggle}>Toggle</button>
+        <Fade in={this.state.show}>
+          <div>Hello world</div>
+        </Fade>
+      </div>
+    );
+  }
+}