Finishing page set-up. UT coverage improved

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-pets",
-  "version": "0.1.83",
+  "version": "0.2.0",
   "author": "Nicolás Omar González Passerino",
   "license": "MIT",
   "private": false,

src/components/app/app.test.js

@@ -1,17 +1,17 @@
 import { render, screen } from '@testing-library/react'
 import { MockedProvider } from '@apollo/client/testing'
 import { Provider } from 'react-redux'
-import { createStore } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
 // REDUX
-import store from '../../redux/reducers'
+import reducer from '../../redux/reducers'
 // COMPONENTS
 import App from './app'
 
 describe.skip('[App]', () => {
   describe('[HAPPY PATH]', () => {
     test('Renders without props', () => {
       render(
-        <Provider store={createStore(store)}>
+        <Provider store={configureStore({ reducer })}>
           <MockedProvider mocks={[]} addTypefile={false}>
             <App />
           </MockedProvider>

src/components/atoms/Column/index.jsx

@@ -36,7 +36,7 @@ export default Column
 Column.propTypes = {
   _key: string.isRequired,
   testId: string.isRequired,
-  width: oneOf(parseObjKeys(columnSizes, true), parseObjKeys(columnSizes)),
+  width: oneOf([...parseObjKeys(columnSizes, true), ...parseObjKeys(columnSizes)]),
   isCentered: bool,
   isContainer: bool,
   isMultiline: bool,

src/components/atoms/ProgressBar/index.jsx

@@ -10,7 +10,7 @@ const { colors, sizes } = BULMA_STYLES
 const ProgressBar = ({
   value = 0,
   maxValue = 100,
-  isLoading = false,
+  isInfiniteLoading = false,
   color = parseObjKeys(colors)[7],
   size = parseObjKeys(sizes)[1]
 }) => {
@@ -19,7 +19,7 @@ const ProgressBar = ({
     otherClasses: [colors[color], sizes[size]]
   })
 
-  return isLoading ? (
+  return isInfiniteLoading ? (
     <progress
       data-testid="test-loading-progress-bar"
       className={progressClasses}
@@ -43,7 +43,7 @@ ProgressBar.propTypes = {
   // BASE PROPS
   value: number,
   maxValue: number,
-  isLoading: bool,
+  isInfiniteLoading: bool,
   // STYLE PROPS
   color: oneOf(parseObjKeys(colors)),
   size: oneOf(parseObjKeys(sizes))

src/components/atoms/ProgressBar/index.mocks.json

@@ -8,7 +8,7 @@
   "isLargeSize": {
     "size": "large"
   },
-  "isLoading": {
-    "isLoading": true
+  "isInfiniteLoading": {
+    "isInfiniteLoading": true
   }
 }

src/components/atoms/ProgressBar/index.stories.jsx

@@ -45,9 +45,9 @@ IsLargeSize.args = {
   ...mocks.isLargeSize
 }
 
-export const isLoading = Template.bind({})
-isLoading.storyName = 'Is just loading'
-isLoading.args = {
+export const IsInfiniteLoading = Template.bind({})
+IsInfiniteLoading.storyName = 'With infinite loading'
+IsInfiniteLoading.args = {
   ...IsLargeSize.args,
-  ...mocks.isLoading
+  ...mocks.IsInfiniteLoading
 }

src/components/pages/Home/config.json

@@ -0,0 +1,27 @@
+{
+  "petPopulationWidget": {
+    "key": "widget-item",
+    "cardContent": [
+      {
+        "type": "title",
+        "content": {
+          "titleText": "My Pets",
+          "titleSize": "normal",
+          "styles": { "marginBottom": "20px" }
+        }
+      },
+      {
+        "type": "section",
+        "content": null
+      }
+    ]
+  },
+  "cardListTitle": {
+    "titleSize": "bigger",
+    "subText": "Welcome to our beautiful place",
+    "subSize": "small",
+    "isCentered": true,
+    "childWidth": 12,
+    "styles": { "margin": "20px 0px" }
+  }
+}

src/components/pages/Home/index.jsx

@@ -1,17 +1,33 @@
 import React, { useState, useEffect } from 'react'
 // GRAPHQL CLIENT
 import { useLazyQuery } from '@apollo/client'
-import { GET_MY_PETS_QUANTITY } from '../../../graphql/queries'
+import { GET_MY_PETS_POPULATION } from '../../../graphql/queries'
 // COMPONENTS
 import CardsListTemplate from '../../templates/CardsListTemplate'
 import TagList from '../../molecules/TagList'
+import ProgressBar from '../../atoms/ProgressBar'
 // FUNCTIONS
 import { getLoggedUser } from '../../../functions/local-storage'
+// MOCKS
+import config from './config.json'
+
+const { cardListTitle, petPopulationWidget } = config
 
 const Home = () => {
   const [user] = useState(getLoggedUser())
-  const [getData, { data, loading: isFetching }] = useLazyQuery(GET_MY_PETS_QUANTITY)
-  const [cardListData, setCardListData] = useState([])
+  const [cardListData, setCardListData] = useState([
+    {
+      ...petPopulationWidget,
+      cardContent: [
+        petPopulationWidget.cardContent[0],
+        {
+          ...petPopulationWidget.cardContent[1],
+          content: <ProgressBar isInfiniteLoading={true} />
+        }
+      ]
+    }
+  ])
+  const [getData, { data }] = useLazyQuery(GET_MY_PETS_POPULATION)
 
   useEffect(() => {
     const asyncGetData = async () => await getData()
@@ -20,21 +36,22 @@ const Home = () => {
 
   useEffect(() => {
     if (data) {
-      const [all, ...pets] = data.getMyPetsQuantity
+      const [all, ...pets] = data.getMyPetsPopulation
       setCardListData([
         {
-          key: `widget-item`,
+          ...petPopulationWidget,
           cardContent: [
             {
-              type: 'title',
+              ...petPopulationWidget.cardContent[0],
               content: {
-                titleText: `Pets: ${all.quantity}`,
-                titleSize: 'normal',
-                styles: { marginBottom: '20px' }
+                ...petPopulationWidget.cardContent[0].content,
+                titleText: `${
+                  all.quantity === 0 ? `No created Pets yet` : `Created Pets: ${all.quantity}`
+                }`
               }
             },
             {
-              type: 'section',
+              ...petPopulationWidget.cardContent[1],
               content: (
                 <TagList
                   {...{
@@ -53,16 +70,11 @@ const Home = () => {
   }, [data])
 
   const cardsListTitle = {
-    titleText: `HELLO ${user?.name?.toUpperCase()}`,
-    titleSize: 'bigger',
-    subText: 'Welcome to our beautiful place',
-    subSize: 'small',
-    isCentered: true,
-    childWidth: 12,
-    styles: { margin: '20px 0px' }
+    ...cardListTitle,
+    titleText: `HELLO ${user?.name?.toUpperCase()}`
   }
 
-  return <CardsListTemplate {...{ isFetching, cardsListTitle, cardListData }} />
+  return <CardsListTemplate {...{ cardsListTitle, cardListData }} />
 }
 
 export default Home

src/components/pages/Home/index.test.js

@@ -1,3 +1,4 @@
+import { MockedProvider } from '@apollo/client/testing'
 import { render, screen } from '@testing-library/react'
 // COMPONENTS
 import Home from '.'
@@ -6,13 +7,17 @@ import { setLoggedUser } from '../../../functions/local-storage'
 // MOCKS
 import { nameMock } from './index.mocks.json'
 
-describe.skip('[Home]', () => {
+describe('[Home]', () => {
   beforeAll(() => {
     setLoggedUser({ name: nameMock })
   })
 
   test('Renders with a dummy logged User', () => {
-    render(<Home />)
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <Home />
+      </MockedProvider>
+    )
     expect(screen.getByText(`HELLO ${nameMock.toUpperCase()}`)).toBeInTheDocument()
   })
 })

src/components/pages/ListMyPets/index.test.js

@@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockUseNavigate
 }))
 
-describe.skip('[ListMyPets]', () => {
+describe('[ListMyPets]', () => {
   test('Should render the page with its inputs', () => {
     render(
       <Provider store={configureStore({ reducer })}>
@@ -27,7 +27,7 @@ describe.skip('[ListMyPets]', () => {
       </Provider>
     )
 
-    expect(() => screen.getByText('My list of Pets')).toThrow()
-    expect(screen.getByTestId('test-progress-bar')).toBeInTheDocument()
+    expect(screen.getByText('My list of Pets')).toBeInTheDocument()
+    expect(screen.getByTestId('test-loading-progress-bar')).toBeInTheDocument()
   })
 })

src/components/templates/CardsListTemplate/index.jsx

@@ -40,7 +40,7 @@ const CardsListTemplate = ({
 }) => {
   const parseCardsList = () =>
     isFetching
-      ? [<ProgressBar key={`card-progress-bar`} isLoading={true} />]
+      ? [<ProgressBar key={`card-progress-bar`} isInfiniteLoading={true} />]
       : cardListData.map(
           ({ key, cardHeader, cardImage, cardContent, cardFooter, childWidth = 3 }, cardI) => {
             const cardConfig = {

src/graphql/queries.js

@@ -68,9 +68,9 @@ export const GET_PET = gql`
   }
 `
 
-export const GET_MY_PETS_QUANTITY = gql`
+export const GET_MY_PETS_POPULATION = gql`
   query {
-    getMyPetsQuantity {
+    getMyPetsPopulation {
       name
       quantity
     }