Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 22f83e7

Browse files
author
Germain
authored
Use correct translation function for WYSIWYG buttons (#11315)
* Use correct translation function for WYSIWYG buttons * Add tests
1 parent 9319911 commit 22f83e7

File tree

3 files changed

+132
-13
lines changed

3 files changed

+132
-13
lines changed

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
3434
import { Alignment } from "../../../elements/Tooltip";
3535
import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
3636
import { KeyCombo } from "../../../../../KeyBindingsManager";
37-
import { _td } from "../../../../../languageHandler";
37+
import { _t } from "../../../../../languageHandler";
3838
import { ButtonEvent } from "../../../elements/AccessibleButton";
3939
import { openLinkModal } from "./LinkModal";
4040
import { useComposerContext } from "../ComposerContext";
@@ -93,81 +93,81 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
9393
<div className="mx_FormattingButtons">
9494
<Button
9595
actionState={actionStates.bold}
96-
label={_td("Bold")}
96+
label={_t("Bold")}
9797
keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
9898
onClick={() => composer.bold()}
9999
icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
100100
/>
101101
<Button
102102
actionState={actionStates.italic}
103-
label={_td("Italic")}
103+
label={_t("Italic")}
104104
keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
105105
onClick={() => composer.italic()}
106106
icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
107107
/>
108108
<Button
109109
actionState={actionStates.underline}
110-
label={_td("Underline")}
110+
label={_t("Underline")}
111111
keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
112112
onClick={() => composer.underline()}
113113
icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
114114
/>
115115
<Button
116116
actionState={actionStates.strikeThrough}
117-
label={_td("Strikethrough")}
117+
label={_t("Strikethrough")}
118118
onClick={() => composer.strikeThrough()}
119119
icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
120120
/>
121121
<Button
122122
actionState={actionStates.unorderedList}
123-
label={_td("Bulleted list")}
123+
label={_t("Bulleted list")}
124124
onClick={() => composer.unorderedList()}
125125
icon={<BulletedListIcon className="mx_FormattingButtons_Icon" />}
126126
/>
127127
<Button
128128
actionState={actionStates.orderedList}
129-
label={_td("Numbered list")}
129+
label={_t("Numbered list")}
130130
onClick={() => composer.orderedList()}
131131
icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
132132
/>
133133
{isInList && (
134134
<Button
135135
actionState={actionStates.indent}
136-
label={_td("Indent increase")}
136+
label={_t("Indent increase")}
137137
onClick={() => composer.indent()}
138138
icon={<IndentIcon className="mx_FormattingButtons_Icon" />}
139139
/>
140140
)}
141141
{isInList && (
142142
<Button
143143
actionState={actionStates.unindent}
144-
label={_td("Indent decrease")}
144+
label={_t("Indent decrease")}
145145
onClick={() => composer.unindent()}
146146
icon={<UnIndentIcon className="mx_FormattingButtons_Icon" />}
147147
/>
148148
)}
149149
<Button
150150
actionState={actionStates.quote}
151-
label={_td("Quote")}
151+
label={_t("Quote")}
152152
onClick={() => composer.quote()}
153153
icon={<QuoteIcon className="mx_FormattingButtons_Icon" />}
154154
/>
155155
<Button
156156
actionState={actionStates.inlineCode}
157-
label={_td("Code")}
157+
label={_t("Code")}
158158
keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
159159
onClick={() => composer.inlineCode()}
160160
icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
161161
/>
162162
<Button
163163
actionState={actionStates.codeBlock}
164-
label={_td("Code block")}
164+
label={_t("Code block")}
165165
onClick={() => composer.codeBlock()}
166166
icon={<CodeBlockIcon className="mx_FormattingButtons_Icon" />}
167167
/>
168168
<Button
169169
actionState={actionStates.link}
170-
label={_td("Link")}
170+
label={_t("Link")}
171171
onClick={() => openLinkModal(composer, composerContext, actionStates.link === "reversed")}
172172
icon={<LinkIcon className="mx_FormattingButtons_Icon" />}
173173
/>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "
2121

2222
import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
2323
import * as LinkModal from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
24+
import { setLanguage } from "../../../../../../src/languageHandler";
2425

2526
const mockWysiwyg = {
2627
bold: jest.fn(),
@@ -76,6 +77,14 @@ describe("FormattingButtons", () => {
7677
jest.resetAllMocks();
7778
});
7879

80+
it("renders in german", async () => {
81+
await setLanguage("de");
82+
const { asFragment } = renderComponent();
83+
expect(asFragment()).toMatchSnapshot();
84+
85+
await setLanguage("en");
86+
});
87+
7988
it("Each button should not have active class when enabled", () => {
8089
renderComponent();
8190

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`FormattingButtons renders in german 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="mx_FormattingButtons"
7+
>
8+
<button
9+
aria-label="Fett"
10+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
11+
role="button"
12+
tabindex="0"
13+
>
14+
<div
15+
class="mx_FormattingButtons_Icon"
16+
/>
17+
</button>
18+
<button
19+
aria-label="Kursiv"
20+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
21+
role="button"
22+
tabindex="0"
23+
>
24+
<div
25+
class="mx_FormattingButtons_Icon"
26+
/>
27+
</button>
28+
<button
29+
aria-label="Unterstrichen"
30+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
31+
role="button"
32+
tabindex="0"
33+
>
34+
<div
35+
class="mx_FormattingButtons_Icon"
36+
/>
37+
</button>
38+
<button
39+
aria-label="Durchgestrichen"
40+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
41+
role="button"
42+
tabindex="0"
43+
>
44+
<div
45+
class="mx_FormattingButtons_Icon"
46+
/>
47+
</button>
48+
<button
49+
aria-label="Ungeordnete Liste"
50+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
51+
role="button"
52+
tabindex="0"
53+
>
54+
<div
55+
class="mx_FormattingButtons_Icon"
56+
/>
57+
</button>
58+
<button
59+
aria-label="Nummerierte Liste"
60+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
61+
role="button"
62+
tabindex="0"
63+
>
64+
<div
65+
class="mx_FormattingButtons_Icon"
66+
/>
67+
</button>
68+
<button
69+
aria-label="Zitieren"
70+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
71+
role="button"
72+
tabindex="0"
73+
>
74+
<div
75+
class="mx_FormattingButtons_Icon"
76+
/>
77+
</button>
78+
<button
79+
aria-label="Code"
80+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
81+
role="button"
82+
tabindex="0"
83+
>
84+
<div
85+
class="mx_FormattingButtons_Icon"
86+
/>
87+
</button>
88+
<button
89+
aria-label="Quelltextblock"
90+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
91+
role="button"
92+
tabindex="0"
93+
>
94+
<div
95+
class="mx_FormattingButtons_Icon"
96+
/>
97+
</button>
98+
<button
99+
aria-label="Link"
100+
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
101+
role="button"
102+
tabindex="0"
103+
>
104+
<div
105+
class="mx_FormattingButtons_Icon"
106+
/>
107+
</button>
108+
</div>
109+
</DocumentFragment>
110+
`;

0 commit comments

Comments
 (0)