Add E2E test of `MessageEditHistoryDialog` #10406

luixxiul · 2023-03-18T17:17:27Z

This PR intends to add E2E test of MessageEditHistoryDialog.

The main intention of this PR is to make sure that EventTiles on the dialog keep being rendered in the same way after mx_EventTile:not([data-layout=bubble]) is removed from _EventTile.pcss.

Closes element-hq/element-web#24902

For #9033 (checking EventTiles on MessageEditHistoryDialog)

type: task

Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see CONTRIBUTING.md)

This change is marked as an internal change (Task), so will not be included in the changelog.

cypress/e2e/editing/editing.spec.ts

+        cy.get(".mx_RoomView_MessageList").percySnapshotElement("Edited message on IRC layout", { percyCSS });
+        cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
+        cy.get(".mx_RoomView_MessageList").percySnapshotElement("Edited message on modern layout", { percyCSS });
+        cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true);
+        cy.get(".mx_RoomView_MessageList").percySnapshotElement("Edited message on compact modern layout", {
+            percyCSS,
+        });
+        cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, false); // Cancel the compact modern layout
+        cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
+        cy.get(".mx_RoomView_MessageList").percySnapshotElement("Edited message on bubble layout", { percyCSS });


Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

luixxiul · 2023-03-23T07:47:43Z

src/components/views/messages/EditHistoryMessage.tsx

+        const classes = classNames("mx_MessageActionBar", {
+            "mx_MessageActionBar--developer--not": !SettingsStore.getValue("developerMode"),
+        });
+


This should have not been added here. Removing...

This was removed with 77db44c.

weeman1337

Thank you for your contribution @luixxiul

Please have a look at my comments. I am happy to discuss any of them if you have a different opinion

weeman1337 · 2023-03-23T08:05:16Z

cypress/e2e/editing/editing.spec.ts

+                // Assert that the edited message is rendered
+                cy.get("li:nth-child(2) .mx_EventTile").within(() => {
+                    cy.get(".mx_EventTile_content").within(() => {
+                        cy.get(".mx_EventTile_body").should("have.text", "Meassage");


Can you add a comment why it is „Meassage“ here?
Took me some moments to understand ⌛

Ah right, it should be noted (as Message and Massage and Meassage are all resemble :-D)

This commit b930982 added a comment to explain it.

weeman1337 · 2023-03-23T08:07:00Z

cypress/e2e/editing/editing.spec.ts

+        const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+
+        // Take a snapshot
+        cy.get(".mx_Dialog .mx_MessageEditHistoryDialog").percySnapshotElement("Message edit history dialog", {


Are all the CSS checks probably unnecessary if a snapshot is taken here?
If we change the CSS structure this test will fail, even if the resulting view is the same.
In my opinion we should me more interested about the result here.

I would agree with that checking these CSS styles of .mx_EventTile is unnecessary here, as they are not overridden by _MessageEditHistoryDialog.pcss.

Rather, this line below should be checked in case of a regression after removing !important flag eventually, considering Percy test is not going to be executed on each commit:

matrix-react-sdk/res/css/views/dialogs/_MessageEditHistoryDialog.pcss

Line 57 in 5c47142

padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */

Since we do not have a Percy test for timestamps yet (timestamps are hidden to prevent a flaky result), checking their style rules should be worth. I cannot remember exactly when, but I think the position has regressed once due to an issue related to CSS style rules inheritance.

This commit 203c8c8 addresses this. It removes redundant checks, saving ones for style rules which are hard to detect or cannot be detected with a snapshot.

weeman1337 · 2023-03-23T08:08:05Z

cypress/e2e/editing/editing.spec.ts

+            widths: [704], // See: .mx_Dialog_fixedWidth max-width
+        });
+
+        cy.get(".mx_Dialog").within(() => {


Is it possible to join the three within?

Something like

cy.get(".mx_Dialog .mx_MessageEditHistoryDialog li:nth-child(2) .mx_EventTile").within(() => {

(may also apply to other places)

I found there were cases which actually should be joined. Working on it..

This commit 5c58427 addresses this. It does not join every within for readability and to clarify the relationship between mx_TextInputDialog and mx_MessageEditHistoryDialog under mx_Dialog.

weeman1337 · 2023-03-23T08:18:33Z

cypress/e2e/editing/editing.spec.ts

+                });
+
+                // Assert that the edited message is gone
+                cy.get("li:nth-child(3) .mx_EventTile").should("not.exist");


It would probably be better to check for the non-existence of „Meassage“ here.
The test already heavily relies on CSS structure.
At least in this particular place it can be avoided.

I'd agree, let me check how it should be changed...

This commit a457fd0 addresses this.

weeman1337 · 2023-03-23T08:21:47Z

cypress/e2e/editing/editing.spec.ts

+        // Send "Message"
+        sendEvent(roomId);
+
+        cy.get(".mx_RoomView_MessageList").within(() => {


Can you try to extract shared code to their own functions?
This would make the tests better maintainable.

I've added some functions:

editLastMessage()

clickButtonRemove()

clickButtonViewSource()

clickEditedMessage()

luixxiul · 2023-03-23T10:32:57Z

cypress/e2e/editing/editing.spec.ts

+                    .should("have.css", "position", "absolute")
+                    .should("have.css", "inset-inline-start", "0px")
+                    .should("have.css", "text-align", "center");
+                cy.get(".mx_EventTile .mx_EventTile_content").should("have.css", "margin-inline-end", "0px");


This line also should be checked because this margin value is specific to the message edit history dialog (See this line for comparison) and it is difficult to detect a regression with a snapshot because text-align is not set to justify, which makes it hard to judge whether the margin setting is really respected or a line is wrapped just because of the length of a word, even if we use a sentence long enough to be wrapped as an example.

For comparison, languages such as Chinese/Japanese/Korean do not have the concept of wrapping a sentence based on the word length, nor hyphenation, therefore any sentence uses every space available inside a line before being wrapped (ie. the same number of characters on each line inside a paragraph), which essentially means that every wrapped sentence is aligned to be justified. This it not perfectly correct, but you could regard CJK characters as monospace in most cases. Therefore checking the margin here makes sense for those languages.

This also means that using a sample text in CJK would make it unnecessary to check this value, but I think it is not practical, considering the possibility of outputting tofu characters if your computer does not have a CJK font, etc., which increases the possibility of flaky test results.

1336573 adds a comment about this.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…he existing cases Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

luixxiul · 2023-03-23T13:01:51Z

cypress/e2e/editing/editing.spec.ts

+
+                // Assert that zero block start padding is applied to mx_EventTile as expected
+                // See: .mx_EventTile on _EventTile.pcss
+                cy.get(".mx_EventTile").should("have.css", "padding-block-start", "0px");


This is for #9033 (checking EventTiles on MessageEditHistoryDialog), one of the main aims of this PR.

weeman1337

Thanks for adding the test @luixxiul

weeman1337 · 2023-03-27T08:38:40Z

cypress/e2e/editing/editing.spec.ts

        });

+        // Disable developer mode
+        cy.setSettingValue("developerMode", null, SettingLevel.ACCOUNT, false);


This should not be necessary as we start with a fresh account every time.

That is right. It was removed by 952f370.

weeman1337

Lets wait for a Percy run.

weeman1337

@luixxiul can you push an empty commit to trigger CI again with Percy?

(Would be nice if you can enable „Allow edit by maintainers“ for your PRs. This can speed up things in some cases.)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Have Percy take a snapshot of the dialog including its wrapper. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

luixxiul · 2023-03-27T15:43:51Z

The latest result indeed looks better (the timestamps next to the messages are hidden):

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

weeman1337

Thanks @luixxiul . Looks good now.

luixxiul · 2023-03-30T06:46:28Z

@weeman1337 Thanks for the review!

github-actions bot added Z-Community-PR Issue is solved by a community member's PR T-Task Refactoring, enabling or disabling functionality, other engineering tasks labels Mar 18, 2023

github-actions bot deployed to Netlify March 18, 2023 17:21 View deployment

luixxiul changed the title ~~Add E2E test of MessageEditHistoryDialog~~ Add E2E test of MessageEditHistoryDialog Mar 18, 2023

luixxiul marked this pull request as ready for review March 18, 2023 18:01

luixxiul requested a review from a team as a code owner March 18, 2023 18:01

luixxiul requested review from weeman1337 and alunturner March 18, 2023 18:01

luixxiul commented Mar 22, 2023

View reviewed changes

This comment was marked as outdated.

Sign in to view

github-actions bot deployed to Netlify March 23, 2023 07:09 View deployment

luixxiul added 3 commits March 23, 2023 16:24

Add E2E test of MessageEditHistoryDialog

77a996b

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Check 'View Source' button is rendered only in developer mode

321ee18

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Change order of checking event tiles

743da81

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

github-actions bot deployed to Netlify March 23, 2023 07:32 View deployment

luixxiul commented Mar 23, 2023

View reviewed changes

weeman1337 suggested changes Mar 23, 2023

View reviewed changes

luixxiul commented Mar 23, 2023

View reviewed changes

luixxiul added 2 commits March 23, 2023 19:48

Add comments to explain how the message was edited

b930982

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Revert unintended change on EditHistoryMessage.tsx

77db44c

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

github-actions bot deployed to Netlify March 23, 2023 10:54 View deployment

luixxiul added 9 commits March 23, 2023 21:37

Assert that the edited message is gone

a457fd0

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Check '.mx_EventTile_content .mx_EventTile_body' in the same way as t…

bae7a35

…he existing cases Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Add clickButtonRemove()

c990e11

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Add editLastMessage()

ec61512

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Add clickEditedMessage()

5889894

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Edit within() to simplify the structure

5c58427

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Remove redundant CSS checks

203c8c8

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Add clickButtonViewSource()

bdad116

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Edit comments

475571c

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

github-actions bot deployed to Netlify March 23, 2023 12:44 View deployment

github-actions bot deployed to Netlify March 23, 2023 12:48 View deployment

lint

6fb5b36

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

luixxiul commented Mar 23, 2023

View reviewed changes

github-actions bot deployed to Netlify March 23, 2023 13:03 View deployment

luixxiul requested review from weeman1337 and removed request for alunturner March 23, 2023 13:18

luixxiul mentioned this pull request Mar 24, 2023

Hide empty MessageActionBar on message edit history dialog #10447

Merged

3 tasks

weeman1337 approved these changes Mar 27, 2023

View reviewed changes

weeman1337 added the X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue label Mar 27, 2023

weeman1337 reviewed Mar 27, 2023

View reviewed changes

weeman1337 suggested changes Mar 27, 2023

View reviewed changes

Merge branch 'develop' into test-message-edit-dialog

1c43a5e

github-actions bot deployed to Netlify March 27, 2023 09:57 View deployment

Remove setSettingValue of developerMode

952f370

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

This comment was marked as outdated.

Sign in to view

github-actions bot deployed to Netlify March 27, 2023 10:16 View deployment

This comment was marked as resolved.

Sign in to view

luixxiul added 3 commits March 27, 2023 23:59

Add a comment

1336573

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Fix the scope of a snapshot

84918ca

Have Percy take a snapshot of the dialog including its wrapper. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Merge branch 'develop' into test-message-edit-dialog

3abff3b

github-actions bot deployed to Netlify March 27, 2023 15:09 View deployment

Use cy.closeDialog()

58fbde1

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

luixxiul requested a review from weeman1337 March 27, 2023 16:18

github-actions bot deployed to Netlify March 27, 2023 16:19 View deployment

weeman1337 approved these changes Mar 30, 2023

View reviewed changes

weeman1337 merged commit beb8861 into matrix-org:develop Mar 30, 2023

luixxiul deleted the test-message-edit-dialog branch March 30, 2023 09:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add E2E test of `MessageEditHistoryDialog` #10406

Add E2E test of `MessageEditHistoryDialog` #10406

luixxiul commented Mar 18, 2023 •

edited by github-actions bot

Loading

This comment was marked as outdated.

This comment was marked as outdated.

luixxiul Mar 23, 2023

luixxiul Mar 23, 2023

weeman1337 left a comment

weeman1337 Mar 23, 2023

luixxiul Mar 23, 2023

luixxiul Mar 23, 2023

weeman1337 Mar 23, 2023

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

weeman1337 Mar 23, 2023

This comment was marked as outdated.

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

weeman1337 Mar 23, 2023

luixxiul Mar 23, 2023

luixxiul Mar 23, 2023

weeman1337 Mar 23, 2023

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 27, 2023

luixxiul Mar 23, 2023

weeman1337 left a comment

weeman1337 Mar 27, 2023

luixxiul Mar 27, 2023

weeman1337 left a comment

weeman1337 left a comment

This comment was marked as outdated.

This comment was marked as resolved.

luixxiul commented Mar 27, 2023 •

edited

Loading

weeman1337 left a comment

luixxiul commented Mar 30, 2023

Add E2E test of MessageEditHistoryDialog #10406

Add E2E test of MessageEditHistoryDialog #10406

Conversation

luixxiul commented Mar 18, 2023 • edited by github-actions bot Loading

Checklist

This comment was marked as outdated.

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weeman1337 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luixxiul Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

luixxiul Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

luixxiul Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

luixxiul Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luixxiul Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

luixxiul Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weeman1337 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weeman1337 left a comment

Choose a reason for hiding this comment

weeman1337 left a comment

Choose a reason for hiding this comment

This comment was marked as outdated.

This comment was marked as resolved.

luixxiul commented Mar 27, 2023 • edited Loading

weeman1337 left a comment

Choose a reason for hiding this comment

luixxiul commented Mar 30, 2023

Add E2E test of `MessageEditHistoryDialog` #10406

Add E2E test of `MessageEditHistoryDialog` #10406

luixxiul commented Mar 18, 2023 •

edited by github-actions bot

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul Mar 23, 2023 •

edited

Loading

luixxiul commented Mar 27, 2023 •

edited

Loading