Feature :: D5 :: Tests :: 3PS :: Track C :: EX-02 StaticModule

README.md

@@ -105,7 +105,9 @@ npm test
 npm run test:modules
 ```
 
-`npm test` runs the EX-01 smoke test harness. `npm run test:modules` uses the full Divi and WordPress Jest setup for upcoming module tests.
+`npm test` runs the EX-01 smoke and StaticModule metadata unit tests. `npm run test:modules` runs StaticModule edit snapshot tests with RTL. The full Divi and WordPress Jest setup in `test-config/jest.config.js` is reserved for upcoming module integration tests.
+
+Run `npm run build` before PHP StaticModule registration tests so `modules-json/static-module/` exists locally.
 
 PHPUnit requires a PHP binary with the `mysqli` extension enabled. If `composer test` fails with a missing MySQL extension error, run PHPUnit with a compatible PHP binary such as `php vendor/bin/phpunit`.
 

package.json

@@ -12,7 +12,7 @@
     "start": "NODE_ENV=development webpack -w --config webpack.config.js --progress",
     "build": "NODE_ENV=production webpack --config webpack.config.js --progress",
     "test": "wp-scripts test-unit-js --config ./test-config/jest.smoke.config.js",
-    "test:modules": "wp-scripts test-unit-js --config ./test-config/jest.config.js",
+    "test:modules": "wp-scripts test-unit-js --config ./test-config/jest.modules.config.js",
     "zip": "gulp zip",
     "reset-install": "rm -rf ./package-lock.json ./node_modules/ && npm install",
     "reset-install:divi-4": "cd divi-4 && rm -rf ./package-lock.json ./node_modules/ && npm install",
@@ -33,6 +33,7 @@
     "@divi/types": "npm:divi-types@^1.0.10",
     "@emotion/jest": "^11.11.0",
     "@mdx-js/react": "^3.0.1",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@tinymce/tinymce-react": "^5.0.1",

src/components/static-module/__tests__/__mock-data__/attrs.ts

@@ -0,0 +1,4 @@
+import defaultRenderAttributes from '../../module-default-render-attributes.json';
+import { StaticModuleAttrs } from '../types';
+
+export const staticModuleDefaultAttrs: StaticModuleAttrs = defaultRenderAttributes as StaticModuleAttrs;

src/components/static-module/__tests__/__snapshots__/edit.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StaticModuleEdit /> matches snapshot when "Default Static Module edit props" 1`] = `"<div class="static-module-test-container" data-module-name="example/static-module"><div class="example_static_module__inner"><div class="example_static_module__image"><span class="example_static_module__badge" data-et-element="badge">Static badge</span><span class="example_static_module__image" data-et-element="image">Static image</span></div><div class="example_static_module__content-container"><span class="example_static_module__title" data-et-element="title">Static title</span><span class="example_static_module__summary" data-et-element="summary">Static summary</span><div class="example_static_module__content"><span class="example_static_module__content" data-et-element="content">Static content</span></div></div></div></div>"`;

src/components/static-module/__tests__/edit.test.tsx

@@ -0,0 +1,52 @@
+import React, { createElement, ReactElement } from 'react';
+import { render } from '@testing-library/react';
+
+import { StaticModuleEdit } from '../edit';
+import { StaticModuleEditProps } from '../types';
+import { staticModuleDefaultAttrs } from './__mock-data__/attrs';
+import testCases from './test-cases.json';
+
+interface StaticModuleEditTestCase {
+  title: string;
+  args: {
+    attrs: StaticModuleEditProps['attrs'];
+    id: string;
+    name: string;
+    childrenIds: string[];
+  };
+}
+
+const createMockElements = () => ( {
+  render: ( { attrName }: { attrName: string } ): ReactElement => createElement(
+    'span',
+    {
+      className: `example_static_module__${ attrName }`,
+      'data-et-element': attrName,
+    },
+    `Static ${ attrName }`,
+  ),
+  styleComponents: () => null,
+  style: () => null,
+  scriptData: () => null,
+} );
+
+describe.each( testCases as StaticModuleEditTestCase[] )( '<StaticModuleEdit />', ( { title, args } ) => {
+  it( `matches snapshot when "${ title }"`, () => {
+    const mockElements = createMockElements();
+    const editComponentProps: StaticModuleEditProps = {
+      attrs: {
+        ...staticModuleDefaultAttrs,
+        ...args.attrs,
+      },
+      elements: mockElements as StaticModuleEditProps['elements'],
+      id: args.id,
+      name: args.name,
+    };
+
+    const { container } = render( createElement( StaticModuleEdit, editComponentProps ) );
+
+    expect( container.innerHTML ).toContain( 'example_static_module__inner' );
+    expect( container.innerHTML ).toContain( 'Static summary' );
+    expect( container.innerHTML ).toMatchSnapshot();
+  } );
+} );

src/components/static-module/__tests__/metadata.test.ts

@@ -0,0 +1,30 @@
+import defaultRenderAttributes from '../module-default-render-attributes.json';
+import moduleMetadata from '../module.json';
+import { StaticModuleAttrs } from '../types';
+
+interface StaticModuleMetadata {
+  name: string;
+  title: string;
+  moduleClassName: string;
+  attributes: Record<string, { type?: string }>;
+}
+
+describe( 'Static Module metadata unit tests', () => {
+  it( 'parses module.json with expected module metadata', () => {
+    const staticModuleMetadata = moduleMetadata as StaticModuleMetadata;
+
+    expect( staticModuleMetadata.name ).toBe( 'example/static-module' );
+    expect( staticModuleMetadata.title ).toBe( 'Static Module' );
+    expect( staticModuleMetadata.moduleClassName ).toBe( 'example_static_module' );
+    expect( staticModuleMetadata.attributes ).toHaveProperty( 'summary' );
+    expect( staticModuleMetadata.attributes ).toHaveProperty( 'title' );
+  } );
+
+  it( 'parses default render attributes with summary content', () => {
+    const staticModuleDefaultAttrs = defaultRenderAttributes as StaticModuleAttrs;
+
+    expect( staticModuleDefaultAttrs.summary?.innerContent?.desktop?.value ).toContain( 'brief summary' );
+    expect( staticModuleDefaultAttrs.badge?.innerContent?.desktop?.value ).toBe( 'New' );
+    expect( staticModuleDefaultAttrs.module?.meta?.adminLabel?.desktop?.value ).toBe( 'Static Module' );
+  } );
+} );

src/components/static-module/__tests__/test-cases.json

@@ -0,0 +1,11 @@
+[
+  {
+    "title": "Default Static Module edit props",
+    "args": {
+      "attrs": {},
+      "id": "static-module-edit-test-1",
+      "name": "example/static-module",
+      "childrenIds": []
+    }
+  }
+]

test-config/babel-transformer.js

@@ -28,7 +28,13 @@ module.exports = {
   process(source, file, ...args) {
     if (file.indexOf('/wp-includes/js/dist/') > 0) {
       if (file.match(isWPGlobal)) {
-        const name = source.split('(window.wp = window.wp || {}).')[1].split(' =')[0].trim();
+        const wpGlobalMarker = '(window.wp = window.wp || {}).';
+
+        if (-1 === source.indexOf(wpGlobalMarker)) {
+          return babelJestTransformer.process(source, file, ...args);
+        }
+
+        const name = source.split(wpGlobalMarker)[1].split(' =')[0].trim();
 
         source = source.split('this["wp"]').join('global["wp"]');
 
@@ -48,7 +54,13 @@ module.exports = {
     // TODO: This one will work with unminified code. But after production, we need to recheck.
     if (file.indexOf('/wp-content/themes/Divi/includes/builder-5/visual-builder/build/') > 0) {
       if (file.match(isDiviGlobal)) {
-        const name = source.match(diviModuleName)[1];
+        const diviGlobalMatch = source.match(diviModuleName);
+
+        if ( ! diviGlobalMatch) {
+          return babelJestTransformer.process(source, file, ...args);
+        }
+
+        const name = diviGlobalMatch[1];
         source = source.split('(window.divi = window.divi || {}).').join('(global.divi = global.divi || {}).');
 
         const exporter = `;

test-config/jest.config.js

@@ -91,6 +91,9 @@ module.exports = {
     '/__test-cases__',
     '/__mock-data__',
     '/test-config',
-    '<rootDir>/src/components/static-module/__tests__/module-json.test.ts',
+    '<rootDir>/src/components/static-module/__tests__/metadata.test.ts',
+  ],
+  testMatch: [
+    '<rootDir>/src/components/static-module/__tests__/edit.test.tsx',
   ],
 };

test-config/jest.modules.config.js

@@ -0,0 +1,24 @@
+const { resolve } = require('path');
+
+const pluginRootDirectory = resolve(__dirname, '..');
+
+module.exports = {
+  rootDir:    pluginRootDirectory,
+  preset:     '@wordpress/jest-preset-default',
+  moduleNameMapper: {
+    '^@divi/module$': resolve( __dirname, 'mocks/divi-module.js' ),
+  },
+  testMatch:  [
+    '<rootDir>/src/components/static-module/__tests__/edit.test.tsx',
+  ],
+  transform: {
+    '^.+\\.[jt]sx?$': resolve(__dirname, 'babel-transformer.js'),
+  },
+  setupFilesAfterEnv: [
+    resolve(__dirname, 'jest-rtl-setup.js'),
+  ],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/test-config/',
+  ],
+};