From a6e3e3a7b4dfea15f75a6e02933071490eaccf3e Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 25 Feb 2022 01:50:42 -0600 Subject: [PATCH] Add data-event-id="$xxx" attributes to timeline items for easy selecting in tests 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/BaseMessageView.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js index a6fbb9be..083e0e5e 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,