@kadconsulting/dry
Version:
KAD Reusable Component Library
82 lines • 4.26 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// // CLI Version 1.0.1
// Component Version 1.0.0
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import FormBuilder from './FormBuilder';
const mockFields = [
{ name: 'name', label: 'Name', type: 'text' },
{ name: 'email', label: 'Email', type: 'email' },
];
const mockOnSubmit = jest.fn();
describe('FormBuilder', () => {
it('renders with a dry-prepended className', () => {
const { container } = render(_jsx(FormBuilder, { fields: mockFields, onSubmit: mockOnSubmit }));
expect(container.firstChild).toHaveClass('dry-formbuilder');
});
it('passes a ref to its outermost element', async () => {
const Wrapper = () => {
const ref = useRef(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(FormBuilder, { ref: ref, fields: mockFields, onSubmit: mockOnSubmit }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('passes a downstream id', () => {
const id = 'test-id';
const testId = 'test-subject';
render(_jsx(FormBuilder, { "data-testid": testId, id: id, fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
it('passes any downstream className(s)', () => {
const className = 'first second third';
const testId = 'test-subject';
render(_jsx(FormBuilder, { "data-testid": testId, className: className, fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByTestId(testId)).toHaveClass('first');
expect(screen.getByTestId(testId)).toHaveClass('second');
expect(screen.getByTestId(testId)).toHaveClass('third');
});
it('passes any downstream inline style(s)', () => {
const style = { color: 'red' };
const testId = 'test-subject';
render(_jsx(FormBuilder, { "data-testid": testId, style: style, fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByTestId(testId)).toHaveStyle('color: red');
});
it('passes any downstream data-* attribute(s)', () => {
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
render(_jsx(FormBuilder, { "data-testid": testId, "data-product": testValue, fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByTestId(testId)).toHaveAttribute('data-product', testValue);
});
it('supports downstream @testing-library `screen.getByTestId`', () => {
const testId = 'test-subject';
render(_jsx(FormBuilder, { "data-testid": testId, fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
it('renders form fields based on the provided fields prop', () => {
render(_jsx(FormBuilder, { fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByLabelText('Name')).toBeInTheDocument();
expect(screen.getByLabelText('Email')).toBeInTheDocument();
});
it('renders a submit button', () => {
render(_jsx(FormBuilder, { fields: mockFields, onSubmit: mockOnSubmit }));
expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});
it('renders a custom submit button when provided', () => {
const customSubmitButton = {
text: 'Save Changes',
variant: 'primary',
size: 'large',
};
render(_jsx(FormBuilder, { fields: mockFields, onSubmit: mockOnSubmit, submitButton: customSubmitButton }));
const submitButton = screen.getByRole('button', { name: 'Save Changes' });
expect(submitButton).toBeInTheDocument();
expect(submitButton).toHaveClass('primary');
expect(submitButton).toHaveClass('large');
});
});
//# sourceMappingURL=FormBuilder.test.js.map