From d5fca5851560b673152f1ea7cf2e9200e8afe600 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 21:56:10 -0300 Subject: [PATCH 01/14] chore: add realHover to cypress namespace --- cypress.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress.d.ts b/cypress.d.ts index 899dc07..5f674a7 100644 --- a/cypress.d.ts +++ b/cypress.d.ts @@ -40,6 +40,8 @@ declare global { component: React.ReactNode, options?: MountOptions, ): Cypress.Chainable; + + realHover(): Chainable; } } } From 263aa11ae6fb3395af25749a9a3c011ff69e09ff Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 21:57:19 -0300 Subject: [PATCH 02/14] chore: add cypress-real-events to dev dependencies --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 3e358c8..3c46ca4 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@typescript-eslint/parser": "6.7.2", "@vitejs/plugin-react": "4.1.0", "cypress": "13.2.0", + "cypress-real-events": "^1.10.3", "eslint": "8.50.0", "eslint-config-prettier": "9.0.0", "eslint-config-react-app": "7.0.1", From a8589172c1d3b3010551410a9d91865c67f2ff83 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 21:57:54 -0300 Subject: [PATCH 03/14] chore: add cypress-real-events --- yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/yarn.lock b/yarn.lock index 76f09e2..91a2357 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4518,6 +4518,11 @@ csstype@^3.1.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +cypress-real-events@^1.10.3: + version "1.10.3" + resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.10.3.tgz#e2e949ea509cc4306df6c238de1a9982d67360e5" + integrity sha512-YN3fn+CJIAM638sE6uMvv2/n3PsWowdd0rOiN6ZoyezNAMyENfuQHvccLKZpN+apGfQZYetCml6QXLYgDid2fg== + cypress@13.2.0: version "13.2.0" resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.2.0.tgz#10f73d06a0764764ffbb903a31e96e2118dcfc1d" From daf8ebc9902ba33d567083e47a4d17af8927e843 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 21:59:25 -0300 Subject: [PATCH 04/14] chore: add cypress real events --- cypress/support/commands.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index b149cec..41d2798 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,17 +1,17 @@ // put e2e + CT common commands here - +import 'cypress-real-events'; // @ts-expect-error // @see error 2306 https://github.com/microsoft/TypeScript/blob/3fcd1b51a1e6b16d007b368229af03455c7d5794/src/compiler/diagnosticMessages.json#L1635 -import registerCypressGrep from '@cypress/grep' -registerCypressGrep() +import registerCypressGrep from '@cypress/grep'; +registerCypressGrep(); Cypress.Commands.add('getByCy', (selector, ...args) => cy.get(`[data-cy="${selector}"]`, ...args), -) +); Cypress.Commands.add('getByCyLike', (selector, ...args) => cy.get(`[data-cy*=${selector}]`, ...args), -) +); Cypress.Commands.add('getByClassLike', (selector, ...args) => cy.get(`[class*=${selector}]`, ...args), -) +); From b58907a8ad1c4c583e04d943bdb01d1f8108eeb0 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:00:00 -0300 Subject: [PATCH 05/14] style: add semi-colon --- cypress/support/plugins.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/support/plugins.ts b/cypress/support/plugins.ts index 811e9bf..94bb927 100644 --- a/cypress/support/plugins.ts +++ b/cypress/support/plugins.ts @@ -1,4 +1,4 @@ -const cyGrep = require('@cypress/grep/src/plugin') +const cyGrep = require('@cypress/grep/src/plugin'); /** * The collection of plugins to use with Cypress @@ -13,5 +13,5 @@ export default function plugins( // add plugins here // ...cyDataSession(on, config), // example ...cyGrep(config), - } + }; } From 75e940209a0032ba46dcd0bc45311680a2560982 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:01:12 -0300 Subject: [PATCH 06/14] refactor: add onClick, className and data-cy to Arrow --- src/assets/db.icons.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/assets/db.icons.tsx b/src/assets/db.icons.tsx index c561133..1952d00 100644 --- a/src/assets/db.icons.tsx +++ b/src/assets/db.icons.tsx @@ -277,7 +277,7 @@ function Save({ fill, width, height }: IconProps) { ); } -function Arrow({ fill, width, height }: IconProps) { +function Arrow({ fill, width, height, onClick }: IconProps) { return ( Date: Wed, 4 Oct 2023 22:01:58 -0300 Subject: [PATCH 07/14] refactor: add data-cy --- src/components/BaseCard/BaseCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BaseCard/BaseCard.tsx b/src/components/BaseCard/BaseCard.tsx index 07ba424..6b42b96 100644 --- a/src/components/BaseCard/BaseCard.tsx +++ b/src/components/BaseCard/BaseCard.tsx @@ -2,7 +2,7 @@ import * as S from './styles'; const BaseCard = ({ children, ...styleProps }: BaseCardProps) => { return ( - + {children} ); From 9a00e6283d2e25c3432ff43ed9b1969ca1a32237 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:02:33 -0300 Subject: [PATCH 08/14] test: filter card component with cypress --- src/components/FilterCard/FilterCard.cy.tsx | 56 +++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/components/FilterCard/FilterCard.cy.tsx diff --git a/src/components/FilterCard/FilterCard.cy.tsx b/src/components/FilterCard/FilterCard.cy.tsx new file mode 100644 index 0000000..f4d80f6 --- /dev/null +++ b/src/components/FilterCard/FilterCard.cy.tsx @@ -0,0 +1,56 @@ +import FilterCard from './FilterCard'; +import GlobalStyle from '@styles/global'; + +describe('', () => { + beforeEach(() => { + const filterCardPropsMock = { + filter: 'JavaScript', + onClick: cy.stub().as('onClickMock'), + }; + + cy.mount( + <> + + + , + ); + }); + + it('should render base card with align-items: center', () => { + cy.getByCy('base-card').should('have.css', 'align-items', 'center'); + }); + + it('should render base card with justify-content: space-between', () => { + cy.getByCy('base-card').should( + 'have.css', + 'justify-content', + 'space-between', + ); + }); + + it('should arrow be cursor pointer when hover it', () => { + cy.getByCy('arrow').realHover(); + cy.getByCy('arrow').should('have.css', 'cursor', 'pointer'); + }); + + it('should text container has diplay: flex', () => { + cy.getByCy('text-container').should('have.css', 'display', 'flex'); + }); + + it('should text container has flex-direction: column', () => { + cy.getByCy('text-container').should('have.css', 'flex-direction', 'column'); + }); + + it('should text container has align-items: flex-start', () => { + cy.getByCy('text-container').should( + 'have.css', + 'align-items', + 'flex-start', + ); + }); + + it('should onClick be called when click on arrow', () => { + cy.getByCy('arrow').click(); + cy.get('@onClickMock').should('be.called'); + }); +}); From 9b1df3c759a8de2ef7bc780e79715dee1c748398 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:03:06 -0300 Subject: [PATCH 09/14] test: filter card component with jest --- src/components/FilterCard/FilterCard.test.tsx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/FilterCard/FilterCard.test.tsx diff --git a/src/components/FilterCard/FilterCard.test.tsx b/src/components/FilterCard/FilterCard.test.tsx new file mode 100644 index 0000000..f5323f9 --- /dev/null +++ b/src/components/FilterCard/FilterCard.test.tsx @@ -0,0 +1,39 @@ +import { render, screen } from '@testing-library/react'; +import { jest } from '@jest/globals'; + +import FilterCard from '@components/FilterCard'; + +const filterCardPropsMock = { + filter: 'JavaScript', + onClick: jest.fn(), +}; + +describe('', () => { + beforeEach(() => { + render(); + }); + + it('should be defined', () => { + screen.getByTestId('filter-card'); + }); + + it('should render base card', () => { + screen.getByTestId('base-card'); + }); + + it('should render text container', () => { + screen.getByTestId('text-container'); + }); + + it('should render text "Vagas"', () => { + screen.getByText('Vagas'); + }); + + it(`should render text "${filterCardPropsMock.filter}"`, () => { + screen.getByText(filterCardPropsMock.filter); + }); + + it('should render arrow icon', () => { + screen.getByTestId('arrow'); + }); +}); From c4ac03d86f1c9890ebfd57663a5de3efa4839e36 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:03:46 -0300 Subject: [PATCH 10/14] feat: filter card component --- src/components/FilterCard/FilterCard.tsx | 26 ++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/components/FilterCard/FilterCard.tsx diff --git a/src/components/FilterCard/FilterCard.tsx b/src/components/FilterCard/FilterCard.tsx new file mode 100644 index 0000000..8f3a9c5 --- /dev/null +++ b/src/components/FilterCard/FilterCard.tsx @@ -0,0 +1,26 @@ +import BaseCard from '@components/BaseCard'; +import Text from '@components/Text'; +import { Arrow } from '@assets/db.icons'; + +import * as S from './styles'; + +type FilterCardProps = { + filter: string; + onClick: () => void; +}; + +const FilterCard = ({ filter, onClick }: FilterCardProps) => { + return ( + + +
+ + +
+ + + + ); +}; + +export default FilterCard; From 31cc3c39a1aa3408c5299cdfcd4f32eb3fc48527 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:04:24 -0300 Subject: [PATCH 11/14] feat: filter card component styles --- src/components/FilterCard/styles.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/components/FilterCard/styles.ts diff --git a/src/components/FilterCard/styles.ts b/src/components/FilterCard/styles.ts new file mode 100644 index 0000000..50500e3 --- /dev/null +++ b/src/components/FilterCard/styles.ts @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +export const FilterCard = styled.div` + .base-card { + align-items: center; + justify-content: space-between; + + .icon:hover { + cursor: pointer; + } + } + + .text-container { + display: flex; + flex-direction: column; + align-items: flex-start; + } +`; From f07d766611d56ad6de0b86dc2baf9f8714b164f9 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:04:53 -0300 Subject: [PATCH 12/14] chore: re-export filter card component --- src/components/FilterCard/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components/FilterCard/index.ts diff --git a/src/components/FilterCard/index.ts b/src/components/FilterCard/index.ts new file mode 100644 index 0000000..8744973 --- /dev/null +++ b/src/components/FilterCard/index.ts @@ -0,0 +1 @@ +export { default } from './FilterCard'; From d11dced1f42985278e56b8def59dd95da3b0ebf5 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:05:41 -0300 Subject: [PATCH 13/14] refactor: add className and data-cy --- src/components/Text/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx index e1fdac1..6e088a9 100644 --- a/src/components/Text/index.tsx +++ b/src/components/Text/index.tsx @@ -1,7 +1,11 @@ import * as S from './styles'; const Text = (props: TextProps) => { - return {props.label}; + return ( + + {props.label} + + ); }; export default Text; From 10e781cd8b56e06e63da516f6f5135725aea7d2e Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Wed, 4 Oct 2023 22:06:19 -0300 Subject: [PATCH 14/14] refactor: add "white" to borderColor --- src/types/BaseCardProps.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/BaseCardProps.d.ts b/src/types/BaseCardProps.d.ts index be1e71f..8ed865b 100644 --- a/src/types/BaseCardProps.d.ts +++ b/src/types/BaseCardProps.d.ts @@ -1,6 +1,6 @@ type BaseCardProps = { padding?: 'large' | 'xmedium' | 'small'; - borderColor?: 'purple'; + borderColor?: 'purple' | 'white'; backgroundColor?: 'purple' | 'white'; children: React.ReactNode; };