Skip to content

Commit 273b1a9

Browse files
TomFreudenbergTomFreudenberg
authored
mod: update README.md
1 parent df5f1a5 commit 273b1a9

File tree

1 file changed

+46
-87
lines changed

1 file changed

+46
-87
lines changed

‎README.md‎

Lines changed: 46 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -11,113 +11,43 @@
1111

1212
## next-auth-mock
1313

14-
**ATTENTION:** To use this library currently you need to install a version from [Next-Auth](https://github.com/nextauthjs/next-auth) later than currently published release **4.12.2**. Otherwise the necessary `SessionContext` is not exported and available. Checkout the [commit](https://github.com/nextauthjs/next-auth/commit/97feae791630e0f38e3e26b3bd70cc77e94b3eda) from [PR #5438](https://github.com/nextauthjs/next-auth/pull/5438).
15-
16-
The next steps are only necessary until a new release of next-auth will be published by them!
17-
1814
<br>
1915

2016

21-
### Prepare for next-auth while release <= 4.12.2
22-
23-
Get next-auth from github and build yourself:
24-
25-
```bash
26-
cd /my-work-folder/
27-
28-
git clone https://github.com/nextauthjs/next-auth.git
29-
30-
cd ./next-auth
31-
32-
# get the commit from PR
33-
git checkout 97feae791630e0f38e3e26b3bd70cc77e94b3eda
34-
35-
pnpm install
36-
37-
pnpm build
38-
```
39-
40-
Now you have a working self-build release of next-auth.
41-
42-
<br>
43-
17+
### Installation
4418

45-
### Get this mock library and build while <= [email protected]
19+
Install this library by adding it to your devDependencies:
4620

4721
```bash
48-
cd /my-work-folder/
49-
50-
git clone https://github.com/TomFreudenberg/next-auth-mock.git
51-
52-
cd ./next-auth-mock
53-
54-
pnpm install
22+
pnpm add --save-dev @tomfreudenberg/next-auth-mock
5523
```
5624

5725
<br>
5826

5927

60-
### IMPORTANT to link the next-auth self build library
61-
62-
You have to link the self built next-auth library to this component as well as to your app to replace the "outdated" 4.12.2 release.
63-
64-
```bash
65-
cd /my-work-folder/next-auth-mock
66-
67-
pnpm link ../next-auth/packages/next-auth
68-
69-
cd /my-app/
70-
71-
pnpm link /my-work-folder/next-auth/packages/next-auth
72-
```
73-
74-
_Please check pathes to be correct for your system and environment_
28+
## Storybook
7529

7630
<br>
7731

32+
### Add to your storybook preview
7833

79-
## Using next-auth-mock
80-
81-
### Installation
82-
83-
Install this library by adding it to your devDependencies:
84-
85-
```bash
86-
pnpm add --save-dev @tomfreudenberg/next-auth-mock
87-
```
88-
89-
<br>
90-
91-
### Include into storybook preview
92-
93-
Update your `.storybook/preview.js`:
34+
Update `.storybook/preview.js`:
9435

9536
```js
96-
import SessionContextProvider from '@tomfreudenberg/next-auth-mock';
97-
import { mockPreviewAuthentications, mockPreviewAuthenticationsToolbar } from '@tomfreudenberg/next-auth-mock/storybook';
37+
import { mockAuthPreviewToolbarItem, withMockAuth } from '@tomfreudenberg/next-auth-mock/storybook';
9838

9939
export const globalTypes = {
100-
appAuthenticated: mockPreviewAuthenticationsToolbar()
101-
};
102-
103-
const withAuthProvider = (Story, context) => {
104-
const session = mockPreviewAuthentications[context.globals.appAuthenticated]?.session;
105-
106-
return (
107-
<SessionContextProvider session={session}>
108-
<Story {...context} />
109-
</SessionContextProvider>
110-
);
40+
...mockAuthPreviewToolbarItem()
11141
};
11242

113-
export const decorators = [withAuthProvider];
43+
export const decorators = [withMockAuth];
11444
```
11545

11646
<br>
11747

118-
### Toolbar integration
48+
### Use toolbar menu
11949

120-
After restarting your storybook, an icon will appear in the toolbar:
50+
After restarting your storybook, an additional icon will appear in the toolbar:
12151

12252
<img width="191" alt="image" src="https://user-images.githubusercontent.com/410087/193901653-12114ea3-9a4c-4d93-ac93-46576a2409e6.png">
12353

@@ -126,7 +56,7 @@ That allows to select the session state.
12656
<br>
12757

12858

129-
## Writing stories and include your components
59+
### Write stories and include your components
13060

13161
```jsx
13262
// ./stories/pages/denied.stories.jsx
@@ -143,21 +73,23 @@ export const DeniedPageStory = (args) => <DeniedPage />;
14373
DeniedPageStory.parameters = {};
14474
```
14575

76+
<br>
77+
14678
You may now control and test your component state of `useSession()` by the toolbar items:
14779

14880
![next-auth-mock-storybook-preview](https://user-images.githubusercontent.com/410087/193903296-0c0ba17d-0c81-4034-afb2-36f5214ad5bc.gif)
14981

15082
<br>
15183

15284

153-
## Using a fix state to test a component
85+
### Use a fix state to test a component
15486

15587
To make sure that your component may be tested with a fixed auth state regardless the the toolbar selection, you may overwrite the session properties:
15688

15789
```jsx
15890
// ./stories/pages/signin.stories.jsx
15991

160-
import SessionContextProvider from '@tomfreudenberg/next-auth-mock';
92+
import MockSessionContext from '@tomfreudenberg/next-auth-mock';
16193
import { useSession } from 'next-auth/react';
16294

16395
import SigninPage from '@/pages/auth/signin';
@@ -174,11 +106,11 @@ export const SigninPageStory = (props) => {
174106
// enforce no session to make sure that the SigninPage will be shown (not authenticated)
175107
current_session.status = 'unauthenticated';
176108

177-
// overrule the main SessionContextProvider with updated settings
109+
// overrule the main MockSessionContext with updated settings
178110
return (
179-
<SessionContextProvider session={current_session}>
111+
<MockSessionContext session={current_session}>
180112
<SigninPage />
181-
</SessionContextProvider>
113+
</MockSessionContext>
182114
);
183115
}
184116

@@ -188,6 +120,33 @@ SigninPageStory.parameters = {};
188120
<br>
189121

190122

123+
### Customize toolbar icon and items
124+
125+
The additional toolbar entry could be completely customized. Just set the options to `mockAuthPreviewToolbarItem()` as you like.
126+
127+
```js
128+
export const mockAuthPreviewToolbarItem = ({
129+
name = 'mockAuthState',
130+
description = 'Set authentication state',
131+
defaultValue = null,
132+
icon = 'user',
133+
items = mockAuthStates
134+
} = {}) => ...
135+
```
136+
137+
Let's change the language of the description as an example:
138+
139+
```js
140+
export const globalTypes = {
141+
...mockAuthPreviewToolbarItem({ description: 'Auswahl Anmeldestatus')
142+
};
143+
```
144+
145+
If you like to change the given states, just clone and change or rewrite the `mockAuthStates` at [@tomfreudenberg/next-auth-mock](https://github.com/TomFreudenberg/next-auth-mock/blob/df5f1a55e82fca8a182402b39c1ec216f47758a7/src/index.js#L7-L80)
146+
147+
<br>
148+
149+
191150
## npm Package
192151
193152
You may find, use and download the npm package on [npmjs.com](https://npmjs.com/package/@tomfreudenberg/next-auth-mock).

0 commit comments

Comments
 (0)