feat(material-experimental/mdc-slider): implement some basic unit tests #22072
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
wagnermaciel
commented
Mar 1, 2021
wagnermaciel
commented
- implement unit tests for the standard slider, standard range slider, and for the slider ripple states
- add mdc-slider theme to all-theme
- make MatSliderVisualThumb ripple refs public so their states can be checked & tested
- make MatSlider child component and html element getters default thumbPosition to the end thumb
google-cla
bot
added
the
cla: yes
mmalerba
reviewed
Mar 2, 2021
mmalerba
approved these changes
Mar 2, 2021
wagnermaciel
force-pushed
the
mdc-slider-unit-tests
branch
3 times, most recently
from
30f540b to
7b22164
Compare
* implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * make MatSliderVisualThumb ripple refs public so their states can be checked & tested * make MatSlider child component and html element getters default thumbPosition to the end thumb
* use #waitForAsync instead of #fixture.whenStable
wagnermaciel
force-pushed
the
mdc-slider-unit-tests
branch
from
7b22164 to
d2d3ca5
Compare
* remove default value from MatSlider getters * combine #beforeEach's in ripple state tests
* resolve injection error that only throws on ci
* make ripple refs private and check DOM directly in unit tests
wagnermaciel
force-pushed
the
mdc-slider-unit-tests
branch
from
c3e4461 to
cd25296
Compare
* Disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch. The problem is easily reproduced if you undo this change and test it out on a mobile device.
|
I noticed a bug while trying to fix the unit tests on for ios safari. Here are some screenshots of the fix: Before
After
It's pretty difficult to see, but there was a ripple getting launched by default on touch. You can see it if you look at the bottom left corner closely. The ripple was never centered so it would appear wherever the slider thumb was touched. To fix this I just disabled the mat ripple (ripples can still be launched manually when the mat ripple is disabled) |
wagnermaciel
commented
Mar 8, 2021
| // In favor of creating events that work for most of the browsers, the event is created | ||
| // as a basic UI Event. The necessary details for the event will be set manually. | ||
| const event = document.createEvent('UIEvent'); | ||
| const touchDetails = {pageX, pageY}; | ||
| const touchDetails = {pageX, pageY, clientX, clientY}; |
There was a problem hiding this comment.
The mdc-slider checks the clientX and clientY of the targetTouches[0] when calculating the new value of the slider.
* use touch events instead of pointer events when testing on ios. pointerdown, pointerup, and pointermove are not supported on ios.
wagnermaciel
force-pushed
the
mdc-slider-unit-tests
branch
from
b3cca71 to
17d55b2
Compare
wagnermaciel
added
the
target: feature
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Mar 11, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Mar 11, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Mar 12, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Mar 23, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Apr 1, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Apr 2, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
wagnermaciel
added a commit
to wagnermaciel/components
that referenced
this pull request
Apr 8, 2021
…ts (angular#22072) * feat(material-experimental/mdc-slider): implement some basic unit tests * implement unit tests for the standard slider, standard range slider, and for the slider ripple states * add mdc-slider theme to all-theme * use #waitForAsync to wait for foundation to finish initializing & layout * use forwardRef to avoid injection errors that only throw on ci * disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch the problem is easily reproduced if you undo this change and test it out on a mobile device. * note: we use touch events instead of pointer events when testing on ios because pointerdown, pointerup, and pointermove are not supported
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.