Skip to content
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

Jump to bottom

feat: Adds test id to side navigation #2972

Merged
merged 1 commit into from
Nov 15, 2024
Merged

feat: Adds test id to side navigation #2972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
75 changes: 71 additions & 4 deletions src/side-navigation/__tests__/complex-side-navigation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,26 @@ it('Side navigation with all possible items', async () => {
type: 'link',
text: 'Page 1',
href: '#/page1',
// this test id deliberately contains double quotes
// to test the selector escaping
testId: '"link-page-1"',
Copy link
Contributor Author

@orangevolon orangevolon Nov 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd liked to have a separate test case for this like this PR, but this particular component doesn't have any tests dedicated for test utils and to follow the existing structure I opted for this.

info: <Badge>1</Badge>,
},
{
type: 'divider',
testId: 'divider-1',
},
{
type: 'section',
text: 'Section 1',
testId: 'section-1',
items: [
{
type: 'link',
text: 'Page 2',
// this test id deliberately contains double quotes
// to test the selector escaping
testId: '"link-page-2"',
href: '#/page2',
info: (
<Popover content="very new feature" renderWithPortal={true}>
Expand All @@ -47,48 +55,57 @@ it('Side navigation with all possible items', async () => {
href: '#/page3',
external: true,
externalIconAriaLabel: 'Opens in a new tab',
testId: 'link-page-3',
},
{ type: 'divider' },
{
type: 'link',
text: 'Page 4',
href: '#/page4',
testId: 'link-page-4',
},
{
type: 'link',
text: 'Page 5',
href: '#/page5',
testId: 'link-page-5',
},
],
},
{ type: 'divider' },
{ type: 'divider', testId: 'divider-2' },
{
type: 'section-group',
testId: 'section-group-1',
title: 'Section group 1',
items: [
{
type: 'link',
text: 'Page 6',
href: '#/page6',
testId: 'link-page-6',
},
{
type: 'link',
text: 'Page 7',
href: '#/page7',
testId: 'link-page-7',
},
{
type: 'section',
text: 'Section 2',
testId: 'section-2',
items: [
{
type: 'link',
text: 'Page 8',
href: '#/page8',
testId: 'link-page-8',
},
{
type: 'link',
text: 'Page 9',
href: '#/page9',
testId: 'link-page-9',
},
],
},
Expand All @@ -97,67 +114,85 @@ it('Side navigation with all possible items', async () => {
text: 'Expandable link group',
href: '#/exp-link-group',
defaultExpanded: true,
testId: 'expandable-link-group-1',
items: [
{
type: 'link',
text: 'Page 10',
href: '#/page10',
testId: 'link-page-10',
},
{
type: 'link',
text: 'Page 11',
href: '#/page11',
testId: 'link-page-11',
},
{
type: 'divider',
testId: 'divider-3',
},
{ type: 'divider' },
{
type: 'link',
text: 'Page 12',
href: '#/page12',
testId: 'link-page-12',
},
{
type: 'link',
text: 'Page 13',
href: '#/page13',
testId: 'link-page-13',
},
],
},
],
},
{ type: 'divider' },
{
type: 'divider',
testId: 'divider-4',
},
{
type: 'section-group',
title: 'Section group 2',
testId: 'section-group-2',
items: [
{
type: 'link',
text: 'Page 14',
href: '#/page14',
testId: 'link-page-14',
},
{
type: 'link-group',
text: 'Link group',
href: '#/link-group',
testId: 'link-group-1',
items: [
{
type: 'link',
text: 'Page 15',
href: '#/page15',
testId: 'link-page-15',
},
{
type: 'link',
text: 'Page 16',
href: '#/page16',
testId: 'link-page-16',
},
{ type: 'divider' },
{ type: 'divider', testId: 'divider-5' },
{
type: 'link',
text: 'Page 17',
href: '#/page17',
testId: 'link-page-17',
},
{
type: 'link',
text: 'Page 18',
href: '#/page18',
testId: 'link-page-18',
},
],
},
Expand All @@ -176,27 +211,49 @@ it('Side navigation with all possible items', async () => {
});

expect(wrapper.findItemByIndex(1)!.findLink()!.getElement()).toHaveTextContent('Page 1');
expect(wrapper.findItemByTestId('"link-page-1"')!.findLink()!.getElement()).toHaveTextContent('Page 1');

expect(wrapper.findItemByIndex(2)!.findDivider()).toBeTruthy();
expect(wrapper.findItemByTestId('divider-1')).toBeTruthy();

// Section 1 with 1 divider
expect(wrapper.findItemByIndex(3)!.findSectionTitle()!.getElement()).toHaveTextContent('Section 1');
expect(wrapper.findItemByIndex(3)!.findItemByIndex(1)!.findLink()!.getElement()).toHaveTextContent('Page 2');
expect(wrapper.findItemByIndex(3)!.findItemByIndex(3)!.findDivider()).toBeTruthy();
expect(wrapper.findItemByIndex(3)!.findItemByIndex(4)!.findLink()!.getElement()).toHaveTextContent('Page 4');

// Using test ids
expect(wrapper.findItemByTestId('section-1')!.getElement()).toHaveTextContent('Section 1');
expect(wrapper.findItemByTestId('section-1')!.findItemByTestId('"link-page-2"')!.getElement()).toHaveTextContent(
'Page 2'
);
expect(wrapper.findItemByTestId('"link-page-2"')!.getElement()).toHaveTextContent('Page 2');

expect(wrapper.findItemByIndex(4)!.findDivider()).toBeTruthy();

// Section group 1
expect(wrapper.findItemByIndex(5)!.findSectionGroupTitle()!.getElement()).toHaveTextContent('Section group 1');
expect(wrapper.findItemByIndex(5)!.findItemByIndex(1)!.findLink()!.getElement()).toHaveTextContent('Page 6');

// Section 2 inside Section group 1
expect(wrapper.findItemByIndex(5)!.findItemByIndex(3)!.findSectionTitle()!.getElement()).toHaveTextContent(
'Section 2'
);
expect(
wrapper.findItemByIndex(5)!.findItemByIndex(3)!.findItemByIndex(1)!.findLink()!.getElement()
).toHaveTextContent('Page 8');

// Using test ids
expect(wrapper.findItemByTestId('section-group-1')!.getElement()).toHaveTextContent('Section group 1');
expect(wrapper.findItemByTestId('link-page-8')!.getElement()).toHaveTextContent('Page 8');
expect(
wrapper
.findItemByTestId('section-group-1')!
.findItemByTestId('section-2')!
.findItemByTestId('link-page-8')!
.getElement()
).toHaveTextContent('Page 8');

// Expandable link group inside Section group 1
expect(wrapper.findItemByIndex(5)!.findItemByIndex(4)!.findExpandableLinkGroup()).toBeTruthy();
expect(
Expand All @@ -213,6 +270,16 @@ it('Side navigation with all possible items', async () => {

expect(wrapper.findItemByIndex(6)!.findDivider()).toBeTruthy();

// Using test ids
expect(
wrapper
.findItemByTestId('section-group-1')!
.findItemByTestId('expandable-link-group-1')!
.findItemByTestId('link-page-10')!
.getElement()
).toHaveTextContent('Page 10');
expect(wrapper.findItemByTestId('link-page-10')!.getElement()).toHaveTextContent('Page 10');

// Section group 2
expect(wrapper.findItemByIndex(7)!.findSectionGroupTitle()!.getElement()).toHaveTextContent('Section group 2');
expect(wrapper.findItemByIndex(7)!.findItemByIndex(2)!.findLink()!.getElement()).toHaveTextContent('Link group');
Expand Down
108 changes: 100 additions & 8 deletions src/side-navigation/__tests__/side-navigation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,6 @@ describe('SideNavigation', () => {
expect(wrapper.findItemByIndex(2)?.findLink()?.getElement()).toHaveTextContent('Page 2');
});

it('renders dividers', () => {
const wrapper = renderSideNavigation({
items: [{ type: 'divider' }],
});

expect(wrapper.findItemByIndex(1)?.findDivider()).toBeTruthy();
});

it('re-renders different section types correctly', () => {
const { wrapper, rerender } = renderUpdatableSideNavigation({
items: [
Expand Down Expand Up @@ -191,6 +183,31 @@ describe('SideNavigation', () => {
});
});

describe('Divider', () => {
it('renders dividers', () => {
const wrapper = renderSideNavigation({
items: [{ type: 'divider' }],
});

expect(wrapper.findItemByIndex(1)?.findDivider()).toBeTruthy();
});

it('assigns test ids to the dividers', () => {
const wrapper = renderSideNavigation({
items: [
{ type: 'divider', testId: 'divider-1-test-id' },
{ type: 'divider', testId: 'divider-2-test-id' },
],
});

const firstDivider = wrapper.findItemByIndex(1)!.getElement();
const secondDivider = wrapper.findItemByIndex(2)!.getElement();

expect(firstDivider).toHaveAttribute('data-testid', 'divider-1-test-id');
expect(secondDivider).toHaveAttribute('data-testid', 'divider-2-test-id');
});
});

describe('Section Group', () => {
it('has specified title', () => {
const wrapper = renderSideNavigation({ items: [{ type: 'section-group', title: 'Section Group', items: [] }] });
Expand All @@ -202,6 +219,21 @@ describe('SideNavigation', () => {
expect(wrapper.findItemByIndex(1)?.findSectionGroup()!.getElement()!.children[0]!.tagName).toBe('H3');
expect(wrapper.find('h3')!.getElement()).toHaveTextContent('Section Group');
});

it('assigns test ids to the section groups', () => {
const wrapper = renderSideNavigation({
items: [
{ type: 'section-group', title: 'Section Group', testId: 'section-group-1-test-id', items: [] },
{ type: 'section-group', title: 'Section Group', testId: 'section-group-2-test-id', items: [] },
],
});

const firstGroup = wrapper.findItemByIndex(1)!.getElement();
const secondGroup = wrapper.findItemByIndex(2)!.getElement();

expect(firstGroup).toHaveAttribute('data-testid', 'section-group-1-test-id');
expect(secondGroup).toHaveAttribute('data-testid', 'section-group-2-test-id');
});
});

describe('Link', () => {
Expand Down Expand Up @@ -293,6 +325,21 @@ describe('SideNavigation', () => {

expect(wrapper.findItemByIndex(1)?.findLink()?.getElement()).toHaveTextContent('Page 1');
});

it('assigns test ids to the links', () => {
const wrapper = renderSideNavigation({
items: [
{ type: 'link', href: 'http://link/1', text: 'Page 1', testId: 'link-1-test-id' },
{ type: 'link', href: 'http://link/2', text: 'Page 2', testId: 'link-2-test-id' },
],
});

const firstLink = wrapper.findItemByIndex(1)!.getElement();
const secondLink = wrapper.findItemByIndex(2)!.getElement();

expect(firstLink).toHaveAttribute('data-testid', 'link-1-test-id');
expect(secondLink).toHaveAttribute('data-testid', 'link-2-test-id');
});
});

describe('Section', () => {
Expand Down Expand Up @@ -602,6 +649,21 @@ describe('SideNavigation', () => {
expect(onChange).toHaveBeenCalledTimes(2);
});
});

it('assigns test ids to the sections', () => {
const wrapper = renderSideNavigation({
items: [
{ type: 'section', text: 'Page 1', testId: 'link-1-test-id', items: [] },
{ type: 'section', text: 'Page 2', testId: 'link-2-test-id', items: [] },
],
});

const firstSection = wrapper.findItemByIndex(1)!.getElement();
const secondSection = wrapper.findItemByIndex(2)!.getElement();

expect(firstSection).toHaveAttribute('data-testid', 'link-1-test-id');
expect(secondSection).toHaveAttribute('data-testid', 'link-2-test-id');
});
});

describe('LinkGroup', () => {
Expand Down Expand Up @@ -670,6 +732,21 @@ describe('SideNavigation', () => {
'Additional info'
);
});

it('assigns test ids to the link group', () => {
const wrapper = renderSideNavigation({
items: [
{ type: 'link-group', text: 'Page 1', href: 'http://link/1', testId: 'link-1-test-id', items: [] },
{ type: 'link-group', text: 'Page 2', href: 'http://link/2', testId: 'link-2-test-id', items: [] },
],
});

const firstLinkGroup = wrapper.findItemByIndex(1)!.getElement();
const secondLinkGroup = wrapper.findItemByIndex(2)!.getElement();

expect(firstLinkGroup).toHaveAttribute('data-testid', 'link-1-test-id');
expect(secondLinkGroup).toHaveAttribute('data-testid', 'link-2-test-id');
});
});

describe('Expandable Link Group', () => {
Expand Down Expand Up @@ -990,6 +1067,21 @@ describe('SideNavigation', () => {
expect(wrapper.findItemByIndex(2)?.findLink()?.getElement()).toHaveAttribute('aria-expanded', 'false');
});

it('assigns test ids to the expandable links', () => {
const wrapper = renderSideNavigation({
items: [
{ type: 'expandable-link-group', href: 'http://link/1', text: 'Page 1', testId: 'link-1-test-id', items: [] },
{ type: 'expandable-link-group', href: 'http://link/2', text: 'Page 2', testId: 'link-2-test-id', items: [] },
],
});

const firstLink = wrapper.findItemByIndex(1)!.getElement();
const secondLink = wrapper.findItemByIndex(2)!.getElement();

expect(firstLink).toHaveAttribute('data-testid', 'link-1-test-id');
expect(secondLink).toHaveAttribute('data-testid', 'link-2-test-id');
});

describe('when clicking on the title link', () => {
it('gets expanded', () => {
const wrapper = renderSideNavigation({
Expand Down
Loading