Three-page "who" form section

.cfignore

@@ -0,0 +1 @@
+node_modules

.github/workflows/deploy-main.yaml

@@ -24,6 +24,9 @@ jobs:
  - name: Build with Eleventy
  run: npm run build
 
+ - name: Compile USWDS
+ run: npx gulp compile
+
  - name: Deploy to cloud.gov
  uses: cloud-gov/cg-cli-tools@main
  with:

.github/workflows/test.yaml

@@ -26,6 +26,9 @@ jobs:
  - name: Build site
  run: npm run build
 
+ - name: Compile USWDS
+ run: npx gulp compile
+
  - name: Start web serving container
  # leverage the docker compose setup that we already have for local development
  run: docker compose up -d
@@ -44,6 +47,8 @@ jobs:
  run: npm ci
  - name: Build site
  run: npm run build
+ - name: Compile USWDS
+ run: npx gulp compile
  - name: Start web serving container
  # leverage the docker compose setup that we already have for local development
  run: docker compose up -d
@@ -72,6 +77,9 @@ jobs:
  - name: Build site
  run: npm run build
 
+ - name: Compile USWDS
+ run: npx gulp compile
+
  - name: Start web serving container
  # leverage the docker compose setup that we already have for local development
  run: docker compose up -d
@@ -84,3 +92,39 @@ jobs:
  with:
  target: 'http://localhost:8080'
  rules_file_name: ./zap.conf
+
+ cypress-run:
+ runs-on: ubuntu-22.04
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - uses: actions/setup-node@v4
+
+ - name: Install node packages
+ run: npm ci
+
+ - name: Build site
+ run: npm run build
+
+ - name: Compile USWDS
+ run: npx gulp compile
+
+ - name: Start web serving container
+ # leverage the docker compose setup that we already have for local development
+ run: docker compose up -d
+
+
+ # Install npm dependencies, cache them correctly
+ # and run all Cypress tests
+ - name: Cypress run
+ uses: cypress-io/github-action@v6
+ with:
+ browser: chrome
+
+ - uses: actions/upload-artifact@v4
+ if: failure()
+ with:
+ name: cypress-screenshots
+ path: cypress/screenshots
+ if-no-files-found: ignore

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+ e2e: {
+ baseUrl: 'http://localhost:8080',
+ },
+});

cypress/e2e/question1.cy.js

@@ -0,0 +1,62 @@
+describe('Question 1', () => {
+ it('loads the page', () => {
+ cy.visit('/question1/')
+ });
+
+ it('initially loads with further questions disabled', () => {
+ cy.visit('/question1/');
+
+ cy.get('#organization-type').should("have.attr", "disabled");
+ cy.get('#corporation-type').should("have.attr", "disabled");
+ cy.get('#agency-type').should("have.attr", "disabled");
+ });
+
+ it('initially submits to submit', () => {
+ cy.visit('/question1/');
+
+ cy.get('#question1').should("have.attr", "action", "/submit/");
+ });
+
+ it('submits to question2 for organizations', () => {
+ cy.visit('/question1/');
+ // select organization
+ cy.get('#organization').check("organization", {force: true});
+
+ cy.get('#question1').should("have.attr", "action", "/question2/");
+ });
+
+ it('enables the organization question', () => {
+ cy.visit('/question1/');
+
+ // select organization
+ cy.get('#organization').check("organization", {force: true});
+
+ cy.get("#organization-type").should("not.have.attr", "disabled");
+ })
+
+ it('enables the corporation question', () => {
+ cy.visit('/question1/');
+
+ // select organization
+ cy.get('#organization').check({force: true});
+
+ // select corporation
+ cy.get('#corporation').check();
+
+ // corporation type question is enabled
+ cy.get("#corporation-type").should("not.have.attr", "disabled");
+ })
+
+ it('enables the agency question', () => {
+ cy.visit('/question1/');
+
+ // select organization
+ cy.get('#organization').check({force: true});
+
+ // select corporation
+ cy.get('#agency').check({force: true});
+
+ // agency type question is enabled
+ cy.get("#agency-type").should("not.have.attr", "disabled");
+ })
+})

cypress/e2e/question2.cy.js

@@ -0,0 +1,30 @@
+describe('Question 2', () => {
+ it('loads the page', () => {
+ cy.visit('/question2/')
+ });
+
+ it('initially loads with permit numbers disabled', () => {
+ cy.visit('/question2/');
+
+ cy.get('#permit-numbers').should("have.attr", "disabled");
+ });
+
+ it('enables the permit numbers', () => {
+ cy.visit('/question2/');
+
+ // select organization
+ cy.get('#has-permits').check({force: true});
+
+ cy.get("#permit-numbers").should("not.have.attr", "disabled");
+ })
+
+ it('disables the parent company question', () => {
+ cy.visit('/question2/');
+
+ // select organization
+ cy.get('#no-parent').check({force: true});
+
+ // parent info fieldset is disabled
+ cy.get("#parent-info").should("have.attr", "disabled");
+ })
+})

cypress/e2e/question3.cy.js

@@ -0,0 +1,12 @@
+describe('Question 3', () => {
+ it('loads the page', () => {
+ cy.visit('/question3/')
+ });
+
+ it('continues to /submit', () => {
+ cy.visit('/question3/');
+
+ cy.contains('Continue').click();
+ cy.url().should("match", /\/submit\/\?$/);
+ });
+})

cypress/fixtures/example.json

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

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')

gulpfile.js

@@ -0,0 +1,29 @@
+/**
+* Import uswds-compile
+*/
+const uswds = require("@uswds/compile");
+
+/**
+* USWDS version
+* Set the major version of USWDS you're using
+* (Current options are the numbers 2 or 3)
+*/
+uswds.settings.version = 3;
+
+/**
+* Path settings
+* Set as many as you need
+*/
+uswds.paths.dist.css = './site/assets/css';
+uswds.paths.dist.theme = './src/sass/uswds';
+uswds.paths.dist.img = './site/assets/uswds/images';
+uswds.paths.dist.fonts = "./site/assets/uswds/fonts";
+uswds.paths.dist.js = "./site/assets/uswds/js";
+
+/**
+* Exports
+* Add as many as you need
+*/
+exports.init = uswds.init;
+exports.compile = uswds.compile;
+exports.watch = uswds.watch;