public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix arrow tests

Browse Source
This commit is contained in:
Ashley Harrison
2022-04-19 11:32:05 +01:00
parent abe1e04218
commit d12a778c0a
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/NavBar/NavBarItem.test.tsx
+22 -19
View File
@@ -21,7 +21,7 @@ const defaults: Props = {
},
};
function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
async function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
jest.clearAllMocks();
config.appSubUrl = subUrl;
locationUtil.initialize({ config, getTimeRangeForUrl: jest.fn(), getVariablesUrlParams: jest.fn() });
@@ -38,20 +38,23 @@ function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
</TestProvider>
);
// Need to click this first to set the correct selection range
// see https://github.com/testing-library/user-event/issues/901#issuecomment-1087192424
await userEvent.click(document.body);
return { rerender, pushMock };
}
describe('NavBarItem', () => {
describe('when url property is not set', () => {
it('then it renders the menu trigger as a button', () => {
getTestContext();
it('then it renders the menu trigger as a button', async () => {
await getTestContext();
expect(screen.getAllByRole('button')).toHaveLength(1);
});
describe('and clicking on the menu trigger button', () => {
it('then the onClick handler should be called', async () => {
getTestContext();
await getTestContext();
await userEvent.click(screen.getByRole('button'));
expect(onClickMock).toHaveBeenCalledTimes(1);
@@ -60,7 +63,7 @@ describe('NavBarItem', () => {
describe('and hovering over the menu trigger button', () => {
it('then the menu items should be visible', async () => {
getTestContext();
await getTestContext();
await userEvent.hover(screen.getByRole('button'));
@@ -72,7 +75,7 @@ describe('NavBarItem', () => {
describe('and tabbing to the menu trigger button', () => {
it('then the menu items should be visible', async () => {
getTestContext();
await getTestContext();
await userEvent.tab();
@@ -84,7 +87,7 @@ describe('NavBarItem', () => {
describe('and pressing arrow right on the menu trigger button', () => {
it('then the correct menu item should receive focus', async () => {
getTestContext();
await getTestContext();
await userEvent.tab();
expect(screen.getAllByRole('menuitem')).toHaveLength(3);
@@ -92,7 +95,7 @@ describe('NavBarItem', () => {
expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1');
await userEvent.keyboard('{arrowright}');
await userEvent.keyboard('{ArrowRight}');
expect(screen.getAllByRole('menuitem')).toHaveLength(3);
expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0');
expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
@@ -102,8 +105,8 @@ describe('NavBarItem', () => {
});
describe('when url property is set', () => {
it('then it renders the menu trigger as a link', () => {
getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
it('then it renders the menu trigger as a link', async () => {
await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
expect(screen.getAllByRole('link')).toHaveLength(1);
expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.grafana.com');
@@ -111,7 +114,7 @@ describe('NavBarItem', () => {
describe('and hovering over the menu trigger link', () => {
it('then the menu items should be visible', async () => {
getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await userEvent.hover(screen.getByRole('link'));
@@ -123,7 +126,7 @@ describe('NavBarItem', () => {
describe('and tabbing to the menu trigger link', () => {
it('then the menu items should be visible', async () => {
getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await userEvent.tab();
@@ -135,7 +138,7 @@ describe('NavBarItem', () => {
describe('and pressing arrow right on the menu trigger link', () => {
it('then the correct menu item should receive focus', async () => {
getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await userEvent.tab();
expect(screen.getAllByRole('link')[0]).toHaveFocus();
@@ -144,7 +147,7 @@ describe('NavBarItem', () => {
expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1');
await userEvent.keyboard('{arrowright}');
await userEvent.keyboard('{ArrowRight}');
expect(screen.getAllByRole('link')[0]).not.toHaveFocus();
expect(screen.getAllByRole('menuitem')).toHaveLength(3);
expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0');
@@ -155,17 +158,17 @@ describe('NavBarItem', () => {
describe('and pressing arrow left on a menu item', () => {
it('then the nav bar item should receive focus', async () => {
getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
await userEvent.tab();
await userEvent.keyboard('{arrowright}');
await userEvent.keyboard('{ArrowRight}');
expect(screen.getAllByRole('link')[0]).not.toHaveFocus();
expect(screen.getAllByRole('menuitem')).toHaveLength(3);
expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0');
expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1');
await userEvent.keyboard('{arrowleft}');
await userEvent.keyboard('{ArrowLeft}');
expect(screen.getAllByRole('link')[0]).toHaveFocus();
expect(screen.getAllByRole('menuitem')).toHaveLength(3);
expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '-1');
@@ -176,7 +179,7 @@ describe('NavBarItem', () => {
describe('when appSubUrl is configured and user clicks on menuitem link', () => {
it('then location service should be called with correct url', async () => {
const { pushMock } = getTestContext(
const { pushMock } = await getTestContext(
{
link: {
...defaults.link,
@@ -203,7 +206,7 @@ describe('NavBarItem', () => {
describe('when appSubUrl is not configured and user clicks on menuitem link', () => {
it('then location service should be called with correct url', async () => {
const { pushMock } = getTestContext({
const { pushMock } = await getTestContext({
link: {
...defaults.link,
url: 'https://www.grafana.com',