feat(demos): add "Feature App in Feature App" demo (#313)

packages/demos/README.md

@@ -14,6 +14,10 @@ yarn
 
 Now run one of the following demos:
 
+```sh
+yarn watch:demo feature-app-in-feature-app
+```
+
 ```sh
 yarn watch:demo history-service
 ```

packages/demos/src/feature-app-in-feature-app/feature-app-inner.tsx

@@ -0,0 +1,13 @@
+import {Label} from '@blueprintjs/core';
+import {ReactFeatureApp} from '@feature-hub/react';
+import * as React from 'react';
+
+export default {
+  id: 'test:hello-world-inner',
+
+  create(): ReactFeatureApp {
+    return {
+      render: () => <Label>Hello, World!</Label>
+    };
+  }
+};

packages/demos/src/feature-app-in-feature-app/feature-app-outer.tsx

@@ -0,0 +1,18 @@
+import {Card} from '@blueprintjs/core';
+import {FeatureAppContainer, ReactFeatureApp} from '@feature-hub/react';
+import * as React from 'react';
+import featureAppDefinition from './feature-app-inner';
+
+export default {
+  id: 'test:hello-world-outer',
+
+  create(): ReactFeatureApp {
+    return {
+      render: () => (
+        <Card style={{margin: '20px'}}>
+          <FeatureAppContainer featureAppDefinition={featureAppDefinition} />
+        </Card>
+      )
+    };
+  }
+};

packages/demos/src/feature-app-in-feature-app/index.test.ts

@@ -0,0 +1,31 @@
+/**
+ * @jest-environment puppeteer
+ */
+
+import {Server} from 'http';
+import {AddressInfo} from 'net';
+import {Browser} from '../browser';
+import {startServer} from '../start-server';
+import webpackConfigs from './webpack-config';
+
+jest.setTimeout(60000);
+
+describe('integration test: "Feature App in Feature App"', () => {
+  const browser = new Browser(5000);
+
+  let server: Server;
+
+  beforeAll(async () => {
+    server = await startServer(webpackConfigs, undefined);
+
+    const {port} = server.address() as AddressInfo;
+
+    await browser.goto(`http://localhost:${port}`, 60000);
+  });
+
+  afterAll(done => server.close(done));
+
+  it('renders a Feature App with another nested Feature App', async () => {
+    await expect(page).toMatch('Hello, World!');
+  });
+});

packages/demos/src/feature-app-in-feature-app/integrator.tsx

@@ -0,0 +1,21 @@
+import {FeatureAppManager, FeatureServiceRegistry} from '@feature-hub/core';
+import {
+  FeatureAppContainer,
+  FeatureHubContextProvider
+} from '@feature-hub/react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import '../blueprint-css';
+import featureAppDefinition from './feature-app-outer';
+
+const featureServiceRegistry = new FeatureServiceRegistry();
+
+const featureAppManager = new FeatureAppManager(featureServiceRegistry);
+
+ReactDOM.render(
+  <FeatureHubContextProvider value={{featureAppManager}}>
+    <FeatureAppContainer featureAppDefinition={featureAppDefinition} />
+  </FeatureHubContextProvider>,
+
+  document.querySelector('main')
+);

packages/demos/src/feature-app-in-feature-app/webpack-config.ts

@@ -0,0 +1,14 @@
+import {join} from 'path';
+import {Configuration} from 'webpack';
+import {webpackBaseConfig} from '../webpack-base-config';
+
+export default [
+  {
+    ...webpackBaseConfig,
+    entry: join(__dirname, './integrator.tsx'),
+    output: {
+      filename: 'integrator.js',
+      publicPath: '/'
+    }
+  }
+] as Configuration[];