Update examples, add GH workflows and some release scripts (#20)

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "apollographql/graphql-testing-library" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.eslintrc.cjs

@@ -3,12 +3,13 @@
 module.exports = {
   env: {
     browser: true,
+    node: true,
     es2021: true,
   },
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
   ],
   overrides: [],
   parser: "@typescript-eslint/parser",

.github/workflows/release.yml

@@ -0,0 +1,66 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Changesets Release
+    # Prevents action from creating a PR on forks
+    if: github.repository == 'apollographql/graphql-testing-library'
+    runs-on: ubuntu-latest
+    # Permissions necessary for Changesets to push a new branch and open PRs
+    # (for automated Version Packages PRs), and request the JWT for provenance.
+    # More info: https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect#adding-permissions-settings
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          # Fetch entire git history so  Changesets can generate changelogs
+          # with the correct commits
+          fetch-depth: 0
+
+      - name: Check for pre.json file existence
+        id: check_files
+        uses: andstor/[email protected]
+        with:
+          files: ".changeset/pre.json"
+
+      - name: Append NPM token to .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            provenance=true
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm and dependencies
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
+      # - name: Create release PR or publish to npm + GitHub
+      #   id: changesets
+      #   if: steps.check_files.outputs.files_exists == 'false'
+      #   uses: changesets/action@v1
+      #   with:
+      #     version: pnpm run changeset-version
+      #     publish: pnpm run changeset-publish
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #     NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,41 @@
+name: Test
+
+on: [push]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  test:
+    name: Test
+    # Prevents action from creating a PR on forks
+    if: github.repository == 'apollographql/graphql-testing-library'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm and dependencies
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Check types
+        run: pnpm run type-check
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Run Jest tests
+        run: pnpm run test
+
+      - name: Serve Storybook and run tests
+        run: pnpm run build-and-test-storybook

.storybook/main.ts

@@ -1,6 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import relay from "vite-plugin-relay";
-import vitePluginReact from "@vitejs/plugin-react";
 import graphqlLoader from "vite-plugin-graphql-loader";
 
 const config: StorybookConfig = {
@@ -18,8 +17,9 @@ const config: StorybookConfig = {
   },
   async viteFinal(config, options) {
     // Add your configuration here
-    config.plugins?.push(relay, graphqlLoader(), vitePluginReact());
+    config.plugins?.push(relay, graphqlLoader());
     return config;
   },
 };
+
 export default config;

.storybook/stories/ApolloComponent.stories.ts

@@ -1,36 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-// import { createTestSchema } from "@apollo/client/testing/experimental";
-import ApolloComponent from "./ApolloComponent";
-import { addMocksToSchema } from "@graphql-tools/mock";
-import { makeExecutableSchema } from "@graphql-tools/schema";
-import { within, userEvent, expect, waitFor } from "@storybook/test";
+import { within, expect, waitFor } from "@storybook/test";
+import ApolloComponent from "./components/apollo-client/ApolloComponent.js";
 import { createHandler } from "../../src/handlers";
-import schemaString from "../../relay-components/schema.graphql";
+import { schemaWithMocks } from "../../src/__tests__/mocks/handlers";
 
-// Make a GraphQL schema with no resolvers
-const schema = makeExecutableSchema({ typeDefs: schemaString });
+const { handler } = createHandler(schemaWithMocks);
 
-const products = ["beanie", "bottle", "cap", "onesie", "shirt", "socks"];
-
-// Create a new schema with mocks
-const schemaWithMocks = addMocksToSchema({
-  schema,
-  resolvers: {
-    Query: {
-      products: () => {
-        return Array.from({ length: 6 }, (_element, id) => ({
-          id,
-          title: products[id].charAt(0).toUpperCase() + products[id].slice(1),
-          mediaUrl: `https://storage.googleapis.com/hack-the-supergraph/apollo-${products[id]}.jpg`,
-        }));
-      },
-    },
-  },
-});
-
-const handler = createHandler(schemaWithMocks);
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: "Example/ApolloComponent",
   component: ApolloComponent,
@@ -45,27 +20,25 @@ const meta = {
 } satisfies Meta<typeof ApolloComponent>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-const user = {};
+type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
-  // play: async ({ canvasElement }) => {
-  //   const canvas = within(canvasElement);
-  //   await expect(
-  //     canvas.getByRole("heading", { name: /loading/i })
-  //   ).toHaveTextContent("Loading...");
-  //   await waitFor(
-  //     () =>
-  //       expect(
-  //         canvas.getByRole("heading", { name: /customers/i })
-  //       ).toHaveTextContent("Customers also purchased"),
-  //     { timeout: 2000 }
-  //   );
-  //   await waitFor(
-  //     () => expect(canvas.getByText(/beanie/i)).toBeInTheDocument(),
-  //     { timeout: 2000 }
-  //   );
-  // },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.getByRole("heading", { name: /loading/i })
+    ).toHaveTextContent("Loading...");
+    await waitFor(
+      () =>
+        expect(
+          canvas.getByRole("heading", { name: /customers/i })
+        ).toHaveTextContent("Customers also purchased"),
+      { timeout: 2000 }
+    );
+    await waitFor(
+      () => expect(canvas.getByText(/beanie/i)).toBeInTheDocument(),
+      { timeout: 2000 }
+    );
+  },
 };