scaffold unit tests

Signed-off-by: Joe Fusco <[email protected]>

.github/workflows/test-unit.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

babel.config.json

@@ -0,0 +1,4 @@
+
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  testMatch: [
+    "**/tests/unit/**/*.js",
+  ],
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest',
+  },
+};

package.json

@@ -4,19 +4,27 @@
     "check-engines": "wp-scripts check-engines",
     "build": "wp-scripts build --webpack-no-externals",
     "start": "wp-scripts start",
-    "test": "npx wp-env start && npx playwright test",
+    "test": "echo \"specify type of test\"",
+    "test:e2e": "npx wp-env start && npx playwright test",
+    "test:unit": "npx jest",
     "format": "wp-scripts format",
     "format:src": "wp-scripts format ./src",
     "lint:js": "wp-scripts lint-js ./src",
     "lint:js:fix": "wp-scripts lint-js --fix ./src",
     "lint:js:src": "wp-scripts lint-js ./src"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
     "@playwright/test": "^1.41.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.16",
     "@wordpress/env": "^9.2.0",
     "@wordpress/scripts": "^26.17.0",
-    "clsx": "^2.0.0"
+    "babel-jest": "^29.7.0",
+    "clsx": "^2.0.0",
+    "jest": "^29.7.0"
   },
   "dependencies": {
     "@wordpress/element": "^5.23.0",

playwright.config.js

@@ -1,79 +1,27 @@
-// @ts-check
 const { defineConfig, devices } = require('@playwright/test');
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * @see https://playwright.dev/docs/test-configuration
- */
 module.exports = 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. */
+  testDir: './tests/e2e',                  // Directory for E2E tests
+  fullyParallel: true,                     // Run tests in files in parallel
+  forbidOnly: !!process.env.CI,            // Fail the CI build if test.only is left in code
+  retries: process.env.CI ? 2 : 0,         // Number of retries on CI
+  workers: process.env.CI ? 1 : undefined, // Opt out of parallel tests on CI
+  reporter: 'html',                        // Use HTML reporter
   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',
+    trace: 'on-first-retry',               // Collect trace when retrying failed tests
   },
-
-  /* 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/components/Editor.jsx

@@ -1,4 +1,5 @@
 /* global WPGRAPHQL_IDE_DATA */
+import React from 'react';
 import { GraphiQL } from 'graphiql';
 
 import 'graphiql/graphiql.min.css';

src/components/EditorDrawer.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Drawer as VaulDrawer } from 'vaul';
 
 export function EditorDrawer( {

src/components/Logo.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function Logo( props ) {
 	return (
 		<svg

tests/unit/Logo.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Logo } from '../../src/components/Logo';
+
+describe('Logo Component', () => {
+  test('renders an SVG element', () => {
+    render(<Logo data-testid='007' />);
+    const svgElement = screen.getByTestId('007');
+    expect(svgElement).toBeInTheDocument();
+    expect(svgElement).toHaveAttribute('viewBox', '0 0 400 400');
+  });
+});