From c7d3c4e3cf01e0b8b7c44418e01d86bf43749bcb Mon Sep 17 00:00:00 2001
From: Enzo Vezzaro <enzo-vezzaro@live.it>
Date: Fri, 22 Apr 2022 08:07:57 -0400
Subject: [PATCH] create basic component for initial setup

---
 .../index.module.css}                         |  0
 .../@shared/atoms/Button/index.stories.tsx    | 26 +++++++++++++++++++
 .../@shared/atoms/Button/index.test.jsx       | 22 ++++++++++++++++
 .../atoms/{Button.tsx => Button/index.tsx}    |  2 +-
 src/stories/Header.tsx                        | 17 ++++++------
 src/stories/Page.stories.tsx                  |  7 -----
 src/stories/Page.tsx                          |  2 +-
 7 files changed, 59 insertions(+), 17 deletions(-)
 rename src/components/@shared/atoms/{Button.module.css => Button/index.module.css} (100%)
 create mode 100644 src/components/@shared/atoms/Button/index.stories.tsx
 create mode 100644 src/components/@shared/atoms/Button/index.test.jsx
 rename src/components/@shared/atoms/{Button.tsx => Button/index.tsx} (96%)

diff --git a/src/components/@shared/atoms/Button.module.css b/src/components/@shared/atoms/Button/index.module.css
similarity index 100%
rename from src/components/@shared/atoms/Button.module.css
rename to src/components/@shared/atoms/Button/index.module.css
diff --git a/src/components/@shared/atoms/Button/index.stories.tsx b/src/components/@shared/atoms/Button/index.stories.tsx
new file mode 100644
index 000000000..428f381a8
--- /dev/null
+++ b/src/components/@shared/atoms/Button/index.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import Button, { ButtonProps } from '@shared/atoms/Button'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Component/@shared/atoms/Button',
+  component: Button
+} as ComponentMeta<typeof Button>
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args: ButtonProps) => (
+  <Button {...args} />
+)
+
+export const Primary = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  children: 'Button',
+  style: 'primary',
+  size: 'small',
+  onClick: () => {
+    alert('Clicked!')
+  }
+}
diff --git a/src/components/@shared/atoms/Button/index.test.jsx b/src/components/@shared/atoms/Button/index.test.jsx
new file mode 100644
index 000000000..7444f1608
--- /dev/null
+++ b/src/components/@shared/atoms/Button/index.test.jsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/testing-react'
+import Meta, { Primary as PrimaryStory } from './index.stories'
+
+// Returns a component that already contain all decorators from story level, meta level and global level.
+const Primary = composeStory(PrimaryStory, Meta)
+
+test('onclick handler is called', () => {
+  const onClickSpy = jest.fn()
+  render(<Primary onClick={onClickSpy} />)
+  const buttonElement = screen.getByRole('button')
+  buttonElement.click()
+  expect(onClickSpy).toHaveBeenCalled()
+})
+
+test('test against args', () => {
+  const onClickSpy = jest.fn()
+  render(<Primary onClick={onClickSpy} />)
+  const buttonElement = screen.getByRole('button')
+  // Testing against values coming from the story itself! No need for duplication
+  expect(buttonElement.textContent).toEqual(Primary.args.children)
+})
diff --git a/src/components/@shared/atoms/Button.tsx b/src/components/@shared/atoms/Button/index.tsx
similarity index 96%
rename from src/components/@shared/atoms/Button.tsx
rename to src/components/@shared/atoms/Button/index.tsx
index 85aa22b0c..4cccfcb57 100644
--- a/src/components/@shared/atoms/Button.tsx
+++ b/src/components/@shared/atoms/Button/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, FormEvent, ReactElement } from 'react'
 import Link from 'next/link'
 import classNames from 'classnames/bind'
-import styles from './Button.module.css'
+import styles from './index.module.css'
 
 const cx = classNames.bind(styles)
 
diff --git a/src/stories/Header.tsx b/src/stories/Header.tsx
index d40a50f80..86299ffa9 100644
--- a/src/stories/Header.tsx
+++ b/src/stories/Header.tsx
@@ -52,17 +52,18 @@ export const Header = ({
             <span className="welcome">
               Welcome, <b>{user.name}</b>!
             </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
+            <Button size="small" onClick={onLogout}>
+              Log out
+            </Button>
           </>
         ) : (
           <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button
-              primary
-              size="small"
-              onClick={onCreateAccount}
-              label="Sign up"
-            />
+            <Button size="small" onClick={onLogin}>
+              Login
+            </Button>
+            <Button size="small" onClick={onCreateAccount}>
+              Sign up
+            </Button>
           </>
         )}
       </div>
diff --git a/src/stories/Page.stories.tsx b/src/stories/Page.stories.tsx
index 416b95a29..e6910ac04 100644
--- a/src/stories/Page.stories.tsx
+++ b/src/stories/Page.stories.tsx
@@ -17,10 +17,3 @@ const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />
 export const LoggedOut = Template.bind({})
 
 export const LoggedIn = Template.bind({})
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i })
-  await userEvent.click(loginButton)
-}
diff --git a/src/stories/Page.tsx b/src/stories/Page.tsx
index 292fa91e5..df5abc18c 100644
--- a/src/stories/Page.tsx
+++ b/src/stories/Page.tsx
@@ -40,7 +40,7 @@ export const Page: React.VFC = () => {
         <ul>
           <li>
             Use a higher-level connected component. Storybook helps you compose
-            such data from the "args" of child component stories
+            such data from the &quot;args&quot; of child component stories
           </li>
           <li>
             Assemble data in the page component from your services. You can mock