From 7f472a7b64c17959bb430b21f7cb8e83efc9b5ef Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Fri, 10 Jan 2025 13:31:22 -0500 Subject: [PATCH 1/5] initial commit --- .../components/password-input.spec.tsx | 19 +++++++++++++++++++ .../PasswordInput/HideShowText.stories.tsx | 3 ++- .../PasswordInput/PasswordInput.stories.tsx | 3 ++- .../StrengthIndicator.stories.tsx | 3 ++- 4 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 packages/manager/cypress/component/components/password-input.spec.tsx diff --git a/packages/manager/cypress/component/components/password-input.spec.tsx b/packages/manager/cypress/component/components/password-input.spec.tsx new file mode 100644 index 00000000000..ef791f56dd3 --- /dev/null +++ b/packages/manager/cypress/component/components/password-input.spec.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { ui } from 'support/ui'; +import { checkComponentA11y } from 'support/util/accessibility'; +import { createSpy } from 'support/util/components'; +import { componentTests, visualTests } from 'support/util/components'; + +import PasswordInput from 'src/components/PasswordInput/PasswordInput'; + +componentTests('PasswordInput', (mount) => { + describe('PasswordInput interactions', () => {}); + + visualTests((mount) => { + describe('Accessibility checks', () => { + it('passes aXe check when password input is visible', () => {}); + + it('passes aXe check when password input is not visible', () => {}); + }); + }); +}); diff --git a/packages/manager/src/components/PasswordInput/HideShowText.stories.tsx b/packages/manager/src/components/PasswordInput/HideShowText.stories.tsx index b2561a58866..5608aa6bd4e 100644 --- a/packages/manager/src/components/PasswordInput/HideShowText.stories.tsx +++ b/packages/manager/src/components/PasswordInput/HideShowText.stories.tsx @@ -1,9 +1,10 @@ /* eslint-disable react-hooks/rules-of-hooks */ -import { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; import { HideShowText } from './HideShowText'; +import type { Meta, StoryObj } from '@storybook/react'; + const meta: Meta = { component: HideShowText, title: 'Components/Input/Hide Show Text', diff --git a/packages/manager/src/components/PasswordInput/PasswordInput.stories.tsx b/packages/manager/src/components/PasswordInput/PasswordInput.stories.tsx index 67a76b58e8e..12ec8a4e7be 100644 --- a/packages/manager/src/components/PasswordInput/PasswordInput.stories.tsx +++ b/packages/manager/src/components/PasswordInput/PasswordInput.stories.tsx @@ -1,9 +1,10 @@ /* eslint-disable react-hooks/rules-of-hooks */ -import { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; import PasswordInput from './PasswordInput'; +import type { Meta, StoryObj } from '@storybook/react'; + const meta: Meta = { component: PasswordInput, title: 'Components/Input/Password Input', diff --git a/packages/manager/src/components/PasswordInput/StrengthIndicator.stories.tsx b/packages/manager/src/components/PasswordInput/StrengthIndicator.stories.tsx index 227b36af4e1..bd41bb63e86 100644 --- a/packages/manager/src/components/PasswordInput/StrengthIndicator.stories.tsx +++ b/packages/manager/src/components/PasswordInput/StrengthIndicator.stories.tsx @@ -1,8 +1,9 @@ -import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { StrengthIndicator } from './StrengthIndicator'; +import type { Meta, StoryObj } from '@storybook/react'; + const meta: Meta = { component: StrengthIndicator, title: 'Components/Strength Indicator', From 04c9ac8a6af8439826e0d7de95134172a18407f6 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Fri, 10 Jan 2025 14:56:50 -0500 Subject: [PATCH 2/5] password input tests --- .../components/password-input.spec.tsx | 163 +++++++++++++++++- 1 file changed, 158 insertions(+), 5 deletions(-) diff --git a/packages/manager/cypress/component/components/password-input.spec.tsx b/packages/manager/cypress/component/components/password-input.spec.tsx index ef791f56dd3..17506834959 100644 --- a/packages/manager/cypress/component/components/password-input.spec.tsx +++ b/packages/manager/cypress/component/components/password-input.spec.tsx @@ -1,19 +1,172 @@ import * as React from 'react'; -import { ui } from 'support/ui'; import { checkComponentA11y } from 'support/util/accessibility'; -import { createSpy } from 'support/util/components'; import { componentTests, visualTests } from 'support/util/components'; import PasswordInput from 'src/components/PasswordInput/PasswordInput'; +const fakePassword = 'this is a password'; +const props = { + label: 'Password Input', + value: fakePassword, +}; + componentTests('PasswordInput', (mount) => { - describe('PasswordInput interactions', () => {}); + describe('PasswordInput interactions', () => { + /** + * - Confirms password text starts hidden + * - Confirms password text can be shown after clicking eye button + */ + it('can show password text', () => { + mount(); + + // Password textfield starts off as 'password' type + cy.get('[type="password"]').should('be.visible'); + cy.findByTestId('VisibilityIcon').should('be.visible').click(); + cy.findByTestId('VisibilityIcon').should('not.exist'); + + // After clicking the visibility icon, textfield becomes a normal textfield + cy.get('[type="password"]').should('not.exist'); + cy.get('[type="text"]').should('be.visible'); + }); + + /** + * - Confirms password text can be hidden again after being revealed + */ + it('can hide password text', () => { + mount(); + + // Password textfield starts off as 'password' type + cy.get('[type="password"]').should('be.visible'); + cy.findByTestId('VisibilityIcon').should('be.visible').click(); + cy.findByTestId('VisibilityIcon').should('not.exist'); + + // After clicking the visibility icon, textfield becomes a normal textfield + cy.get('[type="password"]').should('not.exist'); + cy.get('[type="text"]').should('be.visible'); + + // Clicking VisibilityOffIcon changes input type to password again + cy.findByTestId('VisibilityOffIcon').should('be.visible').click(); + cy.findByTestId('VisibilityOffIcon').should('not.exist'); + cy.findByTestId('VisibilityIcon').should('be.visible'); + cy.get('[type="password"]').should('be.visible'); + cy.get('[type="text"]').should('not.exist'); + }); + + /** + * - Confirms password input displays when a weak password is entered + */ + it('displays an indicator for a weak password', () => { + const TestWeakStrength = () => { + const [password, setPassword] = React.useState(''); + return ( + setPassword(e.target.value)} + value={password} + /> + ); + }; + + mount(); + + // Starts off as 'Weak' if no password entered + cy.findByText('Weak').should('be.visible'); + + cy.findByTestId('textfield-input').should('be.visible').type('weak'); + cy.findByText('Weak').should('be.visible'); + }); + + /** + * - Confirms password input displays when a fair password is entered + */ + it('displays an indicator for a fair password', () => { + const TestMediumStrength = () => { + const [password, setPassword] = React.useState(''); + return ( + setPassword(e.target.value)} + value={password} + /> + ); + }; + + mount(); + + // Starts off as 'Weak' if no password entered + cy.findByText('Weak').should('be.visible'); + + cy.findByTestId('textfield-input') + .should('be.visible') + .type('fair-pass1'); + cy.findByText('Fair').should('be.visible'); + }); + + /** + * - Confirms password input displays when a good password is entered + */ + it('displays an indicator for a "good" password', () => { + const TestGoodStrength = () => { + const [password, setPassword] = React.useState(''); + return ( + setPassword(e.target.value)} + value={password} + /> + ); + }; + + mount(); + + // Starts off as 'Weak' if no password entered + cy.findByText('Weak').should('be.visible'); + + cy.findByTestId('textfield-input') + .should('be.visible') + .type('st0ng!!-password1!!'); + cy.findByText('Good').should('be.visible'); + }); + }); visualTests((mount) => { describe('Accessibility checks', () => { - it('passes aXe check when password input is visible', () => {}); + it('passes aXe check when password input is visible', () => { + mount(); + cy.findByTestId('VisibilityIcon').should('be.visible').click(); + + checkComponentA11y(); + }); + + it('passes aXe check when password input is not visible', () => { + mount(); + + checkComponentA11y(); + }); + + it('passes aXe check for a weak password', () => { + mount(); + + checkComponentA11y(); + }); + + it('passes aXe check for a fair password', () => { + mount(); + + checkComponentA11y(); + }); + + it('passes aXe check for a "good" password', () => { + mount(); + + checkComponentA11y(); + }); + + it('passes aXe check when strength is hidden', () => { + mount(); - it('passes aXe check when password input is not visible', () => {}); + checkComponentA11y(); + }); }); }); }); From debb65122982906bd0f2cfc0b2dbf329b304fa84 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Fri, 10 Jan 2025 15:05:46 -0500 Subject: [PATCH 3/5] Added changeset: Add component tests for PasswordInput --- packages/manager/.changeset/pr-11508-tests-1736539546177.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11508-tests-1736539546177.md diff --git a/packages/manager/.changeset/pr-11508-tests-1736539546177.md b/packages/manager/.changeset/pr-11508-tests-1736539546177.md new file mode 100644 index 00000000000..5fc77bd8126 --- /dev/null +++ b/packages/manager/.changeset/pr-11508-tests-1736539546177.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Add component tests for PasswordInput ([#11508](https://github.com/linode/manager/pull/11508)) From 75dbfbcaf64def3b6cb1701a1afcafbfc2461835 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Fri, 10 Jan 2025 15:12:24 -0500 Subject: [PATCH 4/5] couple other tests --- .../component/components/password-input.spec.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/manager/cypress/component/components/password-input.spec.tsx b/packages/manager/cypress/component/components/password-input.spec.tsx index 17506834959..3ff24544bc6 100644 --- a/packages/manager/cypress/component/components/password-input.spec.tsx +++ b/packages/manager/cypress/component/components/password-input.spec.tsx @@ -162,11 +162,23 @@ componentTests('PasswordInput', (mount) => { checkComponentA11y(); }); - it('passes aXe check when strength is hidden', () => { + it('passes aXe check when password input is designated as required', () => { + mount(); + + checkComponentA11y(); + }); + + it('passes aXe check when strength value is hidden', () => { mount(); checkComponentA11y(); }); + + it('passes aXe check when strength label is shown', () => { + mount(); + + checkComponentA11y(); + }); }); }); }); From 3d2608db583abe7af613ade6cb921aa5b5eb7ecc Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Tue, 14 Jan 2025 17:35:26 -0500 Subject: [PATCH 5/5] test updates + address feedback @hana-akamai --- .../components/password-input.spec.tsx | 38 ++++++++----------- 1 file changed, 15 insertions(+), 23 deletions(-) diff --git a/packages/manager/cypress/component/components/password-input.spec.tsx b/packages/manager/cypress/component/components/password-input.spec.tsx index 3ff24544bc6..1313a09052c 100644 --- a/packages/manager/cypress/component/components/password-input.spec.tsx +++ b/packages/manager/cypress/component/components/password-input.spec.tsx @@ -14,25 +14,9 @@ componentTests('PasswordInput', (mount) => { describe('PasswordInput interactions', () => { /** * - Confirms password text starts hidden - * - Confirms password text can be shown after clicking eye button + * - Confirms password text can be revealed or hidden when toggling visibility icon */ - it('can show password text', () => { - mount(); - - // Password textfield starts off as 'password' type - cy.get('[type="password"]').should('be.visible'); - cy.findByTestId('VisibilityIcon').should('be.visible').click(); - cy.findByTestId('VisibilityIcon').should('not.exist'); - - // After clicking the visibility icon, textfield becomes a normal textfield - cy.get('[type="password"]').should('not.exist'); - cy.get('[type="text"]').should('be.visible'); - }); - - /** - * - Confirms password text can be hidden again after being revealed - */ - it('can hide password text', () => { + it('can show and hide password text', () => { mount(); // Password textfield starts off as 'password' type @@ -77,7 +61,8 @@ componentTests('PasswordInput', (mount) => { }); /** - * - Confirms password input displays when a fair password is entered + * - Confirm password indicator can update when a password is entered + * - Confirms password input can display indicator for a fair password */ it('displays an indicator for a fair password', () => { const TestMediumStrength = () => { @@ -93,17 +78,21 @@ componentTests('PasswordInput', (mount) => { mount(); - // Starts off as 'Weak' if no password entered + // Starts off as 'Weak' when no password entered cy.findByText('Weak').should('be.visible'); cy.findByTestId('textfield-input') .should('be.visible') .type('fair-pass1'); + + // After typing in a fair password, the strength indicator updates cy.findByText('Fair').should('be.visible'); + cy.findByText('Weak').should('not.exist'); }); /** - * - Confirms password input displays when a good password is entered + * - Confirm password indicator can update when a password is entered + * - Confirms password input can display indicator for a good password */ it('displays an indicator for a "good" password', () => { const TestGoodStrength = () => { @@ -119,13 +108,16 @@ componentTests('PasswordInput', (mount) => { mount(); - // Starts off as 'Weak' if no password entered + // Starts off as 'Weak' when no password entered cy.findByText('Weak').should('be.visible'); cy.findByTestId('textfield-input') .should('be.visible') - .type('st0ng!!-password1!!'); + .type('str0ng!!-password1!!'); + + // After typing in a strong password, the strength indicator updates cy.findByText('Good').should('be.visible'); + cy.findByText('Weak').should('not.exist'); }); });