From 6c3829051a54600c5d5c44ca91452bbfefaad646 Mon Sep 17 00:00:00 2001 From: pivi Date: Mon, 23 Oct 2023 12:33:37 +0200 Subject: [PATCH] Add Password Test --- cypress/component/integration/Password.cy.tsx | 103 +++++++++++++++--- src/components/Password/Password.test.tsx | 60 ---------- 2 files changed, 90 insertions(+), 73 deletions(-) delete mode 100644 src/components/Password/Password.test.tsx diff --git a/cypress/component/integration/Password.cy.tsx b/cypress/component/integration/Password.cy.tsx index ded10256..000ce666 100644 --- a/cypress/component/integration/Password.cy.tsx +++ b/cypress/component/integration/Password.cy.tsx @@ -1,38 +1,115 @@ import '../../../src/global.css'; -import { Input } from '../../../src/components'; +import { Password } from '../../../src/components'; import { compareSnapshot } from '../../compareSnapshot'; -describe('Component | Integration | Input', function () { +describe('Component | Integration | Password', function () { describe('Input', () => { - describe('regular input with placeholder', () => { + describe('default password', () => { beforeEach(() => { cy.mount(
- +
, ); }); - it('should render and have placeholder', () => { - cy.get('[data-testid="input-field"]') - .should('exist') - .and('have.attr', 'placeholder'); + it('should render', () => { + cy.get('[data-testid="password-input"]').should('exist'); }); it('should focus on click', () => { - cy.get('[data-testid="input-field"]').click().should('be.focused'); + cy.get('[data-testid="password-input"]').focus().should('be.focused'); }); it('should receive typed input', () => { - cy.get('[data-testid="input-field"]') + cy.get('[data-testid="password-input"]') .type('typed content') .should('have.value', 'typed content') - .clear() - .should('have.attr', 'placeholder'); + .clear(); + }); + + it('should hide typed input', () => { + cy.get('[data-testid="password-input"]') + .type('typed content') + .should('have.value', 'typed content'); + cy.get('[data-testid="password-input"]').should('have.attr', 'type'); + cy.get('[data-testid="password-input"]') + .invoke('attr', 'type') + .should('eq', 'password'); + }); + + it('should show typed input', () => { + cy.get('[data-testid="password-input"]') + .type('typed content') + .should('have.value', 'typed content'); + + cy.get('[data-testid="password-icon"]').should('exist').click(); + + cy.get('[data-testid="password-input"]') + .invoke('attr', 'type') + .should('eq', 'text'); + }); + + it('should show typed input', () => { + cy.get('[data-testid="password-input"]') + .type('typed content') + .should('have.value', 'typed content'); + + cy.get('[data-testid="password-icon"]').should('exist').click(); + + cy.get('[data-testid="password-input"]') + .invoke('attr', 'type') + .should('eq', 'text'); + }); + + it('should match snapshot', () => { + compareSnapshot(cy, 'default-password'); + }); + }); + + describe('default password with error', () => { + beforeEach(() => { + cy.mount( +
+ +
, + ); + }); + + it('should render', () => { + cy.get('[data-testid="password-input"]').should('exist'); + }); + + it('should display error message', () => { + cy.get('[data-testid="input-field-message"]') + .should('exist') + .contains('error'); + }); + it('should match snapshot', () => { + compareSnapshot(cy, 'default-password-with-error'); + }); + }); + + describe('default password with warning', () => { + beforeEach(() => { + cy.mount( +
+ +
, + ); + }); + + it('should render', () => { + cy.get('[data-testid="password-input"]').should('exist'); }); + it('should display warning message', () => { + cy.get('[data-testid="input-field-message"]') + .should('exist') + .contains('warning'); + }); it('should match snapshot', () => { - compareSnapshot(cy, 'regular-input-with-placeholder'); + compareSnapshot(cy, 'default-password-with-warning'); }); }); }); diff --git a/src/components/Password/Password.test.tsx b/src/components/Password/Password.test.tsx deleted file mode 100644 index 560cb65d..00000000 --- a/src/components/Password/Password.test.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import '@testing-library/jest-dom'; -import { render, screen, fireEvent } from '@testing-library/react'; -import { Password } from '.'; - -describe('Components | Fields | Password', () => { - test('it should render', () => { - render(); - - let input = screen.getByTestId('password-input'); - - expect(input).toBeTruthy(); - }); - - test('it should set a new placeholder content', () => { - render(); - - let input = screen.getByPlaceholderText('something'); - - expect(input).toBeTruthy(); - }); - - test('it should show an error message', () => { - render(); - - let message = screen.getByTestId('input-field-message'); - let input = screen.getByTestId('password-input'); - - expect(message).toBeInTheDocument(); - expect(message.getAttribute('class')).toContain('text-s-error'); - expect(input.getAttribute('class')).toContain('border-s-error'); - }); - - test('it should show an warning message', () => { - render(); - - let message = screen.getByTestId('input-field-message'); - let input = screen.getByTestId('password-input'); - - expect(message).toBeInTheDocument(); - expect(message.getAttribute('class')).toContain('text-s-warning'); - expect(input.getAttribute('class')).toContain('border-s-warning'); - }); - - test('it should show/hide the input content when switching between eye mode', () => { - render(); - - let iconClose = screen.getByTestId('icon-close'); - let input = screen.getByTestId('password-input'); - - expect(iconClose).toBeInTheDocument(); - expect(input).toHaveAttribute('type', 'password'); - - fireEvent.click(iconClose); - - let iconOpen = screen.getByTestId('icon-open'); - - expect(iconOpen).toBeInTheDocument(); - expect(input).toHaveAttribute('type', 'text'); - }); -});