Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Update composer.spec.ts to use findBy* type queries #10538

Merged
merged 2 commits into from
Apr 11, 2023
Merged

Update composer.spec.ts to use findBy* type queries #10538

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c85c2c4
Update composer.spec.ts - deprecate custom commands
luixxiul Apr 6, 2023
4f66a81
Update composer.spec.ts - apply findByText() and findByTestId()
luixxiul Apr 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 50 additions & 28 deletions cypress/e2e/composer/composer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,41 +42,49 @@ describe("Composer", () => {

it("sends a message when you click send or press Enter", () => {
// Type a message
cy.findTextbox("Send a message…").type("my message 0");
cy.findByRole("textbox", { name: "Send a message…" }).type("my message 0");
// It has not been sent yet
cy.contains(".mx_EventTile_body", "my message 0").should("not.exist");

// Click send
cy.findButton("Send message").click();
cy.findByRole("button", { name: "Send message" }).click();
// It has been sent
cy.contains(".mx_EventTile_body", "my message 0");
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 0").should("exist");
});

// Type another and press Enter afterwards
cy.findTextbox("Send a message…").type("my message 1{enter}");
cy.findByRole("textbox", { name: "Send a message…" }).type("my message 1{enter}");
// It was sent
cy.contains(".mx_EventTile_body", "my message 1");
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 1").should("exist");
});
});

it("can write formatted text", () => {
cy.findTextbox("Send a message…").type("my bold{ctrl+b} message");
cy.findButton("Send message").click();
cy.findByRole("textbox", { name: "Send a message…" }).type("my bold{ctrl+b} message");
cy.findByRole("button", { name: "Send message" }).click();
// Note: both "bold" and "message" are bold, which is probably surprising
cy.contains(".mx_EventTile_body strong", "bold message");
cy.get(".mx_EventTile_body strong").within(() => {
cy.findByText("bold message").should("exist");
});
});

it("should allow user to input emoji via graphical picker", () => {
cy.getComposer(false).within(() => {
cy.findButton("Emoji").click();
cy.findByRole("button", { name: "Emoji" }).click();
});

cy.get('[data-testid="mx_EmojiPicker"]').within(() => {
cy.findByTestId("mx_EmojiPicker").within(() => {
cy.contains(".mx_EmojiPicker_item", "😇").click();
});

cy.get(".mx_ContextualMenu_background").click(); // Close emoji picker
cy.findTextbox("Send a message…").type("{enter}"); // Send message
cy.findByRole("textbox", { name: "Send a message…" }).type("{enter}"); // Send message

cy.contains(".mx_EventTile_body", "😇");
cy.get(".mx_EventTile_body").within(() => {
cy.findByText("😇");
});
});

describe("when Ctrl+Enter is required to send", () => {
Expand All @@ -86,14 +94,16 @@ describe("Composer", () => {

it("only sends when you press Ctrl+Enter", () => {
// Type a message and press Enter
cy.findTextbox("Send a message…").type("my message 3{enter}");
cy.findByRole("textbox", { name: "Send a message…" }).type("my message 3{enter}");
// It has not been sent yet
cy.contains(".mx_EventTile_body", "my message 3").should("not.exist");

// Press Ctrl+Enter
cy.findTextbox("Send a message…").type("{ctrl+enter}");
cy.findByRole("textbox", { name: "Send a message…" }).type("{ctrl+enter}");
// It was sent
cy.contains(".mx_EventTile_body", "my message 3");
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 3").should("exist");
});
});
});
});
Expand All @@ -114,16 +124,20 @@ describe("Composer", () => {
cy.contains(".mx_EventTile_body", "my message 0").should("not.exist");

// Click send
cy.findButton("Send message").click();
cy.findByRole("button", { name: "Send message" }).click();
// It has been sent
cy.contains(".mx_EventTile_body", "my message 0");
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 0").should("exist");
});

// Type another
cy.get("div[contenteditable=true]").type("my message 1");
// Send message
cy.get("div[contenteditable=true]").type("{enter}");
// It was sent
cy.contains(".mx_EventTile_body", "my message 1");
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 1").should("exist");
});
});

it("sends only one message when you press Enter multiple times", () => {
Expand All @@ -137,14 +151,18 @@ describe("Composer", () => {
cy.get("div[contenteditable=true]").type("{enter}");
cy.get("div[contenteditable=true]").type("{enter}");
// It has been sent
cy.contains(".mx_EventTile_body", "my message 0");
cy.get(".mx_EventTile_body").should("have.length", 1);
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 0").should("exist");
});
cy.get(".mx_EventTile_last .mx_EventTile_body").should("have.length", 1);
});

it("can write formatted text", () => {
cy.get("div[contenteditable=true]").type("my {ctrl+b}bold{ctrl+b} message");
cy.findButton("Send message").click();
cy.contains(".mx_EventTile_body strong", "bold");
cy.findByRole("button", { name: "Send message" }).click();
cy.get(".mx_EventTile_body strong").within(() => {
cy.findByText("bold").should("exist");
});
});

describe("when Ctrl+Enter is required to send", () => {
Expand All @@ -162,7 +180,9 @@ describe("Composer", () => {
// Press Ctrl+Enter
cy.get("div[contenteditable=true]").type("{ctrl+enter}");
// It was sent
cy.contains(".mx_EventTile_body", "my message 3");
cy.get(".mx_EventTile_last .mx_EventTile_body").within(() => {
cy.findByText("my message 3").should("exist");
});
});
});

Expand All @@ -172,16 +192,18 @@ describe("Composer", () => {
cy.get("div[contenteditable=true]").type("my message 0{selectAll}");

// Open link modal
cy.findButton("Link").click();
cy.findByRole("button", { name: "Link" }).click();
// Fill the link field
cy.findTextbox("Link").type("https://matrix.org/");
cy.findByRole("textbox", { name: "Link" }).type("https://matrix.org/");
// Click on save
cy.findButton("Save").click();
cy.findByRole("button", { name: "Save" }).click();
// Send the message
cy.findButton("Send message").click();
cy.findByRole("button", { name: "Send message" }).click();

// It was sent
cy.contains(".mx_EventTile_body a", "my message 0");
cy.get(".mx_EventTile_body a").within(() => {
cy.findByText("my message 0").should("exist");
});
cy.get(".mx_EventTile_body a").should("have.attr", "href").and("include", "https://matrix.org/");
});
});
Expand Down