Add more tests

cypress/fixtures/contact.json

@@ -0,0 +1,6 @@
+{
+  "name": "John Doe",
+  "email": "[email protected]",
+  "message": "Lorem ipsum dolor sit amet",
+  "phone": "0"
+}

cypress/integration/events.js

@@ -0,0 +1,29 @@
+describe("Events", () => {
+  beforeEach(() => {
+    cy.visit("/dev/events/payment//");
+  });
+
+  it("should focus stripe form when stripe event is fired", () => {
+    cy.get(
+      "a[href='/dev/events/payment?event=pricing:change&product=Starting%20plan&price=$9.99/mo&currency=usd']"
+    ).click();
+    cy.get("#stripe input[name=email]").should("focused", true);
+    cy.get("#stripe .price-display .btn-group label")
+      .should("have.length", 1)
+      .should("contain", "$9.99/mo");
+  });
+
+  it("should focus contact form when contact event is fired", () => {
+    cy.get(
+      "a[href='/dev/events/payment?e=P2V2ZW50PWNvbnRhY3Q6dXBkYXRlJm1lc3NhZ2U9VGl0bGU6IExldCdzIG5lZ290aWF0ZQpQbGFuOiBFbnRlcnByaXNlIHBsYW4KWW91ciBtZXNzYWdlOgo=']"
+    ).click();
+    cy.get("#contact input[name=name]").should("focused", true);
+    cy.get("#contact textarea[name=message]").should(
+      "contain",
+      `Title: Let's negotiate
+Plan: Enterprise plan
+Your message:
+`
+    );
+  });
+});

cypress/integration/form-errors.spec.js

@@ -0,0 +1,33 @@
+describe("Form errors", () => {
+  beforeEach(() => {
+    cy.visit("/fragments/contact/");
+  });
+
+  it("should not be displayed by default", () => {
+    cy.get("#contact .form-group .has-error").should("have.length", 0);
+  });
+
+  it("should be displayed if field is touched", () => {
+    cy.get("#contact .form-group input[name=name]").focus()
+    cy.get("#contact .form-group .has-error").should("have.length", 1);
+  });
+
+  it("should be not be displayed if field is touched but filled with valid information", () => {
+    cy.fixture('contact').then(({name}) => cy.get("#contact .form-group input[name=name]").type(name));
+    cy.get("#contact .form-group .has-error").should("have.length", 0);
+  });
+
+  it("should all be displayed if all inputs are touched", () => {
+    cy.get("#contact .form-group input, #contact .form-group textarea").each((node, i) => setTimeout(() => node.focus(), i * 250));
+    cy.get("#contact .form-group .has-error").should("have.length", 4);
+  });
+
+  it("should not be displayed if all fields are touched but filled with valid information", () => {
+    cy.fixture('contact').then(fields => 
+      Object.keys(fields).forEach(field => 
+        cy.get(`#contact .form-group ${field === 'message' ? 'textarea' : 'input'}[name=${field}]`).type(fields[field])
+      )
+    );
+    cy.get("#contact .form-group .has-error").should("have.length", 0);
+  });
+});

exampleSite/resources/_gen/assets/scss/styles/index.scss_a4e369375f17bb89f2019364cbe7a830.json

@@ -1 +1 @@
-{"Target":"style.min.186bc2691b3b0267fb7a27723217f3b96c3c44739751202d136f9460f847ac6f.css","MediaType":"text/css","Data":{"Integrity":"sha256-GGvCaRs7Amf7eidyMhfzuWw8RHOXUSAtE2+UYPhHrG8="}}
+{"Target":"style.min.186bc2691b3b0267fb7a27723217f3b96c3c44739751202d136f9460f847ac6f.css","MediaType":"text/css","Data":{"Integrity":"sha256-GGvCaRs7Amf7eidyMhfzuWw8RHOXUSAtE2+UYPhHrG8="}}