remix-validated-form 0.0.2 → 1.1.0

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

@@ -1,98 +0,0 @@
-/*
- * 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

@@ -1,5 +0,0 @@
-{
-  "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

@@ -1,15 +0,0 @@
-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

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,26 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,38 +0,0 @@
-// 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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/// <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

@@ -1,20 +0,0 @@
-// ***********************************************************
-// 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

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

package/test-app/cypress.json

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