@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
90 lines (89 loc) • 4.29 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createRef, useState } from 'react';
import { Label } from '../Label';
import { PasswordInput } from './PasswordInput';
import '@testing-library/jest-dom';
describe('Password input', () => {
it('renders', () => {
const { container } = render(_jsx(PasswordInput, {}));
const component = container.querySelector(':only-child');
expect(component).toBeInTheDocument();
expect(component).toBeVisible();
});
it('renders a design system BEM class name', () => {
const { container } = render(_jsx(PasswordInput, {}));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-password-input');
});
it('renders an extra class name', () => {
const { container } = render(_jsx(PasswordInput, { className: "extra" }));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-password-input extra');
});
it('renders two attributes for privacy', () => {
const { container } = render(_jsx(PasswordInput, {}));
const component = container.querySelector(':only-child');
expect(component).toHaveAttribute('autocorrect', 'off');
expect(component).toHaveAttribute('spellcheck', 'false');
});
it('should be working in a controlled state', async () => {
function ControlledComponent() {
const [value, setValue] = useState('Hello');
return _jsx(PasswordInput, { onChange: (e) => setValue(e.target.value), value: value });
}
const { container } = render(_jsx(ControlledComponent, {}));
const componentText = screen.getByDisplayValue('Hello');
expect(componentText).toBeInTheDocument();
const component = container.querySelector(':only-child');
if (component) {
await userEvent.type(component, ', World!');
}
const newComponentText = screen.getByDisplayValue('Hello, World!');
expect(newComponentText).toBeInTheDocument();
});
it('should not update the value when disabled', async () => {
const { container } = render(_jsx(PasswordInput, { defaultValue: "Hello", disabled: true }));
const component = container.querySelector(':only-child');
if (component) {
await userEvent.type(component, ', World!');
}
expect(component).toHaveValue('Hello');
});
it('supports ForwardRef in React', () => {
const ref = createRef();
const { container } = render(_jsx(PasswordInput, { ref: ref }));
const component = container.querySelector(':only-child');
expect(ref.current).toBe(component);
});
describe('Invalid state', () => {
it('is not invalid by default', () => {
const { container } = render(_jsx(PasswordInput, {}));
const component = container.querySelector(':only-child');
expect(component).not.toBeInvalid();
});
it('can have an invalid state', () => {
const { container } = render(_jsx(PasswordInput, { invalid: true }));
const component = container.querySelector(':only-child');
expect(component).toHaveAttribute('aria-invalid');
expect(component).toBeInvalid();
});
it('omits non-essential invalid attributes when not invalid', () => {
const { container } = render(_jsx(PasswordInput, { invalid: false }));
const component = container.querySelector(':only-child');
expect(component).not.toHaveAttribute('aria-invalid');
});
});
describe('Type', () => {
it('sets the ‘password’ type', () => {
render(_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "password-field", children: "Password" }), _jsx(PasswordInput, { id: "password-field" })] }));
const component = screen.getByLabelText(/password/i);
expect(component).toHaveAttribute('type', 'password');
});
});
});