Initial commit

Author: ryanaltvater

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true

.env

@@ -0,0 +1,7 @@
+# Project-based Percy tokens
+ATLANTIC_BT=web_7af2c478b20f981e6605b7c311391a61dd3d3d77f4e9db5fb9e42fc7654fc461
+RED_HAT=web_10b725cfd38fa4ef2089ace87d0d4f7e52d04220b94f9f4e6091fd00c5328950
+TRAINING_INDUSTRY=web_f4c9b86cf84361f4bd2de925638fb3ea85624ff5d95c264676255bf1e0f50ecd
+
+# Where you're running the tests from
+PERCY_BRANCH=local

.gitignore

@@ -0,0 +1,65 @@
+## Custom
+*.sublime-*
+.vagrant/
+.vscode/
+_design/
+# /dev/
+# /dist/
+docs/
+images/
+img/
+public/
+temp/
+video/
+/index.html
+
+
+## NodeJS
+*.log
+*.pid
+*.seed
+.lock-wscript
+build/Release
+coverage
+lib-cov
+logs
+node_modules
+npm-debug.log
+pids
+
+
+## Bower
+bower
+bower_components
+
+
+## CSS/Sass
+*.css.map
+.sass-cache
+
+
+## macOS
+._*
+.apdisk
+.AppleDB
+.AppleDesktop
+.AppleDouble
+.DS_Store
+.LSOverride
+.Spotlight-V100
+.Trashes
+Icon
+Network Trash Folder
+Temporary Items
+
+
+## Windows
+*.cab
+*.msi
+*.msm
+*.msp
+*.lnk
+$RECYCLE.BIN/
+Desktop.ini
+ehthumbs.db
+Thumbs.db

.nvmrc

@@ -0,0 +1 @@
+v20.4.0

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "trailingComma": "none"
+}

README.md

@@ -1 +1,110 @@
-# percypress
+```
+ ________     ___    ___      ___  ___  _________  ___  ___       ___  _________  ___  _______   ________
+|\   ___ \   |\  \  /  /|    |\  \|\  \|\___   ___\\  \|\  \     |\  \|\___   ___\\  \|\  ___ \ |\   ____\
+\ \  \_|\ \  \ \  \/  / /    \ \  \\\  \|___ \  \_\ \  \ \  \    \ \  \|___ \  \_\ \  \ \  \__/ | \  \___|_
+ \ \  \ \\ \  \ \    / /      \ \  \\\  \   \ \  \ \ \  \ \  \    \ \  \   \ \  \ \ \  \ \  \_\  \ \_____  \
+  \ \  \_\\ \  /     \/        \ \  \\\  \   \ \  \ \ \  \ \  \____\ \  \   \ \  \ \ \  \ \  \_/\ \|____|\  \
+   \ \_______\/  /\   \         \ \_______\   \ \__\ \ \__\ \_______\ \__\   \ \__\ \ \__\ \______\ ____\_\  \
+    \|_______/__/ /\ __\         \|_______|    \|__|  \|__|\|_______|\|__|    \|__|  \|__|\|_______|\_________\
+             |__|/ \|__|                                                                           \|_________|
+```
+
+[[_TOC_]]
+
+# 🧳 Introduction
+
+Insert description here.
+
+# 🛠 Installation
+
+## Current versions
+
+- **NVM:** _0.39.3_
+- **Node:** _20.4.0_
+- **NPM:** _9.7.2_
+
+## Clone the repository
+
+```bash
+git clone [email protected]
+```
+
+## Install Node Version Manager ([NVM](https://github.com/nvm-sh/nvm#about))
+
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh
+```
+
+- `nvm` allows the installation and use of different versions of Node, via the command line.
+
+## Install [Node](https://nodejs.org/en/about)
+
+First, navigate to the repo's root directory.
+
+```bash
+cd path/to/repo
+```
+
+Then, install Node.
+
+```bash
+nvm install
+```
+
+- Uses the version of Node that's specified in the `.nvmrc` file.
+
+## Install [dependencies](https://docs.npmjs.com/about-packages-and-modules)
+
+```bash
+npm ci
+```
+
+- [`ci`](https://blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable) stands for clean install, and is used to install exact versions of all dependencies from a `package-lock.json` file.
+- `npm i` (or `npm install`) is used to install all dependencies from a `package.json` file.
+
+# 👟 Commands
+
+## Run a project's tests
+
+```bash
+npm test -- project-name
+```
+
+---
+
+- Insert description here.
+
+# 🗒 Notes
+
+## `.env`
+
+- A collection of environment variables that are used by Percy.
+- When setting up a new project of tests, add the associated Percy token to this file.
+- Ensure that the token name matches the project name, to avoid errors.
+  - The difference between hyphens and underscores for spacing in the project name is handled dynamically.
+  - Refer to the chart below, for proper naming.
+
+|           | Project        | Token          |
+|-----------|----------------|----------------|
+| Correct   | `project-name` | `PROJECT_NAME` |
+| Correct   | `project_name` | `PROJECT_NAME` |
+| Correct   | `projectname`  | `PROJECTNAME`  |
+| Correct   | `pn`           | `PN`           |
+| Incorrect | `projectname`  | `PROJECT_NAME` |
+| Incorrect | `projectname`  | `PROJECT_NAME` |
+| Incorrect | `project`      | `NAME`         |
+| Incorrect | `pn`           | `PROJECTNAME`  |
+
+
+## `cypress.config.js`
+
+- The configuration file for Cypress that allows you to customize various settings and behaviors for your test suite.
+- For more information, refer to the [Cypress configuration documentation](https://docs.cypress.io/guides/references/configuration).
+
+## `cypress.js`
+
+- The file for Cypress that dynamically sets environment variables and executes tests based on the provided project name.
+
+# 🔗 Additional links
+
+1. [Run `nvm use` automatically every time there's a `.nvmrc` file in the directory](https://stackoverflow.com/questions/23556330/run-nvm-use-automatically-every-time-theres-a-nvmrc-file-on-the-directory)

cypress.config.js

@@ -0,0 +1,8 @@
+export default {
+    e2e: {
+        specPattern: `tests/${process.env.CYPRESS_SPEC_FOLDER}/*.spec.js`
+    },
+    video: false,
+    viewportWidth: 1280,
+    viewportHeight: 720
+};

cypress.js

@@ -0,0 +1,82 @@
+import { execSync } from "child_process";
+import chalk from "chalk";
+import fs from "fs";
+
+// Parse the command-line arguments to find the project name
+const args = process.argv.slice(2);
+
+// Grab the first argument after "npm test --", used as the project name
+const projectName = args[0];
+
+// If no project name is provided, exit with an error
+if (!projectName) {
+    console.error(
+        chalk.red(
+            "Error: No " +
+                chalk.blue("project-name") +
+                " provided." +
+                "\n" +
+                "Please add a valid project name to the command."
+        ) + chalk.blue(" npm test -- project-name")
+    );
+
+    process.exit(1);
+}
+
+// Load the environment variables from the .env file
+const dotenvPath = `${process.cwd()}/.env`;
+
+try {
+    const envConfig = fs.readFileSync(dotenvPath);
+    const envVars = envConfig.toString().split("\n");
+
+    envVars.forEach((envVar) => {
+        const [key, value] = envVar.split("=");
+
+        if (key && value) {
+            process.env[key] = value;
+        }
+    });
+} catch (err) {
+    // If the .env file fails to be read, exit with an error message
+    console.error(err.message);
+    process.exit(1);
+}
+
+// Load the Percy token from the environment variables based on the project name
+const percyToken =
+    process.env[`${projectName.replace(/[-_]/g, "_").toUpperCase()}`];
+
+// If no Percy token is found, exit with an error
+if (!percyToken) {
+    console.error(
+        chalk.red(
+            "Error: No Percy token found for " +
+                chalk.blue(`${projectName}`) +
+                "." +
+                "\n" +
+                "Please check the project name's spelling, or add a new token to the " +
+                chalk.blue(".env") +
+                chalk.red(" file.")
+        )
+    );
+
+    process.exit(1);
+}
+
+try {
+    // Dynamically set the appropriate PERCY_TOKEN environment variable
+    process.env.PERCY_TOKEN = percyToken;
+
+    // Run the Cypress tests using the custom project name
+    execSync(
+        `percy exec -- cross-env CYPRESS_SPEC_FOLDER=${projectName} cypress run`,
+        {
+            stdio: "inherit"
+        }
+    );
+} catch (err) {
+    // If the tests fail, exit with an error message
+    console.error(err.message);
+    process.exit(1);
+}

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,27 @@
+// ***********************************************
+// 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) => { ... })
+
+import "@percy/cypress";

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')