WIP autocomponents

Author: airhorns

.github/workflows/test.yml

@@ -14,6 +14,15 @@ jobs:
         run: pnpm test
       - name: Build example package
         run: pnpm --filter=blog-example build-vite
+  test-cypress:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-test-env
+      - name: Build all packages (so they can require each other)
+        run: pnpm build
+      - name: Run cypress tests
+        run: pnpm --filter=react exec cypress run
   lint:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -13,4 +13,7 @@ packages/*/dist
 .idea
 packages/sample-app
 *.orig
-cypress.env.json
+# cypress environment variables for each developer
+cypress.env.json
+# generated graphql queries
+packages/react/src/internal/gql

Contributing.md

@@ -1,13 +1,43 @@
-# Development environment
+# Contributing
 
-We require `node` and `pnpm` to exist. If you're a nix user, we have a flake.nix present that installs the same version of the development tools we use for everyone.
+## Development environment
 
-# Building TypeScript
+We require `node` and `pnpm` to exist. If you're a nix user, we have a `flake.nix` present that installs the same version of the development tools we use for everyone.
+
+## Building TypeScript
 
 - You can run `pnpm build` to build all the projects in the repo
 - You can run `pnpm watch` to start the TypeScript watcher process for all the projects in the repo which will recompile files as you change them
 
-# Prereleasing
+## Running Cypress tests
+
+For running the Cypress tests, you need an API key for communicating with a Gadget app this repo uses for testing. You can ask a Gadget staff member for an existing key, or fork the test app and use your own API key for [this app](https://app.gadget.dev/auth/fork?domain=js-clients-test--development.gadget.app).
+
+To open Cypress and execute tests interactively, run:
+
+```react
+pnpm -F=react exec cypress open
+```
+
+To run Cypress on the command line, run:
+
+```react
+pnpm -F=react exec cypress run
+```
+
+## Regenerating GraphQL queries
+
+Most of the GraphQL queries this library makes are assembled dynamically at runtime based on the user's application and the metadata that comes from their API client. For queries we issue against our static part of the GraphQL schema that each application shares though (under `gadgetMeta { ... }`), we have an automatic type-safe GraphQL query generator in place using `graphql-codegen`.
+
+You can author queries using the `graphql` helper, and then generate types for their return values with
+
+```
+pnpm -F=react gql-gen
+```
+
+See the [`graphql-codegen`](https://the-guild.dev/graphql/codegen/docs/guides/react-vue#writing-graphql-queries) docs for more info.
+
+## Prereleasing
 
 It can be annoying to work with these packages via `pnpm link` sometimes, so we also support building and releasing the package to a git SHA which can then be installed conventionally in another repo. To push a prerelease, run `pnpm --filter=@gadgetinc/api-client-core prerelease`. This will:
 
@@ -16,17 +46,17 @@ It can be annoying to work with these packages via `pnpm link` sometimes, so we
 - push that to the remote git repo
 - and log out a version you can then refer to from other repos
 
-# Checking test bundle sizes
+## Checking test bundle sizes
 
 We have a small project setup for evaluating what the bundled size of these dependencies might be together. Run:
 
 ```shell
 pnpm -F=test-bundles test-build
 ```
 
-to build the test bundles
+to build the test bundles.
 
-# Releasing
+## Releasing
 
 Releasing is done automatically via [our release workflow](.github/workflows/release.yml). Any commits to the main branch that changes one of our `packages/**/package.json` versions will automatically be published.
 

packages/api-client-core/src/GadgetConnection.ts

@@ -70,7 +70,7 @@ export class GadgetConnection {
   static version = "<prerelease>" as const;
 
   // Options used when generating new GraphQL clients for the base connection and for for transactions
-  private endpoint: string;
+  readonly endpoint: string;
   private subscriptionClientOptions?: SubscriptionClientOptions;
   private websocketsEndpoint: string;
   private websocketImplementation?: WebSocket;

packages/api-client-core/src/GadgetRecordList.ts

@@ -5,7 +5,7 @@ import type { GadgetRecord, RecordShape } from "./GadgetRecord.js";
 import type { InternalModelManager } from "./InternalModelManager.js";
 import type { AnyModelManager } from "./ModelManager.js";
 import { GadgetClientError, GadgetOperationError } from "./support.js";
-import { PaginateOptions } from "./types.js";
+import type { PaginateOptions } from "./types.js";
 
 type PaginationConfig = {
   pageInfo: { hasNextPage: boolean; hasPreviousPage: boolean; startCursor: string; endCursor: string };

packages/react/codegen.ts

@@ -0,0 +1,20 @@
+import type { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+  schema: "https://js-clients-test--development.gadget.app/api/graphql",
+  documents: ["src/**/*.tsx"],
+  ignoreNoDocuments: true, // for better experience with the watcher
+  generates: {
+    "./src/internal/gql/": {
+      preset: "client",
+      presetConfig: {
+        fragmentMasking: false,
+      },
+      config: {
+        useTypeImports: true,
+      },
+    },
+  },
+};
+
+export default config;

packages/react/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+      viteConfig: {},
+    },
+  },
+});

packages/react/cypress.env.json.example

@@ -0,0 +1,3 @@
+{
+  "JS_CLIENTS_TEST_API_KEY": "gsk-<some secret key>"
+}

packages/react/cypress/component/auto/form/AutoForm.cy.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { api } from "../../../support/api.js";
+import { describeForEachAutoAdapter } from "../../../support/auto.js";
+
+describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }) => {
+  beforeEach(() => {
+    cy.viewport("macbook-13");
+  });
+
+  it("renders an error if the backend returns one when fetching the model data", () => {
+    cy.intercept("POST", `${api.connection.endpoint}?operation=ModelActionMetadata`, { forceNetworkError: true });
+
+    cy.mountWithWrapper(<AutoForm action={api.widget.create} />, wrapper);
+    cy.contains("error");
+  });
+
+  it("can customize the submit label", () => {
+    cy.mountWithWrapper(<AutoForm action={api.widget.create} submitLabel="Save doodad" />, wrapper);
+    cy.contains("Save doodad");
+  });
+
+  it("can render a form to create model and submit it", () => {
+    cy.mountWithWrapper(<AutoForm action={api.widget.create} />, wrapper);
+
+    // TODO(airhorns): export nice human names in the gadget metadata api
+    cy.contains("name");
+    cy.contains("inventoryCount");
+    cy.contains("anything");
+
+    cy.get(`input[name="widget.name"]`).type("test record");
+    cy.get(`input[name="widget.inventoryCount"]`).type("42");
+    cy.get("form [type=submit][aria-hidden!=true]").click();
+    cy.contains("Saved Widget successfully");
+  });
+
+  it("can show invalid field errors from the server and recover from them", () => {
+    cy.mountWithWrapper(<AutoForm action={api.widget.create} />, wrapper);
+
+    // TODO(airhorns): export nice human names in the gadget metadata api
+    cy.contains("name");
+    cy.contains("inventoryCount");
+    cy.contains("anything");
+
+    // fill in name but not inventoryCount
+    cy.get(`input[name="widget.name"]`).type("test record");
+
+    cy.get("form [type=submit][aria-hidden!=true]").click();
+    cy.contains("is a required");
+
+    cy.get(`input[name="widget.inventoryCount"]`).type("42");
+    cy.get("form [type=submit][aria-hidden!=true]").click();
+    cy.contains("Saved Widget successfully");
+  });
+
+  it("can render a form to update a model without making changes and submit it", async () => {
+    const name = `test record ${new Date()}`;
+
+    cy.wrap(null)
+      .then(async () => await api.widget.create({ name, inventoryCount: 42, anything: "hello" }))
+      .then((record) => {
+        cy.mountWithWrapper(<AutoForm action={api.widget.update} record={record.id} />, wrapper);
+        cy.get(`input[name="widget.name"]`).should("have.value", name);
+        cy.get(`input[name="widget.inventoryCount"]`).should("have.value", 42);
+        cy.get("form [type=submit][aria-hidden!=true]").click();
+        cy.contains("Saved Widget successfully");
+      });
+  });
+});

packages/react/cypress/component/auto/form/PolarisDateTimePicker.cy.tsx

@@ -0,0 +1,108 @@
+import { format } from "date-fns";
+import { utcToZonedTime } from "date-fns-tz";
+import React from "react";
+import { PolarisDateTimePicker } from "../../../../src/auto/polaris/PolarisDateTimePicker.js";
+import { PolarisWrapper } from "../../../support/auto.js";
+
+const baseDate = new Date("2021-03-05T11:23:10.000Z");
+const localTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const dateInLocalTZ = utcToZonedTime(baseDate, localTz);
+
+describe("PolarisDateTimePicker", () => {
+  beforeEach(() => {
+    cy.viewport("macbook-13");
+  });
+
+  describe("date only", () => {
+    it("can show with a blank current value", () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").should("have.value", "");
+    });
+
+    it("can show the current value", () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" includeTime value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").should("have.value", format(dateInLocalTZ, "yyyy-MM-dd"));
+    });
+
+    it("can change the date", async () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").click();
+      cy.get(`[aria-label='Thursday March 4 2021']`).click();
+      // eslint-disable-next-line jest/valid-expect-in-promise
+      cy.get("@onChangeSpy")
+        .should("have.been.called")
+        .then(() => {
+          expect(onChangeSpy.getCalls()[0].args[0].toISOString()).equal(new Date("2021-03-04T11:23:10.000Z").toISOString());
+        });
+    });
+
+    it("can change the date across a DST boundary", async () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").click();
+      cy.get(`[aria-label='Wednesday March 17 2021']`).click();
+      // eslint-disable-next-line jest/valid-expect-in-promise
+      cy.get("@onChangeSpy")
+        .should("have.been.called")
+        .then(() => {
+          expect(onChangeSpy.getCalls()[0].args[0].toISOString()).equal(new Date("2021-03-17T10:23:10.000Z").toISOString());
+        });
+    });
+  });
+
+  describe("date and time", () => {
+    it("can show with a blank current value", () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" includeTime onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").should("have.value", "");
+      cy.get("#test-time").should("have.value", "");
+    });
+
+    it("can show the current value", () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" includeTime value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").should("have.value", format(dateInLocalTZ, "yyyy-MM-dd"));
+      cy.get("#test-time").should("have.value", format(dateInLocalTZ, "K:m aa"));
+    });
+
+    it("can change the date", async () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" includeTime value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-date").click();
+      cy.get(`[aria-label='Thursday March 4 2021']`).click();
+      // eslint-disable-next-line jest/valid-expect-in-promise
+      cy.get("@onChangeSpy")
+        .should("have.been.called")
+        .then(() => {
+          expect(onChangeSpy.getCalls()[0].args[0].toISOString()).equal(new Date("2021-03-04T11:23:10.000Z").toISOString());
+        });
+    });
+
+    it("can change the time", () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" includeTime value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-time").clear().type("11:00 AM", { parseSpecialCharSequences: false });
+      // eslint-disable-next-line jest/valid-expect-in-promise
+      cy.get("@onChangeSpy")
+        .should("have.been.called")
+        .then(() => {
+          const calls = onChangeSpy.getCalls();
+
+          expect(calls[calls.length - 1].args[0].toISOString()).equal(new Date("2021-03-05T16:00:00.000Z").toISOString());
+        });
+    });
+
+    it("can enter an invalid time and show an error", () => {
+      const onChangeSpy = cy.spy().as("onChangeSpy");
+      cy.mountWithWrapper(<PolarisDateTimePicker id="test" includeTime value={baseDate} onChange={onChangeSpy} />, PolarisWrapper);
+      cy.get("#test-time").clear().type("foo");
+      cy.get("body").click();
+      cy.contains("Invalid time");
+      cy.get("#test-time").clear().type("12:21 AM");
+      cy.contains("Invalid time").should("not.exist");
+    });
+  });
+});