Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to pass contentSize and layoutMeasurement when calling scrollTo #1543

Merged

Conversation

j-piasecki
Copy link
Contributor

Summary

Adds option to specify contentSize and layoutMeasurement when calling scrollTo. This way it can also be used for components using VirutalizedLists, as those fields are used for updating the currently visible window.

Closes #1540

Test plan

I'm not sure how to test it properly, as entire userEvent API seems to be lacking tests at the moment.

element: ReactTestInstance,
options: ScrollToOptions
) {
fireEvent(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace with dispatchEvent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dispatchEvent has a different signature than fireEvent. It expects event to be its last argument and passes that directly to the handler, while fireEvent accepts variadic arguments and spreads them when passing to the handler.

contentSizeChange handler expects width and height as separate arguments: https://github.com/facebook/react-native/blob/d45a01d6d15530e356065704adb869b1cbbb2576/packages/virtualized-lists/Lists/VirtualizedList.js#L1574

Should I also change the signature of dispatchEvent to accept variadic arguments, or is fireEvent fine in that case?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair point, I'll add some dispatch function for such cases.

@@ -50,31 +63,46 @@ export async function scrollTo(

ensureScrollViewDirection(element, options);

emitContentSizeChangeEvent(element, options);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ The sequencing of this event matches our experiments with RN runtime:
https://github.com/callstack/react-native-testing-library/wiki/ScrollView-Events

Copy link
Member

@mdjastrzebski mdjastrzebski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The implementation looks good! Pls add some tests to verify it is working correctly on FlatList.

Copy link

codecov bot commented Dec 15, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (3ba97e3) 95.65% compared to head (c1f58dd) 95.67%.

❗ Current head c1f58dd differs from pull request most recent head 1b16e92. Consider uploading reports for the commit 1b16e92 to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1543      +/-   ##
==========================================
+ Coverage   95.65%   95.67%   +0.02%     
==========================================
  Files          99       99              
  Lines        5909     5948      +39     
  Branches      870      876       +6     
==========================================
+ Hits         5652     5691      +39     
  Misses        257      257              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Member

@mdjastrzebski mdjastrzebski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've done some tweaks. Ready for merge! Planning to release this early next week.

@j-piasecki thank you for your contribution! 🚀

@mdjastrzebski mdjastrzebski merged commit edf52b6 into callstack:main Dec 15, 2023
6 checks passed
@mdjastrzebski
Copy link
Member

🎉 This PR has been release in RNTL v12.4.2!

renovate bot added a commit to valora-inc/wallet that referenced this pull request Jan 8, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[@testing-library/jest-native](https://togithub.com/testing-library/jest-native)
| [`^5.4.2` ->
`^5.4.3`](https://renovatebot.com/diffs/npm/@testing-library%2fjest-native/5.4.2/5.4.3)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@testing-library%2fjest-native/5.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@testing-library%2fjest-native/5.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@testing-library%2fjest-native/5.4.2/5.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@testing-library%2fjest-native/5.4.2/5.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@testing-library/react-native](https://callstack.github.io/react-native-testing-library)
([source](https://togithub.com/callstack/react-native-testing-library))
| [`^12.2.2` ->
`^12.4.3`](https://renovatebot.com/diffs/npm/@testing-library%2freact-native/12.2.2/12.4.3)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@testing-library%2freact-native/12.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@testing-library%2freact-native/12.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@testing-library%2freact-native/12.2.2/12.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@testing-library%2freact-native/12.2.2/12.4.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>testing-library/jest-native
(@&#8203;testing-library/jest-native)</summary>

###
[`v5.4.3`](https://togithub.com/testing-library/jest-native/compare/v5.4.2...v5.4.3)

[Compare
Source](https://togithub.com/testing-library/jest-native/compare/v5.4.2...v5.4.3)

</details>

<details>
<summary>callstack/react-native-testing-library
(@&#8203;testing-library/react-native)</summary>

###
[`v12.4.3`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.4.3)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.4.2...v12.4.3)

#### Other

- docs: jsdoc for Jest matchers by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1548

**Full Changelog**:
callstack/react-native-testing-library@v12.4.2...v12.4.3

###
[`v12.4.2`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.4.2)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.4.1...v12.4.2)

#### What's Changed

##### Improvements

- feat: add option to pass `contentSize` and `layoutMeasurement` when
calling `scrollTo` by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[callstack/react-native-testing-library#1543

##### Other

- chore: remove renovate by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1539
- chore: add release it by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1546

#### New Contributors

- [@&#8203;j-piasecki](https://togithub.com/j-piasecki) made their first
contribution in
[callstack/react-native-testing-library#1543

**Full Changelog**:
callstack/react-native-testing-library@v12.4.1...v12.4.2

###
[`v12.4.1`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.4.1)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.4.0...v12.4.1)

#### What's Changed

##### New things

- RFC/feat: default accessibility roles by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1490

##### Fixes

- chore: fix extend-expect.d.ts types by internalizing them by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1536
- fix: matcher Jest extensions by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1537
- fix: user event add target prop by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1538

##### Other

- chore: update & check example packages by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1528
- docs: spell-check some docs by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1529
- docs: rewrite How should I query? guide by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1531
- docs: remove beta status for User Event by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1532
- chore: deps update 2023-11-27 by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1533

**Full Changelog**:
callstack/react-native-testing-library@v12.4.0...v12.4.1

###
[`v12.4.0`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.4.0)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.3.3...v12.4.0)

#### What's Changed

### Features

-   Built-in Jest matchers
-
[documentation](https://callstack.github.io/react-native-testing-library/docs/jest-matchers)
- [migration guide from legacy Jest Native
matchers](https://callstack.github.io/react-native-testing-library/docs/migration-jest-native)

### Contributors for this feature 👏👏👏

- `toHaveTextContent` matcher
[#&#8203;1461](https://togithub.com/callstack/react-native-testing-library/issues/1461)
by [@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski)
- `toBeEmptyElement` matcher
[#&#8203;1462](https://togithub.com/callstack/react-native-testing-library/issues/1462)
by [@&#8203;kyawthura-gg](https://togithub.com/kyawthura-gg)
- `toHaveDisplayValue` matcher
[#&#8203;1463](https://togithub.com/callstack/react-native-testing-library/issues/1463)
by [@&#8203;jaworek](https://togithub.com/jaworek) &
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski)
- `toBeVisible` matcher
[#&#8203;1465](https://togithub.com/callstack/react-native-testing-library/issues/1465)
by [@&#8203;thiagobrez](https://togithub.com/thiagobrez)
- `toBeEnabled` & `toBeDisabled` matchers
[#&#8203;1469](https://togithub.com/callstack/react-native-testing-library/issues/1469)
by [@&#8203;jaworek](https://togithub.com/jaworek)
- `toHaveProp` matcher
[#&#8203;1477](https://togithub.com/callstack/react-native-testing-library/issues/1477)
by [@&#8203;AntoineThibi](https://togithub.com/AntoineThibi)
- `toBeChecked` & `toBePartiallyChecked` matchers
[#&#8203;1479](https://togithub.com/callstack/react-native-testing-library/issues/1479)
by [@&#8203;kyawthura-gg](https://togithub.com/kyawthura-gg)
- `toHaveStyle` matcher
[#&#8203;1487](https://togithub.com/callstack/react-native-testing-library/issues/1487)
by [@&#8203;marcinkornek](https://togithub.com/marcinkornek)
- `toBeSelected` matcher
[#&#8203;1488](https://togithub.com/callstack/react-native-testing-library/issues/1488)
by [@&#8203;AntoineThibi](https://togithub.com/AntoineThibi)
- `toBeBusy` matcher
[#&#8203;1493](https://togithub.com/callstack/react-native-testing-library/issues/1493)
by [@&#8203;hduprat](https://togithub.com/hduprat)
- `toContainElement` matcher
[#&#8203;1495](https://togithub.com/callstack/react-native-testing-library/issues/1495)
by [@&#8203;siepra](https://togithub.com/siepra)
- `toHaveAccessibilityValue` matcher
[#&#8203;1496](https://togithub.com/callstack/react-native-testing-library/issues/1496)
by [@&#8203;tarunrajput](https://togithub.com/tarunrajput)
- `toBeExpanded` & `toBeCollapsed` matchers
[#&#8203;1497](https://togithub.com/callstack/react-native-testing-library/issues/1497)
by [@&#8203;siepra](https://togithub.com/siepra)
- `toHaveAccessibleName` matcher
[#&#8203;1509](https://togithub.com/callstack/react-native-testing-library/issues/1509)
by [@&#8203;anishamalde](https://togithub.com/anishamalde)
- Special thanks to
[@&#8203;pierrezimmermannbam](https://togithub.com/pierrezimmermannbam)
for helping with code reviews!

**Full Changelog**:
callstack/react-native-testing-library@v12.3.3...v12.4.0

###
[`v12.3.3`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.3.3)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.3.2...v12.3.3)

#### What's Changed

##### Features:

- feat: toHaveAccessibleName matcher by
[@&#8203;anishamalde](https://togithub.com/anishamalde) in
[callstack/react-native-testing-library#1509
(not yet public, will be exposed publically in v12.4.0)

##### Fixes

- fix: change broken hyperlink in README.md by
[@&#8203;jovanimal](https://togithub.com/jovanimal) in
[callstack/react-native-testing-library#1520

##### Other improvements & chores

- docs: Jest matchers docs by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1506
- chore: modern yarn (4.0) by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1517
- chore: enable Yarn 4 on CI by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1525
- chore: expose Jest Native exports by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1522
- Dependabot/npm and yarn/callstack/eslint config 14.0.0 by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1526

#### New Contributors

- [@&#8203;jovanimal](https://togithub.com/jovanimal) made their first
contribution in
[callstack/react-native-testing-library#1520
- [@&#8203;anishamalde](https://togithub.com/anishamalde) made their
first contribution in
[callstack/react-native-testing-library#1509

**Full Changelog**:
callstack/react-native-testing-library@v12.3.2...v12.3.3

###
[`v12.3.2`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.3.2)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.3.1...v12.3.2)

#### What's Changed

Improvements:

- Adds typedefs for pure by
[@&#8203;chriserickson](https://togithub.com/chriserickson) in
[callstack/react-native-testing-library#1516

#### New Contributors

- [@&#8203;chriserickson](https://togithub.com/chriserickson) made their
first contribution in
[callstack/react-native-testing-library#1516

**Full Changelog**:
callstack/react-native-testing-library@v12.3.1...v12.3.2

###
[`v12.3.1`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.3.1)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.3.0...v12.3.1)

#### What's Changed

### Features

- UserEvent `scrollBy` [@&#8203;siepra](https://togithub.com/siepra) in
[callstack/react-native-testing-library#1445

### Fixes

- fix: properly manage IS_REACT_ACT_ENVIRONMENT in UserEvent by
[@&#8203;pierrezimmermannbam](https://togithub.com/pierrezimmermannbam)
in
[callstack/react-native-testing-library#1491

#### New Contributors

- [@&#8203;marcinkornek](https://togithub.com/marcinkornek) made their
first contribution in
[callstack/react-native-testing-library#1487
- [@&#8203;meatnordrink](https://togithub.com/meatnordrink) made their
first contribution in
[callstack/react-native-testing-library#1494

**Full Changelog**:
callstack/react-native-testing-library@v12.3.0...v12.3.1

###
[`v12.3.0`](https://togithub.com/callstack/react-native-testing-library/releases/tag/v12.3.0)

[Compare
Source](https://togithub.com/callstack/react-native-testing-library/compare/v12.2.2...v12.3.0)

#### Features

-   ARIA props (`role` & `aria-*`) support:
- feat: support aria-hidden prop by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1474
- feat: support `role` prop by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1476
- feat: support `aria-label` and `aria-labelledby` props by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1475
- feat: `aria-*` state props by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1478
- feat: `aria-modal` support by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1481
- feat: `aria-value*` props support by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1480

-   Jest Native matcher migration to RNTL (work in progress):
- feature: Jest matchers core by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1454
- feat: add Jest matchers utils by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1464
- feat: `toBeEmptyElement` matcher by
[@&#8203;kyawthura-gg](https://togithub.com/kyawthura-gg) in
[callstack/react-native-testing-library#1462
- feat: `toHaveDisplayValue` matcher by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1463
- feat: `toHaveTextContent()` matcher by
[@&#8203;mdjastrzebski](https://togithub.com/mdjastrzebski) in
[callstack/react-native-testing-library#1461
- feat: `toBeVisible` matcher by
[@&#8203;thiagobrez](https://togithub.com/thiagobrez) in
[callstack/react-native-testing-library#1465
- feat: `toBeDisabled` matcher by
[@&#8203;jaworek](https://togithub.com/jaworek) in
[callstack/react-native-testing-library#1469
- feat: `toHaveProp` matcher by
[@&#8203;AntoineThibi](https://togithub.com/AntoineThibi) in
[callstack/react-native-testing-library#1477
- feat: `toBeChecked` & `toBePartiallyChecked` matcher by
[@&#8203;kyawthura-gg](https://togithub.com/kyawthura-gg) in
[callstack/react-native-testing-library#1479

Note: Jest matchers are work in progress and haven't yet been officially
released. You can track progress of this initiative in
[#&#8203;1468](https://togithub.com/callstack/react-native-testing-library/issues/1468).

#### New Contributors

- [@&#8203;M-Tilley-SA](https://togithub.com/M-Tilley-SA) made their
first contribution in
[callstack/react-native-testing-library#1460
- [@&#8203;kyawthura-gg](https://togithub.com/kyawthura-gg) made their
first contribution in
[callstack/react-native-testing-library#1462
- [@&#8203;friederbluemle](https://togithub.com/friederbluemle) made
their first contribution in
[callstack/react-native-testing-library#1470
- [@&#8203;thiagobrez](https://togithub.com/thiagobrez) made their first
contribution in
[callstack/react-native-testing-library#1465
- [@&#8203;AntoineThibi](https://togithub.com/AntoineThibi) made their
first contribution in
[callstack/react-native-testing-library#1477

**Full Changelog**:
callstack/react-native-testing-library@v12.2.2...v12.3.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on Monday" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get
[config help](https://togithub.com/renovatebot/renovate/discussions) if
that's undesired.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xMjEuMCIsInVwZGF0ZWRJblZlciI6IjM3LjEyMS4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

fireEvent.scroll doesn't update the FlatList's render window on React Native 0.73
2 participants