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.

Sign up for GitHub

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

Provide request headers in response function #219

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+27 −16
Open

Provide request headers in response function #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72eb4fe
Provide access to header in request
chaptergy Oct 10, 2024
626629c
Fixes tables in stories
chaptergy Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions packages/mock-addon-docs/stories/docs/advanced-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

import { Meta } from '@storybook/addon-docs';
import { Markdown } from '@storybook/blocks';
import { Footer } from './footer';

<Meta title="Docs/Advanced setup" />
Expand All @@ -19,15 +20,15 @@ import { Footer } from './footer';
You can set <strong>global configuration</strong> for the addon. Go to the `.storybook/preview.jsx` file and add `mockAddonConfigs` fields with the following properties.



<Markdown>{`
| Property | Description | Default |
| ------------------------ | :----------------------------------------------------------------------------- | :------ |
| `globalMockData` | An array of mock objects which will add in every story | [] |
| `ignoreQueryParams` | Whether or not to ignore query parameters globally | false |
| `refreshStoryOnUpdate` | This property re-renders the story if there's any data changes | false |
| `disableUsingOriginal` | This property disables the toggle (on/off) option to use the original endpoint | false |
| `disable` | This property disables the panel from all the stories | false |

| \`globalMockData\` | An array of mock objects which will add in every story | [] |
| \`ignoreQueryParams\` | Whether or not to ignore query parameters globally | false |
| \`refreshStoryOnUpdate\` | This property re-renders the story if there's any data changes | false |
| \`disableUsingOriginal\` | This property disables the toggle (on/off) option to use the original endpoint | false |
| \`disable\` | This property disables the panel from all the stories | false |
`}</Markdown>

```js
export const parameters = {
Expand Down Expand Up @@ -136,7 +137,7 @@ FetchCall.parameters = {
method: 'GET',
status: 200,
response: (request) => {
const { body, searchParams } = request;
const { body, headers, searchParams } = request;

if (searchParams.id == 1) {
return {
Expand All @@ -146,6 +147,10 @@ FetchCall.parameters = {
return {
data: 'Custom data for name mock',
};
} else if (headers.get("Accept-Language") === 'fr-FR') {
return {
data: 'Données personnalisées en français',
};
}
return {
data: 'Default data',
Expand Down
17 changes: 10 additions & 7 deletions packages/mock-addon-docs/stories/docs/installation-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

import { Meta } from '@storybook/addon-docs';
import { Markdown } from '@storybook/blocks';
import LinkTo from '@storybook/addon-links/react';
import { Footer } from './footer';

Expand Down Expand Up @@ -80,13 +81,15 @@ export const FetchCall = Template.bind({});

Each mock object contains the following properties.

| Property | Description | Required | Default |
| ---------- | :------------------------------------------------------------------------------------------ | :------- | :------ |
| `url` | Supports both **named parameters** (`/:foo/:bar`) and **query parameters**.(`/foo?bar=true`) | true | - |
| `method` | Supports `GET`, `POST`, `PUT`, `PATCH` and `DELETE` methods. | true | - |
| `status` | All possible [HTTP status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status). | true | - |
| `response` | A valid JSON format(Array or Object) or function. <br/> Response function is a function that contains request object as a parameter. See the **Custom Response** section for example. | true | - |
| `delay` | Emulate delayed response time in milliseconds. | - | `0` |
<Markdown>{`
| Property | Description | Required | Default |
|--------------|-:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-:--------|-:-------|
| \`url\` | Supports both **named parameters** (\`/:foo/:bar\`) and **query parameters**.(\`/foo?bar=true\`) | true | - |
| \`method\` | Supports \`GET\`, \`POST\`, \`PUT\`, \`PATCH\` and \`DELETE\` methods. | true | - |
| \`status\` | All possible [HTTP status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status). | true | - |
| \`response\` | A valid JSON format(Array or Object) or function. <br/> Response function is a function that contains request object as a parameter. See the **Custom Response** section for example. | true | - |
| \`delay\` | Emulate delayed response time in milliseconds. | - | \`0\` |
`}</Markdown>


<br />
Expand Down
3 changes: 2 additions & 1 deletion packages/mock-addon/src/utils/faker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,12 +167,13 @@ export class Faker {

mockXhrRequest = (request) => {
const { method, url, body } = request;
const requestHeaders = request?.requestHeaders?._headers;
const matched = this.matchMock(url, method);
if (matched) {
const { response, status, delay = 0 } = matched;
setTimeout(() => {
if (typeof response === 'function') {
const data = response(new Request(url, { method, body }));
const data = response(new Request(url, { method, body, headers: requestHeaders }));
request.respond(
+status,
defaultResponseHeaders,
Expand Down
2 changes: 2 additions & 0 deletions packages/mock-addon/src/utils/request.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ export function Request(input, options = {}) {
if (typeof input === 'object') {
this.method = options.method || input.method || 'GET';
this.url = input.url;
this.headers = options.headers || input.headers || null;
this.body = options.body || input.body || null;
this.signal = options.signal || input.signal || null;
} else {
this.method = options.method || 'GET';
this.url = input;
this.headers = options.headers || null;
this.body = options.body || null;
this.signal = options.signal || null;
}
Expand Down