@toolstackhq/create-qa-patterns 1.0.14 → 1.0.15

package/templates/cypress-template/cypress.config.ts

@@ -1,23 +1,23 @@
 // Central Cypress configuration for specs, retries, artifacts, and runtime env values.
-import * as os from "node:os";
+import * as os from 'node:os';
 
-import { allureCypress } from "allure-cypress/reporter";
-import { defineConfig } from "cypress";
+import { allureCypress } from 'allure-cypress/reporter';
+import { defineConfig } from 'cypress';
 
-import { loadRuntimeConfig } from "./config/runtime-config";
+import { loadRuntimeConfig } from './config/runtime-config';
 
 const runtimeConfig = loadRuntimeConfig();
 
 export default defineConfig({
   e2e: {
     baseUrl: runtimeConfig.uiBaseUrl,
-    specPattern: "cypress/e2e/**/*.cy.ts",
-    supportFile: "cypress/support/e2e.ts",
+    specPattern: 'cypress/e2e/**/*.cy.ts',
+    supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {
       // Keep Cypress terminal output as the default path most users expect.
       // Remove the Allure line below if you prefer to stay with Cypress output only.
       allureCypress(on, config, {
-        resultsDir: "allure-results",
+        resultsDir: 'allure-results',
         environmentInfo: {
           os_platform: os.platform(),
           os_release: os.release(),
@@ -43,6 +43,6 @@ export default defineConfig({
   },
   screenshotOnRunFailure: true,
   video: true,
-  videosFolder: "reports/videos",
-  screenshotsFolder: "reports/screenshots"
+  videosFolder: 'reports/videos',
+  screenshotsFolder: 'reports/screenshots'
 });

package/templates/cypress-template/demo-apps/ui-demo-app/public/styles.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
   background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
   color: #102038;
 }

package/templates/cypress-template/demo-apps/ui-demo-app/src/server.js

@@ -1,22 +1,22 @@
-const fs = require("node:fs");
-const http = require("node:http");
-const path = require("node:path");
-const querystring = require("node:querystring");
+const fs = require('node:fs');
+const http = require('node:http');
+const path = require('node:path');
+const querystring = require('node:querystring');
 
-const { createPerson, getPeople, state } = require("./store");
-const { layout, loginPage, peoplePage } = require("./templates");
+const { createPerson, getPeople, state } = require('./store');
+const { layout, loginPage, peoplePage } = require('./templates');
 
-const host = process.env.HOST || "0.0.0.0";
-const port = Number(process.env.PORT || "3000");
+const host = process.env.HOST || '0.0.0.0';
+const port = Number(process.env.PORT || '3000');
 
 function readBody(request) {
   return new Promise((resolve, reject) => {
-    let body = "";
-    request.on("data", (chunk) => {
+    let body = '';
+    request.on('data', (chunk) => {
       body += chunk.toString();
     });
-    request.on("end", () => resolve(querystring.parse(body)));
-    request.on("error", reject);
+    request.on('end', () => resolve(querystring.parse(body)));
+    request.on('error', reject);
   });
 }
 
@@ -26,8 +26,8 @@ function parseCookies(request) {
     return {};
   }
 
-  return header.split(";").reduce((cookies, entry) => {
-    const [key, value] = entry.trim().split("=");
+  return header.split(';').reduce((cookies, entry) => {
+    const [key, value] = entry.trim().split('=');
     cookies[key] = value;
     return cookies;
   }, {});
@@ -39,22 +39,22 @@ function redirect(response, location) {
 }
 
 function sendHtml(response, html) {
-  response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+  response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
   response.end(html);
 }
 
 function sendJson(response, payload) {
-  response.writeHead(200, { "Content-Type": "application/json" });
+  response.writeHead(200, { 'Content-Type': 'application/json' });
   response.end(JSON.stringify(payload));
 }
 
 function isAuthenticated(request) {
-  return parseCookies(request).session === "authenticated";
+  return parseCookies(request).session === 'authenticated';
 }
 
 function protectedRoute(request, response) {
   if (!isAuthenticated(request)) {
-    redirect(response, "/login");
+    redirect(response, '/login');
     return false;
   }
 
@@ -62,53 +62,53 @@ function protectedRoute(request, response) {
 }
 
 function pageMessage(url) {
-  return new URL(url, "http://127.0.0.1").searchParams.get("message") || "";
+  return new URL(url, 'http://127.0.0.1').searchParams.get('message') || '';
 }
 
 const server = http.createServer(async (request, response) => {
-  const url = new URL(request.url, "http://127.0.0.1");
+  const url = new URL(request.url, 'http://127.0.0.1');
 
-  if (request.method === "GET" && url.pathname === "/styles.css") {
-    const cssPath = path.join(__dirname, "..", "public", "styles.css");
-    response.writeHead(200, { "Content-Type": "text/css; charset=utf-8" });
-    response.end(fs.readFileSync(cssPath, "utf8"));
+  if (request.method === 'GET' && url.pathname === '/styles.css') {
+    const cssPath = path.join(__dirname, '..', 'public', 'styles.css');
+    response.writeHead(200, { 'Content-Type': 'text/css; charset=utf-8' });
+    response.end(fs.readFileSync(cssPath, 'utf8'));
     return;
   }
 
-  if (request.method === "GET" && url.pathname === "/health") {
-    sendJson(response, { status: "ok", people: state.people.length });
+  if (request.method === 'GET' && url.pathname === '/health') {
+    sendJson(response, { status: 'ok', people: state.people.length });
     return;
   }
 
-  if (request.method === "GET" && url.pathname === "/") {
-    redirect(response, "/login");
+  if (request.method === 'GET' && url.pathname === '/') {
+    redirect(response, '/login');
     return;
   }
 
-  if (request.method === "GET" && url.pathname === "/login") {
+  if (request.method === 'GET' && url.pathname === '/login') {
     sendHtml(response, loginPage());
     return;
   }
 
-  if (request.method === "POST" && url.pathname === "/login") {
+  if (request.method === 'POST' && url.pathname === '/login') {
     const body = await readBody(request);
     if (
       body.username === state.credentials.username &&
       body.password === state.credentials.password
     ) {
       response.writeHead(302, {
-        Location: "/people",
-        "Set-Cookie": "session=authenticated; HttpOnly; Path=/; SameSite=Lax"
+        Location: '/people',
+        'Set-Cookie': 'session=authenticated; HttpOnly; Path=/; SameSite=Lax'
       });
       response.end();
       return;
     }
 
-    sendHtml(response, loginPage("Invalid credentials"));
+    sendHtml(response, loginPage('Invalid credentials'));
     return;
   }
 
-  if (request.method === "GET" && url.pathname === "/people") {
+  if (request.method === 'GET' && url.pathname === '/people') {
     if (!protectedRoute(request, response)) {
       return;
     }
@@ -116,8 +116,8 @@ const server = http.createServer(async (request, response) => {
     sendHtml(
       response,
       layout({
-        title: "People",
-        body: peoplePage(getPeople(url.searchParams.get("search") || "")),
+        title: 'People',
+        body: peoplePage(getPeople(url.searchParams.get('search') || '')),
         flashMessage: pageMessage(request.url),
         username: state.credentials.username
       })
@@ -125,7 +125,7 @@ const server = http.createServer(async (request, response) => {
     return;
   }
 
-  if (request.method === "POST" && url.pathname === "/people") {
+  if (request.method === 'POST' && url.pathname === '/people') {
     if (!protectedRoute(request, response)) {
       return;
     }
@@ -133,15 +133,18 @@ const server = http.createServer(async (request, response) => {
     try {
       const body = await readBody(request);
       createPerson(body);
-      redirect(response, "/people?message=Person%20added");
+      redirect(response, '/people?message=Person%20added');
     } catch (error) {
-      redirect(response, `/people?message=${encodeURIComponent(error.message)}`);
+      redirect(
+        response,
+        `/people?message=${encodeURIComponent(error.message)}`
+      );
     }
     return;
   }
 
-  response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-  response.end("Not found");
+  response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+  response.end('Not found');
 });
 
 server.listen(port, host, () => {

package/templates/cypress-template/demo-apps/ui-demo-app/src/store.js

@@ -1,7 +1,35 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+const dotenv = require('dotenv');
+
+function loadClosestEnv(startDirectory) {
+  let currentDirectory = startDirectory;
+
+  while (true) {
+    const candidate = path.join(currentDirectory, '.env');
+    if (fs.existsSync(candidate)) {
+      dotenv.config({ path: candidate });
+      return;
+    }
+
+    const parentDirectory = path.dirname(currentDirectory);
+    if (parentDirectory === currentDirectory) {
+      return;
+    }
+
+    currentDirectory = parentDirectory;
+  }
+}
+
+loadClosestEnv(process.cwd());
+loadClosestEnv(__dirname);
+
 const state = {
   credentials: {
-    username: process.env.UI_DEMO_USERNAME || "tester",
-    password: process.env.UI_DEMO_PASSWORD || "Password123!"
+    username:
+      process.env.UI_DEMO_USERNAME || process.env.DEV_APP_USERNAME || '',
+    password: process.env.UI_DEMO_PASSWORD || process.env.DEV_APP_PASSWORD || ''
   },
   people: []
 };
@@ -23,7 +51,7 @@ function createPerson(person) {
   });
 }
 
-function getPeople(search = "") {
+function getPeople(search = '') {
   const query = String(search).trim().toLowerCase();
   if (!query) {
     return state.people;

package/templates/cypress-template/demo-apps/ui-demo-app/src/templates.js

@@ -1,4 +1,4 @@
-function layout({ title, body, flashMessage = "", username = "tester" }) {
+function layout({ title, body, flashMessage = '', username = 'Local user' }) {
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -15,7 +15,7 @@ function layout({ title, body, flashMessage = "", username = "tester" }) {
             <a href="/people">People</a>
           </nav>
         </header>
-        ${flashMessage ? `<div class="flash-message" data-testid="flash-message" role="status">${flashMessage}</div>` : ""}
+        ${flashMessage ? `<div class="flash-message" data-testid="flash-message" role="status">${flashMessage}</div>` : ''}
         <p data-testid="welcome-message">Signed in as ${username}</p>
         ${body}
       </div>
@@ -23,7 +23,7 @@ function layout({ title, body, flashMessage = "", username = "tester" }) {
   </html>`;
 }
 
-function loginPage(errorMessage = "") {
+function loginPage(errorMessage = '') {
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -37,7 +37,7 @@ function loginPage(errorMessage = "") {
         <section class="card login-card">
           <h1>Login</h1>
           <p>Keep the example intentionally small: sign in, add one person, assert the list.</p>
-          ${errorMessage ? `<div class="flash-message" role="status">${errorMessage}</div>` : ""}
+          ${errorMessage ? `<div class="flash-message" role="status">${errorMessage}</div>` : ''}
           <form action="/login" method="post">
             <label for="username">
               Username
@@ -64,7 +64,7 @@ function peoplePage(people) {
         <td>${person.email}</td>
       </tr>`;
     })
-    .join("");
+    .join('');
 
   return `
     <section class="panel-grid">

package/templates/cypress-template/eslint.config.mjs

@@ -1,37 +1,43 @@
-import js from "@eslint/js";
-import tsParser from "@typescript-eslint/parser";
-import tsPlugin from "@typescript-eslint/eslint-plugin";
+import js from '@eslint/js';
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
 
 const tsconfigRootDir = import.meta.dirname;
 
 const cypressGlobals = {
-  Cypress: "readonly",
-  cy: "readonly",
-  describe: "readonly",
-  it: "readonly",
-  before: "readonly",
-  beforeEach: "readonly",
-  after: "readonly",
-  afterEach: "readonly"
+  Cypress: 'readonly',
+  cy: 'readonly',
+  describe: 'readonly',
+  it: 'readonly',
+  before: 'readonly',
+  beforeEach: 'readonly',
+  after: 'readonly',
+  afterEach: 'readonly'
 };
 
 const nodeGlobals = {
-  process: "readonly",
-  console: "readonly"
+  process: 'readonly',
+  console: 'readonly'
 };
 
 export default [
   {
-    ignores: ["demo-apps/**", "node_modules/**", "reports/**", "allure-results/**", "allure-report/**"]
+    ignores: [
+      'demo-apps/**',
+      'node_modules/**',
+      'reports/**',
+      'allure-results/**',
+      'allure-report/**'
+    ]
   },
   js.configs.recommended,
   {
-    files: ["**/*.ts"],
-    ignores: ["**/*.d.ts"],
+    files: ['**/*.ts'],
+    ignores: ['**/*.d.ts'],
     languageOptions: {
       parser: tsParser,
       parserOptions: {
-        project: "./tsconfig.json",
+        project: './tsconfig.json',
         tsconfigRootDir
       },
       globals: {
@@ -40,22 +46,22 @@ export default [
       }
     },
     plugins: {
-      "@typescript-eslint": tsPlugin
+      '@typescript-eslint': tsPlugin
     },
     rules: {
       ...tsPlugin.configs.recommended.rules,
-      "no-undef": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
+      'no-undef': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
         {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_"
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_'
         }
       ]
     }
   },
   {
-    files: ["**/*.d.ts"],
+    files: ['**/*.d.ts'],
     languageOptions: {
       parser: tsParser,
       parserOptions: {
@@ -67,53 +73,55 @@ export default [
       }
     },
     rules: {
-      "no-undef": "off",
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": "off"
+      'no-undef': 'off',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'off'
     }
   },
   {
-    files: ["scripts/**/*.mjs"],
+    files: ['scripts/**/*.mjs'],
     languageOptions: {
       globals: {
         ...nodeGlobals,
-        fetch: "readonly",
-        setTimeout: "readonly"
+        fetch: 'readonly',
+        setTimeout: 'readonly'
       }
     }
   },
   {
-    files: ["cypress/e2e/**/*.ts"],
+    files: ['cypress/e2e/**/*.ts'],
     rules: {
-      "no-restricted-properties": [
-        "error",
+      'no-restricted-properties': [
+        'error',
         {
-          object: "cy",
-          property: "get",
-          message: "Keep selectors in support/page modules or custom commands, not in spec files."
+          object: 'cy',
+          property: 'get',
+          message:
+            'Keep selectors in support/page modules or custom commands, not in spec files.'
         },
         {
-          object: "cy",
-          property: "contains",
-          message: "Keep selectors in support/page modules or custom commands, not in spec files."
+          object: 'cy',
+          property: 'contains',
+          message:
+            'Keep selectors in support/page modules or custom commands, not in spec files.'
         }
       ]
     }
   },
   {
-    files: ["cypress/support/commands.ts"],
+    files: ['cypress/support/commands.ts'],
     rules: {
-      "@typescript-eslint/no-namespace": "off"
+      '@typescript-eslint/no-namespace': 'off'
     }
   },
   {
-    files: ["cypress/support/pages/**/*.ts"],
+    files: ['cypress/support/pages/**/*.ts'],
     rules: {
-      "no-restricted-syntax": [
-        "error",
+      'no-restricted-syntax': [
+        'error',
         {
           selector: "CallExpression[callee.name='expect']",
-          message: "Keep assertions in Cypress spec files."
+          message: 'Keep assertions in Cypress spec files.'
         }
       ]
     }

package/templates/cypress-template/package.json

@@ -4,11 +4,12 @@
   "private": true,
   "description": "Production-ready Cypress automation framework template with a deterministic UI starter app.",
   "scripts": {
-    "test": "node ./scripts/run-cypress.mjs run",
-    "open": "node ./scripts/run-cypress.mjs open",
-    "cy:run": "cypress run",
-    "cy:open": "cypress open",
-    "demo:ui": "node ./demo-apps/ui-demo-app/src/server.js",
+    "ensure:env": "node ./scripts/ensure-local-env.mjs",
+    "test": "node ./scripts/ensure-local-env.mjs && node ./scripts/run-cypress.mjs run",
+    "open": "node ./scripts/ensure-local-env.mjs && node ./scripts/run-cypress.mjs open",
+    "cy:run": "node ./scripts/ensure-local-env.mjs && cypress run",
+    "cy:open": "node ./scripts/ensure-local-env.mjs && cypress open",
+    "demo:ui": "node ./scripts/ensure-local-env.mjs && node ./demo-apps/ui-demo-app/src/server.js",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "report:allure": "node ./scripts/generate-allure-report.mjs",

package/templates/cypress-template/scripts/ensure-local-env.mjs

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const currentProcess = globalThis.process;
+const envPath = path.resolve(currentProcess.cwd(), '.env');
+
+if (fs.existsSync(envPath)) {
+  currentProcess.exit(0);
+}
+
+const projectSlug = path
+  .basename(currentProcess.cwd())
+  .toLowerCase()
+  .replace(/[^a-z0-9]+/g, '-')
+  .replace(/^-+|-+$/g, '')
+  .slice(0, 12);
+const username = `${projectSlug || 'local'}-${crypto.randomBytes(3).toString('hex')}`;
+const password = `${crypto.randomBytes(9).toString('base64url')}A1!`;
+
+const envContents = [
+  'TEST_ENV=dev',
+  'TEST_RUN_ID=local',
+  'DEV_UI_BASE_URL=http://127.0.0.1:3000',
+  `DEV_APP_USERNAME=${username}`,
+  `DEV_APP_PASSWORD=${password}`,
+  `UI_DEMO_USERNAME=${username}`,
+  `UI_DEMO_PASSWORD=${password}`
+].join('\n');
+
+fs.writeFileSync(envPath, `${envContents}\n`, 'utf8');
+currentProcess.stdout.write(
+  `Generated local .env with demo credentials for ${username}\n`
+);

package/templates/cypress-template/scripts/generate-allure-report.mjs

@@ -1,12 +1,12 @@
 // Builds a local Allure report from raw test results after a test run completes.
-import { AllureReport, readConfig } from "@allurereport/core";
-import { readdir, rm, stat } from "node:fs/promises";
-import { join, resolve } from "node:path";
-import process from "node:process";
+import { AllureReport, readConfig } from '@allurereport/core';
+import { readdir, rm, stat } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import process from 'node:process';
 
 const cwd = process.cwd();
-const resultsDir = resolve(cwd, "allure-results");
-const outputDir = resolve(cwd, "reports/allure");
+const resultsDir = resolve(cwd, 'allure-results');
+const outputDir = resolve(cwd, 'reports/allure');
 
 const collectResultFiles = async () => {
   const entries = (await readdir(resultsDir)).sort();
@@ -28,20 +28,24 @@ const generateReport = async () => {
   try {
     await stat(resultsDir);
   } catch {
-    process.stdout.write("Skipping Allure report generation because allure-results does not exist.\n");
+    process.stdout.write(
+      'Skipping Allure report generation because allure-results does not exist.\n'
+    );
     return;
   }
 
   const files = await collectResultFiles();
 
   if (files.length === 0) {
-    process.stdout.write("Skipping Allure report generation because no result files were found.\n");
+    process.stdout.write(
+      'Skipping Allure report generation because no result files were found.\n'
+    );
     return;
   }
 
   await rm(outputDir, { force: true, recursive: true });
 
-  const config = await readConfig(cwd, "allurerc.mjs", { output: outputDir });
+  const config = await readConfig(cwd, 'allurerc.mjs', { output: outputDir });
   const report = new AllureReport(config);
 
   await report.start();
@@ -52,7 +56,9 @@ const generateReport = async () => {
 
   await report.done();
 
-  process.stdout.write("Allure report generated at reports/allure/index.html\n");
+  process.stdout.write(
+    'Allure report generated at reports/allure/index.html\n'
+  );
 };
 
 generateReport().catch((error) => {