UT structure aligned to Component=>Happy/Sad Path=>Tests. Coverage im…

…proved. Unused dependecies removed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-pets",
-  "version": "0.0.37",
+  "version": "0.1.0",
   "author": "Nicolás Omar González Passerino",
   "license": "MIT",
   "private": false,
@@ -27,9 +27,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
-    "axios": "^0.21.1",
     "crypto-js": "^4.0.0",
-    "dayjs": "^1.9.7",
     "env-cmd": "^10.1.0",
     "graphql": "^15.5.0",
     "node-sass": "^4.14.1",

src/components/core/app/app.test.js

@@ -8,15 +8,17 @@ import store from '../../../redux/reducers'
 import App from './app'
 
 describe('[App]', () => {
-  test('renders App component without props', () => {
-    render(
-      <Provider store={createStore(store)}>
-        <MockedProvider mocks={[]} addTypefile={false}>
-          <App />
-        </MockedProvider>
-      </Provider>
-    )
-    const element = screen.getByText(/Welcome to My Pets/i)
-    expect(element).toBeInTheDocument()
+  describe('[HAPPY PATH]', () => {
+    test('Renders without props', () => {
+      render(
+        <Provider store={createStore(store)}>
+          <MockedProvider mocks={[]} addTypefile={false}>
+            <App />
+          </MockedProvider>
+        </Provider>
+      )
+      const element = screen.getByText(/Welcome to My Pets/i)
+      expect(element).toBeInTheDocument()
+    })
   })
 })

src/components/core/header/header.test.js

@@ -8,15 +8,17 @@ import store from '../../../redux/reducers'
 import Header from './header'
 
 describe('[Header]', () => {
-  test('Render Header with a dummy "name" prop', () => {
-    render(
-      <Provider store={createStore(store)}>
-        <MockedProvider mocks={[]} addTypename={false}>
-          <Header name={'TEST'} />
-        </MockedProvider>
-      </Provider>
-    )
-    const element = screen.getByText('TEST')
-    expect(element).toBeInTheDocument()
+  describe('[HAPPY PATH]', () => {
+    test('Render with a dummy "name" prop', () => {
+      render(
+        <Provider store={createStore(store)}>
+          <MockedProvider mocks={[]} addTypename={false}>
+            <Header name={'TEST'} />
+          </MockedProvider>
+        </Provider>
+      )
+      const element = screen.getByText('TEST')
+      expect(element).toBeInTheDocument()
+    })
   })
 })

src/components/core/home/home.test.js

@@ -4,9 +4,13 @@ import Home from './home'
 // HELPER FUNCTIONS
 import { setLoggedUser } from '../../../functions/local-storage'
 
-test('Renders with a dummy logged User', () => {
-  setLoggedUser({ name: 'Test' })
-  render(<Home />)
-  const element = screen.getByText(`HELLO TEST`)
-  expect(element).toBeInTheDocument()
+describe('[Home]', () => {
+  describe('[HAPPY PATH]', () => {
+    test('Renders with a dummy logged User', () => {
+      setLoggedUser({ name: 'Test' })
+      render(<Home />)
+      const element = screen.getByText(`HELLO TEST`)
+      expect(element).toBeInTheDocument()
+    })
+  })
 })

src/components/core/login-form/login-form.test.js

@@ -8,15 +8,17 @@ import store from '../../../redux/reducers'
 import LoginForm from './login-form'
 
 describe('[LoginForm]', () => {
-  test('Renders a "Login" Form without props', () => {
-    render(
-      <Provider store={createStore(store)}>
-        <MockedProvider mocks={[]} addTypename={false}>
-          <LoginForm />
-        </MockedProvider>
-      </Provider>
-    )
-    const element = screen.getByText('Password')
-    expect(element).toBeInTheDocument()
+  describe('[HAPPY PATH]', () => {
+    test('Renders without props', () => {
+      render(
+        <Provider store={createStore(store)}>
+          <MockedProvider mocks={[]} addTypename={false}>
+            <LoginForm />
+          </MockedProvider>
+        </Provider>
+      )
+      const element = screen.getByText('Password')
+      expect(element).toBeInTheDocument()
+    })
   })
 })

src/components/shared/form-button/form-button.test.js

@@ -1,12 +1,16 @@
 import { render, screen } from '@testing-library/react'
 import FormButton from './form-button'
 
-test('Renders a FormButton using required props only', () => {
-  const props = {
-    type: 'button',
-    label: 'Test'
-  }
-  render(<FormButton config={props} />)
-  const element = screen.getByText(props.label)
-  expect(element).toBeInTheDocument()
+describe('[FormButton]', () => {
+  describe('[HAPPY PATH]', () => {
+    test('Renders using required props only', () => {
+      const props = {
+        type: 'button',
+        label: 'Test'
+      }
+      render(<FormButton config={props} />)
+      const element = screen.getByText(props.label)
+      expect(element).toBeInTheDocument()
+    })
+  })
 })

src/components/shared/form-input/form-input.test.js

@@ -1,14 +1,18 @@
 import { render, screen } from '@testing-library/react'
 import FormInput from './form-input'
 
-test('Renders a FormInput with required props only', () => {
-  const props = {
-    label: 'Test',
-    type: 'text',
-    control: 'test',
-    onInputChange: () => {}
-  }
-  render(<FormInput config={props} />)
-  const element = screen.getByText(props.label)
-  expect(element).toBeInTheDocument()
+describe('[FormInput]', () => {
+  describe('[HAPPY PATH]', () => {
+    test('Renders with required props only', () => {
+      const props = {
+        label: 'Test',
+        type: 'text',
+        control: 'test',
+        onInputChange: () => {}
+      }
+      render(<FormInput config={props} />)
+      const element = screen.getByText(props.label)
+      expect(element).toBeInTheDocument()
+    })
+  })
 })

src/components/shared/grid-layout/grid-layout.test.js

@@ -1,8 +1,12 @@
 import { render, screen } from '@testing-library/react'
 import GridLayout from './grid-layout'
 
-test('render a grid with required properties', () => {
-  render(<GridLayout header={{ title: 'Test' }} />)
-  const element = screen.getByText('Test')
-  expect(element).toBeInTheDocument()
+describe('[GridLayout]', () => {
+  describe('[HAPPY PATH]', () => {
+    test('Renders with required properties only', () => {
+      render(<GridLayout header={{ title: 'Test' }} />)
+      const element = screen.getByText('Test')
+      expect(element).toBeInTheDocument()
+    })
+  })
 })

src/components/shared/title/title.test.js

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import Title from './title'
+
+describe('[Title]', () => {
+  describe('[HAPPY PATH]', () => {
+    test('Renders with required props only', () => {
+      const props = {
+        title: 'My',
+        subTitle: 'Test'
+      }
+
+      render(<Title {...props} />)
+      const element = screen.getByText(props.title)
+      expect(element).toBeInTheDocument()
+    })
+  })
+})

src/components/users/new-user-form/new-user-form.test.js

@@ -3,12 +3,16 @@ import { MockedProvider } from '@apollo/client/testing'
 // COMPONENTS
 import NewUserForm from './new-user-form'
 
-test(`Renders a 'New User' Form without props`, () => {
-  render(
-    <MockedProvider mocks={[]} addTypename={false}>
-      <NewUserForm />
-    </MockedProvider>
-  )
-  const element = screen.getByText('Password')
-  expect(element).toBeInTheDocument()
+describe('[NewUserForm]', () => {
+  describe('[HAPPY PATH]', () => {
+    test(`Renders without props`, () => {
+      render(
+        <MockedProvider mocks={[]} addTypename={false}>
+          <NewUserForm />
+        </MockedProvider>
+      )
+      const element = screen.getByText('Password')
+      expect(element).toBeInTheDocument()
+    })
+  })
 })

src/components/users/update-password-form/update-password-form.jsx

@@ -6,7 +6,7 @@ import { UPDATE_PASS } from '../../../graphql/mutations'
 import GridLayout from '../../shared/grid-layout/grid-layout'
 import Form from '../../shared/form/form'
 // FORM CONFIG
-import { header, inputs, updateButton, cancelButton } from './update-password-form.config.json'
+import { header, inputs, updateButton, cancelButton } from './update-password.config.json'
 // FUNCTIONS
 import { encryptPass } from '../../../functions/encrypt'
 

src/components/users/update-password-form/update-password-form.test.js

@@ -1,6 +1,8 @@
 describe('[UpdatePasswordForm]', () => {
-  test('Dummy test only', () => {
-    const test = 3
-    expect(test).toBe(3)
+  describe('[HAPPY PATH]', () => {
+    test('Dummy test only', () => {
+      const test = 3
+      expect(test).toBe(3)
+    })
   })
 })

src/components/users/update-user-form/update-user-form.test.js

@@ -9,18 +9,22 @@ import UpdateUserForm from './update-user-form'
 // HELPER FUNCTIONS
 import { setLoggedUser } from '../../../functions/local-storage'
 
-test(`Renders a 'Update User' Form without props`, () => {
-  setLoggedUser({
-    name: 'Test',
-    lastName: 'Test'
+describe('[UpdateUserForm]', () => {
+  describe('[HAPPY PATH]', () => {
+    test(`Renders without props`, () => {
+      setLoggedUser({
+        name: 'Test',
+        lastName: 'Test'
+      })
+      render(
+        <Provider store={createStore(store)}>
+          <MockedProvider mocks={[]} addTypename={false}>
+            <UpdateUserForm />
+          </MockedProvider>
+        </Provider>
+      )
+      const element = screen.getByText('Name')
+      expect(element).toBeInTheDocument()
+    })
   })
-  render(
-    <Provider store={createStore(store)}>
-      <MockedProvider mocks={[]} addTypename={false}>
-        <UpdateUserForm />
-      </MockedProvider>
-    </Provider>
-  )
-  const element = screen.getByText('Name')
-  expect(element).toBeInTheDocument()
 })