Use correct translation function for WYSIWYG buttons (#11315)

* Use correct translation function for WYSIWYG buttons

* Add tests

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx

@@ -34,7 +34,7 @@ import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
 import { KeyCombo } from "../../../../../KeyBindingsManager";
-import { _td } from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import { ButtonEvent } from "../../../elements/AccessibleButton";
 import { openLinkModal } from "./LinkModal";
 import { useComposerContext } from "../ComposerContext";
@@ -93,81 +93,81 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
         <div className="mx_FormattingButtons">
             <Button
                 actionState={actionStates.bold}
-                label={_td("Bold")}
+                label={_t("Bold")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
                 onClick={() => composer.bold()}
                 icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.italic}
-                label={_td("Italic")}
+                label={_t("Italic")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
                 onClick={() => composer.italic()}
                 icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.underline}
-                label={_td("Underline")}
+                label={_t("Underline")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
                 onClick={() => composer.underline()}
                 icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.strikeThrough}
-                label={_td("Strikethrough")}
+                label={_t("Strikethrough")}
                 onClick={() => composer.strikeThrough()}
                 icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.unorderedList}
-                label={_td("Bulleted list")}
+                label={_t("Bulleted list")}
                 onClick={() => composer.unorderedList()}
                 icon={<BulletedListIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.orderedList}
-                label={_td("Numbered list")}
+                label={_t("Numbered list")}
                 onClick={() => composer.orderedList()}
                 icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
             />
             {isInList && (
                 <Button
                     actionState={actionStates.indent}
-                    label={_td("Indent increase")}
+                    label={_t("Indent increase")}
                     onClick={() => composer.indent()}
                     icon={<IndentIcon className="mx_FormattingButtons_Icon" />}
                 />
             )}
             {isInList && (
                 <Button
                     actionState={actionStates.unindent}
-                    label={_td("Indent decrease")}
+                    label={_t("Indent decrease")}
                     onClick={() => composer.unindent()}
                     icon={<UnIndentIcon className="mx_FormattingButtons_Icon" />}
                 />
             )}
             <Button
                 actionState={actionStates.quote}
-                label={_td("Quote")}
+                label={_t("Quote")}
                 onClick={() => composer.quote()}
                 icon={<QuoteIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.inlineCode}
-                label={_td("Code")}
+                label={_t("Code")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.codeBlock}
-                label={_td("Code block")}
+                label={_t("Code block")}
                 onClick={() => composer.codeBlock()}
                 icon={<CodeBlockIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.link}
-                label={_td("Link")}
+                label={_t("Link")}
                 onClick={() => openLinkModal(composer, composerContext, actionStates.link === "reversed")}
                 icon={<LinkIcon className="mx_FormattingButtons_Icon" />}
             />

test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx

@@ -21,6 +21,7 @@ import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "
 
 import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
 import * as LinkModal from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
+import { setLanguage } from "../../../../../../src/languageHandler";
 
 const mockWysiwyg = {
     bold: jest.fn(),
@@ -76,6 +77,14 @@ describe("FormattingButtons", () => {
         jest.resetAllMocks();
     });
 
+    it("renders in german", async () => {
+        await setLanguage("de");
+        const { asFragment } = renderComponent();
+        expect(asFragment()).toMatchSnapshot();
+
+        await setLanguage("en");
+    });
+
     it("Each button should not have active class when enabled", () => {
         renderComponent();
 

test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormattingButtons renders in german 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_FormattingButtons"
+  >
+    <button
+      aria-label="Fett"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Kursiv"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Unterstrichen"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Durchgestrichen"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Ungeordnete Liste"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Nummerierte Liste"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Zitieren"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Code"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Quelltextblock"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+    <button
+      aria-label="Link"
+      class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_FormattingButtons_Icon"
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;