diff --git a/src/components/App.tsx b/src/components/App.tsx index db5cc52c..b64b97d9 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -87,7 +87,7 @@ import { actions } from "../actions/register"; import { ActionResult } from "../actions/types"; import { getDefaultAppState } from "../appState"; -import { t } from "../i18n"; +import { t, getLanguage } from "../i18n"; import { copyToAppClipboard, @@ -229,6 +229,7 @@ class App extends React.Component { onLockToggle={this.toggleLock} zenModeEnabled={zenModeEnabled} toggleZenMode={this.toggleZenMode} + lng={getLanguage().lng} />
void; zenModeEnabled: boolean; toggleZenMode: () => void; + lng: string; } const LayerUI = ({ @@ -325,6 +326,7 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => { const keys = Object.keys(prevAppState) as (keyof Partial)[]; return ( + prev.lng === next.lng && prev.elements === next.elements && keys.every((key) => prevAppState[key] === nextAppState[key]) ); diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 2d4b68c8..45bd1b7c 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -4038,6 +4038,66 @@ exports[`regression tests pinch-to-zoom works: [end of test] number of elements exports[`regression tests pinch-to-zoom works: [end of test] number of renders 1`] = `8`; +exports[`regression tests rerenders UI on language change: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFontFamily": 1, + "currentItemFontSize": 20, + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeStyle": "solid", + "currentItemStrokeWidth": 1, + "currentItemTextAlign": "left", + "cursorButton": "up", + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "editingGroupId": null, + "elementLocked": false, + "elementType": "rectangle", + "errorMessage": null, + "exportBackground": true, + "isCollaborating": false, + "isLoading": false, + "isResizing": false, + "isRotating": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "Untitled-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object {}, + "selectedGroupIds": Object {}, + "selectionElement": null, + "shouldAddWatermark": false, + "shouldCacheIgnoreZoom": false, + "showShortcutsDialog": false, + "username": "", + "viewBackgroundColor": "#ffffff", + "zenModeEnabled": false, + "zoom": 1, +} +`; + +exports[`regression tests rerenders UI on language change: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [], +} +`; + +exports[`regression tests rerenders UI on language change: [end of test] number of elements 1`] = `0`; + +exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `4`; + exports[`regression tests resize an element, trying every resize handle: [end of test] appState 1`] = ` Object { "collaborators": Map {}, diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index 834fb93c..eb6d4ea7 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -2,7 +2,7 @@ import { reseed } from "../random"; import React from "react"; import ReactDOM from "react-dom"; import * as Renderer from "../renderer/renderScene"; -import { render, fireEvent } from "./test-utils"; +import { render, screen, fireEvent } from "./test-utils"; import App from "../components/App"; import { ToolName } from "./queries/toolQueries"; import { KEYS, Key } from "../keys"; @@ -623,4 +623,16 @@ describe("regression tests", () => { fireEvent.keyUp(document, { code: "Minus", ctrlKey: true }); expect(h.state.zoom).toBe(1); }); + + it("rerenders UI on language change", () => { + // select rectangle tool to show properties menu + clickTool("rectangle"); + // english lang should display `hachure` label + expect(screen.queryByText(/hachure/i)).not.toBeNull(); + fireEvent.change(document.querySelector(".dropdown-select__language")!, { + target: { value: "de-DE" }, + }); + // switching to german, `hachure` label should no longer exist + expect(screen.queryByText(/hachure/i)).toBeNull(); + }); });