feat(blockTools): tests for LogoSpinner and mockBlockProps, and extra lines

packages/blockTools/jest.config.js

@@ -6,8 +6,8 @@ module.exports = {
   coveragePathIgnorePatterns: [
     '<rootDir>/dist/',
     '<rootDir>/tests/',
-    'runRenderTests',
-    'mockBlock',
+    'runRenderTests.js',
+    'mockBlock.js',
   ],
   coverageReporters: ['lcov', 'text', 'clover'],
   errorOnDeprecated: true,

packages/blockTools/src/Skeleton/SkeletonInput.js

@@ -46,7 +46,7 @@ const SkeletonInput = ({ properties, methods }) => {
         methods={methods}
         properties={{
           width: properties.width || '100%',
-          height: properties.inputHeight || inputHeight || 32,
+          height: properties.inputHeight || inputHeight,
         }}
       />
     </div>

packages/blockTools/src/Spinner/LogoSpinner.test.js

@@ -0,0 +1,119 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import LogoSpinner from './LogoSpinner';
+import { create, act } from 'react-test-renderer';
+
+test('default', () => {
+  let comp;
+  act(() => {
+    comp = create(<LogoSpinner />);
+  });
+  expect(comp.toJSON()).toMatchInlineSnapshot(`
+    <svg
+      height="100%"
+      version="1.1"
+      viewBox="0 0 94 91"
+      width="100%"
+    >
+      <g>
+        <path
+          d="M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z"
+          style={
+            Object {
+              "fill": "#bfbfbf",
+            }
+          }
+        />
+        <rect
+          className="loading-bar"
+          height={59}
+          style={
+            Object {
+              "fill": "#f1f1f1",
+            }
+          }
+          width={30}
+          x={16}
+          y={15}
+        />
+        <rect
+          className="loading-bar-sm"
+          height={25}
+          style={
+            Object {
+              "fill": "#f1f1f1",
+            }
+          }
+          width={25}
+          x={53}
+          y={52}
+        />
+      </g>
+    </svg>
+  `);
+});
+
+test('color props', () => {
+  let comp;
+  act(() => {
+    comp = create(<LogoSpinner color="red" barColor="green" />);
+  });
+  expect(comp.toJSON()).toMatchInlineSnapshot(`
+    <svg
+      height="100%"
+      version="1.1"
+      viewBox="0 0 94 91"
+      width="100%"
+    >
+      <g>
+        <path
+          d="M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z"
+          style={
+            Object {
+              "fill": "red",
+            }
+          }
+        />
+        <rect
+          className="loading-bar"
+          height={59}
+          style={
+            Object {
+              "fill": "green",
+            }
+          }
+          width={30}
+          x={16}
+          y={15}
+        />
+        <rect
+          className="loading-bar-sm"
+          height={25}
+          style={
+            Object {
+              "fill": "green",
+            }
+          }
+          width={25}
+          x={53}
+          y={52}
+        />
+      </g>
+    </svg>
+  `);
+});

packages/blockTools/src/mockBlockProps.test.js

@@ -14,6 +14,367 @@
   limitations under the License.
 */
 
-test('a', () => {
-  expect(1).toBe(1);
+import mockBlockProps from './mockBlockProps';
+
+test('basic display', () => {
+  const config = {
+    id: 'a',
+    type: 'Display',
+  };
+  const meta = {
+    category: 'display',
+  };
+  expect(mockBlockProps(config, meta)).toEqual({ blockId: 'a', id: 'a', type: 'Display' });
+});
+
+test('basic input', () => {
+  const config = {
+    id: 'a',
+    type: 'Input',
+  };
+  const meta = {
+    category: 'input',
+  };
+  expect(mockBlockProps(config, meta)).toEqual({ blockId: 'a', id: 'a', type: 'Input' });
+});
+
+test('basic container', () => {
+  const config = {
+    id: 'a',
+    type: 'Container',
+  };
+  const meta = {
+    category: 'container',
+  };
+  expect(mockBlockProps(config, meta)).toEqual({ blockId: 'a', id: 'a', type: 'Container' });
+});
+
+test('basic context', () => {
+  const config = {
+    id: 'a',
+    type: 'Context',
+  };
+  const meta = {
+    category: 'context',
+  };
+  expect(mockBlockProps(config, meta)).toEqual({ blockId: 'a', id: 'a', type: 'Context' });
+});
+
+test('basic list', () => {
+  const config = {
+    id: 'a',
+    type: 'List',
+  };
+  const meta = {
+    category: 'list',
+  };
+  expect(mockBlockProps(config, meta)).toEqual({ blockId: 'a', id: 'a', type: 'List' });
+});
+
+test('blocks container', () => {
+  const config = {
+    id: 'a',
+    type: 'Container',
+    blocks: [
+      {
+        id: 'b',
+        type: 'Test',
+      },
+    ],
+  };
+  const meta = {
+    category: 'container',
+  };
+  const res = mockBlockProps(config, meta);
+  expect(res).toMatchInlineSnapshot(`
+    Object {
+      "areas": Object {
+        "content": Array [
+          Object {
+            "id": "b",
+            "type": "Test",
+          },
+        ],
+      },
+      "blockId": "a",
+      "blocks": Array [
+        Object {
+          "id": "b",
+          "type": "Test",
+        },
+      ],
+      "content": Object {
+        "content": [Function],
+      },
+      "id": "a",
+      "type": "Container",
+    }
+  `);
+  expect(res.content.content()).toMatchInlineSnapshot(`
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+          "width": "100%",
+        }
+      }
+    >
+      content
+    </div>
+  `);
+});
+test('blocks areas container', () => {
+  const config = {
+    id: 'a',
+    type: 'Container',
+    blocks: [
+      {
+        id: 'b',
+        type: 'Test',
+      },
+    ],
+    areas: {
+      content: [
+        {
+          id: 'x',
+          type: 'Test',
+        },
+      ],
+    },
+  };
+  const meta = {
+    category: 'container',
+  };
+
+  const res = mockBlockProps(config, meta);
+  expect(res).toMatchInlineSnapshot(`
+    Object {
+      "areas": Object {
+        "content": Array [
+          Object {
+            "id": "b",
+            "type": "Test",
+          },
+        ],
+      },
+      "blockId": "a",
+      "blocks": Array [
+        Object {
+          "id": "b",
+          "type": "Test",
+        },
+      ],
+      "content": Object {
+        "content": [Function],
+      },
+      "id": "a",
+      "type": "Container",
+    }
+  `);
+  expect(res.content.content()).toMatchInlineSnapshot(`
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+          "width": "100%",
+        }
+      }
+    >
+      content
+    </div>
+  `);
+});
+
+test('areas container', () => {
+  const config = {
+    id: 'a',
+    type: 'Container',
+    areas: {
+      content: [
+        {
+          id: 'b',
+          type: 'Test',
+        },
+      ],
+    },
+  };
+  const meta = {
+    category: 'container',
+  };
+  const res = mockBlockProps(config, meta);
+  expect(res).toMatchInlineSnapshot(`
+    Object {
+      "areas": Object {
+        "content": Array [
+          Object {
+            "id": "b",
+            "type": "Test",
+          },
+        ],
+      },
+      "blockId": "a",
+      "content": Object {
+        "content": [Function],
+      },
+      "id": "a",
+      "type": "Container",
+    }
+  `);
+  expect(res.content.content()).toMatchInlineSnapshot(`
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+          "width": "100%",
+        }
+      }
+    >
+      content
+    </div>
+  `);
+});
+
+test('areas context', () => {
+  const config = {
+    id: 'a',
+    type: 'Context',
+    areas: {
+      content: [
+        {
+          id: 'b',
+          type: 'Test',
+        },
+      ],
+    },
+  };
+  const meta = {
+    category: 'context',
+  };
+  const res = mockBlockProps(config, meta);
+  expect(res).toMatchInlineSnapshot(`
+    Object {
+      "areas": Object {
+        "content": Array [
+          Object {
+            "id": "b",
+            "type": "Test",
+          },
+        ],
+      },
+      "blockId": "a",
+      "content": Object {
+        "content": [Function],
+      },
+      "id": "a",
+      "type": "Context",
+    }
+  `);
+  expect(res.content.content()).toMatchInlineSnapshot(`
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+          "width": "100%",
+        }
+      }
+    >
+      content
+    </div>
+  `);
+});
+
+test('areas list', () => {
+  const config = {
+    id: 'a',
+    type: 'List',
+    areas: {
+      content: [
+        {
+          id: 'b',
+          type: 'Test',
+        },
+      ],
+    },
+  };
+  const meta = {
+    category: 'list',
+  };
+  const res = mockBlockProps(config, meta);
+  expect(res).toMatchInlineSnapshot(`
+    Object {
+      "areas": Object {
+        "content": Array [
+          Object {
+            "id": "b",
+            "type": "Test",
+          },
+        ],
+      },
+      "blockId": "a",
+      "id": "a",
+      "list": Object {
+        "content": [Function],
+      },
+      "type": "List",
+    }
+  `);
+  expect(res.list.content()).toMatchInlineSnapshot(`
+    Array [
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+            "width": "100%",
+          }
+        }
+      >
+        b
+      </div>,
+    ]
+  `);
+});
+
+test('actions display', () => {
+  global.alert = jest.fn();
+  const config = {
+    id: 'a',
+    type: 'Display',
+    actions: {
+      onClick: [
+        {
+          id: 'c',
+          type: 'Test',
+        },
+      ],
+    },
+  };
+  const meta = {
+    category: 'display',
+  };
+  const res = mockBlockProps(config, meta);
+  expect(res).toMatchInlineSnapshot(`
+    Object {
+      "actions": Object {
+        "onClick": Array [
+          Object {
+            "id": "c",
+            "type": "Test",
+          },
+        ],
+      },
+      "blockId": "a",
+      "id": "a",
+      "methods": Object {
+        "callAction": [Function],
+      },
+      "type": "Display",
+    }
+  `);
+  res.methods.callAction({ action: 'click' });
+  expect(global.alert).toBeCalledWith(JSON.stringify({ action: 'click' }, null, 2));
 });

packages/blockTools/src/useRunAfterUpdate.test.js

@@ -15,10 +15,10 @@
 */
 
 import useRunAfterUpdate from './useRunAfterUpdate';
-import { useRef } from 'react';
+import { useRef, useLayoutEffect } from 'react';
 
 jest.mock('react', () => {
-  const useLayoutEffect = (fn) => fn();
+  const useLayoutEffect = jest.fn();
   const ref = { current: jest.fn() };
   const useRef = () => ref;
   return { useLayoutEffect, useRef };
@@ -29,11 +29,21 @@ const { current } = ref;
 
 beforeEach(() => {
   ref.current.mockReset();
+  useLayoutEffect.mockReset();
+  useLayoutEffect.mockImplementation((fn) => fn());
 });
 
 test('default call', () => {
   const res = useRunAfterUpdate();
+  expect(useLayoutEffect).toHaveBeenCalledTimes(1);
+  expect(current).toBeCalledTimes(1);
+  res(() => 'one');
+  expect(ref.current()).toEqual('one');
+  useRunAfterUpdate();
+  expect(useLayoutEffect).toHaveBeenCalledTimes(2);
+  expect(current).toBeCalledTimes(1);
+  useRunAfterUpdate();
+  expect(useLayoutEffect).toHaveBeenCalledTimes(3);
+  expect(ref.current).toEqual(null);
   expect(current).toBeCalledTimes(1);
-  res('one');
-  expect(ref.current).toEqual('one');
 });