Merge with upstream

scm-ui/ui-extensions/src/ExtensionPoint.test.tsx

@@ -33,12 +33,6 @@ describe("ExtensionPoint test", () => {
     expect(rendered.text()).toBe("Extension One");
   });
 
-  // We use this wrapper since Enzyme cannot handle React Fragments (see https://github.com/airbnb/enzyme/issues/1213)
-  class ExtensionPointEnzymeFix extends ExtensionPoint {
-    render() {
-      return <div>{super.render()}</div>;
-    }
-  }
   it("should render the given components", () => {
     const labelOne = () => {
       return <label>Extension One</label>;
@@ -50,7 +44,7 @@ describe("ExtensionPoint test", () => {
     mockedBinder.hasExtension.mockReturnValue(true);
     mockedBinder.getExtensions.mockReturnValue([labelOne, labelTwo]);
 
-    const rendered = mount(<ExtensionPointEnzymeFix name="something.special" renderAll={true} />);
+    const rendered = mount(<ExtensionPoint name="something.special" renderAll={true} />);
     const text = rendered.text();
     expect(text).toContain("Extension One");
     expect(text).toContain("Extension Two");
@@ -143,4 +137,12 @@ describe("ExtensionPoint test", () => {
     const text = rendered.text();
     expect(text).toBe("Hello Trillian");
   });
+
+  it("should not render nothing without extension and without default", () => {
+    mockedBinder.hasExtension.mockReturnValue(false);
+
+    const rendered = mount(<ExtensionPoint name="something.special" />);
+    const text = rendered.text();
+    expect(text).toBe("");
+  });
 });

scm-ui/ui-extensions/src/ExtensionPoint.tsx

@@ -1,53 +1,51 @@
 import * as React from "react";
-import binder from "./binder";
+import { Binder } from "./binder";
+import { FC, ReactNode } from "react";
+import useBinder from "./useBinder";
 
 type Props = {
   name: string;
   renderAll?: boolean;
   props?: object;
-  children?: React.ReactNode;
+};
+
+const renderAllExtensions = (binder: Binder, name: string, props?: object) => {
+  const extensions = binder.getExtensions(name, props);
+  return (
+    <>
+      {extensions.map((Component, index) => {
+        return <Component key={index} {...props} />;
+      })}
+    </>
+  );
+};
+
+const renderSingleExtension = (binder: Binder, name: string, props?: object) => {
+  const Component = binder.getExtension(name, props);
+  if (!Component) {
+    return null;
+  }
+  return <Component {...props} />;
+};
+
+const renderDefault = (children: ReactNode) => {
+  if (children) {
+    return <>{children}</>;
+  }
+  return null;
 };
 
 /**
  * ExtensionPoint renders components which are bound to an extension point.
  */
-class ExtensionPoint extends React.Component<Props> {
-  renderAll(name: string, props?: object) {
-    const extensions = binder.getExtensions(name, props);
-    return (
-      <>
-        {extensions.map((Component, index) => {
-          return <Component key={index} {...props} />;
-        })}
-      </>
-    );
+const ExtensionPoint: FC<Props> = ({ name, renderAll, props, children }) => {
+  const binder = useBinder();
+  if (!binder.hasExtension(name, props)) {
+    return renderDefault(children);
+  } else if (renderAll) {
+    return renderAllExtensions(binder, name, props);
   }
-
-  renderSingle(name: string, props?: object) {
-    const Component = binder.getExtension(name, props);
-    if (!Component) {
-      return null;
-    }
-    return <Component {...props} />;
-  }
-
-  renderDefault() {
-    const { children } = this.props;
-    if (children) {
-      return <>{children}</>;
-    }
-    return null;
-  }
-
-  render() {
-    const { name, renderAll, props } = this.props;
-    if (!binder.hasExtension(name, props)) {
-      return this.renderDefault();
-    } else if (renderAll) {
-      return this.renderAll(name, props);
-    }
-    return this.renderSingle(name, props);
-  }
-}
+  return renderSingleExtension(binder, name, props);
+};
 
 export default ExtensionPoint;

scm-ui/ui-extensions/src/binder.test.ts

@@ -4,7 +4,7 @@ describe("binder tests", () => {
   let binder: Binder;
 
   beforeEach(() => {
-    binder = new Binder();
+    binder = new Binder("testing");
   });
 
   it("should return an empty array for non existing extension points", () => {

scm-ui/ui-extensions/src/binder.ts

@@ -11,11 +11,13 @@ type ExtensionRegistration = {
  * The Binder class is mainly exported for testing, plugins should only use the default export.
  */
 export class Binder {
+  name: string;
   extensionPoints: {
     [key: string]: Array<ExtensionRegistration>;
   };
 
-  constructor() {
+  constructor(name: string) {
+    this.name = name;
     this.extensionPoints = {};
   }
 
@@ -95,6 +97,6 @@ export class Binder {
 }
 
 // singleton binder
-const binder = new Binder();
+const binder = new Binder("default");
 
 export default binder;

scm-ui/ui-extensions/src/index.ts

@@ -1,2 +1,3 @@
-export { default as binder } from "./binder";
+export { default as binder, Binder } from "./binder";
+export * from "./useBinder";
 export { default as ExtensionPoint } from "./ExtensionPoint";

scm-ui/ui-extensions/src/useBinder.test.tsx

@@ -0,0 +1,29 @@
+import useBinder, { BinderContext } from "./useBinder";
+import { Binder } from "./binder";
+import { mount } from "enzyme";
+import "@scm-manager/ui-tests/enzyme";
+import React from "react";
+
+describe("useBinder tests", () => {
+  const BinderName = () => {
+    const binder = useBinder();
+    return <>{binder.name}</>;
+  };
+
+  it("should return default binder", () => {
+    const rendered = mount(<BinderName />);
+    expect(rendered.text()).toBe("default");
+  });
+
+  it("should return binder from context", () => {
+    const binder = new Binder("from-context");
+    const app = (
+      <BinderContext.Provider value={binder}>
+        <BinderName />
+      </BinderContext.Provider>
+    );
+
+    const rendered = mount(app);
+    expect(rendered.text()).toBe("from-context");
+  });
+});

scm-ui/ui-extensions/src/useBinder.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import defaultBinder from "./binder";
+
+/**
+ * The BinderContext should only be used to override the default binder for testing purposes.
+ */
+export const BinderContext = createContext(defaultBinder);
+
+/**
+ * Hook to get the binder from context.
+ */
+export const useBinder = () => {
+  return useContext(BinderContext);
+};
+
+export default useBinder;