From c09964dc30c0782e84427413d2493de7e673018e Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Tue, 1 Mar 2022 18:36:14 -0600
Subject: [PATCH] Add `data-event-id="$xxx"` attributes to timeline items for
 easy selecting in end-to-end tests (#690)

Split out from https://github.com/vector-im/hydrogen-web/pull/653

Example test assertions: https://github.com/matrix-org/matrix-public-archive/blob/db6d3797d74104ad7c93e572ed106f1a685a90d0/test/e2e-tests.js#L248-L252

```js
// Make sure the $abc event on the page has "foobarbaz" text in it
assert.match(
  dom.document.querySelector(`[data-event-id="$abc"]`).outerHTML,
  new RegExp(`.*foobarbaz.*`)
);
```
---
 .../session/room/timeline/tiles/SimpleTile.js |  4 ++++
 .../session/room/timeline/BaseMessageView.js  | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/SimpleTile.js b/src/domain/session/room/timeline/tiles/SimpleTile.js
index 3497b689..af2b0e12 100644
--- a/src/domain/session/room/timeline/tiles/SimpleTile.js
+++ b/src/domain/session/room/timeline/tiles/SimpleTile.js
@@ -44,6 +44,10 @@ export class SimpleTile extends ViewModel {
         return this._entry.asEventKey();
     }
 
+    get eventId() {
+        return this._entry.id;
+    }
+
     get isPending() {
         return this._entry.isPending;
     }
diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
index 9b583103..7356cd2b 100644
--- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js
+++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
@@ -40,14 +40,17 @@ export class BaseMessageView extends TemplateView {
         if (this._interactive) {
             children.push(t.button({className: "Timeline_messageOptions"}, "⋯"));
         }
-        const li = t.el(this._tagName, {className: {
-            "Timeline_message": true,
-            own: vm.isOwn,
-            unsent: vm.isUnsent,
-            unverified: vm.isUnverified,
-            disabled: !this._interactive,
-            continuation: vm => vm.isContinuation,
-        }}, children);
+        const li = t.el(this._tagName, {
+            className: {
+                "Timeline_message": true,
+                own: vm.isOwn,
+                unsent: vm.isUnsent,
+                unverified: vm.isUnverified,
+                disabled: !this._interactive,
+                continuation: vm => vm.isContinuation,
+            },
+            'data-event-id': vm.eventId
+        }, children);
         // given that there can be many tiles, we don't add
         // unneeded DOM nodes in case of a continuation, and we add it
         // with a side-effect binding to not have to create sub views,