Skip to content

fix(Fieldset): rmv orientation and role and legend is now mandatory #1077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LarryMatte wants to merge 10 commits into
base: master
Choose a base branch
from
+413 −220
Open

fix(Fieldset): rmv orientation and role and legend is now mandatory #1077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
16ef7c3
fix(Fieldset): rmv orientation and role
LarryMatte Feb 3, 2025
702c8ba
fix(Fieldset): fix lint
LarryMatte Feb 3, 2025
3c5cfab
fix(Fieldset): fix lint
LarryMatte Feb 3, 2025
dbb1c5e
fix(Fieldset): rmv default value legend and text tokens
LarryMatte Feb 7, 2025
45dfb42
fix(Fieldset): rmv orientation and role
LarryMatte Feb 3, 2025
8fd6e8a
fix(SectionalBanner): fix conflict
LarryMatte Feb 7, 2025
f8466a9
fix(Fieldset): fix conflict
LarryMatte Feb 14, 2025
0a8642b
fix(Fieldset): simplify legend to support string value
LarryMatte Feb 17, 2025
783f412
fix(Fieldset): fix lint
LarryMatte Feb 17, 2025
d67c048
fix(Fieldset): fix lint
LarryMatte Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 77 additions & 43 deletions packages/react/src/components/fieldset/fieldset.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,115 +21,159 @@ describe('Fieldset Component', () => {

it('generates an ID if none is provided', () => {
const tree = mountWithProviders(
<Fieldset>
<Fieldset legend={{ text: 'Legend Text' }}>
Test Content
</Fieldset>,
);

const fieldset = tree.find('fieldset');
const legend = tree.find(Legend);

expect(fieldset.props()).toHaveProperty('id');
expect(legend.props()).toHaveProperty('id', `${fieldset.props().id}-legend`);
});

it('does not render a legend when not provided', () => {
it('renders a legend with provided text', () => {
const tree = mountWithProviders(
<Fieldset>
<Fieldset legend={{ text: 'Legend Text' }}>
Test Content
</Fieldset>,
);

const legend = tree.find(Legend);

expect(legend.exists()).toBeFalsy();
expect(legend.prop('children')).toBe('Legend Text');
});

it('updates legend text dynamically', () => {
const tree = mountWithProviders(
<Fieldset legend={{ text: 'Initial Legend Text' }}>
Test Content
</Fieldset>,
);

tree.setProps({ legend: { text: 'Updated Legend Text' } });

expect(tree.find(Legend).text()).toContain('Updated Legend Text');
});

it('renders a legend when props provided', () => {
it('handles string legend prop', () => {
const tree = mountWithProviders(
<Fieldset legend={{ text: 'Legend text' }}>
<Fieldset legend="Simple Legend Text">
Test Content
</Fieldset>,
);

const legend = tree.find(Legend);
expect(legend.prop('children')).toBe('Simple Legend Text');
});

expect(legend.prop('children')).toBe('Legend text');
it('handles object legend prop with additional properties', () => {
const tree = mountWithProviders(
<Fieldset
legend={{
text: 'Complex Legend Text',
size: 'large',
bold: true,
}}
>
Test Content
</Fieldset>,
);

const legend = tree.find(Legend);
expect(legend.prop('children')).toBe('Complex Legend Text');
expect(legend.prop('size')).toBe('large');
expect(legend.prop('bold')).toBe(true);
});

it('updates legend text dynamically', () => {
it('updates legend from string to object prop', () => {
const tree = mountWithProviders(
<Fieldset legend={{ text: 'Initial Legend Text' }}>
<Fieldset legend="Simple Legend">
Test Content
</Fieldset>,
);

tree.setProps({ legend: { text: 'Updated Legend Text' } });
tree.setProps({
legend: {
text: 'Complex Legend',
size: 'large',
},
});

expect(tree.find(Legend).text()).toContain('Updated Legend Text');
const legend = tree.find(Legend);
expect(legend.prop('children')).toBe('Complex Legend');
expect(legend.prop('size')).toBe('large');
});
});

describe('Styling', () => {
it('matches default', () => {
it('updates legend from object to string prop', () => {
const tree = mountWithProviders(
<Fieldset>
<Fieldset
legend={{
text: 'Complex Legend',
size: 'large',
}}
>
Test Content
</Fieldset>,
);

expect(tree).toMatchSnapshot();
tree.setProps({ legend: 'Simple Legend' });

const legend = tree.find(Legend);
expect(legend.prop('children')).toBe('Simple Legend');
expect(legend.prop('size')).toBeUndefined();
});
});

it('matches with bold legend', () => {
describe('Styling', () => {
it('matches default', () => {
const tree = mountWithProviders(
<Fieldset legend={{ text: 'Text Legend', bold: true }}>
<Fieldset legend={{ text: 'Default Legend' }}>
Test Content
</Fieldset>,
);

expect(tree).toMatchSnapshot();
});

it('matches with disabled legend', () => {
it('matches with bold legend', () => {
const tree = mountWithProviders(
<Fieldset disabled legend={{ text: 'Text Legend' }}>
<Fieldset legend={{ text: 'Bold Legend', bold: true }}>
Test Content
</Fieldset>,
);

expect(tree).toMatchSnapshot();
});

it('matches vertical orientation', () => {
it('matches with disabled legend', () => {
const tree = mountWithProviders(
<Fieldset orientation='vertical'>
<Fieldset disabled legend={{ text: 'Disabled Legend' }}>
Test Content
</Fieldset>,
);

const fieldset = tree.find('fieldset');

expect(tree).toMatchSnapshot();
expect(fieldset.props()).toHaveProperty('data-orientation', 'vertical');
});

it('matches horizontal orientation', () => {
it('matches with string legend', () => {
const tree = mountWithProviders(
<Fieldset orientation='horizontal'>
<Fieldset legend="Simple Legend">
Test Content
</Fieldset>,
);

const fieldset = tree.find('fieldset');

expect(tree).toMatchSnapshot();
expect(fieldset.props()).toHaveProperty('data-orientation', 'horizontal');
});
});

describe('Accessibility', () => {
it('applies aria-label when provided', () => {
const tree = mountWithProviders(
<Fieldset aria-label="Test Fieldset">Test Content</Fieldset>,
<Fieldset aria-label="Test Fieldset" legend={{ text: 'Accessible Legend' }}>
Test Content
</Fieldset>,
);

const fieldset = tree.find('fieldset');
Expand All @@ -139,24 +183,14 @@ describe('Fieldset Component', () => {

it('applies aria-disabled when provided', () => {
const tree = mountWithProviders(
<Fieldset disabled>Test Content</Fieldset>,
);

const fieldset = tree.find('fieldset');

expect(fieldset.props()).toHaveProperty('aria-disabled', true);
});

it('applies role to specified group role', () => {
const tree = mountWithProviders(
<Fieldset role='group'>
<Fieldset disabled legend={{ text: 'Disabled Legend' }}>
Test Content
</Fieldset>,
);

const fieldset = tree.find('fieldset');

expect(fieldset.props()).toHaveProperty('role', 'group');
expect(fieldset.props()).toHaveProperty('aria-disabled', true);
});
});
});
Loading