e.stopPropagation()}>
{props.configuration.options?.map((o, i) => {
if (o?.visible === false) {
diff --git a/packages/editor/test/unit/toolbar/toolbar.test.tsx b/packages/editor/test/unit/toolbar/toolbar.test.tsx
index b106e0e6..ceb5c309 100644
--- a/packages/editor/test/unit/toolbar/toolbar.test.tsx
+++ b/packages/editor/test/unit/toolbar/toolbar.test.tsx
@@ -2,7 +2,7 @@
* @jest-environment jsdom
*/
import React from 'react';
-import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen, findByLabelText } from '@testing-library/react';
import ThreeDRotation from '@mui/icons-material/ThreeDRotation';
import Toolbar, {
ToolbarButtonOption,
@@ -80,6 +80,12 @@ const iconFunctionConfig: ActionConfig = {
onClick: jest.fn(),
};
+const submenuOnClickConfig: ActionConfig = {
+ icon:
,
+ useClickToClose: true,
+ options: [config, null, config, null],
+};
+
afterEach(() => {
jest.clearAllMocks();
});
@@ -192,6 +198,7 @@ describe('Editor Toolbar Submenu', () => {
const item = screen.getByRole('menuitem');
fireEvent.mouseOver(item);
const clickeableDiv = await screen.findByTestId('custom-render-div');
+ expect(screen.queryByRole('submenu')).toBeTruthy();
fireEvent.click(clickeableDiv);
@@ -206,6 +213,28 @@ describe('Editor Toolbar Submenu', () => {
expect(screen.queryByRole('submenu')).toBeFalsy();
});
+
+ it('Given a useClickToOpen configuration when mouse is over, not shows a submenu ', async () => {
+ render(
);
+ const item = screen.getByRole('menuitem');
+
+ fireEvent.mouseOver(item);
+
+ expect(screen.queryByRole('submenu')).toBeFalsy();
+ });
+
+ it('Given a useClickToOpen configuration when click, shows a submenu with close button', async () => {
+ render(
);
+ const item = screen.getByRole('button');
+
+ fireEvent.click(item);
+
+ await screen.findByRole('submenu');
+ const closeButton = await screen.findByLabelText('Close');
+
+ fireEvent.click(closeButton);
+ expect(screen.queryByRole('submenu')).toBeFalsy();
+ });
});
describe('toolbar menu item', () => {
diff --git a/packages/webapp/.eslintrc.json b/packages/webapp/.eslintrc.json
index 257c1652..3bdfb583 100644
--- a/packages/webapp/.eslintrc.json
+++ b/packages/webapp/.eslintrc.json
@@ -40,6 +40,7 @@
"!@mui/material/test-utils/*"
]
}
- ]
+ ],
+ "react/no-unknown-property": ["error", { "ignore": ["css"] }]
}
}
\ No newline at end of file
diff --git a/packages/webapp/cypress/e2e/editor.cy.ts b/packages/webapp/cypress/e2e/editor.cy.ts
index d3281877..66ab0f1c 100644
--- a/packages/webapp/cypress/e2e/editor.cy.ts
+++ b/packages/webapp/cypress/e2e/editor.cy.ts
@@ -1,6 +1,6 @@
context('Editor Page', () => {
beforeEach(() => {
- cy.visit('c/maps/11/edit');
+ cy.visit('/c/maps/11/edit');
});
it('page loaded', () => {
diff --git a/packages/webapp/cypress/e2e/maps.cy.ts b/packages/webapp/cypress/e2e/maps.cy.ts
index 6b61cf37..42aaa302 100644
--- a/packages/webapp/cypress/e2e/maps.cy.ts
+++ b/packages/webapp/cypress/e2e/maps.cy.ts
@@ -7,3 +7,43 @@ context('Maps Page', () => {
// cy.matchImageSnapshot('maps');
});
});
+
+context('iphone-5 resolution', () => {
+ beforeEach(() => {
+ cy.viewport('iphone-5');
+ cy.visit('/c/maps', {
+ onLoad: (win) => {
+ win.onerror = null;
+ },
+ });
+ });
+
+ it('Displays mobile menu button', () => {
+ cy.get('#open-main-drawer').should('be.visible');
+ });
+
+ it('Displays mobile menu on click', () => {
+ cy.get('.MuiDrawer-root').should('not.be.visible');
+ cy.get('#open-main-drawer').should('be.visible').click();
+ cy.get('.MuiDrawer-root').should('be.visible');
+ });
+
+ it('Displays a card list', () => {
+ cy.get('.MuiCard-root').should('have.length', 3);
+ });
+});
+
+context('720p resolution', () => {
+ beforeEach(() => {
+ cy.viewport(1280, 720);
+ cy.visit('/c/maps');
+ });
+
+ it('Displays mobile menu button', () => {
+ cy.get('#open-desktop-drawer').should('be.visible');
+ });
+
+ it('Displays a table with maps', () => {
+ cy.get('.MuiTableBody-root').should('be.visible');
+ });
+});
diff --git a/packages/webapp/lang/es.json b/packages/webapp/lang/es.json
index 1eed4da1..8fee199d 100644
--- a/packages/webapp/lang/es.json
+++ b/packages/webapp/lang/es.json
@@ -263,6 +263,33 @@
"info.title": {
"defaultMessage": "Información"
},
+ "label.add-button": {
+ "defaultMessage": "Agregar etiqueta"
+ },
+ "label.add-for": {
+ "defaultMessage": "Editando etiquetas para el mapa:"
+ },
+ "label.add-placeholder": {
+ "defaultMessage": "Título"
+ },
+ "label.change-color": {
+ "defaultMessage": "Cambiar el color"
+ },
+ "label.delete-description": {
+ "defaultMessage": "será borrado de todos los mapas a los que se encuentra asociado. Desea continuar?"
+ },
+ "label.delete-title": {
+ "defaultMessage": "Confirmación"
+ },
+ "label.description": {
+ "defaultMessage": "Usa las etiquetas para organizar tus mapas."
+ },
+ "label.maps-count": {
+ "defaultMessage": "{count} mapas"
+ },
+ "label.title": {
+ "defaultMessage": "Agregar etiqueta"
+ },
"language.change": {
"defaultMessage": "Cambiar idioma"
},
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index d00859ac..923cf887 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -49,7 +49,6 @@
"@mui/icons-material": "^5.9.3",
"@mui/lab": "^5.0.0-alpha.98",
"@mui/material": "^5.10.11",
- "@mui/styles": "^5.9.3",
"@reduxjs/toolkit": "^1.5.0",
"@wisemapping/editor": "^0.4.0",
"axios": "^0.27.2",
diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index d1b1f9ce..81071ce6 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -11,21 +11,16 @@ import { QueryClient, QueryClientProvider } from 'react-query';
import { theme } from './theme';
import AppI18n, { Locales } from './classes/app-i18n';
import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import ReactGA from 'react-ga4';
import AppConfig from './classes/app-config';
-import withSessionExpirationHandling from './components/HOCs/withSessionExpirationHandling';
import RegistrationSuccessPage from './components/registration-success-page';
+import { ThemeProvider } from '@emotion/react';
import RegistrationCallbackPage from './components/registration-callback';
const EditorPage = React.lazy(() => import('./components/editor-page'));
const MapsPage = React.lazy(() => import('./components/maps-page'));
-declare module '@mui/styles/defaultTheme' {
- // eslint-disable-next-line @typescript-eslint/no-empty-interface
- interface DefaultTheme extends Theme {}
-}
-
// Google Analytics Initialization.
ReactGA.initialize([
{
@@ -53,7 +48,6 @@ function Redirect({ to }) {
const App = (): ReactElement => {
const locale = AppI18n.getDefaultLocale();
- const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
return locale.message ? (
@@ -64,42 +58,67 @@ const App = (): ReactElement => {
messages={locale.message as Record}
>
-
-
-
-
- } />
- } />
- } />
- } />
- } />
- } />
- }
- />
-
-
-