Last adjustments gallery and formatPrice

jest.config.js

@@ -6,7 +6,9 @@ module.exports = {
     'src/**/*.ts(x)?',
     '!src/**/stories.tsx',
     '!src/pages/**/*.tsx',
-    '!src/styles/**/*.ts'
+    '!src/styles/**/*.ts',
+    '!src/utils/apollo.ts',
+    '!src/types/**/*.d.ts'
   ],
   setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
   modulePaths: ['<rootDir>/src/', '<rootDir>/.jest'],

src/components/GameCard/__snapshots__/test.tsx.snap

@@ -215,7 +215,7 @@ exports[`<GameCard /> should render correctly 1`] = `
       <div
         class="c9"
       >
-        R$ 235,00
+        $235.00
       </div>
       <button
         class="c10"

src/components/GameCard/index.tsx

@@ -9,14 +9,15 @@ import {
 import Ribbon, { RibbonColors, RibbonSizes } from 'components/Ribbon'
 import Button from 'components/Button'
 import * as S from './styles'
+import formatPrice from 'utils/format-price'
 
 export type GameCardProps = {
   slug: string
   title: string
   developer: string
   img: string
-  price: string
-  promotionalPrice?: string
+  price: number
+  promotionalPrice?: number
   favorite?: boolean
   ribbon?: React.ReactNode
   ribbonColor?: RibbonColors
@@ -63,8 +64,10 @@ const GameCard = ({
         )}
       </S.FavButton>
       <S.BuyBox>
-        {!!promotionalPrice && <S.Price isPromotional>{price}</S.Price>}
-        <S.Price>{promotionalPrice || price}</S.Price>
+        {!!promotionalPrice && (
+          <S.Price isPromotional>{formatPrice(price)}</S.Price>
+        )}
+        <S.Price>{formatPrice(promotionalPrice || price)}</S.Price>
         <Button icon={<AddShoppingCart />} size="small" />
       </S.BuyBox>
     </S.Content>

src/components/GameCard/stories.tsx

@@ -15,8 +15,8 @@ export default {
     title: 'Population Zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x140',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   },
   argTypes: {
     onFav: { action: 'clicked' },

src/components/GameCard/test.tsx

@@ -9,7 +9,7 @@ const props = {
   title: 'Population Zero',
   developer: 'Rockstar Games',
   img: 'https://source.unsplash.com/user/willianjusten/300x140',
-  price: 'R$ 235,00'
+  price: 235
 }
 
 describe('<GameCard />', () => {
@@ -42,20 +42,20 @@ describe('<GameCard />', () => {
   it('should render price in label', () => {
     renderWithTheme(<GameCard {...props} />)
 
-    const price = screen.getByText('R$ 235,00')
+    const price = screen.getByText('$235.00')
 
     expect(price).not.toHaveStyle({ textDecoration: 'line-through' })
     expect(price).toHaveStyle({ backgroundColor: theme.colors.secondary })
   })
 
   it('should render a line-through in price when promotional', () => {
-    renderWithTheme(<GameCard {...props} promotionalPrice="R$ 15,00" />)
+    renderWithTheme(<GameCard {...props} promotionalPrice={15} />)
 
-    expect(screen.getByText('R$ 235,00')).toHaveStyle({
+    expect(screen.getByText('$235.00')).toHaveStyle({
       textDecoration: 'line-through'
     })
 
-    expect(screen.getByText('R$ 15,00')).not.toHaveStyle({
+    expect(screen.getByText('$15.00')).not.toHaveStyle({
       textDecoration: 'line-through'
     })
   })

src/components/GameCardSlider/mock.ts

@@ -4,47 +4,47 @@ export default [
     slug: 'population-zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x140',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   },
   {
     title: 'Population Zero',
     slug: 'population-zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x141',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   },
   {
     title: 'Population Zero',
     slug: 'population-zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x142',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   },
   {
     title: 'Population Zero',
     slug: 'population-zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x143',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   },
   {
     title: 'Population Zero',
     slug: 'population-zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x144',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   },
   {
     title: 'Population Zero',
     slug: 'population-zero',
     developer: 'Rockstar Games',
     img: 'https://source.unsplash.com/user/willianjusten/300x145',
-    price: 'R$ 235,00',
-    promotionalPrice: 'R$ 215,00'
+    price: 235,
+    promotionalPrice: 215
   }
 ]

src/components/GameInfo/__snapshots__/test.tsx.snap

@@ -238,7 +238,7 @@ exports[`<GameInfo /> should render game informations 1`] = `
     class="c2 c3"
     color="secondary"
   >
-    $210,00
+    $210.00
   </div>
   <p
     class="c4"
@@ -296,4 +296,4 @@ exports[`<GameInfo /> should render game informations 1`] = `
     </button>
   </div>
 </div>
-`
+`;

src/components/GameInfo/index.tsx

@@ -6,13 +6,14 @@ import {
 import Button from 'components/Button'
 import Heading from 'components/Heading'
 import Ribbon from 'components/Ribbon'
+import formatPrice from 'utils/format-price'
 
 import * as S from './styles'
 
 export type GameInfoProps = {
   title: string
   description: string
-  price: string
+  price: number
 }
 
 const GameInfo = ({ title, description, price }: GameInfoProps) => (
@@ -21,7 +22,7 @@ const GameInfo = ({ title, description, price }: GameInfoProps) => (
       {title}
     </Heading>
 
-    <Ribbon color="secondary">{`$${price}`}</Ribbon>
+    <Ribbon color="secondary">{formatPrice(price)}</Ribbon>
 
     <S.Description>{description}</S.Description>
 

src/components/GameInfo/mock.ts

@@ -1,6 +1,6 @@
 export default {
   title: 'Borderlands 3',
-  price: '215,00',
+  price: 215,
   description:
     'Experience the epic space strategy games that redefined the RTS genre. Control your fleet and build an armada across more than 30 single-player missions.'
 }

src/components/GameInfo/test.tsx

@@ -6,7 +6,7 @@ import GameInfo from '.'
 const props = {
   title: 'My Game Title',
   description: 'Game Description',
-  price: '210,00'
+  price: 210
 }
 
 describe('<GameInfo />', () => {
@@ -16,7 +16,7 @@ describe('<GameInfo />', () => {
     expect(
       screen.getByRole('heading', { name: /my game title/i })
     ).toBeInTheDocument()
-    expect(screen.getByText(/\$210,00/)).toBeInTheDocument()
+    expect(screen.getByText(/\$210\.00/)).toBeInTheDocument()
     expect(screen.getByText(/game description/i)).toBeInTheDocument()
 
     expect(container.firstChild).toMatchSnapshot()

src/pages/game/[slug].tsx

@@ -3,7 +3,6 @@ import { initializeApollo } from 'utils/apollo'
 
 import Game, { GameTemplateProps } from 'templates/Game'
 
-import galleryMock from 'components/Gallery/mock'
 import gamesMock from 'components/GameCardSlider/mock'
 import highlightMock from 'components/Highlight/mock'
 import { QueryGames, QueryGamesVariables } from 'graphql/generated/QueryGames'
@@ -65,7 +64,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
         price: game.price,
         description: game.short_description
       },
-      gallery: game.gallery,
+      gallery: game.gallery.map((image) => ({
+        src: `http://localhost:1337${image.src}`,
+        label: image.label
+      })),
       description: game.description,
       details: {
         developer: game.developers[0].name,

src/pages/games.tsx

@@ -25,10 +25,7 @@ export async function getStaticProps() {
         slug: game.slug,
         developer: game.developers[0].name,
         img: `http://localhost:1337${game.cover!.url}`,
-        price: new Intl.NumberFormat('en', {
-          style: 'currency',
-          currency: 'USD'
-        }).format(game.price)
+        price: game.price
       })),
       filterItems: filterItemsMock
     }

src/utils/format-price.ts

@@ -0,0 +1,6 @@
+export default function formatPrice(price: number | bigint): string {
+  return new Intl.NumberFormat('en', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(price)
+}