mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-14 06:46:02 +03:00
daad630827
* Conform more of the codebase to `strictNullChecks` * Conform more of the codebase to `strictNullChecks` * Fix types
253 lines
8.7 KiB
TypeScript
253 lines
8.7 KiB
TypeScript
/*
|
|
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 { screen, render, fireEvent, waitFor, within, act } from "@testing-library/react";
|
|
|
|
import * as TestUtils from "../../test-utils";
|
|
import AutocompleteProvider from "../../../src/autocomplete/AutocompleteProvider";
|
|
import { ICompletion } from "../../../src/autocomplete/Autocompleter";
|
|
import { AutocompleteInput } from "../../../src/components/structures/AutocompleteInput";
|
|
|
|
describe("AutocompleteInput", () => {
|
|
const mockCompletion: ICompletion[] = [
|
|
{
|
|
type: "user",
|
|
completion: "user_1",
|
|
completionId: "@user_1:host.local",
|
|
range: { start: 1, end: 1 },
|
|
component: <div />,
|
|
},
|
|
{
|
|
type: "user",
|
|
completion: "user_2",
|
|
completionId: "@user_2:host.local",
|
|
range: { start: 1, end: 1 },
|
|
component: <div />,
|
|
},
|
|
];
|
|
|
|
const constructMockProvider = (data: ICompletion[]) =>
|
|
({
|
|
getCompletions: jest.fn().mockImplementation(async () => data),
|
|
} as unknown as AutocompleteProvider);
|
|
|
|
beforeEach(() => {
|
|
TestUtils.stubClient();
|
|
});
|
|
|
|
const getEditorInput = () => {
|
|
const input = screen.getByTestId("autocomplete-input");
|
|
expect(input).toBeDefined();
|
|
|
|
return input;
|
|
};
|
|
|
|
it("should render suggestions when a query is set", async () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={[]}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
/>,
|
|
);
|
|
|
|
const input = getEditorInput();
|
|
|
|
act(() => {
|
|
fireEvent.focus(input);
|
|
fireEvent.change(input, { target: { value: "user" } });
|
|
});
|
|
|
|
await waitFor(() => expect(mockProvider.getCompletions).toHaveBeenCalledTimes(1));
|
|
expect(screen.getByTestId("autocomplete-matches").childNodes).toHaveLength(mockCompletion.length);
|
|
});
|
|
|
|
it("should render selected items passed in via props", () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={mockCompletion}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
/>,
|
|
);
|
|
|
|
const editor = screen.getByTestId("autocomplete-editor");
|
|
const selection = within(editor).getAllByTestId("autocomplete-selection-item", { exact: false });
|
|
expect(selection).toHaveLength(mockCompletion.length);
|
|
});
|
|
|
|
it("should call onSelectionChange() when an item is removed from selection", () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={mockCompletion}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
/>,
|
|
);
|
|
|
|
const editor = screen.getByTestId("autocomplete-editor");
|
|
const removeButtons = within(editor).getAllByTestId("autocomplete-selection-remove-button", { exact: false });
|
|
expect(removeButtons).toHaveLength(mockCompletion.length);
|
|
|
|
act(() => {
|
|
fireEvent.click(removeButtons[0]);
|
|
});
|
|
|
|
expect(onSelectionChangeMock).toHaveBeenCalledTimes(1);
|
|
expect(onSelectionChangeMock).toHaveBeenCalledWith([mockCompletion[1]]);
|
|
});
|
|
|
|
it("should render custom selection element when renderSelection() is defined", () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
const renderSelection = () => <span data-testid="custom-selection-element">custom selection element</span>;
|
|
|
|
render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={mockCompletion}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
renderSelection={renderSelection}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getAllByTestId("custom-selection-element")).toHaveLength(mockCompletion.length);
|
|
});
|
|
|
|
it("should render custom suggestion element when renderSuggestion() is defined", async () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
const renderSuggestion = () => <span data-testid="custom-suggestion-element">custom suggestion element</span>;
|
|
|
|
render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={mockCompletion}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
renderSuggestion={renderSuggestion}
|
|
/>,
|
|
);
|
|
|
|
const input = getEditorInput();
|
|
|
|
act(() => {
|
|
fireEvent.focus(input);
|
|
fireEvent.change(input, { target: { value: "user" } });
|
|
});
|
|
|
|
await waitFor(() => expect(mockProvider.getCompletions).toHaveBeenCalledTimes(1));
|
|
expect(screen.getAllByTestId("custom-suggestion-element")).toHaveLength(mockCompletion.length);
|
|
});
|
|
|
|
it("should mark selected suggestions as selected", async () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
const { container } = render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={mockCompletion}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
/>,
|
|
);
|
|
|
|
const input = getEditorInput();
|
|
|
|
act(() => {
|
|
fireEvent.focus(input);
|
|
fireEvent.change(input, { target: { value: "user" } });
|
|
});
|
|
|
|
await waitFor(() => expect(mockProvider.getCompletions).toHaveBeenCalledTimes(1));
|
|
const suggestions = await within(container).findAllByTestId("autocomplete-suggestion-item", { exact: false });
|
|
expect(suggestions).toHaveLength(mockCompletion.length);
|
|
suggestions.map((suggestion) => expect(suggestion).toHaveClass("mx_AutocompleteInput_suggestion--selected"));
|
|
});
|
|
|
|
it("should remove the last added selection when backspace is pressed in empty input", () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={mockCompletion}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
/>,
|
|
);
|
|
|
|
const input = getEditorInput();
|
|
|
|
act(() => {
|
|
fireEvent.keyDown(input, { key: "Backspace" });
|
|
});
|
|
|
|
expect(onSelectionChangeMock).toHaveBeenCalledWith([mockCompletion[0]]);
|
|
});
|
|
|
|
it("should toggle a selected item when a suggestion is clicked", async () => {
|
|
const mockProvider = constructMockProvider(mockCompletion);
|
|
const onSelectionChangeMock = jest.fn();
|
|
|
|
const { container } = render(
|
|
<AutocompleteInput
|
|
provider={mockProvider}
|
|
placeholder="Search ..."
|
|
selection={[]}
|
|
onSelectionChange={onSelectionChangeMock}
|
|
/>,
|
|
);
|
|
|
|
const input = getEditorInput();
|
|
|
|
act(() => {
|
|
fireEvent.focus(input);
|
|
fireEvent.change(input, { target: { value: "user" } });
|
|
});
|
|
|
|
const suggestions = await within(container).findAllByTestId("autocomplete-suggestion-item", { exact: false });
|
|
|
|
act(() => {
|
|
fireEvent.mouseDown(suggestions[0]);
|
|
});
|
|
|
|
expect(onSelectionChangeMock).toHaveBeenCalledWith([mockCompletion[0]]);
|
|
});
|
|
|
|
afterAll(() => {
|
|
jest.clearAllMocks();
|
|
jest.resetModules();
|
|
});
|
|
});
|