({
+ expanded: 'expanded'
+}));
+
+describe('ActionMenu keyboard navigation', () => {
+ const mockOnClick = jest.fn();
+ const mockMoreButtonClick = jest.fn();
+
+ const defaultProps = {
+ title: 'Main Button',
+ img: 'main-icon.svg',
+ onClick: mockOnClick,
+ moreButtons: [
+ {title: 'Button 1', img: 'icon1.svg', onClick: mockMoreButtonClick},
+ {title: 'Button 2', img: 'icon2.svg', onClick: mockMoreButtonClick},
+ {title: 'Button 3', img: 'icon3.svg', onClick: mockMoreButtonClick}
+ ]
+ };
+
+ beforeEach(() => {
+ mockOnClick.mockClear();
+ mockMoreButtonClick.mockClear();
+ });
+
+ test('expands menu upon focus on main button', () => {
+ render(
);
+ const mainButton = screen.getByRole('button', {name: 'Main Button'});
+
+ act(() => {
+ mainButton.focus();
+ });
+
+ expect(mainButton.parentElement).toHaveClass('expanded');
+ });
+
+ test('focuses first item on arrow_down', async () => {
+ render(
);
+ const mainButton = screen.getByRole('button', {name: 'Main Button'});
+
+ act(() => {
+ mainButton.focus();
+ fireEvent.keyDown(mainButton, {key: KEY.ARROW_DOWN});
+ });
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(screen.getByRole('button', {name: 'Button 1'}));
+ });
+ });
+
+ test('focuses last item on arrow_up', async () => {
+ render(
);
+ const mainButton = screen.getByRole('button', {name: 'Main Button'});
+
+ act(() => {
+ mainButton.focus();
+ fireEvent.keyDown(mainButton, {key: KEY.ARROW_UP});
+ });
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(screen.getByRole('button', {name: 'Button 3'}));
+ });
+ });
+
+ test('cycles from first item to last on arrow_up', async () => {
+ render(
);
+
+ const firstItem = screen.getByRole('button', {name: 'Button 1'});
+ const lastItem = screen.getByRole('button', {name: 'Button 3'});
+
+ act(() => {
+ firstItem.focus();
+ fireEvent.keyDown(firstItem, {key: KEY.ARROW_UP});
+ });
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(lastItem);
+ });
+ });
+
+ test('cycles from last item to first on arrow_down', async () => {
+ render(
);
+
+ const firstItem = screen.getByRole('button', {name: 'Button 1'});
+ const lastItem = screen.getByRole('button', {name: 'Button 3'});
+
+ act(() => {
+ lastItem.focus();
+ fireEvent.keyDown(lastItem, {key: KEY.ARROW_DOWN});
+ });
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(firstItem);
+ });
+ });
+
+ test('focuses to main button on escape', async () => {
+ render(
);
+ const mainButton = screen.getByRole('button', {name: 'Main Button'});
+ const firstItem = screen.getByRole('button', {name: 'Button 1'});
+
+ act(() => {
+ firstItem.focus();
+ fireEvent.keyDown(firstItem, {key: KEY.ESCAPE});
+ });
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(mainButton);
+ });
+ });
+
+ test('closes menu and focuses next element on tab', async () => {
+ render(
+ <>
+
+
+
+ );
+ const firstItem = screen.getByRole('button', {name: 'Button 1'});
+ const afterButton = screen.getByRole('button', {name: 'After Menu'});
+ const user = userEvent.setup();
+
+ act(() => {
+ firstItem.focus();
+ });
+
+ await user.tab();
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(afterButton);
+ expect(screen.getByRole('button', {name: 'Main Button'}).parentElement).not.toHaveClass('expanded');
+ });
+ });
+
+ test('closes menu and focuses previous element on shift + tab', async () => {
+ render(
+ <>
+
+
+
+ );
+
+ const mainButton = screen.getByRole('button', {name: 'Main Button'});
+ const beforeButton = screen.getByRole('button', {name: 'Before Menu'});
+ const user = userEvent.setup();
+
+ act(() => {
+ mainButton.focus();
+ });
+
+ await user.tab({shift: true});
+
+ await waitFor(() => {
+ expect(document.activeElement).toBe(beforeButton);
+ expect(mainButton.parentElement).not.toHaveClass('expanded');
+ });
+ });
+});
diff --git a/packages/scratch-gui/test/unit/components/controls.test.jsx b/packages/scratch-gui/test/unit/components/controls.test.jsx
index a45feac420a..8b30e0146b7 100644
--- a/packages/scratch-gui/test/unit/components/controls.test.jsx
+++ b/packages/scratch-gui/test/unit/components/controls.test.jsx
@@ -40,6 +40,7 @@ describe('Controls component', () => {
test('when stop all button clicked triggers the right callback', () => {
const props = defaultProps();
+ props.active = true;
const {container} = renderWithIntl(
);
const stopAllButton = container.querySelector('img[title="Stop"]');
diff --git a/packages/scratch-gui/test/unit/components/menu-bar.test.jsx b/packages/scratch-gui/test/unit/components/menu-bar.test.jsx
index e679b632906..7232fbea842 100644
--- a/packages/scratch-gui/test/unit/components/menu-bar.test.jsx
+++ b/packages/scratch-gui/test/unit/components/menu-bar.test.jsx
@@ -11,6 +11,7 @@ import {PLATFORM} from '../../../src/lib/platform';
import configureStore from 'redux-mock-store';
import {Provider} from 'react-redux';
import VM from '@scratch/scratch-vm';
+import {MenuRefProvider} from '../../../src/contexts/menu-ref-context.jsx';
describe('MenuBar Component', () => {
const store = configureStore()({
@@ -37,19 +38,23 @@ describe('MenuBar Component', () => {
});
const getComponent = function (props = {}) {
- return
;
+ return (
+
+
+
+ );
};
test('menu bar with no About handler has no About button', () => {
const {container} = renderWithIntl(getComponent());
- const button = container.querySelector('button');
+ const button = container.querySelector('button[aria-label="About menu"]');
expect(button).toBeFalsy();
});
test('menu bar with an About handler has an About button', () => {
const onClickAbout = jest.fn();
const {container} = renderWithIntl(getComponent({onClickAbout}));
- const button = container.querySelector('button');
+ const button = container.querySelector('button[aria-label="About menu"]');
expect(button).toBeTruthy();
});
@@ -57,7 +62,7 @@ describe('MenuBar Component', () => {
test('clicking on About button calls the handler', () => {
const onClickAbout = jest.fn();
const {container} = renderWithIntl(getComponent({onClickAbout}));
- const button = container.querySelector('button');
+ const button = container.querySelector('button[aria-label="About menu"]');
fireEvent.click(button);
expect(onClickAbout).toHaveBeenCalledTimes(1);
@@ -66,7 +71,7 @@ describe('MenuBar Component', () => {
test('not clicking on About button does not call the handler', () => {
const onClickAbout = jest.fn();
const {container} = renderWithIntl(getComponent({onClickAbout}));
- const button = container.querySelector('button');
+ const button = container.querySelector('button[aria-label="About menu"]');
expect(onClickAbout).toHaveBeenCalledTimes(0);
});
diff --git a/packages/scratch-gui/test/unit/containers/__snapshots__/sound-editor.test.jsx.snap b/packages/scratch-gui/test/unit/containers/__snapshots__/sound-editor.test.jsx.snap
index 63a8290d8b1..5d3f0691408 100644
--- a/packages/scratch-gui/test/unit/containers/__snapshots__/sound-editor.test.jsx.snap
+++ b/packages/scratch-gui/test/unit/containers/__snapshots__/sound-editor.test.jsx.snap
@@ -10,13 +10,13 @@ exports[`Sound Editor Container should pass the correct data to the component fr
- 
+