`;
diff --git a/src/components/table-of-contents/table-of-contents.stories.js b/src/components/table-of-contents/table-of-contents.stories.js
index 94f2c937..b5ee46fe 100644
--- a/src/components/table-of-contents/table-of-contents.stories.js
+++ b/src/components/table-of-contents/table-of-contents.stories.js
@@ -8,7 +8,7 @@ export default {
mocks: [
{
matcher: {
- url: "http://localhost:1985/graph.json",
+ url: "http://localhost:1984/___graph.json",
response: {
body: pages,
},
diff --git a/src/pages/guides/ecosystem/storybook.md b/src/pages/guides/ecosystem/storybook.md
index c2bd8025..5ceafde1 100644
--- a/src/pages/guides/ecosystem/storybook.md
+++ b/src/pages/guides/ecosystem/storybook.md
@@ -201,9 +201,11 @@ export default defineConfig({
## Content as Data
-If you are using any of Greenwood's [content as data](/docs/content-as-data/) features, you'll want to configure Storybook for mocking `fetch` calls in your stories.
+If you are using any of Greenwood's Content as Data [Client APIs](/docs/content-as-data/data-client/), you'll want to configure Storybook to mock the HTTP calls Greenwood's data client makes, and provide the desired response needed based on the API being called.
-1. First, install the [**storybook-addon-fetch-mock**](https://storybook.js.org/addons/storybook-addon-fetch-mock) addon
+This can be accomplished with the [**storybook-addon-fetch-mock**](https://storybook.js.org/addons/storybook-addon-fetch-mock) addon and configuring it with the right `matcher.url` and `matcher.response`
+
+1. First, install the **storybook-addon-fetch-mock** addon
```shell
$ npm i -D storybook-addon-fetch-mock
```
@@ -237,9 +239,10 @@ If you are using any of Greenwood's [content as data](/docs/content-as-data/) fe
mocks: [
{
matcher: {
- url: "http://localhost:1985/graph.json",
+ url: "http://localhost:1984/___graph.json",
response: {
- body: pages,
+ // this is an example of mocking out getContentByRoute
+ body: pages.filter((page) => page.route.startsWith("/blog/")),
},
},
},
diff --git a/src/pages/guides/ecosystem/web-test-runner.md b/src/pages/guides/ecosystem/web-test-runner.md
index 235e7bd2..1862b440 100644
--- a/src/pages/guides/ecosystem/web-test-runner.md
+++ b/src/pages/guides/ecosystem/web-test-runner.md
@@ -192,7 +192,9 @@ export default {
## Content as Data
-If you are using any of Greenwood's [content as data](/docs/content-as-data/) features, you'll want to have your tests handle mocking of `fetch` calls. This can be done with a simple override of `window.fetch`
+If you are using any of Greenwood's Content as Data [Client APIs](/docs/content-as-data/data-client/), you'll want to have your tests handle mocking of `fetch` calls.
+
+This can be done by overriding `window.fetch` and providing the desired response needed based on the API being called:
```js
import { expect } from "@esm-bundle/chai";
@@ -202,7 +204,8 @@ import "./blog-posts-list.js";
// override fetch to return a promise that resolves to our mock data
window.fetch = function () {
return new Promise((resolve) => {
- resolve(new Response(JSON.stringify(graph)));
+ // this is an example of mocking out getContentByRoute
+ resolve(new Response(JSON.stringify(graph.filter((page) => page.route.startsWith("/blog/")))));
});
};