feat: add playwright

Reviewed-on: #79
Reviewed-by: Primakov Alexandr Alexandrovich <primakovpro@gmail.com>

.gitignore

@@ -130,4 +130,10 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-.idea
+.idea
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

__mocks__/file-mock.ts

@@ -0,0 +1 @@
+module.exports = 'file';

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }],
+  ],
+};

eslint.config.mjs

@@ -1,12 +1,13 @@
-import globals from "globals";
+import globals from 'globals';
-import pluginJs from "@eslint/js";
+import pluginJs from '@eslint/js';
-import tseslint from "typescript-eslint";
+import tseslint from 'typescript-eslint';
-import pluginReact from "eslint-plugin-react";
+import pluginReact from 'eslint-plugin-react';
 import stylistic from '@stylistic/eslint-plugin';
 import pluginImport from 'eslint-plugin-import';
 
 export default [
-  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+
   { languageOptions: { globals: globals.browser } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
@@ -14,35 +15,38 @@ export default [
   {
     plugins: {
       '@stylistic': stylistic,
-      'import': pluginImport,
+      import: pluginImport,
     },
-    "rules": {
+    rules: {
-      "no-unused-vars": "off",
+      'no-unused-vars': 'off',
-      "@typescript-eslint/no-unused-vars": [
+      '@typescript-eslint/no-unused-vars': [
-        "warn", // or "error"
+        'warn', // or "error"
         {
-          "argsIgnorePattern": "^_",
+          argsIgnorePattern: '^_',
-          "varsIgnorePattern": "^_",
+          varsIgnorePattern: '^_',
-          "caughtErrorsIgnorePattern": "^_"
+          caughtErrorsIgnorePattern: '^_',
-        }
+        },
       ],
-      "sort-imports": ["off"],
+      'sort-imports': ['off'],
-      "import/order": [
+      'import/order': [
-        "error",
+        'error',
         {
-          "groups": [
+          groups: [
-            "builtin",
+            'builtin',
-            "external",
+            'external',
-            "internal",
+            'internal',
-            "parent",
+            'parent',
-            ["sibling", "index"]
+            ['sibling', 'index'],
           ],
-          "newlines-between": "always",
+          'newlines-between': 'always',
-        }
+        },
       ],
-      semi: ["error", "always"],
+      semi: ['error', 'always'],
       '@stylistic/indent': ['error', 2],
-      'react/prop-types': 'off'
+      'react/prop-types': 'off',
     },
-  }
+  },
+  {
+    ignores: ['babel.config.js'],
+  },
 ];

jest-preset-it/jest-preset.ts

@@ -0,0 +1,17 @@
+module.exports = {
+  transform: {
+    '^.+\\.tsx?$': 'babel-jest',
+  },
+  coverageProvider: 'v8',
+  coverageDirectory: 'coverage',
+  collectCoverageFrom: ['**/src/**/*.{ts,tsx}', '!**/src/app.tsx'],
+  collectCoverage: true,
+  clearMocks: true,
+  moduleNameMapper: {
+    '\\.(svg|webp)$': '<rootDir>/__mocks__/file',
+  },
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
+  testEnvironment: 'jest-fixed-jsdom',
+};

package.json

@@ -1,55 +1,74 @@
 {
-    "name": "dry-wash",
+  "name": "dry-wash",
-    "version": "0.5.0",
+  "version": "0.5.0",
-    "description": "<a id=\"readme-top\"></a>",
+  "description": "<a id=\"readme-top\"></a>",
-    "main": "./src/index.tsx",
+  "main": "./src/index.tsx",
-    "scripts": {
+  "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest -u",
-        "start": "brojs server --port=8099 --with-open-browser",
+    "start": "brojs server --port=8099 --with-open-browser",
-        "build": "npm run clean && brojs build --dev",
+    "build": "npm run clean && brojs build --dev",
-        "build:prod": "npm run clean && brojs build",
+    "build:prod": "npm run clean && brojs build",
-        "clean": "rimraf dist",
+    "clean": "rimraf dist",
-        "eslint": "npx eslint .",
+    "eslint": "npx eslint .",
-        "eslint:fix": "npx eslint . --fix",
+    "eslint:fix": "npx eslint . --fix",
-        "preversion": "npm run eslint"
+    "preversion": "npm run eslint"
-    },
+  },
-    "keywords": [],
+  "keywords": [],
-    "author": "",
+  "author": "",
-    "license": "ISC",
+  "license": "ISC",
-    "dependencies": {
+  "dependencies": {
-        "@brojs/cli": "^1.8.4",
+    "@babel/core": "^7.26.7",
-        "@chakra-ui/icons": "^2.2.4",
+    "@babel/preset-env": "^7.26.7",
-        "@chakra-ui/react": "^2.10.5",
+    "@babel/preset-react": "^7.26.3",
-        "@emotion/react": "^11.4.1",
+    "@babel/preset-typescript": "^7.26.0",
-        "@emotion/styled": "^11.3.0",
+    "@brojs/cli": "^1.8.4",
-        "@fontsource/open-sans": "^5.1.0",
+    "@chakra-ui/icons": "^2.2.4",
-        "@lottiefiles/react-lottie-player": "^3.5.4",
+    "@chakra-ui/react": "^2.10.5",
-        "@pbe/react-yandex-maps": "^1.2.5",
+    "@emotion/react": "^11.4.1",
-        "@reduxjs/toolkit": "^2.5.0",
+    "@emotion/styled": "^11.3.0",
-        "@types/react": "^18.3.12",
+    "@fontsource/open-sans": "^5.1.0",
-        "dayjs": "^1.11.13",
+    "@lottiefiles/react-lottie-player": "^3.5.4",
-        "express": "^4.21.1",
+    "@pbe/react-yandex-maps": "^1.2.5",
-        "framer-motion": "^6.2.8",
+    "@reduxjs/toolkit": "^2.5.0",
-        "i18next": "^23.16.4",
+    "@testing-library/dom": "^10.4.0",
-        "keycloak-js": "^23.0.7",
+    "@testing-library/react": "^16.2.0",
-        "react": "^18.3.1",
+    "@types/react": "^18.3.12",
-        "react-dom": "^18.3.1",
+    "babel-jest": "^29.7.0",
-        "react-hook-form": "^7.53.2",
+    "dayjs": "^1.11.13",
-        "react-i18next": "^15.1.1",
+    "express": "^4.21.1",
-        "react-icons": "^5.3.0",
+    "framer-motion": "^6.2.8",
-        "react-phone-number-input": "^3.4.9",
+    "i18next": "^23.16.4",
-        "react-redux": "^9.2.0",
+    "jest": "^29.7.0",
-        "react-router-dom": "^6.27.0"
+    "jest-environment-jsdom": "^29.7.0",
-    },
+    "jest-fixed-jsdom": "^0.0.9",
-    "devDependencies": {
+    "keycloak-js": "^23.0.7",
-        "@eslint/js": "^9.14.0",
+    "msw": "^2.7.0",
-        "@stylistic/eslint-plugin": "^2.10.1",
+    "react": "^18.3.1",
-        "@types/react-dom": "^18.3.1",
+    "react-dom": "^18.3.1",
-        "eslint": "^9.14.0",
+    "react-hook-form": "^7.53.2",
-        "eslint-plugin-import": "^2.31.0",
+    "react-i18next": "^15.1.1",
-        "eslint-plugin-react": "^7.37.2",
+    "react-icons": "^5.3.0",
-        "globals": "^15.11.0",
+    "react-phone-number-input": "^3.4.9",
-        "prettier": "3.3.3",
+    "react-redux": "^9.2.0",
-        "typescript-eslint": "^8.12.2"
+    "react-router-dom": "^6.27.0",
-    }
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@playwright/test": "^1.50.1",
+    "@stylistic/eslint-plugin": "^2.10.1",
+    "@types/node": "^22.13.1",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.14.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.11.0",
+    "prettier": "3.3.3",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.12.2"
+  },
+  "jest": {
+    "preset": "./jest-preset-it/jest-preset.ts"
+  }
 }

playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/pages/__tests__/__snapshots__/arm.test.tsx.snap

@@ -0,0 +1,325 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Arm Page render  1`] = `
+<div>
+  <div
+    class="css-1yeiifd"
+  >
+    <div
+      class="css-1fp6kaj"
+    >
+      <h2
+        class="chakra-heading css-9q1d0h"
+      >
+        title
+      </h2>
+      <div
+        class="chakra-stack css-1oen434"
+      >
+        <hr
+          aria-orientation="horizontal"
+          class="chakra-divider css-1upb9tn"
+        />
+        <a
+          class="chakra-button css-uxt1e8"
+          href="/auth/login"
+        >
+          orders
+        </a>
+        <hr
+          aria-orientation="horizontal"
+          class="chakra-divider css-1upb9tn"
+        />
+        <a
+          class="chakra-button css-uxt1e8"
+          href="/auth/login"
+        >
+          master
+        </a>
+        <hr
+          aria-orientation="horizontal"
+          class="chakra-divider css-1upb9tn"
+        />
+      </div>
+    </div>
+    <div
+      class="css-sy55x5"
+    >
+      <div
+        class="css-hpgf8j"
+      >
+        <h2
+          class="chakra-heading css-r7q7qr"
+        >
+          title
+        </h2>
+        <div
+          class="css-1me9tx"
+        >
+          <button
+            class="chakra-button css-4xx2wk"
+            type="button"
+          >
+            <svg
+              class="chakra-icon css-onkibi"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+          <p
+            class="chakra-text css-1bntq7d"
+          >
+            2/2/2025
+          </p>
+          <button
+            class="chakra-button css-4xx2wk"
+            type="button"
+          >
+            <svg
+              class="chakra-icon css-onkibi"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+        <table
+          class="chakra-table css-0"
+        >
+          <thead
+            class="css-0"
+          >
+            <tr
+              class="css-0"
+            >
+              <th
+                class="css-0"
+              >
+                table.header.carNumber
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.orderDate
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.status
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.masters
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.telephone
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.location
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="css-0"
+          >
+            <tr
+              class="css-0"
+            >
+              <td
+                class="css-12rlgei"
+                colspan="6"
+              >
+                <div
+                  class="chakra-spinner css-1y7joxr"
+                >
+                  <span
+                    class="css-8b45rq"
+                  >
+                    Loading...
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Arm Page render  2`] = `
+<div>
+  <div
+    class="css-1yeiifd"
+  >
+    <div
+      class="css-1fp6kaj"
+    >
+      <h2
+        class="chakra-heading css-9q1d0h"
+      >
+        title
+      </h2>
+      <div
+        class="chakra-stack css-1oen434"
+      >
+        <hr
+          aria-orientation="horizontal"
+          class="chakra-divider css-1upb9tn"
+        />
+        <a
+          class="chakra-button css-uxt1e8"
+          href="/auth/login"
+        >
+          orders
+        </a>
+        <hr
+          aria-orientation="horizontal"
+          class="chakra-divider css-1upb9tn"
+        />
+        <a
+          class="chakra-button css-uxt1e8"
+          href="/auth/login"
+        >
+          master
+        </a>
+        <hr
+          aria-orientation="horizontal"
+          class="chakra-divider css-1upb9tn"
+        />
+      </div>
+    </div>
+    <div
+      class="css-sy55x5"
+    >
+      <div
+        class="css-hpgf8j"
+      >
+        <h2
+          class="chakra-heading css-r7q7qr"
+        >
+          title
+        </h2>
+        <div
+          class="css-1me9tx"
+        >
+          <button
+            class="chakra-button css-4xx2wk"
+            type="button"
+          >
+            <svg
+              class="chakra-icon css-onkibi"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+          <p
+            class="chakra-text css-1bntq7d"
+          >
+            2/2/2025
+          </p>
+          <button
+            class="chakra-button css-4xx2wk"
+            type="button"
+          >
+            <svg
+              class="chakra-icon css-onkibi"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+        <table
+          class="chakra-table css-0"
+        >
+          <thead
+            class="css-0"
+          >
+            <tr
+              class="css-0"
+            >
+              <th
+                class="css-0"
+              >
+                table.header.carNumber
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.orderDate
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.status
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.masters
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.telephone
+              </th>
+              <th
+                class="css-0"
+              >
+                table.header.location
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="css-0"
+          >
+            <tr
+              class="css-0"
+            >
+              <td
+                class="css-12rlgei"
+                colspan="6"
+              >
+                <div
+                  class="chakra-spinner css-1y7joxr"
+                >
+                  <span
+                    class="css-8b45rq"
+                  >
+                    Loading...
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/pages/__tests__/arm.test.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  describe,
+  it,
+  expect,
+  jest,
+  beforeAll,
+  afterEach,
+  afterAll,
+} from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import { BrowserRouter } from 'react-router-dom';
+
+import Page from '../arm';
+
+const server = setupServer(
+  http.post('/api/arm/orders', () => {
+    return HttpResponse.json({
+      success: true,
+      body: [
+        {
+          id: 'order1',
+          carNumber: 'A123BC',
+          startWashTime: '2024-11-24T10:30:00.000Z',
+          endWashTime: '2024-11-24T16:30:00.000Z',
+          orderDate: '2024-11-24T08:41:46.366Z',
+          status: 'pending',
+          phone: '79001234563',
+          location: 'Казань, ул. Баумана, 1',
+          master: {
+            name: 'Олег Макаров',
+            phone: '79001234567',
+            id: '23423442',
+          },
+          notes: '',
+        },
+        {
+          id: 'order2',
+          carNumber: 'A245BC',
+          startWashTime: '2024-11-24T11:30:00.000Z',
+          endWashTime: '2024-11-24T17:30:00.000Z',
+          orderDate: '2024-11-24T07:40:46.366Z',
+          status: 'progress',
+          phone: '79001234567',
+          location: 'Казань, ул. Баумана, 43',
+          master: [],
+          notes: '',
+        },
+      ],
+    });
+  }),
+  http.get('/api/arm/masters', () => {
+    return HttpResponse.json({
+      success: true,
+      body: [
+        {
+          id: '4545423234',
+          name: 'Иван Иванов',
+          phone: '+7 900 123 45 67',
+        },
+        {
+          name: 'Олег Макаров',
+          phone: '79001234567',
+          id: '23423442',
+        },
+        {
+          id: '345354234',
+          name: 'Иван Галкин',
+          schedule: [
+            {
+              id: 'order1',
+              startWashTime: '2024-11-24T10:30:00.000Z',
+              endWashTime: '2024-11-24T16:30:00.000Z',
+            },
+            {
+              id: 'order2',
+              startWashTime: '2024-11-24T11:30:00.000Z',
+              endWashTime: '2024-11-24T17:30:00.000Z',
+            },
+          ],
+          phone: '+7 900 123 45 67',
+        },
+      ],
+    });
+  }),
+);
+
+jest.mock('react-i18next', () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: never) => `${key}`,
+        i18n: {},
+      };
+    },
+  };
+});
+
+jest.mock('@brojs/cli', () => {
+  return {
+    getNavigationValue: () => '/auth/login',
+    getConfigValue: () => '/api',
+  };
+});
+
+describe('Arm Page', () => {
+  beforeAll(() => server.listen());
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  it('render ', async () => {
+    server.events.on('request:start', ({ request }) => {
+      console.log('Outgoing:', request.method, request.url);
+    });
+
+    const { container } = render(
+      <BrowserRouter>
+        <Page mockUser={{ name: 'ilnaz' }} />
+      </BrowserRouter>,
+    );
+
+    expect(container).toMatchSnapshot();
+
+    await waitFor(() => screen.getByText('A123BC'));
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/pages/arm/index.tsx

@@ -6,8 +6,12 @@ import LayoutArm from '../../components/LayoutArm';
 import authLogin from '../../keycloak';
 import { URLs } from '../../__data__/urls';
 
-const Page = () => {
+interface PageProps {
-  const [user, setUser] = useState(null);
+  mockUser?: { name: string };
+}
+
+const Page = ({ mockUser }: PageProps) => {
+  const [user, setUser] = useState(mockUser || null);
 
   const navigate = useNavigate();
 

tests/example.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach('check server is up', async ({ page }) => {
+  try {
+    await page.goto('http://localhost:8099/dry-wash');
+    const makeOrderText = page.getByText('Сделать заказ', { exact: true });
+    await expect(makeOrderText).toBeVisible();
+  } catch (error) {
+    console.error('server not up');
+    test.skip();
+  }
+});
+
+test('login', async ({ page }) => {
+  await page.goto('http://localhost:8099/dry-wash/arm');
+  await page.getByRole('textbox', { name: 'Username or email' }).click();
+  await page
+    .getByRole('textbox', { name: 'Username or email' })
+    .fill('237x237');
+  await page.getByRole('textbox', { name: 'Password' }).click();
+  await page.getByRole('textbox', { name: 'Password' }).fill('');
+  await page.getByRole('button', { name: 'Sign In' }).click();
+  await page.getByRole('heading', { name: 'Заказы' }).click();
+  await page.getByRole('link', { name: 'Мастера' }).click();
+  await page.getByRole('link', { name: 'Заказы' }).click();
+});