Define the project structure

Define the project structure using the atomic design pattern. Also fix the coverage and add a couple of spec.
vassalloandrea · Mar 9, 2021 · 2ac040c · 2ac040c
1 parent 1024cb3
commit 2ac040c
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 20 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,10 +6,9 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "prettier/react"
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

diff --git a/.github/workflows/suite.yml b/.github/workflows/suite.yml
@@ -32,8 +32,5 @@ jobs:
       - name: Run Jest
         run: npm run test:unit
 
-      - name: Run web vitals
-        run: npm run test:unit
-
       - name: Push the coverage
         run: npm run coverage:push -- --token=${{ secrets.CODECOV_TOKEN }}
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # React with TS template
 
-[![codecov](https://codecov.io/gh/vassalloandrea/react-template/branch/master/graph/badge.svg?token=F38EP8I67R)](undefined)
+[![codecov](https://codecov.io/gh/vassalloandrea/react-template/branch/main/graph/badge.svg?token=FDMIA9PIGN)](https://codecov.io/gh/vassalloandrea/react-template)
 
 This is the template that I usually use to create a new React project from scratch removing
 the complex boilerplate added by other tools.
@@ -27,6 +27,10 @@ Each PR or push on the main branch will trigger the CI that runs:
 
 and push the Jest coverage on CodeCov.
 
+## Basic development style
+
+The application uses the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) for the component structure.
+
 ## Running Locally
 
 Make sure you have [Node.js](http://nodejs.org/)

diff --git a/cypress/integration/homepage.spec.ts b/cypress/integration/homepage.spec.ts
@@ -5,7 +5,15 @@ context('Homepage', () => {
     cy.visit('/')
   })
 
-  it('shows the hello world heading', () => {
-    cy.get('h1').should('have.text', 'Hello, World!')
+  it('shows the alert when the button is clicked', () => {
+    const alertStub = cy.stub()
+    cy.on('window:alert', alertStub)
+
+    cy.get('button')
+      .contains('Click me!')
+      .click()
+      .then(() => {
+        expect(alertStub.getCall(0)).to.be.calledWith('Hello world!')
+      })
   })
 })
diff --git a/jest.config.js b/jest.config.js
@@ -1,8 +1,14 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  roots: ['<rootDir>/src/'],
+  roots: ['<rootDir>/src'],
   collectCoverage: true,
-  collectCoverageFrom: ['<rootDir>/src'],
+  collectCoverageFrom: [
+    '<rootDir>/src/atoms/*.{ts,tsx}',
+    '<rootDir>/src/molecules/*.{ts,tsx}',
+    '<rootDir>/src/organisms/*.{ts,tsx}',
+    '<rootDir>/src/templates/*.{ts,tsx}',
+    '<rootDir>/src/pages/*.{ts,tsx}',
+  ],
   coverageDirectory: '<rootDir>/coverage',
 }
diff --git a/src/app/__snapshots__/test.tsx.snap → src/__snapshots__/app.test.tsx.snap b/src/app/__snapshots__/test.tsx.snap → src/__snapshots__/app.test.tsx.snap
@@ -8,19 +8,19 @@ Object {
       <div
         class="App"
       >
-        <h1>
-          Hello, World!
-        </h1>
+        <button>
+          Click me!
+        </button>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
       class="App"
     >
-      <h1>
-        Hello, World!
-      </h1>
+      <button>
+        Click me!
+      </button>
     </div>
   </div>,
   "debug": [Function],

diff --git a/src/app/test.tsx → src/app.test.tsx b/src/app/test.tsx → src/app.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import render from '../libs/testing-support'
-import App from '.'
+import render from './libs/testing-support'
+import App from './app'
 
 describe('App', () => {
   it('renders correctly', () => {

diff --git a/src/app/index.tsx → src/app.tsx b/src/app/index.tsx → src/app.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
 
+import Button from './atoms/button'
+
 const App: React.FC = () => (
   <div className="App">
-    <h1>Hello, World!</h1>
+    <Button onClick={() => alert('Hello world!')}>Click me!</Button>
   </div>
 )
 

diff --git a/src/atoms/__snapshots__/button.test.tsx.snap b/src/atoms/__snapshots__/button.test.tsx.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App renders correctly 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button>
+        This is a button
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button>
+      This is a button
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/atoms/button.test.tsx b/src/atoms/button.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { cleanup, fireEvent } from '@testing-library/react'
+
+import render from '../libs/testing-support'
+import Button from './button'
+
+describe('App', () => {
+  afterEach(cleanup)
+
+  it('renders correctly', () => {
+    const component = render(<Button>This is a button</Button>)
+    expect(component).toMatchSnapshot()
+  })
+
+  describe('Passing the onClick prop', () => {
+    it('calls the onClick callback', () => {
+      const callback = jest.fn()
+
+      const { getByText } = render(
+        <Button onClick={callback}>This is a button</Button>,
+      )
+
+      const node = getByText('This is a button')
+      fireEvent.click(node)
+
+      expect(callback).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/atoms/button.tsx b/src/atoms/button.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+const Button: React.FC<React.HTMLProps<HTMLButtonElement>> = ({
+  onClick,
+  children,
+}) => <button onClick={onClick}>{children}</button>
+
+export default Button
diff --git a/src/molecules/.keep b/src/molecules/.keep
diff --git a/src/organisms/.keep b/src/organisms/.keep
diff --git a/src/pages/.keep b/src/pages/.keep
diff --git a/src/templates/.keep b/src/templates/.keep