fix more type issues in unit tests (#8053)

* fix ts issues in test/components/structures

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix ts issues in test/components/views/context_menus

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-03-15 10:30:48 +01:00 committed by GitHub
parent 813a60a7f3
commit bc8fdac491
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 25 deletions

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import "../../skinned-sdk"; import "../../skinned-sdk";
import { MatrixClient } from 'matrix-js-sdk/src/matrix'; import { MatrixClient, MatrixEvent } from 'matrix-js-sdk/src/matrix';
import { EventType } from "matrix-js-sdk/src/@types/event"; import { EventType } from "matrix-js-sdk/src/@types/event";
import { CallState } from "matrix-js-sdk/src/webrtc/call"; import { CallState } from "matrix-js-sdk/src/webrtc/call";
@ -52,7 +52,7 @@ describe('CallEventGrouper', () => {
sender: { sender: {
userId: THEIR_USER_ID, userId: THEIR_USER_ID,
}, },
}); } as unknown as MatrixEvent);
expect(grouper.state).toBe(CustomCallState.Missed); expect(grouper.state).toBe(CustomCallState.Missed);
}); });
@ -73,7 +73,7 @@ describe('CallEventGrouper', () => {
sender: { sender: {
userId: MY_USER_ID, userId: MY_USER_ID,
}, },
}); } as unknown as MatrixEvent);
grouperHangup.add({ grouperHangup.add({
getContent: () => { getContent: () => {
return { return {
@ -86,7 +86,7 @@ describe('CallEventGrouper', () => {
sender: { sender: {
userId: THEIR_USER_ID, userId: THEIR_USER_ID,
}, },
}); } as unknown as MatrixEvent);
grouperReject.add({ grouperReject.add({
getContent: () => { getContent: () => {
@ -100,7 +100,7 @@ describe('CallEventGrouper', () => {
sender: { sender: {
userId: MY_USER_ID, userId: MY_USER_ID,
}, },
}); } as unknown as MatrixEvent);
grouperReject.add({ grouperReject.add({
getContent: () => { getContent: () => {
return { return {
@ -113,7 +113,7 @@ describe('CallEventGrouper', () => {
sender: { sender: {
userId: THEIR_USER_ID, userId: THEIR_USER_ID,
}, },
}); } as unknown as MatrixEvent);
expect(grouperHangup.state).toBe(CallState.Ended); expect(grouperHangup.state).toBe(CallState.Ended);
expect(grouperReject.state).toBe(CallState.Ended); expect(grouperReject.state).toBe(CallState.Ended);
@ -134,7 +134,7 @@ describe('CallEventGrouper', () => {
getType: () => { getType: () => {
return EventType.CallInvite; return EventType.CallInvite;
}, },
}); } as unknown as MatrixEvent);
expect(grouper.isVoice).toBe(false); expect(grouper.isVoice).toBe(false);
}); });

View file

@ -17,7 +17,8 @@ limitations under the License.
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-dom/test-utils'; import ReactTestUtils from 'react-dom/test-utils';
import { createClient } from "matrix-js-sdk/src/matrix"; import { mocked } from 'jest-mock';
import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
import sdk from '../../../skinned-sdk'; import sdk from '../../../skinned-sdk';
import SdkConfig from '../../../../src/SdkConfig'; import SdkConfig from '../../../../src/SdkConfig';
@ -35,10 +36,10 @@ const Login = sdk.getComponent(
describe('Login', function() { describe('Login', function() {
let parentDiv; let parentDiv;
const mockClient = { const mockClient = mocked({
login: jest.fn().mockResolvedValue({}), login: jest.fn().mockResolvedValue({}),
loginFlows: jest.fn(), loginFlows: jest.fn(),
}; } as unknown as MatrixClient);
beforeEach(function() { beforeEach(function() {
jest.spyOn(SdkConfig, "get").mockReturnValue({ jest.spyOn(SdkConfig, "get").mockReturnValue({
@ -47,7 +48,7 @@ describe('Login', function() {
}); });
mockClient.login.mockClear().mockResolvedValue({}); mockClient.login.mockClear().mockResolvedValue({});
mockClient.loginFlows.mockClear().mockResolvedValue({ flows: [{ type: "m.login.password" }] }); mockClient.loginFlows.mockClear().mockResolvedValue({ flows: [{ type: "m.login.password" }] });
createClient.mockReturnValue(mockClient); mocked(createClient).mockReturnValue(mockClient);
parentDiv = document.createElement('div'); parentDiv = document.createElement('div');
document.body.appendChild(parentDiv); document.body.appendChild(parentDiv);
@ -101,7 +102,7 @@ describe('Login', function() {
}); });
it("should show SSO button if that flow is available", async () => { it("should show SSO button if that flow is available", async () => {
mockClient.loginFlows.mockReturnValue({ flows: [{ type: "m.login.sso" }] }); mockClient.loginFlows.mockResolvedValue({ flows: [{ type: "m.login.sso" }] });
const root = render(); const root = render();
await flushPromises(); await flushPromises();
@ -111,7 +112,7 @@ describe('Login', function() {
}); });
it("should show both SSO button and username+password if both are available", async () => { it("should show both SSO button and username+password if both are available", async () => {
mockClient.loginFlows.mockReturnValue({ flows: [{ type: "m.login.password" }, { type: "m.login.sso" }] }); mockClient.loginFlows.mockResolvedValue({ flows: [{ type: "m.login.password" }, { type: "m.login.sso" }] });
const root = render(); const root = render();
await flushPromises(); await flushPromises();
@ -124,7 +125,7 @@ describe('Login', function() {
}); });
it("should show multiple SSO buttons if multiple identity_providers are available", async () => { it("should show multiple SSO buttons if multiple identity_providers are available", async () => {
mockClient.loginFlows.mockReturnValue({ mockClient.loginFlows.mockResolvedValue({
flows: [{ flows: [{
"type": "m.login.sso", "type": "m.login.sso",
"identity_providers": [{ "identity_providers": [{

View file

@ -18,8 +18,8 @@ import React from "react";
import { mount } from "enzyme"; import { mount } from "enzyme";
import "../../../skinned-sdk"; import "../../../skinned-sdk";
import ContextMenu, { ChevronFace } from "../../../../src/components/structures/ContextMenu.tsx"; import ContextMenu, { ChevronFace } from "../../../../src/components/structures/ContextMenu";
import UIStore from "../../../../src/stores/UIStore.ts"; import UIStore from "../../../../src/stores/UIStore";
describe("<ContextMenu />", () => { describe("<ContextMenu />", () => {
// Hardcode window and menu dimensions // Hardcode window and menu dimensions
@ -28,7 +28,7 @@ describe("<ContextMenu />", () => {
jest.spyOn(UIStore, "instance", "get").mockImplementation(() => ({ jest.spyOn(UIStore, "instance", "get").mockImplementation(() => ({
windowWidth: windowSize, windowWidth: windowSize,
windowHeight: windowSize, windowHeight: windowSize,
})); }) as unknown as UIStore);
window.Element.prototype.getBoundingClientRect = jest.fn().mockReturnValue({ window.Element.prototype.getBoundingClientRect = jest.fn().mockReturnValue({
width: menuSize, width: menuSize,
height: menuSize, height: menuSize,
@ -38,19 +38,22 @@ describe("<ContextMenu />", () => {
describe("near top edge of window", () => { describe("near top edge of window", () => {
const targetY = -50; const targetY = -50;
const onFinished = jest.fn();
const wrapper = mount( const wrapper = mount(
<ContextMenu <ContextMenu
bottom={windowSize - targetY - menuSize} bottom={windowSize - targetY - menuSize}
right={menuSize} right={menuSize}
onFinished={onFinished}
chevronFace={ChevronFace.Left} chevronFace={ChevronFace.Left}
chevronOffset={targetChevronOffset} chevronOffset={targetChevronOffset}
/>, />,
); );
const chevron = wrapper.find(".mx_ContextualMenu_chevron_left"); const chevron = wrapper.find(".mx_ContextualMenu_chevron_left");
const actualY = windowSize - parseInt(wrapper.getDOMNode().style.getPropertyValue("bottom")) - menuSize; const bottomStyle = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("bottom"));
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("top")); const actualY = windowSize - bottomStyle - menuSize;
const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
it("stays within the window", () => { it("stays within the window", () => {
expect(actualY).toBeGreaterThanOrEqual(0); expect(actualY).toBeGreaterThanOrEqual(0);
@ -62,10 +65,12 @@ describe("<ContextMenu />", () => {
describe("near right edge of window", () => { describe("near right edge of window", () => {
const targetX = windowSize - menuSize + 50; const targetX = windowSize - menuSize + 50;
const onFinished = jest.fn();
const wrapper = mount( const wrapper = mount(
<ContextMenu <ContextMenu
bottom={0} bottom={0}
onFinished={onFinished}
left={targetX} left={targetX}
chevronFace={ChevronFace.Top} chevronFace={ChevronFace.Top}
chevronOffset={targetChevronOffset} chevronOffset={targetChevronOffset}
@ -73,8 +78,8 @@ describe("<ContextMenu />", () => {
); );
const chevron = wrapper.find(".mx_ContextualMenu_chevron_top"); const chevron = wrapper.find(".mx_ContextualMenu_chevron_top");
const actualX = parseInt(wrapper.getDOMNode().style.getPropertyValue("left")); const actualX = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("left")); const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
it("stays within the window", () => { it("stays within the window", () => {
expect(actualX + menuSize).toBeLessThanOrEqual(windowSize); expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
@ -86,19 +91,21 @@ describe("<ContextMenu />", () => {
describe("near bottom edge of window", () => { describe("near bottom edge of window", () => {
const targetY = windowSize - menuSize + 50; const targetY = windowSize - menuSize + 50;
const onFinished = jest.fn();
const wrapper = mount( const wrapper = mount(
<ContextMenu <ContextMenu
top={targetY} top={targetY}
left={0} left={0}
onFinished={onFinished}
chevronFace={ChevronFace.Right} chevronFace={ChevronFace.Right}
chevronOffset={targetChevronOffset} chevronOffset={targetChevronOffset}
/>, />,
); );
const chevron = wrapper.find(".mx_ContextualMenu_chevron_right"); const chevron = wrapper.find(".mx_ContextualMenu_chevron_right");
const actualY = parseInt(wrapper.getDOMNode().style.getPropertyValue("top")); const actualY = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("top")); const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
it("stays within the window", () => { it("stays within the window", () => {
expect(actualY + menuSize).toBeLessThanOrEqual(windowSize); expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
@ -110,19 +117,22 @@ describe("<ContextMenu />", () => {
describe("near left edge of window", () => { describe("near left edge of window", () => {
const targetX = -50; const targetX = -50;
const onFinished = jest.fn();
const wrapper = mount( const wrapper = mount(
<ContextMenu <ContextMenu
top={0} top={0}
right={windowSize - targetX - menuSize} right={windowSize - targetX - menuSize}
chevronFace={ChevronFace.Bottom} chevronFace={ChevronFace.Bottom}
onFinished={onFinished}
chevronOffset={targetChevronOffset} chevronOffset={targetChevronOffset}
/>, />,
); );
const chevron = wrapper.find(".mx_ContextualMenu_chevron_bottom"); const chevron = wrapper.find(".mx_ContextualMenu_chevron_bottom");
const actualX = windowSize - parseInt(wrapper.getDOMNode().style.getPropertyValue("right")) - menuSize; const rightStyle = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("right"));
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("left")); const actualX = windowSize - rightStyle - menuSize;
const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
it("stays within the window", () => { it("stays within the window", () => {
expect(actualX).toBeGreaterThanOrEqual(0); expect(actualX).toBeGreaterThanOrEqual(0);

View file

@ -28,5 +28,9 @@
"./test/utils/**/*.tsx", "./test/utils/**/*.tsx",
"./test/stores/**/*.ts", "./test/stores/**/*.ts",
"./test/stores/**/*.tsx", "./test/stores/**/*.tsx",
"./test/components/structures/**/*.ts",
"./test/components/structures/**/*.tsx",
"./test/components/views/context_menus/**/*.ts",
"./test/components/views/context_menus/**/*.tsx",
], ],
} }