updated button tests

.gitignore

@@ -4,6 +4,9 @@ node_modules
 # Build files
 dist/
 
+# tests
+coverage/
+
 # Environment varialbes
 .env
 

README.md

@@ -14,8 +14,9 @@ This project is a simplified front end clone of Netflix. It was created with Rea
 - [ ] Create user account page
 - [x] Migrate to Typescript
 - [ ] Implement dynamic code splitting with dynamic imports
-- [ ] Setup storybook
+- [x] Setup storybook
 - [ ] Implement internationalization with react-i18next
+- [ ] Exclude storybook files from test coverage
 
 ### Tools used
 

package.json

@@ -13,14 +13,6 @@
     "build-storybook": "build-storybook",
     "test": "react-scripts test"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!<rootDir>/node_modules/",
-      "!<rootDir>/path/to/dir/",
-      "!**/*.stories.{js,jsx}"
-    ]
-  },
   "author": "Andres Alcocer",
   "license": "ISC",
   "dependencies": {

src/components/Button/Button.tsx

@@ -4,6 +4,8 @@ export enum ButtonType {
   Primary,
   Secondary,
   IconRound,
+  IconRoundSecondary,
+  Alternate,
 }
 
 interface IButton {

src/components/Button/__tests__/Button.stories.tsx

@@ -4,7 +4,6 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Button from '../Button'
 import { ButtonType } from '../Button'
 import PlayLogo from '../../../static/images/play-button.svg'
-import AddLogo from '../../../static/images/add.svg'
 
 export default {
   title: 'Button',
@@ -41,12 +40,24 @@ Secondary.args = {
   buttonType: ButtonType.Secondary,
 }
 
+export const Alternate = Template.bind({})
+Alternate.args = {
+  label: 'Alternate',
+  buttonType: ButtonType.Alternate,
+}
+
 export const IconRound = Template.bind({})
 IconRound.args = {
-  Icon: <AddLogo />,
+  Icon: <PlayLogo />,
   buttonType: ButtonType.IconRound,
 }
 
+export const IconRoundSecondary = Template.bind({})
+IconRoundSecondary.args = {
+  Icon: <PlayLogo />,
+  buttonType: ButtonType.IconRoundSecondary,
+}
+
 export const PrimaryWithIcon = Template.bind({})
 PrimaryWithIcon.args = {
   label: 'Primary Ic',
@@ -58,5 +69,5 @@ export const SecondaryWithIcon = Template.bind({})
 SecondaryWithIcon.args = {
   label: 'Secondary Ic',
   buttonType: ButtonType.Secondary,
-  Icon: <AddLogo />,
+  Icon: <PlayLogo />,
 }

src/components/Button/__tests__/Button.test.tsx

@@ -1,19 +1,51 @@
-import { Primary, Secondary } from './Button.stories'
+import {
+  Primary,
+  Secondary,
+  IconRound,
+  PrimaryWithIcon,
+  SecondaryWithIcon,
+  Alternate,
+  IconRoundSecondary,
+} from './Button.stories'
 import { render } from '@testing-library/react'
 
-describe('Button', (): void => {
+describe('Button constructor', (): void => {
   test('should render primary button', (): void => {
     const { container } = render(<Primary {...Primary.args} />)
     expect(container).toMatchSnapshot()
   })
 
+  test('should render primary button with icon', (): void => {
+    const { container } = render(<PrimaryWithIcon {...PrimaryWithIcon.args} />)
+    expect(container).toMatchSnapshot()
+  })
+
   test('should render secondary button', (): void => {
     const { container } = render(<Secondary {...Secondary.args} />)
     expect(container).toMatchSnapshot()
   })
 
-  test('should render primary button with icon', (): void => {
-    const { container } = render(<Secondary {...Secondary.args} />)
+  test('should render secondary button with icon', (): void => {
+    const { container } = render(
+      <SecondaryWithIcon {...SecondaryWithIcon.args} />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  test('should render icon round button', (): void => {
+    const { container } = render(<IconRound {...IconRound.args} />)
+    expect(container).toMatchSnapshot()
+  })
+
+  test('should render secondary icon round button', (): void => {
+    const { container } = render(
+      <IconRoundSecondary {...IconRoundSecondary.args} />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  test('should render alternate button', (): void => {
+    const { container } = render(<Alternate {...Alternate.args} />)
     expect(container).toMatchSnapshot()
   })
 })

src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1,21 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button should render primary button 1`] = `
+exports[`Button constructor should render alternate button 1`] = `
 <div>
   <button
-    class="n-button Primary"
+    class="n-button with-label Alternate"
   >
-    Primary
+    <span>
+      Alternate
+    </span>
   </button>
 </div>
 `;
 
-exports[`Button should render secondary button 1`] = `
+exports[`Button constructor should render icon round button 1`] = `
 <div>
   <button
-    class="n-button Secondary"
+    class="n-button with-icon IconRound"
   >
-    Secondary
+    <play-button.svg />
+  </button>
+</div>
+`;
+
+exports[`Button constructor should render primary button 1`] = `
+<div>
+  <button
+    class="n-button with-label Primary"
+  >
+    <span>
+      Primary
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button constructor should render primary button with icon 1`] = `
+<div>
+  <button
+    class="n-button with-icon with-label Primary"
+  >
+    <play-button.svg />
+    <span>
+      Primary Ic
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button constructor should render secondary button 1`] = `
+<div>
+  <button
+    class="n-button with-label Secondary"
+  >
+    <span>
+      Secondary
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button constructor should render secondary button with icon 1`] = `
+<div>
+  <button
+    class="n-button with-icon with-label Secondary"
+  >
+    <play-button.svg />
+    <span>
+      Secondary Ic
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button constructor should render secondary icon round button 1`] = `
+<div>
+  <button
+    class="n-button with-icon IconRoundSecondary"
+  >
+    <play-button.svg />
   </button>
 </div>
 `;

src/components/Button/button.scss

@@ -103,7 +103,13 @@
     }
   }
 
-  &.IconRound {
+  &.Alternate {
+    background-color: #d22f27;
+    color: #fff;
+  }
+
+  &.IconRound,
+  &.IconRoundSecondary {
     border-radius: 50%;
     display: flex;
     height: 42px;
@@ -147,4 +153,15 @@
       border-radius: 50%;
     }
   }
+
+  &.IconRoundSecondary {
+    background-color: #fff;
+    & > * {
+      fill: #000;
+    }
+
+    &:not(.with-label):hover {
+      background-color: #e3e3e3;
+    }
+  }
 }