PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Migrate KeyboardShortcut tests from Enzyme to RTL (#9405)

Browse source 
* Migrate tests from Enzyme to RTL

* Fix languageHandler tests

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Germain 2022-10-13 14:32:45 +01:00 committed by GitHub
parent aa9f8eac52
commit 4c8b4116eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 1082 additions and 281 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
test/components/views/settings/KeyboardShortcut-test.tsx
View file

@ -16,17 +16,14 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { render } from "@testing-library/react";
import { Key } from "../../../../src/Keyboard";
import { mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils/platform";
import { KeyboardKey, KeyboardShortcut } from "../../../../src/components/views/settings/KeyboardShortcut";
const PATH_TO_COMPONENT = "../../../../src/components/views/settings/KeyboardShortcut.tsx";
const renderKeyboardShortcut = async (component, props?): Promise<ReactWrapper> => {
const Component = (await import(PATH_TO_COMPONENT))[component];
return mount(<Component {...props} />);
const renderKeyboardShortcut = (Component, props?) => {
return render(<Component {...props} />).container;
};
describe("KeyboardShortcut", () => {
@ -35,24 +32,24 @@ describe("KeyboardShortcut", () => {
unmockPlatformPeg();
});
it("renders key icon", async () => {
const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.ARROW_DOWN });
it("renders key icon", () => {
const body = renderKeyboardShortcut(KeyboardKey, { name: Key.ARROW_DOWN });
expect(body).toMatchSnapshot();
});
it("renders alternative key name", async () => {
const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.PAGE_DOWN });
it("renders alternative key name", () => {
const body = renderKeyboardShortcut(KeyboardKey, { name: Key.PAGE_DOWN });
expect(body).toMatchSnapshot();
});
it("doesn't render + if last", async () => {
const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.A, last: true });
it("doesn't render + if last", () => {
const body = renderKeyboardShortcut(KeyboardKey, { name: Key.A, last: true });
expect(body).toMatchSnapshot();
});
it("doesn't render same modifier twice", async () => {
it("doesn't render same modifier twice", () => {
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
const body1 = await renderKeyboardShortcut("KeyboardShortcut", {
const body1 = renderKeyboardShortcut(KeyboardShortcut, {
value: {
key: Key.A,
ctrlOrCmdKey: true,
@ -61,7 +58,7 @@ describe("KeyboardShortcut", () => {
});
expect(body1).toMatchSnapshot();
const body2 = await renderKeyboardShortcut("KeyboardShortcut", {
const body2 = renderKeyboardShortcut(KeyboardShortcut, {
value: {
key: Key.A,
ctrlOrCmdKey: true,

95
test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap
View file

@ -1,116 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KeyboardShortcut doesn't render + if last 1`] = `
<KeyboardKey
last={true}
name="a"
>
<div>
<kbd>
a
</kbd>
</KeyboardKey>
</div>
`;
exports[`KeyboardShortcut doesn't render same modifier twice 1`] = `
<KeyboardShortcut
value={
Object {
"ctrlOrCmdKey": true,
"key": "a",
"metaKey": true,
}
}
>
<div>
<div
className="mx_KeyboardShortcut"
class="mx_KeyboardShortcut"
>
<KeyboardKey
key="ctrlOrCmdKey"
name="Control"
>
<kbd>
<kbd>
Ctrl
Ctrl
</kbd>
+
</KeyboardKey>
<KeyboardKey
last={true}
name="a"
>
<kbd>
</kbd>
+
<kbd>
a
a
</kbd>
</KeyboardKey>
</kbd>
</div>
</KeyboardShortcut>
</div>
`;
exports[`KeyboardShortcut doesn't render same modifier twice 2`] = `
<KeyboardShortcut
value={
Object {
"ctrlKey": true,
"ctrlOrCmdKey": true,
"key": "a",
}
}
>
<div>
<div
className="mx_KeyboardShortcut"
class="mx_KeyboardShortcut"
>
<KeyboardKey
key="ctrlOrCmdKey"
name="Control"
>
<kbd>
<kbd>
Ctrl
Ctrl
</kbd>
+
</KeyboardKey>
<KeyboardKey
last={true}
name="a"
>
<kbd>
</kbd>
+
<kbd>
a
a
</kbd>
</KeyboardKey>
</kbd>
</div>
</KeyboardShortcut>
</div>
`;
exports[`KeyboardShortcut renders alternative key name 1`] = `
<KeyboardKey
name="PageDown"
>
<div>
<kbd>
Page Down
</kbd>
+
</KeyboardKey>
</div>
`;
exports[`KeyboardShortcut renders key icon 1`] = `
<KeyboardKey
name="ArrowDown"
>
<div>
<kbd>
↓
</kbd>
+
</KeyboardKey>
</div>
`;

17
test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx
View file

@ -15,15 +15,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { render } from "@testing-library/react";
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import KeyboardUserSettingsTab from
"../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
import { Key } from "../../../../../../src/Keyboard";
import { mockPlatformPeg } from "../../../../../test-utils/platform";
const PATH_TO_KEYBOARD_SHORTCUTS = "../../../../../../src/accessibility/KeyboardShortcuts";
const PATH_TO_KEYBOARD_SHORTCUT_UTILS = "../../../../../../src/accessibility/KeyboardShortcutUtils";
const PATH_TO_COMPONENT = "../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
const mockKeyboardShortcuts = (override) => {
jest.doMock(PATH_TO_KEYBOARD_SHORTCUTS, () => {
@ -45,17 +46,17 @@ const mockKeyboardShortcutUtils = (override) => {
});
};
const renderKeyboardUserSettingsTab = async (component): Promise<ReactWrapper> => {
const Component = (await import(PATH_TO_COMPONENT))[component];
return mount(<Component />);
const renderKeyboardUserSettingsTab = () => {
return render(<KeyboardUserSettingsTab />).container;
};
describe("KeyboardUserSettingsTab", () => {
beforeEach(() => {
jest.resetModules();
mockPlatformPeg();
});
it("renders list of keyboard shortcuts", async () => {
it("renders list of keyboard shortcuts", () => {
mockKeyboardShortcuts({
"CATEGORIES": {
"Composer": {
@ -101,7 +102,7 @@ describe("KeyboardUserSettingsTab", () => {
},
});
const body = await renderKeyboardUserSettingsTab("default");
const body = renderKeyboardUserSettingsTab();
expect(body).toMatchSnapshot();
});
});

1178
test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap
View file

File diff suppressed because it is too large Load diff

28
test/i18n-test/languageHandler-test.tsx
View file

@ -100,6 +100,16 @@ describe('languageHandler', function() {
],
];
let oldNodeEnv;
beforeAll(() => {
oldNodeEnv = process.env.NODE_ENV;
process.env.NODE_ENV = "test";
});
afterAll(() => {
process.env.NODE_ENV = oldNodeEnv;
});
describe('when translations exist in language', () => {
beforeEach(function(done) {
stubClient();
@ -115,7 +125,7 @@ describe('languageHandler', function() {
}).then(done);
});
it.each(testCasesEn)("%s", async (_d, translationString, variables, tags, result) => {
it.each(testCasesEn)("%s", (_d, translationString, variables, tags, result) => {
expect(_t(translationString, variables, tags)).toEqual(result);
});
@ -137,9 +147,9 @@ describe('languageHandler', function() {
});
describe('for a non-en language', () => {
beforeEach(async () => {
beforeEach(() => {
stubClient();
await setLanguage('lv');
setLanguage('lv');
// counterpart doesnt expose any way to restore default config
// missingEntryGenerator is mocked in the root setup file
// reset to default here
@ -178,7 +188,7 @@ describe('languageHandler', function() {
});
it.each(pluralCases)(
"%s",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_t(translationString, variables, tags)).toEqual(result);
},
);
@ -192,7 +202,7 @@ describe('languageHandler', function() {
});
it.each(pluralCases)(
"%s and translates with fallback locale, attributes fallback locale",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_tDom(translationString, variables, tags)).toEqual(<span lang="en">{ result }</span>);
},
);
@ -203,7 +213,7 @@ describe('languageHandler', function() {
describe('_t', () => {
it.each(testCasesEn)(
"%s and translates with fallback locale",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_t(translationString, variables, tags)).toEqual(result);
},
);
@ -212,7 +222,7 @@ describe('languageHandler', function() {
describe('_tDom()', () => {
it.each(testCasesEn)(
"%s and translates with fallback locale, attributes fallback locale",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_tDom(translationString, variables, tags)).toEqual(<span lang="en">{ result }</span>);
},
);
@ -221,12 +231,12 @@ describe('languageHandler', function() {
});
describe('when languages dont load', () => {
it('_t', async () => {
it('_t', () => {
const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
expect(_t(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(STRING_NOT_IN_THE_DICTIONARY);
});
it('_tDom', async () => {
it('_tDom', () => {
const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
expect(_tDom(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(
<span lang="en">{ STRING_NOT_IN_THE_DICTIONARY }</span>);