/** * @jest-environment jsdom */ import React from 'react'; import { render, fireEvent, waitFor, screen } from '@testing-library/react'; import ThreeDRotation from '@mui/icons-material/ThreeDRotation'; import Toolbar, { ToolbarButtonOption, ToolbarMenuItem, ToolbarSubmenu, } from '../../../src/components/toolbar'; import AppBar from '../../../src/components/app-bar'; import ActionConfig from '../../../src/classes/action/action-config'; import Capability from '../../../src/classes/action/capability'; import Editor from '../../../src/classes/model/editor'; import MapInfoImpl from '../../playground/map-render/js/MapInfoImpl'; require('babel-polyfill'); jest.mock('../../../src/components/app-bar/styles.css', () => ''); const config: ActionConfig = { icon: , onClick: jest.fn(), }; const notVisibleConfig: ActionConfig = { icon: , onClick: jest.fn(), visible: false, }; const disabledAndNotSelectedButtonConfig: ActionConfig = { icon: , onClick: jest.fn(), disabled: () => true, selected: () => false, }; const selectedButtonConfig: ActionConfig = { icon: , onClick: jest.fn(), selected: () => true, }; const disabledSubMenuConfig: ActionConfig = { icon: , options: [config], disabled: () => true, }; const withRenderConfig: ActionConfig = { icon: , render: () =>
test
, }; const withCloseSubmenuRender: ActionConfig = { icon: , render: (closeMenu) => { return (
Test
); }, }; const submenuConfig: ActionConfig = { icon: , options: [config, null, config, null, withRenderConfig], }; const notVisibleSubmenuConfig: ActionConfig = { icon: , options: [config, null, config, null, withRenderConfig], visible: false, }; const submenuConfig2: ActionConfig = { icon: , options: [withCloseSubmenuRender], }; const iconFunctionConfig: ActionConfig = { icon: () => , onClick: jest.fn(), }; afterEach(() => { jest.clearAllMocks(); }); describe('Editor Toolbar Button', () => { it('Given an option shows a button and executes onClick', () => { render(); const btn = screen.getByRole('button'); fireEvent.click(btn); expect(config.onClick).toHaveBeenCalled(); }); it('Given an option shows the icon on the button', () => { render(); screen.getByTestId('ThreeDRotationIcon'); }); it('Given an option shows the tooltip on hover', async () => { const tooltipConfiguration = { ...config, tooltip: 'tooltip' }; render(); const btn = screen.getByRole('button'); fireEvent.mouseOver(btn); await screen.findByText('tooltip'); }); it('Given an option with a function icon implementation shows the icon on the button', () => { render(); screen.getByTestId('ThreeDRotationIcon'); }); it('Given a disabled option shows a button and not executes onClick', () => { render( , ); const btn = screen.getByRole('button'); fireEvent.click(btn); expect(config.onClick).not.toHaveBeenCalled(); }); it('Given a selected option shows a selected button', () => { render(); const btn = screen.getByRole('button'); expect(btn.getAttribute('aria-pressed')).toBeTruthy(); }); it('Given a not selected option shows a not selected button', () => { render( , ); const btn = screen.getByRole('button'); expect(btn.getAttribute('aria-pressed')).toEqual('false'); }); }); describe('Editor Toolbar Submenu', () => { it('Given an option shows a menuitem and shows a submenu ', async () => { render(); const item = screen.getByRole('menuitem'); fireEvent.mouseOver(item); await screen.findByRole('submenu'); }); it('Shows a button for each option', async () => { render(); const item = screen.getByRole('menuitem'); fireEvent.mouseOver(item); const submenuButtons = await screen.findAllByRole('button'); expect(submenuButtons).toHaveLength(2); }); it('Shows a divider for each null', async () => { render(); const item = screen.getByRole('menuitem'); fireEvent.mouseOver(item); const dividers = await screen.findAllByTestId('divider'); expect(dividers).toHaveLength(2); }); it('Execute render if set', async () => { render(); const item = screen.getByRole('menuitem'); fireEvent.mouseOver(item); await screen.findByTestId('custom-render-div'); }); it('Execute render passing a function to close popover', async () => { render(); const item = screen.getByRole('menuitem'); fireEvent.mouseOver(item); const clickeableDiv = await screen.findByTestId('custom-render-div'); fireEvent.click(clickeableDiv); expect(screen.queryByRole('submenu')).toBeFalsy(); }); it('Given a disabled configuratio when mouse is over, not shows a submenu ', async () => { render(); const item = screen.getByRole('menuitem'); fireEvent.mouseOver(item); expect(screen.queryByRole('submenu')).toBeFalsy(); }); }); describe('toolbar menu item', () => { it('Render button if no options is passed', () => { render(); screen.getByRole('button'); }); it('Render submenu if options is passed', () => { render(); screen.getByRole('menuitem'); }); it('Render null when visible configuration is falsy', () => { expect( render().container .innerHTML, ).toBe(''); }); it('Render null when visible configuration is falsy', () => { expect( render().container .innerHTML, ).toBe(''); }); }); describe('Toolbar', () => { it('When render it displays a menu', () => { render(); screen.getByRole('menu'); }); it('Given an options array for configurations with 2 options when render it displays a menu with 2 menuitems', () => { render(); const items = screen.getAllByRole('menuitem'); expect(items).toHaveLength(2); }); it('When render it displays a menu in horizontal orientation', () => { const horizontalPosition = { position: { right: '40px', top: '90%', }, vertical: false, }; render( , ); screen.getByRole('menu'); }); it('Execute render if set', () => { render(); screen.getByTestId('custom-render-div'); }); }); describe('AppBar', () => { it('When render it displays a menu', () => { const capacity = new Capability('edition-owner', false); const model = new Editor(null); render( , ); screen.getByRole('menubar'); }); });