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;
}