create basic component for initial setup

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!')
+  }
+}

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)
+})

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)
 

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>

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)
-}

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