mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 10:45:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Edit a test to check timestamp color's value on timeline and thread panel (#10265)

Browse source 
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-03-02 17:14:41 +00:00 committed by GitHub
parent 1c2571bf89
commit 0e52729083
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
cypress/e2e/threads/threads.spec.ts
View file

@ -54,9 +54,20 @@ describe("Threads", () => {
cy.visit("/#/room/" + roomId);
});
// --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
// See: _MessageTimestamp.pcss
const MessageTimestampColor = "rgb(172, 172, 172)";
// User sends message
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
// Check the colour of timestamp on the main timeline
cy.get(".mx_RoomView_body .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
"have.css",
"color",
MessageTimestampColor,
);
// Wait for message to send, get its ID and save as @threadId
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
.invoke("attr", "data-scroll-tokens")
@ -78,6 +89,13 @@ describe("Threads", () => {
// User responds in thread
cy.get(".mx_ThreadView .mx_BasicMessageComposer_input").type("Test{enter}");
// Check the colour of timestamp on EventTile in a thread (mx_ThreadView)
cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
"have.css",
"color",
MessageTimestampColor,
);
// User asserts summary was updated correctly
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom");
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test");
@ -130,6 +148,10 @@ describe("Threads", () => {
cy.get(".mx_ThreadPanel .mx_EventTile_last").within(() => {
cy.get(".mx_EventTile_body").should("contain", "Hello Mr. Bot");
cy.get(".mx_ThreadSummary_content").should("contain", "How are things?");
// Check the colour of timestamp on thread list
cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor);
// User opens thread via threads list
cy.get(".mx_EventTile_line").click();
});

3
res/css/views/messages/_MessageTimestamp.pcss
View file

@ -16,8 +16,9 @@ limitations under the License.
.mx_MessageTimestamp {
--MessageTimestamp-max-width: 80px;
--MessageTimestamp-color: $event-timestamp-color;
color: $event-timestamp-color;
color: var(--MessageTimestamp-color);
font-size: $font-10px;
font-variant-numeric: tabular-nums;
display: block; /* enable the width setting below */

2
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -130,7 +130,7 @@ limitations under the License.
}
.mx_MessageTimestamp {
color: $event-timestamp-color;
color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */
}
.mx_BaseCard_footer {