remix-validated-form 0.0.1

package/test-app/app/styles/global.css

@@ -0,0 +1,98 @@
+/*
+ * You can just delete everything here or keep whatever you like, it's just a
+ * quick baseline!
+ */
+:root {
+  --color-foreground: hsl(0, 0%, 7%);
+  --color-background: hsl(0, 0%, 100%);
+  --color-links: hsl(213, 100%, 52%);
+  --color-links-hover: hsl(213, 100%, 43%);
+  --color-border: hsl(0, 0%, 82%);
+  --font-body: -apple-system, "Segoe UI", Helvetica Neue, Helvetica, Roboto,
+    Arial, sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:focus {
+  outline: var(--color-links) solid 2px;
+  outline-offset: 2px;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+body {
+  font-family: var(--font-body);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--color-links);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-links-hover);
+  text-decoration: underline;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  background-color: var(--color-border);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+input:where([type="text"]),
+input:where([type="search"]) {
+  display: block;
+  border: 1px solid var(--color-border);
+  width: 100%;
+  font: inherit;
+  line-height: 1;
+  height: calc(1ch + 1.5em);
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  background-color: hsl(0 0% 100% / 20%);
+  color: var(--color-foreground);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.container {
+  --gutter: 16px;
+  width: 1024px;
+  max-width: calc(100% - var(--gutter) * 2);
+  margin-right: auto;
+  margin-left: auto;
+}

package/test-app/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/test-app/cypress/integration/default-values.ts

@@ -0,0 +1,15 @@
+describe("Validation", () => {
+  it("should propagate default values to inputs", () => {
+    cy.visit("/default-values");
+    cy.findByLabelText("First Name").should("have.value", "Jane");
+    cy.findByLabelText("Last Name").should("have.value", "Doe");
+    cy.findByLabelText("Email").should("have.value", "jane.doe@example.com");
+  });
+
+  it("should propagate default values to inputs without JS", () => {
+    cy.visitWithoutJs("/default-values");
+    cy.findByLabelText("First Name").should("have.value", "Jane");
+    cy.findByLabelText("Last Name").should("have.value", "Doe");
+    cy.findByLabelText("Email").should("have.value", "jane.doe@example.com");
+  });
+});

package/test-app/cypress/integration/sanity.ts

@@ -0,0 +1,19 @@
+/**
+ * Some tests just to verify that the test utils in the app actually behave as assumed by other tests
+ */
+
+describe("Sanity", () => {
+  describe("Visiting without JS", () => {
+    it("should not show a noscript message when javascript enabled", () => {
+      cy.visit("/noscript");
+      cy.findByText("Is JS turned on?").should("exist");
+      cy.findByText("JS is turned off").should("not.exist");
+    });
+
+    it("should show a noscript message when javascript disabled", () => {
+      cy.visitWithoutJs("/noscript");
+      cy.findByText("Is JS turned on?").should("exist");
+      cy.findByText("JS is turned off").should("exist");
+    });
+  });
+});

package/test-app/cypress/integration/submission.ts

@@ -0,0 +1,26 @@
+describe("Validation", () => {
+  it("should show the loading state for the correct submit button", () => {
+    cy.visit("/submission");
+    cy.findByText("Submit main form").click();
+    cy.findByText("Submitting alt form").should("not.exist");
+    cy.findByText("Submitting fetcher form").should("not.exist");
+    // if we check the one we're expecting last, then the test will correctly fail if the other buttons are in a loading state
+    cy.findByText("Submitting main form").should("exist");
+
+    cy.findByText("Submitting main form").should("not.exist");
+
+    cy.findByText("Submit alt form").click();
+    cy.findByText("Submitting main form").should("not.exist");
+    cy.findByText("Submitting fetcher form").should("not.exist");
+    cy.findByText("Submitting alt form").should("exist");
+
+    cy.findByText("Submitting alt form").should("not.exist");
+
+    cy.findByText("Submit fetcher form").click();
+    cy.findByText("Submitting alt form").should("not.exist");
+    cy.findByText("Submitting main form").should("not.exist");
+    cy.findByText("Submitting fetcher form").should("exist");
+
+    cy.findByText("Submitting fetcher form").should("not.exist");
+  });
+});

package/test-app/cypress/integration/validation.ts

@@ -0,0 +1,70 @@
+describe("Validation", () => {
+  it("should support validating individual fields", () => {
+    cy.visit("/validation");
+
+    cy.findByLabelText("First Name").focus().blur();
+    cy.findByText("First Name is a required field").should("exist");
+    cy.findByLabelText("First Name").type("John");
+    cy.findByText("First Name is a required field").should("not.exist");
+
+    cy.findByLabelText("Last Name").focus().blur();
+    cy.findByText("Last Name is a required field").should("exist");
+    cy.findByLabelText("Last Name").type("Doe");
+    cy.findByText("Last Name is a required field").should("not.exist");
+
+    cy.findByLabelText("Email").focus().blur();
+    cy.findByText("Email is a required field").should("exist");
+    cy.findByLabelText("Email").type("not an email");
+    cy.findByLabelText("Email").blur();
+    cy.findByText("Email must be a valid email").should("exist");
+
+    cy.findByLabelText("Email").clear().type("an.email@example.com").blur();
+    cy.findByText("Email must be a valid email").should("not.exist");
+
+    cy.findByText("Email is a required field").should("not.exist");
+    cy.findByText("Last Name is a required field").should("not.exist");
+    cy.findByText("First Name is a required field").should("not.exist");
+
+    cy.findByText("Submit").click();
+    cy.findByText("Submitted for John Doe!").should("exist");
+  });
+
+  it("should validate the whole form at once when submit clicked", () => {
+    cy.visit("/validation");
+
+    cy.findByText("Submit").click();
+
+    cy.findByText("Email is a required field").should("exist");
+    cy.findByText("Last Name is a required field").should("exist");
+    cy.findByText("First Name is a required field").should("exist");
+
+    cy.findByLabelText("First Name").type("John");
+    cy.findByText("First Name is a required field").should("not.exist");
+
+    cy.findByLabelText("Last Name").type("Doe");
+    cy.findByText("Last Name is a required field").should("not.exist");
+
+    cy.findByLabelText("Email").type("an.email@example.com").blur();
+    cy.findByText("Email is a required field").should("not.exist");
+
+    cy.findByText("Submit").click();
+    cy.findByText("Submitted for John Doe!").should("exist");
+  });
+
+  it("should show validation errors even with JS disabled", () => {
+    cy.visitWithoutJs("/validation");
+
+    cy.findByText("Submit").click();
+
+    cy.findByText("Email is a required field").should("exist");
+    cy.findByText("Last Name is a required field").should("exist");
+    cy.findByText("First Name is a required field").should("exist");
+
+    cy.findByLabelText("First Name").type("John");
+    cy.findByLabelText("Last Name").type("Doe");
+    cy.findByLabelText("Email").type("an.email@example.com").blur();
+
+    cy.findByText("Submit").click();
+    cy.findByText("Submitted for John Doe!").should("exist");
+  });
+});

package/test-app/cypress/plugins/config.ts

@@ -0,0 +1,38 @@
+// Plugin taken from Kent C Dodds' remix app
+export default (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) => {
+  const port = process.env.PORT ?? "3000";
+  const configOverrides: Partial<Cypress.PluginConfigOptions> = {
+    baseUrl: `http://localhost:${port}`,
+    viewportWidth: 1030,
+    viewportHeight: 800,
+    integrationFolder: "cypress/integration",
+    video: !process.env.CI,
+    screenshotOnRunFailure: !process.env.CI,
+  };
+  Object.assign(config, configOverrides);
+
+  on("before:browser:launch", (browser, options) => {
+    if (browser.name === "chrome") {
+      options.args.push(
+        "--no-sandbox",
+        "--allow-file-access-from-files",
+        "--use-fake-ui-for-media-stream",
+        "--use-fake-device-for-media-stream",
+        "--use-file-for-fake-audio-capture=cypress/fixtures/sample.wav"
+      );
+    }
+    return options;
+  });
+
+  on("task", {
+    log(message) {
+      console.log(message);
+      return null;
+    },
+  });
+
+  return config;
+};

package/test-app/cypress/plugins/index.ts

@@ -0,0 +1,9 @@
+import configPlugin from "./config";
+
+export default (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) => {
+  configPlugin(on, config);
+  return config;
+};

package/test-app/cypress/support/commands/index.ts

@@ -0,0 +1,13 @@
+import "@testing-library/cypress/add-commands";
+
+Cypress.Commands.add("visitWithoutJs", (url) => {
+  const parentDocument = (cy as any).state("window").parent.document;
+  const iframe = parentDocument.querySelector(".iframes-container iframe");
+  if (false !== Cypress.config("chromeWebSecurity")) {
+    throw new TypeError(
+      "When you disable script you also have to set 'chromeWebSecurity' in your config to 'false'"
+    );
+  }
+  iframe.sandbox = "allow-forms";
+  return cy.visit(url);
+});

package/test-app/cypress/support/commands/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to visit a url with javascript disabled.
+     * @example cy.visitWithoutJs("/teacher")
+     */
+    visitWithoutJs(url: string): void;
+  }
+}

package/test-app/cypress/support/index.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/test-app/cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["cypress", "@testing-library/cypress", "node"],
+    "baseUrl": "..",
+    "paths": { "~/*": ["app/*"] }
+  },
+  "include": ["./**/*"],
+  "exclude": []
+}

package/test-app/cypress.json

@@ -0,0 +1,3 @@
+{
+  "chromeWebSecurity": false
+}