diff --git a/packages/mock-addon-docs/stories/docs/advanced-setup.mdx b/packages/mock-addon-docs/stories/docs/advanced-setup.mdx index 22c8d24..74ae9fb 100644 --- a/packages/mock-addon-docs/stories/docs/advanced-setup.mdx +++ b/packages/mock-addon-docs/stories/docs/advanced-setup.mdx @@ -1,5 +1,6 @@ import { Meta } from '@storybook/addon-docs'; +import { Markdown } from '@storybook/blocks'; import { Footer } from './footer'; @@ -19,15 +20,15 @@ import { Footer } from './footer'; You can set global configuration for the addon. Go to the `.storybook/preview.jsx` file and add `mockAddonConfigs` fields with the following properties. - +{` | 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 | +`} ```js export const parameters = { @@ -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 { @@ -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', diff --git a/packages/mock-addon-docs/stories/docs/installation-setup.mdx b/packages/mock-addon-docs/stories/docs/installation-setup.mdx index f4a1941..0949364 100644 --- a/packages/mock-addon-docs/stories/docs/installation-setup.mdx +++ b/packages/mock-addon-docs/stories/docs/installation-setup.mdx @@ -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'; @@ -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.
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` | +{` +| 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.
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\` | +`}

diff --git a/packages/mock-addon/src/utils/faker.js b/packages/mock-addon/src/utils/faker.js index 9c27c66..7bf1513 100644 --- a/packages/mock-addon/src/utils/faker.js +++ b/packages/mock-addon/src/utils/faker.js @@ -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, diff --git a/packages/mock-addon/src/utils/request.js b/packages/mock-addon/src/utils/request.js index eb9d2db..dce6b0d 100644 --- a/packages/mock-addon/src/utils/request.js +++ b/packages/mock-addon/src/utils/request.js @@ -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; }