Teste personare

.editorconfig

@@ -5,7 +5,7 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2
 trim_trailing_whitespace = true
 
 [Makefile]

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,50 +1,34 @@
-# front-end-challenge
+# Front-End Challenge
 
-> Desafio para os futuros front-end's do [@Personare](https://github.com/Personare)
-
-## Introdução
-
-A nossa Product Owner pensou em um produto fantástico para ser desenvolvido, e um dos desafios é criação de um jogo de Tarot.
-
-<br>
-
-**Então, essa é a sua missão!**
-
-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)
-
-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.
+[Link para visualizar a aplicação](https://personare-test-ingrid.surge.sh)
 
+## Pré-requisitos
 
-## Instruções
+- NodeJs
 
-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.
+## Como rodar o projeto
 
+- Instale as dependências com `yarn` ou `npm install`
+- Rode a aplicação usando o comando `yarn start` ou `npm start`
 
-## Pré-requisitos
+## Testes unitários
 
-- 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.
+- Para rodar os testes, execute o comando `yarn test`
+- Para obter o relatório de cobertura de código, execute o comando `yarn test --coverage`
 
+## Teste e2e
 
-## Diferenciais
+- Rode o projeto e execute o comando `yarn e2e`
 
-- Boa documentação
-- Testes de componentes isolados
+## Ferramentas e bibliotecas utilizadas
 
-## Dúvidas
+- [ReactJS](https://pt-br.reactjs.org/docs/getting-started.html)
+- [TypeScript](https://www.typescriptlang.org/docs/)
+- [Axios](https://axios-http.com/docs/intro)
+- [Styled Components](https://styled-components.com/docs)
+- [Enzyme](https://enzymejs.github.io/enzyme/)
+- [Cypress](https://docs.cypress.io/guides/overview/why-cypress)
 
-Se surgir alguma dúvida, consulte as [perguntas feitas anteriormente](https://github.com/Personare/front-end-challenge/labels/question).
+## Possíveis melhorias
 
-Caso não encontre a sua resposta, sinta-se à vontade para [abrir uma issue](https://github.com/Personare/front-end-challenge/issues/new) =]
+- Aprimorar as animações utilizando uma biblioteca que ofereça essas funcionalidades.

cypress.json

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "url": "http://localhost:3000"
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/main.js

@@ -0,0 +1,54 @@
+/// <reference types="Cypress" />
+
+const skipLandingPage = () => {
+  cy.get("[data-cy=start]").should("exist").should("be.visible");
+  cy.get("[data-cy=action-button]").should("have.text", "Iniciar").click();
+};
+
+describe("Main integration tests", () => {
+  beforeEach(() => {
+    cy.intercept("/assets/tarot.json").as("cards");
+    cy.visit(Cypress.env("url"));
+    cy.wait("@cards");
+  });
+
+  it("should show render the start game component", () => {
+    skipLandingPage();
+  });
+
+  it("should show all cards facing up", () => {
+    skipLandingPage();
+    cy.get("[data-cy=card-up]").should("have.length", 78);
+  });
+
+  it("should start the game", () => {
+    skipLandingPage();
+
+    cy.get("[data-cy=action-button]")
+      .should("have.text", "Embaralhar cartas")
+      .click();
+
+    cy.get("[data-cy=shuffling-cards-text]")
+      .should("exist")
+      .should("be.visible");
+    cy.get("[data-cy=choose-a-card-text]").should("exist").should("be.visible");
+
+    cy.get("[data-cy=card-down]").should("have.length", 78);
+  });
+
+  it("should show the choosed card", () => {
+    skipLandingPage();
+
+    cy.get("[data-cy=action-button]")
+      .should("have.text", "Embaralhar cartas")
+      .click();
+
+    cy.get("[data-cy=card-down]").should("have.length", 78);
+    cy.get("[data-cy=choose-a-card-text]").should("exist").should("be.visible");
+
+    cy.get("[data-cy=card]").first().click();
+
+    cy.get("[data-cy=card-list] [data-cy=card-up]").should("have.length", 1);
+    cy.get("[data-cy=modal-overlay]").should("be.visible");
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "personare-test",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/axios": "^0.14.0",
+    "@types/enzyme": "^3.10.9",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.14",
+    "axios": "^0.21.4",
+    "cypress": "^8.4.0",
+    "react": "^17.0.2",
+    "react-card-flip": "^1.1.3",
+    "react-dom": "^17.0.2",
+    "react-flipcard": "^0.2.1",
+    "react-scripts": "4.0.3",
+    "styled-components": "^5.3.1",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "e2e": "cypress open"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}"
+    ]
+  }
+}