npm - @toolstackhq/create-qa-patterns - Versions diffs - 1.0.6 → 1.0.8 - Mend

@toolstackhq/create-qa-patterns 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

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

@@ -0,0 +1,121 @@
+function layout({ title, body, flashMessage = "", username = "tester" }) {
+  return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>${title}</title>
+      <link rel="stylesheet" href="/styles.css" />
+    </head>
+    <body>
+      <div class="layout">
+        <header class="header">
+          <div class="brand">UI Patterns Demo</div>
+          <nav class="nav" aria-label="Primary">
+            <a href="/people">People</a>
+          </nav>
+        </header>
+        ${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>
+    </body>
+  </html>`;
+}
+function loginPage(errorMessage = "") {
+  return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Login</title>
+      <link rel="stylesheet" href="/styles.css" />
+    </head>
+    <body>
+      <main class="login-shell">
+        <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>` : ""}
+          <form action="/login" method="post">
+            <label for="username">
+              Username
+              <input id="username" name="username" type="text" autocomplete="username" required />
+            </label>
+            <label for="password">
+              Password
+              <input id="password" name="password" type="password" autocomplete="current-password" required />
+            </label>
+            <button type="submit">Sign in</button>
+          </form>
+        </section>
+      </main>
+    </body>
+  </html>`;
+}
+function peoplePage(people) {
+  const rows = people
+    .map((person) => {
+      return `<tr data-testid="person-row-${person.personId}">
+        <td>${person.name}</td>
+        <td>${person.role}</td>
+        <td>${person.email}</td>
+      </tr>`;
+    })
+    .join("");
+  return `
+    <section class="panel-grid">
+      <section class="panel">
+        <h1>People</h1>
+        <form action="/people" method="post">
+          <label for="personId">
+            Person ID
+            <input id="personId" name="personId" type="text" required />
+          </label>
+          <label for="name">
+            Name
+            <input id="name" name="name" type="text" required />
+          </label>
+          <label for="role">
+            Role
+            <input id="role" name="role" type="text" required />
+          </label>
+          <label for="email">
+            Email
+            <input id="email" name="email" type="email" required />
+          </label>
+          <button type="submit">Add person</button>
+        </form>
+      </section>
+      <section class="panel">
+        <h2>Directory</h2>
+        <form action="/people" method="get">
+          <label for="search">
+            Search
+            <input id="search" name="search" type="text" placeholder="Search people" />
+          </label>
+          <button type="submit">Apply filter</button>
+        </form>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Role</th>
+              <th>Email</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </section>
+    </section>
+  `;
+}
+module.exports = {
+  layout,
+  loginPage,
+  peoplePage
+};

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

@@ -0,0 +1,93 @@
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+const cypressGlobals = {
+  Cypress: "readonly",
+  cy: "readonly",
+  describe: "readonly",
+  it: "readonly",
+  before: "readonly",
+  beforeEach: "readonly",
+  after: "readonly",
+  afterEach: "readonly"
+};
+const nodeGlobals = {
+  process: "readonly",
+  console: "readonly"
+};
+export default [
+  {
+    ignores: ["demo-apps/**", "node_modules/**", "reports/**"]
+  },
+  js.configs.recommended,
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: "./tsconfig.json"
+      },
+      globals: {
+        ...cypressGlobals,
+        ...nodeGlobals
+      }
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin
+    },
+    rules: {
+      ...tsPlugin.configs.recommended.rules,
+      "no-undef": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_"
+        }
+      ]
+    }
+  },
+  {
+    files: ["scripts/**/*.mjs"],
+    languageOptions: {
+      globals: {
+        ...nodeGlobals,
+        fetch: "readonly",
+        setTimeout: "readonly"
+      }
+    }
+  },
+  {
+    files: ["cypress/e2e/**/*.ts"],
+    rules: {
+      "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: "contains",
+          message: "Keep selectors in support/page modules or custom commands, not in spec files."
+        }
+      ]
+    }
+  },
+  {
+    files: ["cypress/support/pages/**/*.ts"],
+    rules: {
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "CallExpression[callee.name='expect']",
+          message: "Keep assertions in Cypress spec files."
+        }
+      ]
+    }
+  }
+];