element-web/test/components/views/rooms
Suguru Hirahara 232daaff68
Fix decryption failure bar covering the timeline (#10360)
* Use grid layout instead

- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Unset height of spinner

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Break lines at newline characters with white-space: pre-line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Edit tests to check decryption failure bars on narrow timeline

- checkTimelineNarrow() looks for buttons by default
- Test indicator as well

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix double underscores

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix double underscores - pcss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Iterate - buttons at the bottom

- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Check waiting headline as well

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Increase spacing between the message and the buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* lint

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Increase block gap between wrapped buttons for clickability

Apply 8px between wrapped buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Revert bottom margin of buttons which are not expected to be wrapped

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Check visibility instead of existence

This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge

This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element  currently includes the button(s) only.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* lint - prettier

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow()

The loading spinner is likely to disappear while checking the bar on the narrow timeline.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
2023-03-30 10:11:16 +01:00
..
__snapshots__ Fix decryption failure bar covering the timeline (#10360) 2023-03-30 10:11:16 +01:00
EventTile Add EventTileThreadToolbar tests (#10243) 2023-02-27 16:27:13 +00:00
NotificationBadge Conform more code to strict null checking (#10153) 2023-02-15 13:36:22 +00:00
wysiwyg_composer Revert "Mentions as links rte (#10422)" (#10458) 2023-03-27 12:57:05 +02:00
BasicMessageComposer-test.tsx fix: correctly identify emoticons (#10108) 2023-02-08 17:29:12 +01:00
DecryptionFailureBar-test.tsx Improve decryption error UI by consolidating error messages and providing instructions when possible (#9544) 2022-12-15 17:24:33 +00:00
EditMessageComposer-test.tsx Add tests for createEditContent which mirror tests for createMessageContent. (#10331) 2023-03-09 12:15:48 +00:00
EventTile-test.tsx Remove threads labs flag and the ability to disable threads (#9878) 2023-02-20 14:46:07 +00:00
ExtraTile-test.tsx Refactor ExtraTile to use functional components (#10191) 2023-02-23 11:57:37 +00:00
MemberList-test.tsx Replace react-dom tests with react testing-library tests (#10260) 2023-03-01 15:59:27 +00:00
MessageComposer-test.tsx Better error handling in jump to date (#10405) 2023-03-24 14:39:24 -05:00
MessageComposerButtons-test.tsx Replace some enzyme tests by @testing-library/react (#9822) 2022-12-23 10:46:14 +00:00
NewRoomIntro-test.tsx Implement third-party invite waiting room (#10229) 2023-03-06 12:08:04 +01:00
ReadReceiptGroup-test.tsx Make more code conform to strict null checks (#10219 2023-02-24 15:28:40 +00:00
RoomHeader-test.tsx Apply strictNullChecks to src/stores/widgets/* (#10324) 2023-03-08 11:48:58 +00:00
RoomListHeader-test.tsx Update usages of test utilities preferring RTL (#10203) 2023-02-22 10:52:55 +00:00
RoomPreviewBar-test.tsx Support joining non-peekable rooms via the module API (#10154) 2023-02-23 10:29:21 +00:00
RoomPreviewCard-test.tsx Apply prettier formatting 2022-12-12 12:24:14 +01:00
RoomTile-test.tsx Use the same avatar colour when creating 1:1 DM rooms (#9850) 2023-01-05 17:05:21 +01:00
SearchBar-test.tsx Apply prettier formatting 2022-12-12 12:24:14 +01:00
SearchResultTile-test.tsx Fix "[object Promise]" appearing in HTML exports (#9975) 2023-01-30 14:31:32 +00:00
SendMessageComposer-test.tsx Implement MSC3952: intentional mentions (#9983) 2023-03-23 11:47:40 +00:00
VoiceRecordComposerTile-test.tsx Implement MSC3952: intentional mentions (#9983) 2023-03-23 11:47:40 +00:00