feat: Make placeholder of withInjectables able to be more specialized…

… by passing props to it
ogre-works · Feb 22, 2023 · d3fa8aa · d3fa8aa
1 parent e93a3fb
commit d3fa8aa
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 2 deletions.
diff --git a/packages/injectable/react/index.d.ts b/packages/injectable/react/index.d.ts
@@ -20,7 +20,7 @@ export interface WithInjectablesAsyncOptions<
   Props extends object,
 > {
   getProps: (di: DiContainer, props: Props) => Promise<Props & Dependencies>;
-  getPlaceholder: () => JSX.Element;
+  getPlaceholder: React.FunctionComponent<Props>;
 }
 
 export interface WithInjectables {

diff --git a/packages/injectable/react/src/withInjectables/__snapshots__/withInjectables.test.js.snap b/packages/injectable/react/src/withInjectables/__snapshots__/withInjectables.test.js.snap
@@ -14,6 +14,16 @@ exports[`withInjectables given component and sync dependencies, when rendered, r
 </body>
 `;
 
+exports[`withInjectables given component with props, placeholder and async dependencies, when rendered renders as placeholder using the props 1`] = `
+<body>
+  <div>
+    <div
+      data-testid="some-placeholder-with-props(some-prop-value)"
+    />
+  </div>
+</body>
+`;
+
 exports[`withInjectables given component, no placeholder and async dependencies, when rendered when the dependency resolves renders 1`] = `
 <body>
   <div>

diff --git a/packages/injectable/react/src/withInjectables/withInjectables.js b/packages/injectable/react/src/withInjectables/withInjectables.js
@@ -62,7 +62,7 @@ export default (Component, { getPlaceholder = constant(null), getProps }) =>
                 const syncProps = observablePropsPromise.value;
 
                 if (!syncProps) {
-                  return getPlaceholder();
+                  return getPlaceholder(props);
                 }
 
                 return <Component {...refProps} {...syncProps} />;

diff --git a/packages/injectable/react/src/withInjectables/withInjectables.test.js b/packages/injectable/react/src/withInjectables/withInjectables.test.js
@@ -359,6 +359,56 @@ describe('withInjectables', () => {
     });
   });
 
+  describe('given component with props, placeholder and async dependencies, when rendered', () => {
+    let rendered;
+    let asyncDependencyMock;
+
+    beforeEach(async () => {
+      asyncDependencyMock = asyncFn();
+
+      const injectable = getInjectable({
+        id: 'some-injectable-id',
+
+        lifecycle: lifecycleEnum.transient,
+
+        instantiate: () => asyncDependencyMock(),
+      });
+
+      di.register(injectable);
+
+      const DumbTestComponent = ({ someDependency, ...props }) => (
+        <div data-testid="some-dumb-test-component" {...props}>
+          Some content: "{someDependency}"
+        </div>
+      );
+
+      const SmartTestComponent = withInjectables(DumbTestComponent, {
+        getProps: async (di, props) => ({
+          someDependency: await di.inject(injectable),
+          ...props,
+        }),
+
+        getPlaceholder: props => (
+          <div data-testid={`some-placeholder-with-props(${props.someProp})`} />
+        ),
+      });
+
+      rendered = mount(
+        <SmartTestComponent data-some-prop-test someProp="some-prop-value" />,
+      );
+    });
+
+    it('renders as placeholder using the props', () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it('has placeholder using props', () => {
+      expect(
+        rendered.queryByTestId('some-placeholder-with-props(some-prop-value)'),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe('given component, no placeholder and async dependencies, when rendered', () => {
     let rendered;
     let asyncDependencyMock;
-Original file line number
+Diff line change
@@ Expand Up @@
     </body>
     `;
+    exports[`withInjectables given component with props, placeholder and async dependencies, when rendered renders as placeholder using the props 1`] = `
+    <body>
+      <div>
+        <div
+          data-testid="some-placeholder-with-props(some-prop-value)"
+        />
+      </div>
+    </body>
+    `;
     exports[`withInjectables given component, no placeholder and async dependencies, when rendered when the dependency resolves renders 1`] = `
     <body>
       <div>
@@ Expand Down @@