diff --git a/package-lock.json b/package-lock.json index f57f65e3..fd08d355 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "my-pets", - "version": "0.1.83", + "version": "0.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "my-pets", - "version": "0.1.83", + "version": "0.2.0", "license": "MIT", "dependencies": { "@apollo/client": "^3.3.14", diff --git a/package.json b/package.json index c838c7f3..e7dad5dc 100644 --- a/package.json +++ b/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, diff --git a/src/components/app/app.test.js b/src/components/app/app.test.js index adc80c0f..4b4fbc26 100644 --- a/src/components/app/app.test.js +++ b/src/components/app/app.test.js @@ -1,9 +1,9 @@ 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' @@ -11,7 +11,7 @@ describe.skip('[App]', () => { describe('[HAPPY PATH]', () => { test('Renders without props', () => { render( - + diff --git a/src/components/atoms/Column/index.jsx b/src/components/atoms/Column/index.jsx index 8d7c349f..d652979c 100644 --- a/src/components/atoms/Column/index.jsx +++ b/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, diff --git a/src/components/atoms/ProgressBar/index.jsx b/src/components/atoms/ProgressBar/index.jsx index 5bb6cf2f..19c47aea 100644 --- a/src/components/atoms/ProgressBar/index.jsx +++ b/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 ? ( { 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: + } + ] + } + ]) + 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: ( { }, [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 + return } export default Home diff --git a/src/components/pages/Home/index.test.js b/src/components/pages/Home/index.test.js index ea2eeb6b..09f39c4d 100644 --- a/src/components/pages/Home/index.test.js +++ b/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() + render( + + + + ) expect(screen.getByText(`HELLO ${nameMock.toUpperCase()}`)).toBeInTheDocument() }) }) diff --git a/src/components/pages/ListMyPets/index.test.js b/src/components/pages/ListMyPets/index.test.js index 7c625177..8723d169 100644 --- a/src/components/pages/ListMyPets/index.test.js +++ b/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( @@ -27,7 +27,7 @@ describe.skip('[ListMyPets]', () => { ) - 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() }) }) diff --git a/src/components/templates/CardsListTemplate/index.jsx b/src/components/templates/CardsListTemplate/index.jsx index c4142f52..6bd4476c 100644 --- a/src/components/templates/CardsListTemplate/index.jsx +++ b/src/components/templates/CardsListTemplate/index.jsx @@ -40,7 +40,7 @@ const CardsListTemplate = ({ }) => { const parseCardsList = () => isFetching - ? [] + ? [] : cardListData.map( ({ key, cardHeader, cardImage, cardContent, cardFooter, childWidth = 3 }, cardI) => { const cardConfig = { diff --git a/src/graphql/queries.js b/src/graphql/queries.js index 6ec013a3..6d5c191d 100644 --- a/src/graphql/queries.js +++ b/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 }