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

Draft
wants to merge 2 commits into
base: feat/test-utils-project-m2
Choose a base branch
from
Draft

feat: adds test id to side navigation #2972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9b2cf4
feat: Adds test id to the side navigation items
orangevolon Nov 1, 2024
73bd00a
temp: Adds findByTestId selectors to navigation
orangevolon Nov 1, 2024
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
71 changes: 67 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,22 @@ it('Side navigation with all possible items', async () => {
type: 'link',
text: 'Page 1',
href: '#/page1',
testId: 'link-page-1',
info: <Badge>1</Badge>,
},
{
type: 'divider',
testId: 'divider-1',
},
{
type: 'section',
text: 'Section 1',
testId: 'section-1',
items: [
{
type: 'link',
text: 'Page 2',
testId: 'link-page-2',
href: '#/page2',
info: (
<Popover content="very new feature" renderWithPortal={true}>
Expand All @@ -47,48 +51,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 +110,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 +207,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 +266,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
Loading