Screenshot and snapshot tests for event list summaries (#32788)

* Playwright tests for the event list summary

* Add snapshots for event summary tests
This commit is contained in:
Andy Balaam
2026-03-16 12:16:56 +00:00
committed by GitHub
parent 3e88689d69
commit cace9d918f
11 changed files with 490 additions and 0 deletions
@@ -154,6 +154,7 @@ describe("EventListSummary", function () {
const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children;
expect(children).toHaveLength(1);
expect(children[0]).toHaveTextContent("Expanded membership");
expect(children).toMatchSnapshot();
});
it("renders expanded events if there are less than props.threshold for join and leave", function () {
@@ -175,6 +176,7 @@ describe("EventListSummary", function () {
expect(children).toHaveLength(2);
expect(children[0]).toHaveTextContent("Expanded membership");
expect(children[1]).toHaveTextContent("Expanded membership");
expect(children).toMatchSnapshot();
});
it("renders collapsed events if events.length = props.threshold", function () {
@@ -194,6 +196,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_1 joined and left and joined");
expect(summary).toMatchSnapshot();
});
it("truncates long join,leave repetitions", function () {
@@ -224,6 +227,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_1 joined and left 7 times");
expect(summary).toMatchSnapshot();
});
it("truncates long join,leave repetitions between other events", function () {
@@ -266,6 +270,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_1 was unbanned, joined and left 7 times and was invited");
expect(summary).toMatchSnapshot();
});
it("truncates multiple sequences of repetitions with other events between", function () {
@@ -312,6 +317,7 @@ describe("EventListSummary", function () {
expect(summary).toHaveTextContent(
"user_1 was unbanned, joined and left 2 times, was banned, " + "joined and left 3 times and was invited",
);
expect(summary).toMatchSnapshot();
});
it("handles multiple users following the same sequence of memberships", function () {
@@ -364,6 +370,7 @@ describe("EventListSummary", function () {
expect(summary).toHaveTextContent(
"user_1 and one other were unbanned, joined and left 2 times and were banned",
);
expect(summary).toMatchSnapshot();
});
it("handles many users following the same sequence of memberships", function () {
@@ -396,6 +403,7 @@ describe("EventListSummary", function () {
expect(summary).toHaveTextContent(
"user_0 and 19 others were unbanned, joined and left 2 times and were banned",
);
expect(summary).toMatchSnapshot();
});
it("correctly orders sequences of transitions by the order of their first event", function () {
@@ -441,6 +449,7 @@ describe("EventListSummary", function () {
"user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " +
"joined and left 2 times and was banned",
);
expect(summary).toMatchSnapshot();
});
it("correctly identifies transitions", function () {
@@ -509,6 +518,7 @@ describe("EventListSummary", function () {
"user_1 was invited, was banned, joined, rejected their invitation, left, " +
"had their invitation withdrawn, was unbanned, was removed, left and was removed",
);
expect(summary).toMatchSnapshot();
});
it("handles invitation plurals correctly when there are multiple users", function () {
@@ -549,6 +559,7 @@ describe("EventListSummary", function () {
expect(summary).toHaveTextContent(
"user_1 and one other rejected their invitations and had their invitations withdrawn",
);
expect(summary).toMatchSnapshot();
});
it("handles invitation plurals correctly when there are multiple invites", function () {
@@ -575,6 +586,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_1 rejected their invitation 2 times");
expect(summary).toMatchSnapshot();
});
it('handles a summary length = 2, with no "others"', function () {
@@ -595,6 +607,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_1 and user_2 joined 2 times");
expect(summary).toMatchSnapshot();
});
it('handles a summary length = 2, with 1 "other"', function () {
@@ -614,6 +627,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_1, user_2 and one other joined");
expect(summary).toMatchSnapshot();
});
it('handles a summary length = 2, with many "others"', function () {
@@ -629,6 +643,7 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("user_0, user_1 and 18 others joined");
expect(summary).toMatchSnapshot();
});
it("should not blindly group 3pid invites and treat them as distinct users instead", () => {
@@ -679,5 +694,6 @@ describe("EventListSummary", function () {
const { container } = renderComponent(props);
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
expect(summary).toHaveTextContent("n...@d... was invited 2 times, d...@w... was invited");
expect(summary).toMatchSnapshot();
});
});
@@ -0,0 +1,142 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`EventListSummary correctly identifies transitions 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was removed, left and was removed
</span>
`;
exports[`EventListSummary correctly orders sequences of transitions by the order of their first event 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_2 was unbanned and joined and left 2 times
,
user_1 was unbanned, joined and left 2 times and was banned
</span>
`;
exports[`EventListSummary handles a summary length = 2, with 1 "other" 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1, user_2 and one other joined
</span>
`;
exports[`EventListSummary handles a summary length = 2, with many "others" 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_0, user_1 and 18 others joined
</span>
`;
exports[`EventListSummary handles a summary length = 2, with no "others" 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 and user_2 joined 2 times
</span>
`;
exports[`EventListSummary handles invitation plurals correctly when there are multiple invites 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 rejected their invitation 2 times
</span>
`;
exports[`EventListSummary handles invitation plurals correctly when there are multiple users 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 and one other rejected their invitations and had their invitations withdrawn
</span>
`;
exports[`EventListSummary handles many users following the same sequence of memberships 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_0 and 19 others were unbanned, joined and left 2 times and were banned
</span>
`;
exports[`EventListSummary handles multiple users following the same sequence of memberships 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 and one other were unbanned, joined and left 2 times and were banned
</span>
`;
exports[`EventListSummary renders collapsed events if events.length = props.threshold 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 joined and left and joined
</span>
`;
exports[`EventListSummary renders expanded events if there are less than props.threshold 1`] = `
HTMLCollection [
<div
class="event_tile"
>
Expanded membership
</div>,
]
`;
exports[`EventListSummary renders expanded events if there are less than props.threshold for join and leave 1`] = `
HTMLCollection [
<div
class="event_tile"
>
Expanded membership
</div>,
<div
class="event_tile"
>
Expanded membership
</div>,
]
`;
exports[`EventListSummary should not blindly group 3pid invites and treat them as distinct users instead 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
n...@d... was invited 2 times
,
d...@w... was invited
</span>
`;
exports[`EventListSummary truncates long join,leave repetitions 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 joined and left 7 times
</span>
`;
exports[`EventListSummary truncates long join,leave repetitions between other events 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 was unbanned, joined and left 7 times and was invited
</span>
`;
exports[`EventListSummary truncates multiple sequences of repetitions with other events between 1`] = `
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited
</span>
`;