Hide indent button in rte (#10149)

* add conditional rendering for indent and unindent buttons
* bump rte to 1.1.1
This commit is contained in:
alunturner 2023-02-14 11:07:36 +00:00 committed by GitHub
parent 49e0228fa0
commit 18c9b2bed2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 21 deletions

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
@ -40,7 +40,7 @@ const mockWysiwyg = {
const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
const testCases: Record<
Exclude<ActionTypes, "undo" | "redo" | "clear">,
Exclude<ActionTypes, "undo" | "redo" | "clear" | "indent" | "unindent">,
{ label: string; mockFormatFn: jest.Func | jest.SpyInstance }
> = {
bold: { label: "Bold", mockFormatFn: mockWysiwyg.bold },
@ -53,8 +53,6 @@ const testCases: Record<
orderedList: { label: "Numbered list", mockFormatFn: mockWysiwyg.orderedList },
unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },
quote: { label: "Quote", mockFormatFn: mockWysiwyg.quote },
indent: { label: "Indent increase", mockFormatFn: mockWysiwyg.indent },
unIndent: { label: "Indent decrease", mockFormatFn: mockWysiwyg.unIndent },
};
const createActionStates = (state: ActionState): AllActionStates => {
@ -162,4 +160,28 @@ describe("FormattingButtons", () => {
expect(screen.getByLabelText(label)).not.toHaveClass("mx_FormattingButtons_Button_hover");
}
});
it("Does not show indent or unindent button when outside a list", () => {
renderComponent();
expect(screen.queryByLabelText("Indent increase")).not.toBeInTheDocument();
expect(screen.queryByLabelText("Indent decrease")).not.toBeInTheDocument();
});
it("Shows indent and unindent buttons when either a single list type is 'reversed'", () => {
const orderedListActive = { ...defaultActionStates, orderedList: "reversed" };
renderComponent({ actionStates: orderedListActive });
expect(screen.getByLabelText("Indent increase")).toBeInTheDocument();
expect(screen.getByLabelText("Indent decrease")).toBeInTheDocument();
cleanup();
const unorderedListActive = { ...defaultActionStates, unorderedList: "reversed" };
renderComponent({ actionStates: unorderedListActive });
expect(screen.getByLabelText("Indent increase")).toBeInTheDocument();
expect(screen.getByLabelText("Indent decrease")).toBeInTheDocument();
});
});