Commit Graph

42 Commits (dcd8f9a16f93c1f83d7914607a10f13381f19214)

Author SHA1 Message Date
Germain 9c7d935aae
Compound Typography pass (#11103)
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* Delete unused or incorrect - sass variables

* Typography pass

* Deprecate _font-weights.pcss and use Compound instead

* lint fix

* Fix snapshot

* Fix typography pass feedback

* Remove unwanted e2e test

cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties

* lintfix

* Migration script for baseFontSize

* Updates after design review

* Update font scaling panel to use min/max size

* Fix custom font

* Fix font slider e2e test

* Update custom font

* Update new baseFontSizeV2

* Disambiguate heading props

* Fix appearance test

* change max font size

* fix e2ee test

* fix tests

* test baseFontSize migration code

* typescript strict

* Migrate baseFontSize account setting

* Change assertion for font size

* Fix font size controller test
2023-06-29 10:30:25 +00:00
Suguru Hirahara 87f329789b
Fix translucent `TextualEvent` on search results panel (#10810)
* Unset the opacity value of textual events on the search results panel

* Add a test for checking opacity
2023-06-08 11:11:18 +00:00
Suguru Hirahara 1da43858f5
Update `timeline.spec.ts` - use Cypress Testing Library (#10721)
* Update timeline.spec.ts - use Cypress Testing Library - findByText() for the room creation message

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

* Update timeline.spec.ts - use Cypress Testing Library

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

* Feedback

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-06-05 13:58:33 +00:00
Suguru Hirahara 4d59a6ff1f
Fix timeline search bar being overlapped by the right panel (#10809)
* Set zero min-width to prevent input area blowout

* Set min-width values to mx_SearchBar_input and mx_SearchBar_button

* Prevent the input area and cancel button from being overlapped by BaseCard

* Use custom properties: --size-button-search

* Take Percy snapshot of mx_SearchBar

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Edit a comment

* Feedback

* Edit a comment

* Update cypress/e2e/timeline/timeline.spec.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-05-15 11:58:59 +00:00
Suguru Hirahara 3b2216ec9d
Fix class name of the read marker on `MessagePanel` (#10745)
* Optimize mx_RoomView_myReadMarker

- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"

* Conform the style rules to the naming policy

Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.

* Run prettier

* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`

- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots

* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`

The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.

- Create _MessagePanel.pcss for the style rules of MessagePanel

* Update permalinks.spec.ts
2023-05-15 11:02:04 +00:00
Andy Balaam dbf73f725f
Disable two flaky Percy tests - see #25283 and #24881 (#10878) 2023-05-12 09:56:32 +00:00
Suguru Hirahara 9fc4410ee9
Update style rules of `MessageTimestamp` (#10780)
* Remove an obsolete variable - `$MessageTimestamp_width_hover`

Added by 9b54aba4c0
Deprecated 5343be7814

* Replace a variable with a custom property - $MessageTimestamp_width

* Merge with an existing property in :root

rename

* Manage the variable on _MessageTimestamp.pcss
2023-05-04 12:19:26 +00:00
Suguru Hirahara 23174904ed
Merge style rules related to EventTile on IRC layout (#10700)
* Manage rules related to EventTile on `_EventTile.pcss`

The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss.

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

* Merge - `--EventTile_irc_line_info-margin-inline-start`

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

* Merge - `mx_EventTile_msgOption`

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

* Merge - `mx_MessageTimestamp`

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

* Merge - `mx_EventTileBubble`

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

* Merge - `mx_ReplyChain`

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

* Merge - `mx_ReplyTile .mx_EventTileBubble`

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

* Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line`

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

* Merge - `&.mx_EventTile_info`

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

* Convert the variable with a custom property

To fix the syntax error "Undefined variable $irc-line-height" because of cascading order.

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

* Merge - '.mx_EventTile_emote'

The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted.

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 11:06:51 +00:00
Suguru Hirahara bef6eca484
Update tests to ensure file size unit has been fixed (#10568)
* Update tests to ensure file size unit has been fixed

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

* Update cypress/e2e/timeline/timeline.spec.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Edit comments mentioning kilobytes

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-12 10:21:13 +00:00
Suguru Hirahara 65f605951f
Update `timeline.spec.ts` (#10540)
* timeline.spec.ts - deprecate custom commands of find.ts

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

* Iterate

- clickButtonReply()
- findByText()

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-11 10:33:32 +00:00
Suguru Hirahara 4064ae7ad0
Use Cypress Testing Library - `timeline.spec.ts` (#10471)
* Use Cypress Testing Library - timeline.spec.ts

- findButton
- findMenuitem

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

* Remove force: false from click()

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

* Add const messageEdit

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-04 09:54:06 +01:00
Suguru Hirahara f1667870a0
Change the category of a test from `message displaying` to `configure room` (#10449) 2023-03-28 08:57:17 +01:00
Suguru Hirahara afb2cb93f2
Fix flaky Percy tests of `ReplyChain` (#10450)
* Fix flaky Percy tests of ReplyChain

- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability

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

* Check receptSent as well for consistency

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

* Add a comment

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

* Specify zero spacing and remove list-style

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-27 12:13:25 +00:00
Suguru Hirahara cc0f38d5b4
Hide mx_TopUnreadMessagesBar for now on Percy because flaky (#10453)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-27 11:51:50 +00:00
Suguru Hirahara 8e1b9f46d4
Set expected value of line-height to expanded generic event list summary (GELS) spacer on IRC layout (#10211)
* Set expected line height to an expanded GELS line on IRC layout, add a test
* Add a test for compact modern/group layout
* Create a new test category on timeline.spec.ts
* Rename the class name as 'spacer'
* Add a test for GELS' spacer on bubble layout
---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Germain <germain@souquet.com>
2023-03-24 12:57:32 +00:00
Andy Balaam 75f31defd6
Disable flaky Percy tests that relate to focus (#10438) 2023-03-24 09:25:48 +00:00
Suguru Hirahara 4c2b18c5d9
Ensure Percy take snapshots of a whole viewport (#10420)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-22 12:19:03 +00:00
Andy Balaam 5116d823c7
Disable Percy snapshots that are flaky due to focus issues (#10416) 2023-03-22 08:40:08 +00:00
Suguru Hirahara d8acdd1750
Fix profile resizer to make first character of a line selectable in IRC layout (#10396) 2023-03-21 10:10:13 +01:00
Suguru Hirahara c9e7aaf24b
Add a basic E2E test for event tiles (#10306)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-17 08:48:34 +01:00
Suguru Hirahara 587da5b7dc
Initialize line-height for room name on IRC layout (#10188) 2023-03-14 15:32:12 +01:00
Suguru Hirahara d244b9065c
Fix long display name overflowing reply tile on IRC layout (#10343)
* Prevent long name blowout from Replytile on IRC layout

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

* Add a test to check long strings do not overflow

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

* Sort declarations based on .mx_IRCLayout .mx_EventTile .mx_DisambiguatedProfile

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-10 10:47:14 +00:00
Suguru Hirahara 7c2bb966d0
Add a test for ReplyChain (#10294) 2023-03-07 12:44:32 +01:00
Suguru Hirahara 94950c6987
Reduce height of toggle on expanded view source event (#10283)
* Reduce height of toggle on expanded view source event

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

* Add a test to check size and position of toggle on expanded view source event

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-06 10:01:18 +00:00
Suguru Hirahara ecebac6ea1
Align info EventTile and normal EventTile on IRC layout (#10197)
* fixes alignment issue in IRC layout
* adds cypress test for alignment

---------

Contributed-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Signed-off-by: Alun Turner <alunturner@users.noreply.github.com>
2023-03-03 09:32:38 +00:00
Suguru Hirahara db7748b743
Fix the hidden view source toggle on IRC layout (#10266)
* Display view source toggle on IRC layout

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

* Add a test

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

* Merge tests

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

* Collapse hidden event source before checking clickability of view source toggle on IRC layout

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

* Select view source event under the edited line on the test

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

* Fix the test

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

* lint

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-01 14:41:56 +00:00
Michael Telatyński c22971e542
Improve percy snapshot stability (#10239) 2023-02-27 09:16:49 +00:00
Michael Telatynski 26652138bd
Improve Percy stability by better scoping snapshots (#10207) 2023-02-23 16:57:48 +13:00
Janne Mareike Koschinski f1a08cd572
Gitter sunsetting: Use findPredecessor in EventTileFactory (#10075) 2023-02-03 15:36:37 +00:00
grimhilt 5a08859e37
fix regional emojis converted to flags (#9294)
Co-authored-by: grimhilt <grimhilt@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Faye Duxovni <duxovni@duxovni.org>
Co-authored-by: Faye Duxovni <fayed@element.io>
Fixes https://github.com/vector-im/element-web/issues/19000
2023-01-31 13:08:35 +00:00
devonh 79033eb034
Add dendrite support to cypress tests (#9884)
* Minimum hacks required to run cypress tests with dendrite

* Remove wget hack since dendrite containers now have curl

* Add basic dendritedocker plugin & hack into login spec for testing

* Add generic HomeserverInstance interface

* Add env var to configure which homeserver to use

* Remove synapse specific homeserver support api

* Update the rest of the tests to use HomeserverInstance

* Update cypress docs to reference new homeserver abstraction

* Fix formatting issues

* Change dendrite to use main branch container
2023-01-10 16:29:56 -07:00
Travis Ralston 19ba620de2 Revert "Revert "Factor out `MessageEvent.from()` usage (#9882)""
This reverts commit 99e38ca88e.
2023-01-10 13:43:15 -07:00
Travis Ralston 99e38ca88e Revert "Factor out `MessageEvent.from()` usage (#9882)"
This reverts commit c09ca7b4ee.
2023-01-10 13:32:07 -07:00
Travis Ralston c09ca7b4ee
Factor out `MessageEvent.from()` usage (#9882)
* Factor out `MessageEvent.from()` usage

The class/function is disappearing from the events-sdk, at least in this form.

* Manually create contents for events used by cypress

The utility function is out of range of the calling code at runtime, for some reason.

* Run prettier

* Maybe this will fix the build
2023-01-10 09:20:10 -07:00
Michael Weimann 526645c791
Apply prettier formatting 2022-12-12 12:24:14 +01:00
Michael Telatynski 2cf8a9a2f7
Stabilise Cypress login tests (#9446)
* Attempt to stabilise login tests

* More stability

* Stabilise s'more

* don't clear LS as we rely on it for enablements

* Add small delay

* Iterate

* Update login.ts
2022-10-18 17:07:23 +01:00
Michael Telatynski 8b54be6f48
Move from `browser-request` to `fetch` (#9345) 2022-10-12 18:59:07 +01:00
Michael Telatynski e269c6895d
Fix url preview AXE and layout issue & add percy test (#9189) 2022-08-17 16:07:18 +00:00
Travis Ralston d21498de94
Add even more stability to view source test case (#9176)
Follow-on from https://github.com/matrix-org/matrix-react-sdk/pull/9156 after seeing more failures from the test case.
2022-08-11 15:26:22 -06:00
Michael Telatynski fdde6b1428
Cypress test stability improvements (#9156)
* Make cypress hidden event test more reliable

* Make timeline tests more stable
2022-08-10 09:40:17 +01:00
Michael Telatynski e864dbfacf
Fix highlights not being applied to plaintext messages (#9126)
* Fix highlights not being applied to plaintext messages

* Add percy test for search result highlighting

* Fix percy target

* Update timeline.spec.ts
2022-08-05 07:08:56 +00:00
Šimon Brandner 3991ce96e4
Don't enumerate Cypress tests (#9123) 2022-08-01 17:59:20 +00:00