From f8c4b053487a89b9e224d48b5e88024b034f599f Mon Sep 17 00:00:00 2001 From: EECvision Date: Fri, 8 Apr 2022 12:05:39 +0100 Subject: [PATCH 1/4] fix timeline search with empty text box should do nothing --- src/components/views/rooms/SearchBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx index c42131bba04..20a9e081a0c 100644 --- a/src/components/views/rooms/SearchBar.tsx +++ b/src/components/views/rooms/SearchBar.tsx @@ -78,6 +78,7 @@ export default class SearchBar extends React.Component { } private onSearch = (): void => { + if (!this.searchTerm.current.value.trim()) return; this.props.onSearch(this.searchTerm.current.value, this.state.scope); }; From 076e3765ec0c22d2df19b3934b9536c8797d9d1a Mon Sep 17 00:00:00 2001 From: EECvision Date: Sat, 16 Apr 2022 02:29:35 +0100 Subject: [PATCH 2/4] test SearchBar component --- .../components/views/rooms/SearchBar-test.tsx | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 test/components/views/rooms/SearchBar-test.tsx diff --git a/test/components/views/rooms/SearchBar-test.tsx b/test/components/views/rooms/SearchBar-test.tsx new file mode 100644 index 00000000000..3d1ab527841 --- /dev/null +++ b/test/components/views/rooms/SearchBar-test.tsx @@ -0,0 +1,136 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import { mount } from "enzyme"; + +import DesktopBuildsNotice from "../../../../src/components/views/elements/DesktopBuildsNotice"; +import { PosthogScreenTracker } from "../../../../src/PosthogTrackers"; +import SearchBar, { SearchScope } from "../../../../src/components/views/rooms/SearchBar"; +import { KeyBindingAction } from "../../../../src/accessibility/KeyboardShortcuts"; + +let mockCurrentEvent = KeyBindingAction.Enter; +let mockWarningKind = true; +let wrapper: any = null; + +const searchProps = { + onCancelClick: jest.fn(), + onSearch: jest.fn(), + searchInProgress: false, + isRoomEncrypted: false +}; + +jest.mock("../../../../src/KeyBindingsManager", () => ({ + __esModule: true, + getKeyBindingsManager: jest.fn(() => ( + { getAccessibilityAction: jest.fn(() => mockCurrentEvent) })) +})); + +/** mock out DesktopBuildsNotice component so it doesn't affect the result of our test */ +jest.mock('../../../../src/components/views/elements/DesktopBuildsNotice', () => ({ + __esModule: true, + WarningKind: { + get Search() { + return mockWarningKind; + } + }, + default: jest.fn(({ children }) => ( +
{children}
+ )), +})); + +/** mock out PosthogTrackers component so it doesn't affect the result of our test */ +jest.mock('../../../../src/PosthogTrackers', () => ({ + __esModule: true, + PosthogScreenTracker: jest.fn(({ children }) => ( +
{children}
+ )), +})); + + +describe("SearchBar", () => { + beforeEach(() => { + wrapper = mount() + }); + + afterEach(() => { + wrapper.unmount(); + searchProps.onCancelClick.mockClear(); + searchProps.onSearch.mockClear(); + }); + + it("must render child components and pass necessary props", () => { + const post_hog_screen_tracker = wrapper.find(PosthogScreenTracker); + const desktop_build_notice = wrapper.find(DesktopBuildsNotice); + + expect(post_hog_screen_tracker.length).toBe(1); + expect(desktop_build_notice.length).toBe(1); + expect(post_hog_screen_tracker.props().screenName).toEqual("RoomSearch"); + expect(desktop_build_notice.props().isRoomEncrypted).toEqual(searchProps.isRoomEncrypted); + expect(desktop_build_notice.props().kind).toEqual(mockWarningKind); + }); + + it("must not search when input value is empty", () => { + const roomButtons = wrapper.find(".mx_SearchBar_button"); + const searchButton = wrapper.find(".mx_SearchBar_searchButton"); + + expect(roomButtons.length).toEqual(4); + + searchButton.at(0).simulate("click"); + roomButtons.at(0).simulate("click"); + roomButtons.at(2).simulate("click"); + + expect(searchProps.onSearch).not.toHaveBeenCalled(); + }); + + it("must trigger onSearch when value is not empty", () => { + const searchValue = "abcd"; + + const roomButtons = wrapper.find(".mx_SearchBar_button"); + const searchButton = wrapper.find(".mx_SearchBar_searchButton"); + const input = wrapper.find(".mx_SearchBar_input input"); + input.instance().value = searchValue; + + expect(roomButtons.length).toEqual(4); + + searchButton.at(0).simulate("click"); + + expect(searchProps.onSearch).toHaveBeenCalledTimes(1); + expect(searchProps.onSearch).toHaveBeenNthCalledWith(1, searchValue, SearchScope.Room); + + roomButtons.at(0).simulate("click"); + + expect(searchProps.onSearch).toHaveBeenCalledTimes(2); + expect(searchProps.onSearch).toHaveBeenNthCalledWith(2, searchValue, SearchScope.Room); + + roomButtons.at(2).simulate("click"); + + expect(searchProps.onSearch).toHaveBeenCalledTimes(3); + expect(searchProps.onSearch).toHaveBeenNthCalledWith(3, searchValue, SearchScope.All); + }); + + it("cancel button and esc key should trigger onCancelClick", () => { + + mockCurrentEvent = KeyBindingAction.Escape; + const cancelButton = wrapper.find(".mx_SearchBar_cancel"); + const input = wrapper.find(".mx_SearchBar_input input"); + input.simulate("focus"); + input.simulate("keydown", { key: "ESC" }); + cancelButton.at(0).simulate("click"); + + expect(searchProps.onCancelClick).toHaveBeenCalledTimes(2); + }) +}); \ No newline at end of file From aae1dcd8f78eceecb09ff52b7e2f325be204b0a7 Mon Sep 17 00:00:00 2001 From: EECvision Date: Mon, 18 Apr 2022 19:06:31 +0100 Subject: [PATCH 3/4] fix lint error --- .../components/views/rooms/SearchBar-test.tsx | 150 +++++++++--------- 1 file changed, 74 insertions(+), 76 deletions(-) diff --git a/test/components/views/rooms/SearchBar-test.tsx b/test/components/views/rooms/SearchBar-test.tsx index 3d1ab527841..5e19304ca88 100644 --- a/test/components/views/rooms/SearchBar-test.tsx +++ b/test/components/views/rooms/SearchBar-test.tsx @@ -23,114 +23,112 @@ import SearchBar, { SearchScope } from "../../../../src/components/views/rooms/S import { KeyBindingAction } from "../../../../src/accessibility/KeyboardShortcuts"; let mockCurrentEvent = KeyBindingAction.Enter; -let mockWarningKind = true; +const mockWarningKind = true; let wrapper: any = null; const searchProps = { - onCancelClick: jest.fn(), - onSearch: jest.fn(), - searchInProgress: false, - isRoomEncrypted: false + onCancelClick: jest.fn(), + onSearch: jest.fn(), + searchInProgress: false, + isRoomEncrypted: false, }; jest.mock("../../../../src/KeyBindingsManager", () => ({ - __esModule: true, - getKeyBindingsManager: jest.fn(() => ( - { getAccessibilityAction: jest.fn(() => mockCurrentEvent) })) + __esModule: true, + getKeyBindingsManager: jest.fn(() => ( + { getAccessibilityAction: jest.fn(() => mockCurrentEvent) })), })); /** mock out DesktopBuildsNotice component so it doesn't affect the result of our test */ jest.mock('../../../../src/components/views/elements/DesktopBuildsNotice', () => ({ - __esModule: true, - WarningKind: { - get Search() { - return mockWarningKind; - } - }, - default: jest.fn(({ children }) => ( -
{children}
- )), + __esModule: true, + WarningKind: { + get Search() { // eslint-disable-line @typescript-eslint/naming-convention + return mockWarningKind; + }, + }, + default: jest.fn(({ children }) => ( +
{ children }
+ )), })); /** mock out PosthogTrackers component so it doesn't affect the result of our test */ jest.mock('../../../../src/PosthogTrackers', () => ({ - __esModule: true, - PosthogScreenTracker: jest.fn(({ children }) => ( -
{children}
- )), + __esModule: true, + PosthogScreenTracker: jest.fn(({ children }) => ( +
{ children }
+ )), })); - describe("SearchBar", () => { - beforeEach(() => { - wrapper = mount() - }); - - afterEach(() => { - wrapper.unmount(); - searchProps.onCancelClick.mockClear(); - searchProps.onSearch.mockClear(); - }); + beforeEach(() => { + wrapper = mount(); + }); - it("must render child components and pass necessary props", () => { - const post_hog_screen_tracker = wrapper.find(PosthogScreenTracker); - const desktop_build_notice = wrapper.find(DesktopBuildsNotice); + afterEach(() => { + wrapper.unmount(); + searchProps.onCancelClick.mockClear(); + searchProps.onSearch.mockClear(); + }); - expect(post_hog_screen_tracker.length).toBe(1); - expect(desktop_build_notice.length).toBe(1); - expect(post_hog_screen_tracker.props().screenName).toEqual("RoomSearch"); - expect(desktop_build_notice.props().isRoomEncrypted).toEqual(searchProps.isRoomEncrypted); - expect(desktop_build_notice.props().kind).toEqual(mockWarningKind); - }); + it("must render child components and pass necessary props", () => { + const postHogScreenTracker = wrapper.find(PosthogScreenTracker); + const desktopBuildNotice = wrapper.find(DesktopBuildsNotice); - it("must not search when input value is empty", () => { - const roomButtons = wrapper.find(".mx_SearchBar_button"); - const searchButton = wrapper.find(".mx_SearchBar_searchButton"); + expect(postHogScreenTracker.length).toBe(1); + expect(desktopBuildNotice.length).toBe(1); + expect(postHogScreenTracker.props().screenName).toEqual("RoomSearch"); + expect(desktopBuildNotice.props().isRoomEncrypted).toEqual(searchProps.isRoomEncrypted); + expect(desktopBuildNotice.props().kind).toEqual(mockWarningKind); + }); - expect(roomButtons.length).toEqual(4); + it("must not search when input value is empty", () => { + const roomButtons = wrapper.find(".mx_SearchBar_button"); + const searchButton = wrapper.find(".mx_SearchBar_searchButton"); - searchButton.at(0).simulate("click"); - roomButtons.at(0).simulate("click"); - roomButtons.at(2).simulate("click"); + expect(roomButtons.length).toEqual(4); - expect(searchProps.onSearch).not.toHaveBeenCalled(); - }); + searchButton.at(0).simulate("click"); + roomButtons.at(0).simulate("click"); + roomButtons.at(2).simulate("click"); - it("must trigger onSearch when value is not empty", () => { - const searchValue = "abcd"; + expect(searchProps.onSearch).not.toHaveBeenCalled(); + }); - const roomButtons = wrapper.find(".mx_SearchBar_button"); - const searchButton = wrapper.find(".mx_SearchBar_searchButton"); - const input = wrapper.find(".mx_SearchBar_input input"); - input.instance().value = searchValue; + it("must trigger onSearch when value is not empty", () => { + const searchValue = "abcd"; - expect(roomButtons.length).toEqual(4); + const roomButtons = wrapper.find(".mx_SearchBar_button"); + const searchButton = wrapper.find(".mx_SearchBar_searchButton"); + const input = wrapper.find(".mx_SearchBar_input input"); + input.instance().value = searchValue; - searchButton.at(0).simulate("click"); + expect(roomButtons.length).toEqual(4); - expect(searchProps.onSearch).toHaveBeenCalledTimes(1); - expect(searchProps.onSearch).toHaveBeenNthCalledWith(1, searchValue, SearchScope.Room); + searchButton.at(0).simulate("click"); - roomButtons.at(0).simulate("click"); + expect(searchProps.onSearch).toHaveBeenCalledTimes(1); + expect(searchProps.onSearch).toHaveBeenNthCalledWith(1, searchValue, SearchScope.Room); - expect(searchProps.onSearch).toHaveBeenCalledTimes(2); - expect(searchProps.onSearch).toHaveBeenNthCalledWith(2, searchValue, SearchScope.Room); + roomButtons.at(0).simulate("click"); - roomButtons.at(2).simulate("click"); + expect(searchProps.onSearch).toHaveBeenCalledTimes(2); + expect(searchProps.onSearch).toHaveBeenNthCalledWith(2, searchValue, SearchScope.Room); - expect(searchProps.onSearch).toHaveBeenCalledTimes(3); - expect(searchProps.onSearch).toHaveBeenNthCalledWith(3, searchValue, SearchScope.All); - }); + roomButtons.at(2).simulate("click"); - it("cancel button and esc key should trigger onCancelClick", () => { + expect(searchProps.onSearch).toHaveBeenCalledTimes(3); + expect(searchProps.onSearch).toHaveBeenNthCalledWith(3, searchValue, SearchScope.All); + }); - mockCurrentEvent = KeyBindingAction.Escape; - const cancelButton = wrapper.find(".mx_SearchBar_cancel"); - const input = wrapper.find(".mx_SearchBar_input input"); - input.simulate("focus"); - input.simulate("keydown", { key: "ESC" }); - cancelButton.at(0).simulate("click"); + it("cancel button and esc key should trigger onCancelClick", () => { + mockCurrentEvent = KeyBindingAction.Escape; + const cancelButton = wrapper.find(".mx_SearchBar_cancel"); + const input = wrapper.find(".mx_SearchBar_input input"); + input.simulate("focus"); + input.simulate("keydown", { key: "ESC" }); + cancelButton.at(0).simulate("click"); - expect(searchProps.onCancelClick).toHaveBeenCalledTimes(2); - }) -}); \ No newline at end of file + expect(searchProps.onCancelClick).toHaveBeenCalledTimes(2); + }); +}); From 5eb0ca79057e3c3e7ea4857f243d2a6f4525c29d Mon Sep 17 00:00:00 2001 From: Emmanuel <63562663+EECvision@users.noreply.github.com> Date: Wed, 20 Apr 2022 11:51:34 +0100 Subject: [PATCH 4/4] Update SearchBar-test.tsx --- test/components/views/rooms/SearchBar-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/rooms/SearchBar-test.tsx b/test/components/views/rooms/SearchBar-test.tsx index 5e19304ca88..b72f838bb9a 100644 --- a/test/components/views/rooms/SearchBar-test.tsx +++ b/test/components/views/rooms/SearchBar-test.tsx @@ -1,5 +1,5 @@ /* -Copyright 2022 The Matrix.org Foundation C.I.C. +Copyright 2022 Emmanuel Ezeka Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.