-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add HookWrapper class + add updateProps function to Wrapper classes
- Loading branch information
Raice Hannay
committed
Dec 16, 2024
1 parent
76b747c
commit bae1d1e
Showing
19 changed files
with
2,084 additions
and
1,691 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| `HookWrapper` | ||
| ============= | ||
|
|
||
| This abstract class has a `wrapper` property defined which wraps the component in a Redux `Provider`, | ||
| passing in the return value from the `createStore` method. | ||
|
|
||
| To use this class, you have to extend it and set the `wrapper` property to an instance of your application's | ||
| pre-configured `Wrapper` class. This is to keep things scalable and able to support any type of `Wrapper` | ||
| being used. | ||
|
|
||
|
|
||
| How to extend | ||
| ------------- | ||
|
|
||
| To extend this class to implement your own setup functionality, you can do so as shown in the | ||
| example below. | ||
|
|
||
| ```typescript jsx | ||
| import { THook, HookWrapper as BaseHookWrapper } from "react-test-wrapper"; | ||
|
|
||
| // This must be your pre-configured `Wrapper` class, to ensure that all of the methods and types are present. | ||
| import { Wrapper } from "./Wrapper.js"; | ||
|
|
||
| export class HookWrapper< | ||
| H extends THook, | ||
| W extends Wrapper<React.ComponentType<any>>, | ||
| > extends BaseHookWrapper<H, W> { | ||
| constructor(hook: H) { | ||
| super(hook); | ||
|
|
||
| this.wrapper = new Wrapper(this.WrappingComponent) as W; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| How to use it in your tests | ||
| --------------------------- | ||
|
|
||
| ```typescript jsx | ||
| const hook = new HookWrapper(useMyStuff); | ||
|
|
||
| hook.wrapper.withDefaultReduxState({ | ||
| test: { | ||
| valueA: "Default value A", | ||
| valueB: "Default value B", | ||
| }, | ||
| }); | ||
|
|
||
| describe("useMyStuff", () => { | ||
| describe("when using scenario-specific state", () => { | ||
| it("mounts the hook", () => { | ||
| hook.wrapper.withReduxState({ | ||
| test: { | ||
| valueA: "Scenario value A", | ||
| }, | ||
| }); | ||
|
|
||
| hook.mount("A", 2); | ||
| }); | ||
|
|
||
| it("returns the expected value", () => { | ||
| expect(hook.returnValue).toEqual({ | ||
| selectedValueA: "Scenario value A", | ||
| selectedValueB: "Default value B", | ||
| valueA: "A", | ||
| valueB: 2, | ||
| }); | ||
| }); | ||
|
|
||
| it("updates the parameters", () => { | ||
| hook.update("B", 3); | ||
| }); | ||
|
|
||
| it("updates the return value", () => { | ||
| expect(hook.returnValue).toEqual({ | ||
| selectedValueA: "Scenario value A", | ||
| selectedValueB: "Default value B", | ||
| valueA: "B", | ||
| valueB: 3, | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| ``` |
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { TestHookWrapper } from "../../test/react-testing-library/TestHookWrapper.js"; | ||
| import { useTestHook } from "../../test/useTestHook.js"; | ||
|
|
||
| const hook = new TestHookWrapper(useTestHook); | ||
|
|
||
| hook.wrapper.withDefaultReduxState({ | ||
| test: { | ||
| value: "Redux value", | ||
| }, | ||
| }); | ||
|
|
||
| describe("HookWrapper", () => { | ||
| describe("when using default state", () => { | ||
| it("mounts the hook", () => { | ||
| hook.mount("A", 2); | ||
| }); | ||
|
|
||
| it("returns the expected value", () => { | ||
| expect(hook.returnValue).toEqual({ | ||
| selectedValue: "Redux value", | ||
| valueA: "A", | ||
| valueB: 2, | ||
| }); | ||
| }); | ||
|
|
||
| it("updates the parameters", () => { | ||
| hook.update("B", 3); | ||
| }); | ||
|
|
||
| it("updates the return value", () => { | ||
| expect(hook.returnValue).toEqual({ | ||
| selectedValue: "Redux value", | ||
| valueA: "B", | ||
| valueB: 3, | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe("when using scenario-specific state", () => { | ||
| it("mounts the hook", () => { | ||
| hook.wrapper.withReduxState({ | ||
| test: { | ||
| value: "New redux value", | ||
| }, | ||
| }); | ||
|
|
||
| hook.mount("A", 2); | ||
| }); | ||
|
|
||
| it("returns the expected value", () => { | ||
| expect(hook.returnValue).toEqual({ | ||
| selectedValue: "New redux value", | ||
| valueA: "A", | ||
| valueB: 2, | ||
| }); | ||
| }); | ||
|
|
||
| it("updates the parameters", () => { | ||
| hook.update("B", 3); | ||
| }); | ||
|
|
||
| it("updates the return value", () => { | ||
| expect(hook.returnValue).toEqual({ | ||
| selectedValue: "New redux value", | ||
| valueA: "B", | ||
| valueB: 3, | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.