Feature/714 add test slider component #806
Open
Conversation
This file contains 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
| @@ -23,7 +23,12 @@ const SliderInput = ({ | |||
| ...sliderProps | |||
| }: Props) => { | |||
| const generatedId = useId(); | |||
| const newId = useMemo(() => id ?? generatedId, [generatedId, id]); | |||
| const newId = useMemo(() => { | |||
| if (id && id !== "") { | |||
There was a problem hiding this comment.
En faisant simplement ça il va prendre en compte la valeur null, undefined et empty string
Suggested change
| if (id && id !== "") { | |
| if (id) { |
Comment on lines
+40
to
+43
| let user: UserEvent; | ||
| beforeEach(() => { | ||
| user = userEvent.setup(); | ||
| }); |
There was a problem hiding this comment.
Le userEvent.setup n'est pas forcément nécessaire je pense
| }); | ||
|
|
||
| it("should have default value 128", () => { | ||
| let valueSlider: number = 256; |
There was a problem hiding this comment.
la value est 256 et non 128 ?
Comment on lines
+93
to
+114
| it("should have active class until 2048 value", async () => { | ||
| // Act | ||
| render( | ||
| <Slider | ||
| id="slider-id" | ||
| name="slider-name" | ||
| options={options} | ||
| onChange={() => console.log("some change")} | ||
| />, | ||
| ); | ||
|
|
||
| const selectValueSlider = screen.getByText("1024"); | ||
| await user.click(selectValueSlider); | ||
|
|
||
| // Assert | ||
| sliderIsActive("64"); | ||
| sliderIsActive("128"); | ||
| sliderIsActive("256"); | ||
| sliderIsActive("1024"); | ||
| sliderIsNotActive("2048"); | ||
| sliderIsNotActive("4096"); | ||
| }); |
There was a problem hiding this comment.
donc par défaut c'est actif jusque 2048 sans avoir de value de définit ?
Comment on lines
+116
to
+139
| it("should be disabled with classModifier", async () => { | ||
| // Act | ||
| render( | ||
| <Slider | ||
| id="slider-id" | ||
| name="slider-name" | ||
| value={256} | ||
| options={options} | ||
| onChange={() => console.log("some change")} | ||
| classModifier="disabled" | ||
| />, | ||
| ); | ||
|
|
||
| const selectValueSlider = screen.getByText("1024"); | ||
| await user.click(selectValueSlider); | ||
|
|
||
| // Assert | ||
| sliderIsActive("64"); | ||
| sliderIsActive("128"); | ||
| sliderIsActive("256"); | ||
| sliderIsNotActive("1024"); | ||
| sliderIsNotActive("2048"); | ||
| sliderIsNotActive("4096"); | ||
| }); |
There was a problem hiding this comment.
quand c'est disabled on est pas censé pouvoir bouger le curseur si ?
Comment on lines
+141
to
+164
| it("should be disabled with props", async () => { | ||
| // Act | ||
| render( | ||
| <Slider | ||
| id="slider-id" | ||
| name="slider-name" | ||
| value={256} | ||
| options={options} | ||
| onChange={() => console.log("some change")} | ||
| disabled | ||
| />, | ||
| ); | ||
|
|
||
| const selectValueSlider = screen.getByText("1024"); | ||
| await user.click(selectValueSlider); | ||
|
|
||
| // Assert | ||
| sliderIsActive("64"); | ||
| sliderIsActive("128"); | ||
| sliderIsActive("256"); | ||
| sliderIsNotActive("1024"); | ||
| sliderIsNotActive("2048"); | ||
| sliderIsNotActive("4096"); | ||
| }); |
There was a problem hiding this comment.
quand c'est disabled on est pas censé pouvoir bouger le curseur si ?
Comment on lines
+184
to
+205
| it("should have options without label", async () => { | ||
| // Act | ||
| render( | ||
| <Slider | ||
| id="slider-id" | ||
| name="slider-name" | ||
| options={optionsWithoutLabel} | ||
| onChange={() => console.log("some change")} | ||
| />, | ||
| ); | ||
|
|
||
| const selectValueSlider = screen.getByText("1024"); | ||
| await user.click(selectValueSlider); | ||
|
|
||
| // Assert | ||
| sliderIsActive("64"); | ||
| sliderIsActive("128"); | ||
| sliderIsActive("256"); | ||
| sliderIsActive("1024"); | ||
| sliderIsNotActive("2048"); | ||
| sliderIsNotActive("4096"); | ||
| }); |
There was a problem hiding this comment.
ça ne teste rien de plus que d'autres tests au dessus non ?
Comment on lines
+207
to
+227
| it("should have Slider with onChangeComplet", async () => { | ||
| // Act | ||
| const { container } = render( | ||
| <Slider | ||
| id="slider-id" | ||
| name="slider-name" | ||
| ariaLabelForHandle="slider-label" | ||
| options={optionsWithoutLabel} | ||
| onChangeComplete={(selectedValue: { | ||
| id: string; | ||
| name: string; | ||
| value: number; | ||
| }) => { | ||
| console.log(selectedValue); | ||
| }} | ||
| />, | ||
| ); | ||
|
|
||
| // Assert | ||
| expect(await axe(container)).toHaveNoViolations(); | ||
| }); |
There was a problem hiding this comment.
c'est un test d'accessibilité
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Add test coverage for Slider Component :
From this issue :
#714