@times-design-system/components-wordpress 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-design-system/components-wordpress",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Times Design System Gutenberg blocks for WordPress Full Site Editing",
   "keywords": [
@@ -38,7 +38,17 @@
     "clean": "rimraf dist",
     "dev": "rollup -c --watch",
     "prepublishOnly": "npm run build",
-    "test": "node ./__tests__/*.test.js"
+    "test": "vitest --run",
+    "test:coverage": "vitest --run --coverage",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "block:create": "node scripts/create-wordpress-block.cjs",
+    "block:create:all": "node scripts/create-wordpress-block.cjs --all",
+    "block:test": "node scripts/create-wordpress-block-tests.cjs",
+    "block:checklist": "node scripts/create-wordpress-block.cjs --checklist",
+    "block:checklist:all": "node scripts/create-wordpress-block.cjs --checklist:all",
+    "block:status": "node scripts/create-wordpress-block.cjs --status",
+    "block:list": "node scripts/create-wordpress-block.cjs --list"
   },
   "bugs": {
     "url": "https://github.com/newsuk/times-design-system/issues"
@@ -48,7 +58,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@times-design-system/theme-scss": "^2.1.0",
+    "@times-design-system/theme-scss": "^2.3.0",
     "@wordpress/block-editor": "^12.0.0",
     "@wordpress/blocks": "^12.0.0",
     "@wordpress/components": "^25.0.0",
@@ -63,13 +73,19 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/react": "19.2.5",
+    "@vitest/ui": "^1.0.4",
+    "jsdom": "^23.0.0",
     "postcss": "^8.4.31",
     "rimraf": "^5.0.0",
     "rollup": "^3.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.4"
   },
-  "gitHead": "4843806ad8a6740ddc39584603aa0484846616ea"
+  "gitHead": "f57ef06b52f90bc4c57a8e0cefd9be6c54b8f7bf"
 }

package/scripts/create-wordpress-block-tests.cjs

@@ -0,0 +1,438 @@
+#!/usr/bin/env node
+
+/**
+ * WordPress Block Test Generator
+ * 
+ * Generates test files for WordPress blocks based on component patterns
+ * 
+ * Usage:
+ *   node scripts/create-wordpress-block-tests.cjs ComponentName
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+  cyan: '\x1b[36m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function componentToBlockName(componentName) {
+  return componentName
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '');
+}
+
+/**
+ * Template for basic component test
+ */
+function generateBasicTest(componentName, blockName) {
+  return `import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+// Simplified Save component for testing
+const ${componentName}Save = ({ attributes }) => {
+  const {} = attributes || {};
+
+  return React.createElement(
+    'div',
+    { className: 'wp-block tds-${blockName}-wrapper' },
+    React.createElement('div', { className: 'tds-${blockName}' },
+      'TODO: Implement component rendering'
+    )
+  );
+};
+
+describe('${componentName} Block', () => {
+  describe('Basic Rendering', () => {
+    it('should render wrapper element', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.querySelector('.tds-${blockName}-wrapper')).toBeInTheDocument();
+    });
+
+    it('should render component element', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.querySelector('.tds-${blockName}')).toBeInTheDocument();
+    });
+
+    it('should render with no attributes', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Attribute Handling', () => {
+    it('should handle empty attributes gracefully', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.querySelector('.tds-${blockName}')).toBeInTheDocument();
+    });
+
+    it('should handle missing attributes object', () => {
+      const { container } = render(React.createElement(${componentName}Save, {}));
+      expect(container.querySelector('.tds-${blockName}')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should render semantic HTML', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.querySelector('.tds-${blockName}')).toBeInTheDocument();
+    });
+  });
+
+  // TODO: Add variant tests based on component props
+  // Reference: packages/components-react/src/${componentName}/${componentName}.tsx
+  // Patterns to implement:
+  // - Enum variants (intent, size, etc.)
+  // - Boolean flags (disabled, channel, etc.)
+  // - String content (label, content, etc.)
+});
+`;
+}
+
+/**
+ * Template for button-like components (with intent, size, behaviour, state)
+ */
+function generateButtonLikeTest(componentName, blockName) {
+  return `import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+// Mock the class builder
+vi.mock('../../src/utils/classBuilder.js', () => ({
+  build${componentName}Class: ({ intent = 'primary', size = 'medium', disabled = false }) => {
+    const classes = [
+      'tds-${blockName}',
+      \`tds-${blockName}--intent-\${intent}\`,
+      \`tds-${blockName}--size-\${size}\`,
+    ];
+    if (disabled) classes.push('tds-${blockName}--disabled');
+    return classes.join(' ');
+  }
+}));
+
+// Simplified Save component for testing
+const ${componentName}Save = ({ attributes }) => {
+  const {
+    label = '${componentName}',
+    intent = 'primary',
+    size = 'medium',
+    disabled = false,
+    ariaLabel,
+  } = attributes || {};
+
+  const classes = [
+    'tds-${blockName}',
+    \`tds-${blockName}--intent-\${intent}\`,
+    \`tds-${blockName}--size-\${size}\`,
+    disabled ? 'tds-${blockName}--disabled' : '',
+  ].filter(Boolean).join(' ');
+
+  return React.createElement(
+    'div',
+    { className: 'wp-block tds-${blockName}-wrapper' },
+    React.createElement(
+      'div',
+      {
+        className: classes,
+        'aria-label': ariaLabel,
+      },
+      label
+    )
+  );
+};
+
+describe('${componentName} Block', () => {
+  describe('Basic Rendering', () => {
+    it('should render wrapper element', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.querySelector('.tds-${blockName}-wrapper')).toBeInTheDocument();
+    });
+
+    it('should render component with default label', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.textContent).toContain('${componentName}');
+    });
+
+    it('should render component with custom label', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { label: 'Custom' } })
+      );
+      expect(container.textContent).toContain('Custom');
+    });
+  });
+
+  describe('Intent Variants', () => {
+    ['primary', 'secondary', 'negative'].forEach(intent => {
+      it(\`should render \${intent} intent\`, () => {
+        const { container } = render(
+          React.createElement(${componentName}Save, { attributes: { intent } })
+        );
+        expect(container.querySelector(\`.tds-${blockName}--intent-\${intent}\`)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Size Variants', () => {
+    ['small', 'medium', 'large'].forEach(size => {
+      it(\`should render \${size} size\`, () => {
+        const { container } = render(
+          React.createElement(${componentName}Save, { attributes: { size } })
+        );
+        expect(container.querySelector(\`.tds-${blockName}--size-\${size}\`)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('should add disabled class when disabled is true', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { disabled: true } })
+      );
+      expect(container.querySelector('.tds-${blockName}--disabled')).toBeInTheDocument();
+    });
+
+    it('should not add disabled class when disabled is false', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { disabled: false } })
+      );
+      expect(container.querySelector('.tds-${blockName}--disabled')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should include aria-label when provided', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { ariaLabel: 'Custom label' } })
+      );
+      expect(container.querySelector('.tds-${blockName}')).toHaveAttribute('aria-label', 'Custom label');
+    });
+  });
+
+  describe('Multiple Attributes', () => {
+    it('should combine intent, size, and disabled', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { 
+          attributes: { 
+            intent: 'negative', 
+            size: 'large', 
+            disabled: true 
+          } 
+        })
+      );
+      const element = container.querySelector('.tds-${blockName}');
+      expect(element).toHaveClass('tds-${blockName}--intent-negative');
+      expect(element).toHaveClass('tds-${blockName}--size-large');
+      expect(element).toHaveClass('tds-${blockName}--disabled');
+    });
+  });
+});
+`;
+}
+
+/**
+ * Template for text-like components (typography, semantic elements)
+ */
+function generateTextLikeTest(componentName, blockName) {
+  return `import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+// Simplified Save component for testing
+const ${componentName}Save = ({ attributes }) => {
+  const {
+    content = 'Default text',
+    typography = 'body',
+    semanticElement = 'p',
+  } = attributes || {};
+
+  const classes = [
+    'tds-${blockName}',
+    \`tds-${blockName}--typography-\${typography}\`,
+  ].filter(Boolean).join(' ');
+
+  return React.createElement(
+    'div',
+    { className: 'wp-block tds-${blockName}-wrapper' },
+    React.createElement(
+      semanticElement,
+      { className: classes },
+      content
+    )
+  );
+};
+
+describe('${componentName} Block', () => {
+  describe('Basic Rendering', () => {
+    it('should render wrapper element', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.querySelector('.tds-${blockName}-wrapper')).toBeInTheDocument();
+    });
+
+    it('should render with default content', () => {
+      const { container } = render(React.createElement(${componentName}Save, { attributes: {} }));
+      expect(container.textContent).toContain('Default text');
+    });
+
+    it('should render with custom content', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { content: 'Custom content' } })
+      );
+      expect(container.textContent).toContain('Custom content');
+    });
+  });
+
+  describe('Typography Variants', () => {
+    ['heading1', 'heading2', 'heading3', 'body', 'caption'].forEach(typography => {
+      it(\`should render \${typography} typography\`, () => {
+        const { container } = render(
+          React.createElement(${componentName}Save, { attributes: { typography } })
+        );
+        expect(container.querySelector(\`.tds-${blockName}--typography-\${typography}\`)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Semantic Elements', () => {
+    ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(element => {
+      it(\`should render as \${element} element\`, () => {
+        const { container } = render(
+          React.createElement(${componentName}Save, { attributes: { semanticElement: element } })
+        );
+        expect(container.querySelector(element)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should render heading as semantic element', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { semanticElement: 'h1' } })
+      );
+      expect(container.querySelector('h1')).toBeInTheDocument();
+    });
+
+    it('should render paragraph as semantic element', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { attributes: { semanticElement: 'p' } })
+      );
+      expect(container.querySelector('p')).toBeInTheDocument();
+    });
+  });
+
+  describe('Multiple Attributes', () => {
+    it('should combine typography and semantic element', () => {
+      const { container } = render(
+        React.createElement(${componentName}Save, { 
+          attributes: { 
+            typography: 'heading1',
+            semanticElement: 'h1',
+            content: 'Heading'
+          } 
+        })
+      );
+      expect(container.querySelector('h1')).toHaveClass('tds-${blockName}--typography-heading1');
+    });
+  });
+});
+`;
+}
+
+/**
+ * Determine component type and generate appropriate template
+ */
+function generateTestFile(componentName, blockName) {
+  // Simple heuristic: check component type by name or attributes
+  // This can be improved by reading the React component file
+  
+  const buttonLikeComponents = ['Button', 'IconButton', 'Flag', 'Toast'];
+  const textLikeComponents = ['Text', 'InputHelperMessage'];
+  const dividerLikeComponents = ['Divider', 'AdContainer'];
+
+  if (buttonLikeComponents.includes(componentName)) {
+    return generateButtonLikeTest(componentName, blockName);
+  } else if (textLikeComponents.includes(componentName)) {
+    return generateTextLikeTest(componentName, blockName);
+  } else if (dividerLikeComponents.includes(componentName)) {
+    return generateBasicTest(componentName, blockName);
+  } else {
+    // Default: basic test
+    return generateBasicTest(componentName, blockName);
+  }
+}
+
+/**
+ * Create test file for a component
+ */
+function createBlockTest(componentName) {
+  const blockName = componentToBlockName(componentName);
+  const testDir = path.join(__dirname, '../__tests__/blocks');
+  const testFile = path.join(testDir, `${blockName}.test.js`);
+
+  // Check if test already exists
+  if (fs.existsSync(testFile)) {
+    log(`\n⚠️  Test file already exists: ${blockName}.test.js`, 'yellow');
+    return false;
+  }
+
+  // Create directory if it doesn't exist
+  if (!fs.existsSync(testDir)) {
+    fs.mkdirSync(testDir, { recursive: true });
+  }
+
+  // Generate and write test file
+  const testContent = generateTestFile(componentName, blockName);
+  fs.writeFileSync(testFile, testContent);
+
+  return true;
+}
+
+function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0) {
+    log(`\n❌ Component name required`, 'red');
+    log(`\nUsage: node scripts/create-wordpress-block-tests.cjs ComponentName`, 'dim');
+    log(`\nExample: node scripts/create-wordpress-block-tests.cjs Button\n`, 'dim');
+    process.exit(1);
+  }
+
+  const componentName = args[0];
+  const blockName = componentToBlockName(componentName);
+
+  if (createBlockTest(componentName)) {
+    log(`\n✅ Test file created successfully!`, 'green');
+    log(`\n📝 Test Details:`, 'bright');
+    log(`   Component: ${componentName}`);
+    log(`   Block: tds/${blockName}`);
+    log(`   File: __tests__/blocks/${blockName}.test.js`);
+    log(`\n💡 Next Steps:`, 'cyan');
+    log(`\n   1. Review the generated test file`);
+    log(`   2. Implement the Save component rendering`);
+    log(`   3. Add variant and attribute tests based on component props`);
+    log(`   4. Run tests: npm test`);
+    log(`\n📖 Reference: __tests__/blocks/button.test.js for detailed example\n`);
+    process.exit(0);
+  } else {
+    process.exit(1);
+  }
+}
+
+module.exports = { createBlockTest, componentToBlockName };
+
+main();