@toolstackhq/create-qa-patterns 1.0.14 → 1.0.15

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

@@ -0,0 +1,152 @@
+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 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) => {
+      body += chunk.toString();
+    });
+    request.on('end', () => resolve(querystring.parse(body)));
+    request.on('error', reject);
+  });
+}
+
+function parseCookies(request) {
+  const header = request.headers.cookie;
+  if (!header) {
+    return {};
+  }
+
+  return header.split(';').reduce((cookies, entry) => {
+    const [key, value] = entry.trim().split('=');
+    cookies[key] = value;
+    return cookies;
+  }, {});
+}
+
+function redirect(response, location) {
+  response.writeHead(302, { Location: location });
+  response.end();
+}
+
+function sendHtml(response, html) {
+  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.end(JSON.stringify(payload));
+}
+
+function isAuthenticated(request) {
+  return parseCookies(request).session === 'authenticated';
+}
+
+function protectedRoute(request, response) {
+  if (!isAuthenticated(request)) {
+    redirect(response, '/login');
+    return false;
+  }
+
+  return true;
+}
+
+function pageMessage(url) {
+  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');
+
+  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 });
+    return;
+  }
+
+  if (request.method === 'GET' && url.pathname === '/') {
+    redirect(response, '/login');
+    return;
+  }
+
+  if (request.method === 'GET' && url.pathname === '/login') {
+    sendHtml(response, loginPage());
+    return;
+  }
+
+  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'
+      });
+      response.end();
+      return;
+    }
+
+    sendHtml(response, loginPage('Invalid credentials'));
+    return;
+  }
+
+  if (request.method === 'GET' && url.pathname === '/people') {
+    if (!protectedRoute(request, response)) {
+      return;
+    }
+
+    sendHtml(
+      response,
+      layout({
+        title: 'People',
+        body: peoplePage(getPeople(url.searchParams.get('search') || '')),
+        flashMessage: pageMessage(request.url),
+        username: state.credentials.username
+      })
+    );
+    return;
+  }
+
+  if (request.method === 'POST' && url.pathname === '/people') {
+    if (!protectedRoute(request, response)) {
+      return;
+    }
+
+    try {
+      const body = await readBody(request);
+      createPerson(body);
+      redirect(response, '/people?message=Person%20added');
+    } catch (error) {
+      redirect(
+        response,
+        `/people?message=${encodeURIComponent(error.message)}`
+      );
+    }
+    return;
+  }
+
+  response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+  response.end('Not found');
+});
+
+server.listen(port, host, () => {
+  console.log(`UI demo app listening on http://${host}:${port}`);
+});

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

@@ -0,0 +1,71 @@
+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 || process.env.DEV_APP_USERNAME || '',
+    password: process.env.UI_DEMO_PASSWORD || process.env.DEV_APP_PASSWORD || ''
+  },
+  people: []
+};
+
+function findPerson(personId) {
+  return state.people.find((person) => person.personId === personId);
+}
+
+function createPerson(person) {
+  if (findPerson(person.personId)) {
+    throw new Error(`Person ${person.personId} already exists`);
+  }
+
+  state.people.push({
+    personId: person.personId,
+    name: person.name,
+    role: person.role,
+    email: person.email
+  });
+}
+
+function getPeople(search = '') {
+  const query = String(search).trim().toLowerCase();
+  if (!query) {
+    return state.people;
+  }
+
+  return state.people.filter((person) => {
+    return [person.name, person.role, person.email].some((value) =>
+      value.toLowerCase().includes(query)
+    );
+  });
+}
+
+module.exports = {
+  state,
+  createPerson,
+  getPeople
+};

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

@@ -0,0 +1,121 @@
+function layout({ title, body, flashMessage = '', username = 'Local user' }) {
+  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/wdio-template/eslint.config.mjs

@@ -0,0 +1,86 @@
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import { fileURLToPath } from 'node:url';
+
+import architecturePlugin from './lint/architecture-plugin.cjs';
+
+const configDirectory = fileURLToPath(new globalThis.URL('.', import.meta.url));
+
+export default [
+  {
+    ignores: [
+      'node_modules/**',
+      'reports/**',
+      'allure-results/**',
+      'allure-report/**',
+      'test-results/**',
+      'playwright-report/**'
+    ]
+  },
+  js.configs.recommended,
+  {
+    files: ['demo-apps/**/*.js'],
+    languageOptions: {
+      globals: {
+        __dirname: 'readonly',
+        console: 'readonly',
+        module: 'readonly',
+        process: 'readonly',
+        require: 'readonly',
+        URL: 'readonly'
+      }
+    }
+  },
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: configDirectory
+      },
+      globals: {
+        browser: 'readonly',
+        console: 'readonly',
+        describe: 'readonly',
+        it: 'readonly',
+        process: 'readonly',
+        URL: 'readonly'
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      architecture: architecturePlugin
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow'
+        },
+        {
+          selector: 'typeLike',
+          format: ['PascalCase']
+        },
+        {
+          selector: 'variable',
+          format: ['camelCase', 'UPPER_CASE', 'PascalCase']
+        },
+        {
+          selector: 'objectLiteralProperty',
+          modifiers: ['requiresQuotes'],
+          format: null
+        }
+      ],
+      '@typescript-eslint/no-explicit-any': 'off',
+      'no-empty-pattern': 'off',
+      'architecture/no-raw-locators-in-tests': 'error',
+      'architecture/no-wait-for-timeout': 'error',
+      'architecture/no-expect-in-page-objects': 'error'
+    }
+  }
+];

package/templates/wdio-template/lint/architecture-plugin.cjs

@@ -0,0 +1,123 @@
+const TEST_FILE_PATTERN = /[/\\]tests[/\\].+\.ts$/;
+const PAGE_OBJECT_PATTERN = /[/\\](pages|components)[/\\].+\.ts$/;
+
+const locatorMethods = new Set([
+  'locator',
+  'getByRole',
+  'getByLabel',
+  'getByTestId',
+  'getByText',
+  'getByPlaceholder',
+  'getByAltText',
+  'getByTitle',
+  '$',
+  '$$'
+]);
+
+function isIdentifierProperty(node, name) {
+  return (
+    node &&
+    node.type === 'MemberExpression' &&
+    !node.computed &&
+    node.property &&
+    node.property.type === 'Identifier' &&
+    node.property.name === name
+  );
+}
+
+module.exports = {
+  rules: {
+    'no-raw-locators-in-tests': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow selectors inside test files'
+        },
+        schema: [],
+        messages: {
+          noRawLocators:
+            'Raw locators are not allowed in tests. Move selector logic into a page object or component.'
+        }
+      },
+      create(context) {
+        if (!TEST_FILE_PATTERN.test(context.getFilename())) {
+          return {};
+        }
+
+        return {
+          CallExpression(node) {
+            if (
+              node.callee.type === 'MemberExpression' &&
+              !node.callee.computed &&
+              node.callee.property.type === 'Identifier' &&
+              locatorMethods.has(node.callee.property.name)
+            ) {
+              context.report({
+                node,
+                messageId: 'noRawLocators'
+              });
+            }
+          }
+        };
+      }
+    },
+    'no-wait-for-timeout': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow waitForTimeout'
+        },
+        schema: [],
+        messages: {
+          noWaitForTimeout:
+            'waitForTimeout is not allowed. Synchronize with user-visible events instead.'
+        }
+      },
+      create(context) {
+        return {
+          CallExpression(node) {
+            if (isIdentifierProperty(node.callee, 'waitForTimeout')) {
+              context.report({
+                node,
+                messageId: 'noWaitForTimeout'
+              });
+            }
+          }
+        };
+      }
+    },
+    'no-expect-in-page-objects': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description:
+            'Disallow assertions inside page objects and UI components'
+        },
+        schema: [],
+        messages: {
+          noExpect:
+            'Assertions are not allowed inside page objects or components. Return state and assert from the test.'
+        }
+      },
+      create(context) {
+        if (!PAGE_OBJECT_PATTERN.test(context.getFilename())) {
+          return {};
+        }
+
+        return {
+          CallExpression(node) {
+            if (
+              node.callee.type === 'Identifier' &&
+              node.callee.name === 'expect'
+            ) {
+              context.report({
+                node,
+                messageId: 'noExpect'
+              });
+            }
+          }
+        };
+      }
+    }
+  }
+};