@@ -57,6 +57,28 @@ const handleVerificationRequest = (request: VerificationRequest): Chainable<Emoj
5757 ) ;
5858} ;
5959
60+ const checkTimelineNarrow = ( button = true ) => {
61+ cy . viewport ( 800 , 600 ) ; // SVGA
62+ cy . get ( ".mx_LeftPanel_minimized" ) . should ( "exist" ) ; // Wait until the left panel is minimized
63+ cy . get ( ".mx_RightPanel_roomSummaryButton" ) . click ( ) ; // Open the right panel to make the timeline narrow
64+ cy . get ( ".mx_BaseCard" ) . should ( "exist" ) ;
65+
66+ // Ensure the failure bar does not cover the timeline
67+ cy . get ( ".mx_RoomView_body .mx_EventTile.mx_EventTile_last" ) . should ( "be.visible" ) ;
68+
69+ // Ensure the indicator does not overflow the timeline
70+ cy . get ( "[data-testid='decryption-failure-bar-indicator']" ) . should ( "be.visible" ) ;
71+
72+ if ( button ) {
73+ // Ensure the button does not overflow the timeline
74+ cy . get ( "[data-testid='decryption-failure-bar-button']:last-of-type" ) . should ( "be.visible" ) ;
75+ }
76+
77+ cy . get ( ".mx_RightPanel_roomSummaryButton" ) . click ( ) ; // Close the right panel
78+ cy . get ( ".mx_BaseCard" ) . should ( "not.exist" ) ;
79+ cy . viewport ( 1000 , 660 ) ; // Reset to the default size
80+ } ;
81+
6082describe ( "Decryption Failure Bar" , ( ) => {
6183 let homeserver : HomeserverInstance | undefined ;
6284 let testUser : UserCredentials | undefined ;
@@ -113,10 +135,13 @@ describe("Decryption Failure Bar", () => {
113135 } )
114136 . then ( ( ) => {
115137 cy . botSendMessage ( bot , roomId , "test" ) ;
138+ cy . contains ( ".mx_DecryptionFailureBar_start_headline" , "Decrypting messages…" ) . should ( "be.visible" ) ;
116139 cy . contains (
117- ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline " ,
140+ ".mx_DecryptionFailureBar_start_headline " ,
118141 "Verify this device to access all messages" ,
119- ) ;
142+ ) . should ( "be.visible" ) ;
143+
144+ checkTimelineNarrow ( ) ;
120145
121146 cy . get ( ".mx_DecryptionFailureBar" ) . percySnapshotElement (
122147 "DecryptionFailureBar prompts user to verify" ,
@@ -125,12 +150,14 @@ describe("Decryption Failure Bar", () => {
125150 } ,
126151 ) ;
127152
128- cy . contains ( ".mx_DecryptionFailureBar_button " , "Resend key requests" ) . should ( "not.exist" ) ;
129- cy . contains ( ".mx_DecryptionFailureBar_button " , "Verify" ) . click ( ) ;
153+ cy . contains ( ".mx_DecryptionFailureBar_end " , "Resend key requests" ) . should ( "not.exist" ) ;
154+ cy . contains ( ".mx_DecryptionFailureBar_end " , "Verify" ) . should ( "be.visible ") . click ( ) ;
130155
131156 const verificationRequestPromise = waitForVerificationRequest ( otherDevice ) ;
132157 cy . get ( ".mx_CompleteSecurity_actionRow .mx_AccessibleButton" ) . click ( ) ;
133- cy . contains ( "To proceed, please accept the verification request on your other device." ) ;
158+ cy . contains ( "To proceed, please accept the verification request on your other device." ) . should (
159+ "be.visible" ,
160+ ) ;
134161 cy . wrap ( verificationRequestPromise ) . then ( ( verificationRequest : VerificationRequest ) => {
135162 cy . wrap ( verificationRequest . accept ( ) ) ;
136163 handleVerificationRequest ( verificationRequest ) . then ( ( emojis ) => {
@@ -146,10 +173,12 @@ describe("Decryption Failure Bar", () => {
146173 cy . get ( ".mx_VerificationPanel_verified_section .mx_E2EIcon_verified" ) . should ( "exist" ) ;
147174 cy . contains ( ".mx_AccessibleButton" , "Got it" ) . click ( ) ;
148175
149- cy . get ( ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline" ) . should (
150- "have.text " ,
176+ cy . contains (
177+ ".mx_DecryptionFailureBar_start_headline " ,
151178 "Open another device to load encrypted messages" ,
152- ) ;
179+ ) . should ( "be.visible" ) ;
180+
181+ checkTimelineNarrow ( ) ;
153182
154183 cy . get ( ".mx_DecryptionFailureBar" ) . percySnapshotElement (
155184 "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button" ,
@@ -159,9 +188,12 @@ describe("Decryption Failure Bar", () => {
159188 ) ;
160189
161190 cy . intercept ( "/_matrix/client/r0/sendToDevice/m.room_key_request/*" ) . as ( "keyRequest" ) ;
162- cy . contains ( ".mx_DecryptionFailureBar_button " , "Resend key requests" ) . click ( ) ;
191+ cy . contains ( ".mx_DecryptionFailureBar_end_button " , "Resend key requests" ) . should ( "be.visible ") . click ( ) ;
163192 cy . wait ( "@keyRequest" ) ;
164- cy . contains ( ".mx_DecryptionFailureBar_button" , "Resend key requests" ) . should ( "not.exist" ) ;
193+ cy . contains ( ".mx_DecryptionFailureBar_end_button" , "Resend key requests" ) . should ( "not.exist" ) ;
194+ cy . contains ( ".mx_DecryptionFailureBar_end_button" , "View your device list" ) . should ( "be.visible" ) ;
195+
196+ checkTimelineNarrow ( ) ;
165197
166198 cy . get ( ".mx_DecryptionFailureBar" ) . percySnapshotElement (
167199 "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button" ,
@@ -184,15 +216,17 @@ describe("Decryption Failure Bar", () => {
184216
185217 cy . botSendMessage ( bot , roomId , "test" ) ;
186218 cy . contains (
187- ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline " ,
219+ ".mx_DecryptionFailureBar_start_headline " ,
188220 "Reset your keys to prevent future decryption errors" ,
189- ) ;
221+ ) . should ( "be.visible" ) ;
222+
223+ checkTimelineNarrow ( ) ;
190224
191225 cy . get ( ".mx_DecryptionFailureBar" ) . percySnapshotElement ( "DecryptionFailureBar prompts user to reset keys" , {
192226 widths : [ 320 , 640 ] ,
193227 } ) ;
194228
195- cy . contains ( ".mx_DecryptionFailureBar_button " , "Reset" ) . click ( ) ;
229+ cy . contains ( ".mx_DecryptionFailureBar_end_button " , "Reset" ) . should ( "be.visible ") . click ( ) ;
196230
197231 // Set up key backup
198232 cy . get ( ".mx_Dialog" ) . within ( ( ) => {
@@ -204,11 +238,12 @@ describe("Decryption Failure Bar", () => {
204238 cy . contains ( "Done" ) . click ( ) ;
205239 } ) ;
206240
207- cy . get ( ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline" ) . should (
208- "have.text" ,
209- "Some messages could not be decrypted" ,
241+ cy . contains ( ".mx_DecryptionFailureBar_start_headline" , "Some messages could not be decrypted" ) . should (
242+ "be.visible" ,
210243 ) ;
211244
245+ checkTimelineNarrow ( false ) ; // button should not be rendered here
246+
212247 cy . get ( ".mx_DecryptionFailureBar" ) . percySnapshotElement (
213248 "DecryptionFailureBar displays general message with no call to action" ,
214249 {
@@ -233,9 +268,11 @@ describe("Decryption Failure Bar", () => {
233268 widths : [ 320 , 640 ] ,
234269 } ) ;
235270
271+ checkTimelineNarrow ( ) ;
272+
236273 cy . wait ( 5000 ) ;
237274 cy . get ( ".mx_DecryptionFailureBar .mx_Spinner" ) . should ( "not.exist" ) ;
238- cy . get ( ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_icon " ) . should ( "exist " ) ;
275+ cy . get ( "[data-testid='decryption-failure-bar-icon'] " ) . should ( "be.visible " ) ;
239276
240277 cy . get ( ".mx_RoomView_messagePanel" ) . scrollTo ( "top" ) ;
241278 cy . get ( ".mx_DecryptionFailureBar" ) . should ( "not.exist" ) ;
@@ -245,5 +282,7 @@ describe("Decryption Failure Bar", () => {
245282
246283 cy . get ( ".mx_RoomView_messagePanel" ) . scrollTo ( "bottom" ) ;
247284 cy . get ( ".mx_DecryptionFailureBar" ) . should ( "exist" ) ;
285+
286+ checkTimelineNarrow ( ) ;
248287 } ) ;
249288} ) ;
0 commit comments