chore(): Add test tools for React and PHP

wp/src/wp-content/plugins/wp-react/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

wp/src/wp-content/plugins/wp-react/.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["@prettier/plugin-php"]
+}

wp/src/wp-content/plugins/wp-react/.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "defaultSeverity": "warning",
+  "plugins": ["stylelint-scss"],
+  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
+  "rules": {
+    "scss/at-extend-no-missing-placeholder": true,
+    "selector-class-pattern": null,
+    "no-empty-source": null
+  }
+}

wp/src/wp-content/plugins/wp-react/composer.json

@@ -1,7 +1,9 @@
 {
     "name": "serhiichornenkyi/wp-react",
     "require-dev": {
-        "symfony/var-dumper": "^6.0"
+        "symfony/var-dumper": "^6.0",
+        "phpunit/phpunit": "^11.0",
+        "php-mock/php-mock": "^2.5"
     },
     "autoload": {
         "psr-4": {
@@ -13,6 +15,5 @@
             "name": "SerhiiCho",
             "email": "serhiicho@protonmail.com"
         }
-    ],
+    ]
-    "require": {}
 }

wp/src/wp-content/plugins/wp-react/jest.config.mjs

@@ -0,0 +1,29 @@
+import preset from 'ts-jest/presets/index.js';
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+  ...preset.jsWithTsESM,
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/resources/ts/__tests__/config/importJestDOM.ts'],
+  extensionsToTreatAsEsm: ['.ts'],
+  transform: {
+    '^.+\\.([tj]sx?)$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.json',
+        useESM: true,
+      },
+    ],
+  },
+  testMatch: ['**/__tests__/!(config|mock)**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!(@starconnect|nanoid)/)'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/resources/ts/__tests__/mock/styleMock.ts',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/resources/ts/__tests__/mock/fileMock.ts',
+    '^test-utils$': '<rootDir>/resources/ts/utils/test-utils.tsx',
+    '~/(.*)': '<rootDir>/resources/ts/$1',
+  },
+  // perf (you might try various options based on the available cores)
+  maxWorkers: '8',
+};

wp/src/wp-content/plugins/wp-react/package.json

@@ -6,6 +6,8 @@
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-react": "^7.18.6",
+    "@jest/globals": "^29.7.0",
+    "@prettier/plugin-php": "^0.22.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -13,13 +15,34 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
     "@types/babel__core": "^7",
+    "@types/crypto-js": "^4",
+    "@types/eslint": "^8.56.5",
+    "@types/jest": "^29.5.12",
+    "@types/moxios": "^0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/rollup-plugin-peer-deps-external": "^2",
+    "@types/testing-library__react": "^10.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "crypto-js": "^4.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "moxios": "^0.4.0",
+    "prettier": "^3.2.5",
     "rollup": "^4.12.0",
-    "rollup-plugin-import-css": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.72.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-sass-guidelines": "^11.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typescript": "^4.8.2"
   },
@@ -30,7 +53,16 @@
   },
   "scripts": {
     "compose": "composer install",
-    "build": "rollup --config"
+    "build": "yarn lint && NODE_ENV=production rollup --config",
+    "dev": "rollup --config --watch",
+    "lint": "yarn lint.eslint && yarn lint.prettier && yarn lint.styles && yarn lint.types",
+    "lint.eslint": "eslint . --ext ts",
+    "lint.prettier": "prettier --ignore-path .gitignore --write \"**/*.{mjs,js,jsx,ts,tsx,json,php}\"",
+    "lint.styles": "stylelint --ignore-path .gitignore \"**/*.{css,scss,sass}\" --fix",
+    "lint.types": "tsc --noEmit",
+    "test": "yarn test.react && yarn test.wordpress",
+    "test.react": "jest",
+    "test.wordpress": "./vendor/bin/phpunit tests"
   },
   "packageManager": "yarn@4.0.2"
 }

wp/src/wp-content/plugins/wp-react/resources/ts/__tests__/config/importJestDOM.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

wp/src/wp-content/plugins/wp-react/resources/ts/__tests__/integration/first.spec.ts

@@ -0,0 +1,3 @@
+it('runs the first test', () => {
+  expect(true).toBe(true);
+});

wp/src/wp-content/plugins/wp-react/resources/ts/__tests__/mock/fileMock.ts

@@ -0,0 +1 @@
+export default 'test-file-stub';

wp/src/wp-content/plugins/wp-react/resources/ts/__tests__/mock/styleMock.ts

@@ -0,0 +1 @@
+export default {};

wp/src/wp-content/plugins/wp-react/resources/ts/utils/test-utils.tsx

@@ -0,0 +1,57 @@
+import React, {ReactElement} from 'react';
+import {render, RenderOptions} from '@testing-library/react';
+
+const AllTheProviders = ({children}: {children: React.ReactNode}) => {
+  return <React.Fragment>{children}</React.Fragment>;
+};
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
+  render(ui, {wrapper: AllTheProviders, ...options});
+
+const mockedMethods = ['log', 'warn', 'error'];
+export const {originalConsoleFuncs, consoleMessages} = mockedMethods.reduce(
+  (acc: any, method: any) => {
+    acc.originalConsoleFuncs[method] = console[method].bind(console);
+    acc.consoleMessages[method] = [];
+
+    return acc;
+  },
+  {
+    consoleMessages: {},
+    originalConsoleFuncs: {},
+  }
+);
+
+export const clearConsole = () =>
+  mockedMethods.forEach((method) => {
+    consoleMessages[method] = [];
+  });
+
+export const mockConsole = (callOriginals?: boolean) => {
+  const createMockConsoleFunc = (method: any) => {
+    console[method] = (...args: any[]) => {
+      consoleMessages[method].push(args);
+      if (callOriginals) return originalConsoleFuncs[method](...args);
+    };
+  };
+
+  const deleteMockConsoleFunc = (method: any) => {
+    console[method] = originalConsoleFuncs[method];
+    consoleMessages[method] = [];
+  };
+
+  beforeEach(() => {
+    mockedMethods.forEach((method: any) => {
+      createMockConsoleFunc(method);
+    });
+  });
+
+  afterEach(() => {
+    mockedMethods.forEach((method: any) => {
+      deleteMockConsoleFunc(method);
+    });
+  });
+};
+
+export * from '@testing-library/react';
+export {customRender as render};

wp/src/wp-content/plugins/wp-react/rollup.config.mjs

@@ -3,7 +3,8 @@ import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import typescript from '@rollup/plugin-typescript';
-import css from "rollup-plugin-import-css";
+import sass from 'sass';
+import scss from 'rollup-plugin-scss';
 import image from '@rollup/plugin-image';
 import json from '@rollup/plugin-json';
 import terser from '@rollup/plugin-terser';
@@ -19,6 +20,12 @@ export default {
             inlineDynamicImports: true
         },
     ],
+    onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+          return;
+        }
+        warn(warning);
+      },
     plugins: [
         peerDepsExternal(),
         resolve({
@@ -36,7 +43,12 @@ export default {
             inlineSources: true,
         }),
         image(),
-        css({ output: 'style.css', minify: true }),
+        scss({
+            fileName: 'style.css',
+            outputStyle: process.env.NODE_ENV === 'production' ? 'compressed' : 'expanded',
+            runtime: sass,
+            failOnError: true,
+        }),
         json(),
         terser()
     ],

wp/src/wp-content/plugins/wp-react/tests/unit/Http/Ajax/GetBirdsTest.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace WpReact\unit\Http\Ajax;
+
+use phpmock\Mock;
+use PHPUnit\Framework\TestCase;
+
+final class GetBirdsTest extends TestCase
+{
+  public function test_handler(): void
+  {
+    $handle = new Mock(__NAMESPACE__, 'handle', function () {
+      return 3;
+    });
+
+    $handle->enable();
+    $this->assertEquals(3, handle());
+  }
+}

wp/src/wp-content/plugins/wp-react/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,18 +12,17 @@
     "moduleResolution": "node",
     "noImplicitAny": false,
     "resolveJsonModule": true,
+    "noEmitOnError": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
     "paths": {
-      "react": [
+      "react": ["./node_modules/@types/react"],
-        "./node_modules/@types/react"
+      "test-utils": ["./resources/ts/utils/test-utils"],
-      ]
+      "~/*": ["./resources/ts/*"]
-    }
+    },
+    "typeRoots": ["./node_modules/@types", "./node_modules/@testing-library"],
+    "types": ["jest", "jest-dom"]
   },
-  "exclude": [
+  "exclude": ["node_modules"],
-    "node_modules"
+  "include": ["resources/ts/**/*.ts", "resources/ts/**/*.tsx"]
-  ],
-  "include": [
-    "resources/ts/**/*.ts",
-    "resources/ts/**/*.tsx"
-  ],
 }