Desafio Finalizado

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": ["next/core-web-vitals", "prettier"],
+    "rules": {
+        "react-hooks/exhaustive-deps": "off"
+    }
+}

.github/workflows/default.js.yml

@@ -0,0 +1,52 @@
+name: Default CI
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 19.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Create .env File
+      run: |
+        touch .env
+        echo NEXT_PUBLIC_API=/api/cards >> .env
+        cat .env
+
+    - run: npm i
+    - run: npm run check
+    - run: npm run build
+
+    - name: Install Vercel CLI
+      run: npm install --global vercel@latest
+
+    - name: Pull Vercel Environment Information
+      run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+    - name: Build Project Artifacts
+      run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+    - name: Deploy Project Artifacts to Vercel
+      run: vercel deploy --prebuilt --prod --archive=tgz --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -0,0 +1,15 @@
+# dependencies
+/node_modules
+
+# next.js
+/.next
+/out
+
+# production
+/build
+
+# cache
+/.swc
+
+# env files
+/.env

.prettierignore

@@ -0,0 +1,9 @@
+# Ignore artifacts:
+/node_modules
+/.next
+/out
+/build
+/.swc
+/build
+/coverage
+/.github

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+    "singleQuote": true,
+    "semi": true,
+    "overrides": [
+        {
+            "files": ".editorconfig",
+            "options": {
+                "editorconfig": true
+            }
+        }
+    ]
+}

README.md

@@ -1,3 +1,23 @@
+# Anotações do Katreque
+
+Projeto desenvolvido como avaliação de frontend para a Personare em 2022.
+
+Tecnologias Utilizadas:
+
+-   Next.js
+-   styled-components
+-   Jest e Testing Library
+-   Prettier e ESLint
+
+A versão em produção está disponível no [Vercel](https://katreque-tarot-game.vercel.app).
+
+**Caso queira rodar o ambiente em Dev**
+
+-   Crie um arquivo .env:
+    -   Adicione a seguinte linha: NEXT_PUBLIC_API=/api/cards
+
+### ReadMe Original Abaixo
+
 # front-end-challenge
 
 > Desafio para os futuros front-end's do [@Personare](https://github.com/Personare)
@@ -14,34 +34,31 @@ Criar um jogo de Tarot, permitindo o sorteio de uma carta.
 
 E as especificações são:
 
-- Tela de apresentação exibindo todas as cartas com seu conteúdo visível, e com um botão para iniciar o jogo.
-- Ao clicar no botão, as cartas deverão ser viradas - escondendo o conteúdo - e embaralhadas.
-- Permitir que o usuário selecione apenas uma carta, clicando na mesma.
-- Apresentar a carta selecionada, o nome da carta e uma descrição. (a descrição pode ser um lorem ipsum)
+-   Tela de apresentação exibindo todas as cartas com seu conteúdo visível, e com um botão para iniciar o jogo.
+-   Ao clicar no botão, as cartas deverão ser viradas - escondendo o conteúdo - e embaralhadas.
+-   Permitir que o usuário selecione apenas uma carta, clicando na mesma.
+-   Apresentar a carta selecionada, o nome da carta e uma descrição. (a descrição pode ser um lorem ipsum)
 
 OBS: As imagens e nomes das cartas estão listadas no arquivo [`tarot.json`](tarot.json), esse arquivo deve ser consumido via _http request_. A propriedade `image` de cada carta deve ser concatenada com a propriedade `imagesUrl`, para obter o endereço final da imagem. Utilize o valor da propriedade `imageBackCard` para obter a imagem do fundo da carta.
 
-
 ## Instruções
 
 1. Efetue o **fork** deste repositório e crie um branch com o seu nome. (ex: caue-alves).
 2. Após finalizar o desafio, crie um **Pull Request**.
 3. Aguarde algum contribuidor realizar o code review.
 
-
 ## Pré-requisitos
 
-- Aplicação feita em React
-- Possuir testes
-- Gerar versão de produção
-- Criar micro commits ou commits por features
-	- Detalhar nos comentários dos commits as decisões tomadas.
-
+-   Aplicação feita em React
+-   Possuir testes
+-   Gerar versão de produção
+-   Criar micro commits ou commits por features
+    -   Detalhar nos comentários dos commits as decisões tomadas.
 
 ## Diferenciais
 
-- Boa documentação
-- Testes de componentes isolados
+-   Boa documentação
+-   Testes de componentes isolados
 
 ## Dúvidas
 

__tests__/components/__snapshots__/clientPortal.test.jsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientPortal Quando o ClientPortal transporta seus filhos, a div pai deve receber suas props. 1`] = `
+<DocumentFragment>
+  <main>
+    <div>
+      <span>
+        Salve!
+      </span>
+    </div>
+    <div
+      test-id="teste"
+    >
+      <span>
+        Tudo bom?
+      </span>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ClientPortal Quando o ClientPortal é montado, mas não encontra o elemento main, não renderiza nada. 1`] = `
+<DocumentFragment>
+  <div />
+</DocumentFragment>
+`;
+
+exports[`ClientPortal Quando o ClientPortal é montado, transporta seus filhos dentro de uma div como filho direto do elemento main. 1`] = `
+<DocumentFragment>
+  <main>
+    <div>
+      <span>
+        Salve!
+      </span>
+    </div>
+    <div>
+      <span>
+        Tudo bom?
+      </span>
+    </div>
+  </main>
+</DocumentFragment>
+`;

__tests__/components/button.test.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import Button from '../../components/button';
+
+describe('Button Component', () => {
+    it('O botão default deve ter a estilização apropriada.', () => {
+        render(<Button>Botão Brabo</Button>);
+
+        const btn = screen.getByRole('button', { name: 'Botão Brabo' });
+
+        expect(btn).toHaveStyleRule('color: #0d0d0d');
+        expect(btn).toHaveStyleRule('background-color: #f2ea7e');
+        expect(btn).toHaveStyleRule('border: #f2ea7e');
+    });
+
+    it('O botão default deve ter a estilização apropriada quando ocorrer o evento de hover.', () => {
+        render(<Button>Botão Brabo</Button>);
+
+        const btn = screen.getByRole('button', { name: 'Botão Brabo' });
+        fireEvent.mouseEnter(btn);
+
+        expect(btn).toHaveStyleRule('border: 2px solid #d1c848');
+    });
+
+    it('O botão na versão black deve ter a estilização apropriada.', () => {
+        render(<Button black>Botão Brabo</Button>);
+
+        const btn = screen.getByRole('button', { name: 'Botão Brabo' });
+
+        expect(btn).toHaveStyleRule('color: white');
+        expect(btn).toHaveStyleRule('background-color: #0d0d0d');
+        expect(btn).toHaveStyleRule('border: #0d0d0d');
+    });
+
+    it('O botão na versão black deve ter a estilização apropriada quando ocorrer o evento de hover.', () => {
+        render(<Button black>Botão Brabo</Button>);
+
+        const btn = screen.getByRole('button', { name: 'Botão Brabo' });
+        fireEvent.mouseEnter(btn);
+
+        expect(btn).toHaveStyleRule('border: 2px solid #6e6e6e');
+    });
+
+    it('Ao receber props como o evento onClick, deve repassar para o elemento HTML.', () => {
+        const onClickHandler = jest.fn();
+        render(<Button onClick={onClickHandler}>Botão Brabo</Button>);
+
+        const btn = screen.getByRole('button', { name: 'Botão Brabo' });
+        fireEvent.click(btn);
+
+        expect(onClickHandler).toHaveBeenCalled();
+    });
+});