diff --git a/packages/injectable/react/index.d.ts b/packages/injectable/react/index.d.ts index 7acb5bb8..ec28b6ad 100644 --- 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; - getPlaceholder: () => JSX.Element; + getPlaceholder: React.FunctionComponent; } 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 index b21355c8..da6e0e81 100644 --- 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 `; +exports[`withInjectables given component with props, placeholder and async dependencies, when rendered renders as placeholder using the props 1`] = ` + +
+
+
+ +`; + exports[`withInjectables given component, no placeholder and async dependencies, when rendered when the dependency resolves renders 1`] = `
diff --git a/packages/injectable/react/src/withInjectables/withInjectables.js b/packages/injectable/react/src/withInjectables/withInjectables.js index 1233025f..f807934d 100644 --- 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 ; diff --git a/packages/injectable/react/src/withInjectables/withInjectables.test.js b/packages/injectable/react/src/withInjectables/withInjectables.test.js index d6d2dc64..784aef0e 100644 --- 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 }) => ( +
+ Some content: "{someDependency}" +
+ ); + + const SmartTestComponent = withInjectables(DumbTestComponent, { + getProps: async (di, props) => ({ + someDependency: await di.inject(injectable), + ...props, + }), + + getPlaceholder: props => ( +
+ ), + }); + + rendered = mount( + , + ); + }); + + 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;