Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-23 04:36:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

added test for password viewer toggler

Browse Source
This commit is contained in:
Simon
2024-07-02 17:47:27 -04:00
parent dd3bee5887
commit 0c9479866a
4 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/PasswordField/PasswordField.spec.tsx
View File

@@ -4,18 +4,23 @@ import {
test
} from 'vitest';
import { render } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {
PasswordField
} from './PasswordField'
describe('PasswordField', () => {
test('it renders', () => {
const { queryByTestId } = render(<PasswordField data-testid="test" value="" />)
expect(queryByTestId('test')).toBeTruthy()
const { queryByTestId } = render(<PasswordField data-testid="test-id" value="test-value" />)
expect(queryByTestId('test-id')).toBeTruthy()
})
test('User can update field', () => {
})
test('User can toggle between plain text view and password view', () => {
test('User can toggle between plain text view and password view', async () => {
const { getByTestId } = render(<PasswordField data-testid="test-id" value="test-value" />)
const user = userEvent.setup();
expect(getByTestId("password-text-indicator").textContent).toBe('😸');
await user.click(getByTestId('toggle-view-password-btn'));
expect(getByTestId("plain-text-indicator").textContent).toBe('🙀');
})
})

4
src/components/PasswordField/PasswordField.tsx
View File

@@ -49,12 +49,12 @@ export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...prop
type={canViewPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end" style={{
<InputAdornment position="end" data-testid="toggle-view-password-btn" style={{
cursor: 'pointer'
}} onClick={() => {
setCanViewPassword((prevState) => !prevState)
}}>
{canViewPassword ? <span data-testid="eyes-opened">🙀</span> : <span data-testid="eyes-closed">😸</span>}
{canViewPassword ? <span data-testid="plain-text-indicator">🙀</span> : <span data-testid="password-text-indicator">😸</span>}
</InputAdornment>
)
}}