@zohodesk/library-platform 1.0.2-exp.1.2 → 1.0.2-exp.1.3

package/es/library/custom-component/domain/entities/DefaultSlotNameAppend.js

@@ -0,0 +1,10 @@
+export default {
+  name: "slotName",
+  required: false,
+  defaultValue: null,
+  typeMetadata: {
+    schema: {
+      type: 'string'
+    }
+  }
+};

package/es/library/custom-component/domain/entities/Properties.js

@@ -3,6 +3,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import Property from "./Property";
 import defaultAppendToActionPayload from "./DefaultAppendToActionPayload";
 import getRefPropertySchema from "../../../../cc/component/properties/getRefPropertySchema";
+import defaultSlotNameAppend from "./DefaultSlotNameAppend";
 export default class Properties {
   constructor(properties, componentName) {
     this.componentName = componentName;
@@ -12,6 +13,7 @@ export default class Properties {
     this.data = properties;
     this.data.set('appendToActionPayload', new Property(defaultAppendToActionPayload));
     this.data.set('getRef', new Property(getRefPropertySchema));
+    typeof properties.get("slotName") === "undefined" && this.data.set('slotName', new Property(defaultSlotNameAppend));
   }
 
   getAllPropertiesValue() {

package/es/library/custom-component/frameworks/ui/CreateCustomComponent.js

@@ -16,19 +16,6 @@ function discardChildren(props) {
 
 
 const createCustomComponent = input => {
-  var _input$properties, _input$properties$slo;
-
-  input.properties = { ...(input.properties || {}),
-    slotName: {
-      required: ((_input$properties = input.properties) === null || _input$properties === void 0 ? void 0 : (_input$properties$slo = _input$properties.slotName) === null || _input$properties$slo === void 0 ? void 0 : _input$properties$slo.required) || false,
-      typeMetadata: {
-        schema: {
-          type: "string"
-        }
-      }
-    }
-  };
-
   class Component extends React.Component {
     constructor(props) {
       super(props);

package/es/library/custom-component/frameworks/ui/__testcases__/CreateSlotComponent.spec.js

@@ -0,0 +1,211 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from "react";
+import createCustomComponent from "../CreateCustomComponent.tsx";
+import ComponentRegistry from "../ComponentRegistry";
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+const Parent = createCustomComponent({
+  name: "parent",
+  View: (_ref, ref) => {
+    let {
+      slotChildren
+    } = _ref;
+    const {
+      child = null,
+      siblingChild = null
+    } = slotChildren;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the Parent.", /*#__PURE__*/React.createElement("div", null, child), /*#__PURE__*/React.createElement("div", null, siblingChild));
+  },
+  properties: {
+    slots: {
+      required: false,
+      typeMetadata: {
+        schema: {
+          type: "array"
+        }
+      }
+    }
+  },
+  eventHandlers: {}
+});
+const Child = createCustomComponent({
+  name: "child",
+  View: (_ref2, ref) => {
+    let {
+      slotChildren
+    } = _ref2;
+    const {
+      nestedChildren = null
+    } = slotChildren;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the Child.", /*#__PURE__*/React.createElement("div", null, nestedChildren));
+  },
+  eventHandlers: {},
+  properties: {
+    slots: {
+      required: false,
+      typeMetadata: {
+        schema: {
+          type: "array"
+        }
+      }
+    }
+  }
+});
+const SiblingChild = createCustomComponent({
+  name: "siblingChild",
+  View: (props, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the sibling Child.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+const NestedChild = createCustomComponent({
+  name: "nestedChild",
+  View: (_, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the nested Child.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+const NoSlotName = createCustomComponent({
+  name: "noSlotName",
+  View: (_, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, It should not be rendered.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+ComponentRegistry.register("Parent", Parent);
+ComponentRegistry.register("Child", Child);
+ComponentRegistry.register("SiblingChild", SiblingChild);
+describe("Slot Integration test suite", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+  it("slot Information passed to parent and check children rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child"
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    })));
+    const component = getByText("Hi, I am the Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("slots with nested child and check nested child rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    }))));
+    const component = getByText("Hi, I am the nested Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("slots with sibling child and check sibling child rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }, {
+      name: "siblingChild",
+      elements: [{
+        name: "siblingChild",
+        type: "SiblingChild"
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    })), /*#__PURE__*/React.createElement(SiblingChild, null)));
+    const component = getByText("Hi, I am the sibling Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("children with no slot support should not be rendered", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }, {
+      name: "siblingChild",
+      elements: [{
+        name: "siblingChild",
+        type: "SiblingChild"
+      }]
+    }];
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    })), /*#__PURE__*/React.createElement(SiblingChild, {
+      slotName: "siblingChild"
+    }), /*#__PURE__*/React.createElement(NoSlotName, {
+      slotName: "noslotname"
+    })));
+    const component = queryByText("Hi, It should not be rendered.");
+    expect(component).toBeNull();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/library-platform",
-  "version": "1.0.2-exp.1.2",
+  "version": "1.0.2-exp.1.3",
   "description": "",
   "main": "es/index.js",
   "files": [