Skip to content

Commit

Permalink
Merge pull request #34 from cesarhenrq/qa
Browse files Browse the repository at this point in the history
4908-feat--register-card
  • Loading branch information
cesarhenrq authored Oct 5, 2023
2 parents edee27c + 55ccde6 commit 7b9fa61
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 0 deletions.
78 changes: 78 additions & 0 deletions src/components/RegisterCard/RegisterCard.cy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import RegisterCard from './RegisterCard';
import GlobalStyle from '@styles/global';

describe('<RegisterCard />', () => {
beforeEach(() => {
cy.mount(
<>
<GlobalStyle />
<RegisterCard />
</>,
);
});

it('should register card has margin-top: 2rem', () => {
cy.getByCy('register-card').should('have.css', 'margin-top', '32px');
});

it('should register card has width: 16.875rem', () => {
cy.getByCy('register-card').should('have.css', 'width', '270px');
});

it('should base card has padding-top: 2rem', () => {
cy.getByCy('base-card').should('have.css', 'padding-top', '32px');
});

it('should base card has position: relative', () => {
cy.getByCy('base-card').should('have.css', 'position', 'relative');
});

it('should link has color: purple-dark-secondary', () => {
cy.getByCy('link').should('have.css', 'color', 'rgb(105, 80, 161)');
});

it('should circle has position: absolute', () => {
cy.getByCy('circle').should('have.css', 'position', 'absolute');
});

it('should circle has top: -2rem', () => {
cy.getByCy('circle').should('have.css', 'top', '-32px');
});

it('should circle has display: flex', () => {
cy.getByCy('circle').should('have.css', 'display', 'flex');
});

it('should circle has justify-content: center', () => {
cy.getByCy('circle').should('have.css', 'justify-content', 'center');
});

it('should circle has align-items: center', () => {
cy.getByCy('circle').should('have.css', 'align-items', 'center');
});

it('should circle has background-color: purple-dark-secondary', () => {
cy.getByCy('circle').should(
'have.css',
'background-color',
'rgb(105, 80, 161)',
);
});

it('should circle has border-radius: 50%', () => {
cy.getByCy('circle').should('have.css', 'border-radius', '50%');
});

it('should circle has width: 4rem', () => {
cy.getByCy('circle').should('have.css', 'width', '64px');
});

it('should circle has height: 4rem', () => {
cy.getByCy('circle').should('have.css', 'height', '64px');
});

it('should redirect to register page when click on link', () => {
cy.getByCy('link').click();
cy.url().should('include', 'http://localhost:3000/__/');
});
});
33 changes: 33 additions & 0 deletions src/components/RegisterCard/RegisterCard.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { render, screen } from '@testing-library/react';

import RegisterCard from './RegisterCard';

describe('<RegisterCard />', () => {
beforeEach(() => {
render(<RegisterCard />);
});

it('should be defined', () => {
screen.getByTestId('register-card');
});

it('should render base card', () => {
screen.getByTestId('base-card');
});

it('should render circle', () => {
screen.getByTestId('circle');
});

it('should render text', () => {
screen.getByTestId('text');
});

it('should render person icon', () => {
screen.getByTestId('person-icon');
});

it('should render link', () => {
screen.getByText('cadastro gratuito');
});
});
30 changes: 30 additions & 0 deletions src/components/RegisterCard/RegisterCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import BaseCard from '@components/BaseCard';
import Text from '@components/Text';
import { Person } from '@assets/db.icons';

import * as S from './styles';

const RegisterCard = () => {
const textLabel = (
<span>
Faça seu{' '}
<a href="http://localhost:3000/__/" data-cy="link">
cadastro gratuito
</a>{' '}
e encontre vagas de acordo com seu perfil.
</span>
);

return (
<S.RegisterCard className="register-card" data-cy="register-card">
<BaseCard borderColor="white" padding="small">
<S.Circle className="circle" data-cy="circle">
<Person fill="yellow" width={24} height={24} />
</S.Circle>
<Text label={textLabel} />
</BaseCard>
</S.RegisterCard>
);
};

export default RegisterCard;
1 change: 1 addition & 0 deletions src/components/RegisterCard/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './RegisterCard';
29 changes: 29 additions & 0 deletions src/components/RegisterCard/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import styled from 'styled-components';

export const RegisterCard = styled.div`
margin-top: 2rem;
width: 16.875rem;
.base-card {
padding-top: 2rem;
position: relative;
.text {
a {
color: var(--purple-dark-secondary);
}
}
}
`;

export const Circle = styled.div`
position: absolute;
top: -2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--purple-dark-secondary);
border-radius: 50%;
width: 4rem;
height: 4rem;
`;
1 change: 1 addition & 0 deletions src/styles/global.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default createGlobalStyle`
--purple: #5D5FEF;
--purple-light: #B2A1D9;
--purple-dark: #1A1033;
--purple-dark-secondary: #6950A1;
--white: #FFFFFF;
--gray: #A6A8AB;
--dark-grey: #4A4A68;
Expand Down

0 comments on commit 7b9fa61

Please sign in to comment.