From 7b37c795112f1c94fb2e4845fb2cde4be2c4ce17 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Wed, 17 Jul 2019 01:28:42 +0800
Subject: [PATCH 1/2] Module format embedding example

---
 .../stories/demo/button-module-embed.test.js      | 15 +++++++++++++++
 .../stories/demo/button.stories.js                |  1 -
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 examples/official-storybook/stories/demo/button-module-embed.test.js

diff --git a/examples/official-storybook/stories/demo/button-module-embed.test.js b/examples/official-storybook/stories/demo/button-module-embed.test.js
new file mode 100644
index 00000000000..3dc0798894d
--- /dev/null
+++ b/examples/official-storybook/stories/demo/button-module-embed.test.js
@@ -0,0 +1,15 @@
+import { render, fireEvent } from 'react-testing-library';
+import { withText } from './button.stories';
+
+const mockAction = jest.fn();
+jest.mock('@storybook/addon-actions', () => ({
+  action: () => mockAction,
+}));
+
+describe('button interactivity', () => {
+  it('should handle clicks', () => {
+    const comp = render(withText());
+    fireEvent.click(comp.getByText('Hello Button'));
+    expect(mockAction).toHaveBeenCalled();
+  });
+});
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
index a232e29bcce..d6e7caf01f3 100644
--- a/examples/official-storybook/stories/demo/button.stories.js
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -21,7 +21,6 @@ export const withSomeEmoji = () => (
     </span>
   </Button>
 );
-
 withSomeEmoji.story = {
   name: 'with some emoji',
 };

From ea087d02de2cf265298a0f7b07d9dfb03d77be20 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Fri, 19 Jul 2019 10:51:57 +0800
Subject: [PATCH 2/2] Official-storybook: Add hooks-based state example & embed
 it in jest

---
 .../stories/demo/button-module-embed.test.js  | 15 -------------
 .../stories/demo/button.stories.js            | 13 +++++++++++-
 .../stories/demo/module-stories-embed.test.js | 21 +++++++++++++++++++
 3 files changed, 33 insertions(+), 16 deletions(-)
 delete mode 100644 examples/official-storybook/stories/demo/button-module-embed.test.js
 create mode 100644 examples/official-storybook/stories/demo/module-stories-embed.test.js

diff --git a/examples/official-storybook/stories/demo/button-module-embed.test.js b/examples/official-storybook/stories/demo/button-module-embed.test.js
deleted file mode 100644
index 3dc0798894d..00000000000
--- a/examples/official-storybook/stories/demo/button-module-embed.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, fireEvent } from 'react-testing-library';
-import { withText } from './button.stories';
-
-const mockAction = jest.fn();
-jest.mock('@storybook/addon-actions', () => ({
-  action: () => mockAction,
-}));
-
-describe('button interactivity', () => {
-  it('should handle clicks', () => {
-    const comp = render(withText());
-    fireEvent.click(comp.getByText('Hello Button'));
-    expect(mockAction).toHaveBeenCalled();
-  });
-});
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
index d6e7caf01f3..7da5a4a6c5c 100644
--- a/examples/official-storybook/stories/demo/button.stories.js
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
@@ -24,3 +24,14 @@ export const withSomeEmoji = () => (
 withSomeEmoji.story = {
   name: 'with some emoji',
 };
+
+export const withCounter = () =>
+  React.createElement(() => {
+    const [counter, setCounter] = useState(0);
+    const label = `Testing: ${counter}`;
+    return <Button onClick={() => setCounter(counter + 1)}>{label}</Button>;
+  });
+
+withCounter.story = {
+  name: 'with coumter',
+};
diff --git a/examples/official-storybook/stories/demo/module-stories-embed.test.js b/examples/official-storybook/stories/demo/module-stories-embed.test.js
new file mode 100644
index 00000000000..826cb7e4ba7
--- /dev/null
+++ b/examples/official-storybook/stories/demo/module-stories-embed.test.js
@@ -0,0 +1,21 @@
+import { render, fireEvent } from 'react-testing-library';
+import { withText, withCounter } from './button.stories';
+
+const mockAction = jest.fn();
+jest.mock('@storybook/addon-actions', () => ({
+  action: () => mockAction,
+}));
+
+describe('module story embedding', () => {
+  it('should test actions', () => {
+    const comp = render(withText());
+    fireEvent.click(comp.getByText('Hello Button'));
+    expect(mockAction).toHaveBeenCalled();
+  });
+
+  it('should test story state', () => {
+    const comp = render(withCounter());
+    fireEvent.click(comp.getByText('Testing: 0'));
+    expect(comp.getByText('Testing: 1')).toBeTruthy();
+  });
+});