Skip to content

Commit

Permalink
Issue-110: Update with PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
DevLab2425 committed Oct 21, 2024
1 parent 44dbd77 commit 526e2bc
Showing 1 changed file with 38 additions and 12 deletions.
50 changes: 38 additions & 12 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -192,12 +192,6 @@ The following is an example of a spec file, with imports, a global mock (`fetch`
import { expect } from "@esm-bundle/chai";
import "./my-custom-element.js";
window.fetch = function () {
return new Promise((resolve) => {
resolve(new Response(JSON.stringify({ foo: "mock response" })));
});
};
describe("Components/My Custom Element", () => {
it("should do something expected", () => {
expect("something").equal("some" + "thing");
Expand All @@ -209,25 +203,25 @@ describe("Components/My Custom Element", () => {
With the spec file foundation, the custom element can now be created and applied to the mock DOM environment. To do this, we use the Web Test Runner (WTR) framework which provides the scaffolding to test Web Componets in a browser environment.
The WTR and the full setup is covered in greater detail within [the GreenwoodJS test runner docs](https://super-tapioca-5987ce.netlify.app/guides/ecosystem/web-test-runner/). In an attempt to not duplicate those docs, an outline has been provided here, but please refer to those docs for a full user guide.
The WTR and the full setup is covered in greater detail within [the GreenwoodJS test runner docs](https://www.greenwood.dev/guides/ecosystem/web-test-runner/). In an attempt to not duplicate those docs, an outline has been provided here, but please refer to those docs for a full user guide.
1. **[Setup](https://super-tapioca-5987ce.netlify.app/guides/ecosystem/web-test-runner/#setup)**
1. **[Setup](https://www.greenwood.dev/guides/ecosystem/web-test-runner/#setup)**
Install dependencies and configure WTR. This project has that covered already! ✅ (Let's chat if there becomes a need to reconfigure the current setup.)
1. **[Usage](https://super-tapioca-5987ce.netlify.app/guides/ecosystem/web-test-runner/#usage)**
1. **[Usage](https://www.greenwood.dev/guides/ecosystem/web-test-runner/#usage)**
Within a traditional `before` block, create the custom element, and append to the DOM. See the example below. 👇
1. **[Static Assets](https://super-tapioca-5987ce.netlify.app/guides/ecosystem/web-test-runner/#static-assets)**
1. **[Static Assets](https://www.greenwood.dev/guides/ecosystem/web-test-runner/#static-assets)**
If experiencing a 404 for a missing asset, a simple middleware can help mock that request. Otherwise, you can skip this section.
1. **[Install Resource Plugins](https://super-tapioca-5987ce.netlify.app/guides/ecosystem/web-test-runner/#resource-plugins)**
1. **[Install Resource Plugins](https://www.greenwood.dev/guides/ecosystem/web-test-runner/#resource-plugins)**
If using a Greenwood resource plugin, you'll need to provide that info to stub out the signiture.
1. **[Mock Data Requests](https://super-tapioca-5987ce.netlify.app/guides/ecosystem/web-test-runner/#content-as-data)**
1. **[Mock Data Requests](https://www.greenwood.dev/guides/ecosystem/web-test-runner/#content-as-data)**
If using Greenwood's Content as Data feature, mocking `fetch` with mock data is necessary.
Expand Down Expand Up @@ -285,6 +279,38 @@ components/
my-component.stories.js
```
#### _Content as Data_ Stories
When a component requires a `fetch` request for data, the story will need to mock this request before being able to render within the Storybook.
To mock `fetch`, create a `parameter` within the story export object named `fetchMock`. This object contains a `mocks` array with a `matcher` for the localhost network request URL. The `matcher.response` object represents the mocked data to use with the story.
Checkout [the `blog-posts-list.stories.js` story](https://github.com/ProjectEvergreen/www.greenwoodjs.dev/blob/main/src/components/blog-posts-list/blog-posts-list.stories.js) as an example.
```js
import "./my-custom-element.js";
import pages from "../../stories/mocks/graph.json";
export default {
title: "Components/My Custom Element",
parameters: {
// ...other parameters, if necessary...
fetchMock: {
mocks: [
{
matcher: {
url: "http://localhost:1985/graph.json",
response: {
body: pages,
},
},
},
],
},
},
};
```
## Hosting and Deployment
This project is hosted on Netlify and automatically deploys on each merge into main. Release branches will be curated over the course of a Greenwood release cycle and then merged at the time the new Greenwood release is published to NPM.

0 comments on commit 526e2bc

Please sign in to comment.