feat: merge control values on render

ccontrols · Mar 23, 2021 · 09d5f92 · 09d5f92
1 parent 85c090e
commit 09d5f92
Show file tree

Hide file tree

Showing 18 changed files with 221 additions and 186 deletions.
diff --git a/core/core/src/common.ts b/core/core/src/common.ts
@@ -89,3 +89,8 @@ export const mergeStoryProps = (
   const destProps = extractStoryProps(dest);
   return deepMerge(destProps, src);
 };
+
+/**
+ * unwrap a promise
+ */
+export type Await<T> = T extends PromiseLike<infer U> ? U : T;
diff --git a/core/core/src/document.ts b/core/core/src/document.ts
@@ -128,7 +128,7 @@ export type Story<Props = unknown> = {
 
 export type DynamicExamples = Story[];
 
-type ExampleControls = {
+export type ExampleControls = {
   [name: string]:
     | ComponentControl<ExampleControls>
     | string

diff --git a/core/jest-testing/package.json b/core/jest-testing/package.json
@@ -34,6 +34,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@component-controls/core": "^3.4.2",
     "jest-cli": "^26.4.2",
     "babel-jest": "^26.4.4",
     "ts-jest": "^26.4.4",

diff --git a/core/jest-testing/test/tests/run-related/react-link.test.ts b/core/jest-testing/test/tests/run-related/react-link.test.ts
@@ -1,8 +1,7 @@
 import path from 'path';
+import { Await } from '@component-controls/core';
 import { runRelatedTests } from '../../../src';
 
-type Await<T> = T extends PromiseLike<infer U> ? U : T;
-
 let results: Await<ReturnType<typeof runRelatedTests>>;
 beforeAll(async () => {
   results = await runRelatedTests(

diff --git a/core/jest-testing/test/tests/run-related/react-story.test.ts b/core/jest-testing/test/tests/run-related/react-story.test.ts
@@ -1,8 +1,7 @@
 import path from 'path';
+import { Await } from '@component-controls/core';
 import { runRelatedTests } from '../../../src';
 
-type Await<T> = T extends PromiseLike<infer U> ? U : T;
-
 let results: Await<ReturnType<typeof runRelatedTests>>;
 beforeAll(async () => {
   results = await runRelatedTests(

diff --git a/core/jest-testing/test/tests/run/react-component.test.ts b/core/jest-testing/test/tests/run/react-component.test.ts
@@ -1,8 +1,7 @@
 import path from 'path';
+import { Await } from '@component-controls/core';
 import { run } from '../../../src';
 
-type Await<T> = T extends PromiseLike<infer U> ? U : T;
-
 let results: Await<ReturnType<typeof run>>;
 beforeAll(async () => {
   results = await run(

diff --git a/core/jest-testing/test/tests/run/small.test.ts b/core/jest-testing/test/tests/run/small.test.ts
@@ -1,8 +1,7 @@
 import path from 'path';
+import { Await } from '@component-controls/core';
 import { run } from '../../../src';
 
-type Await<T> = T extends PromiseLike<infer U> ? U : T;
-
 let results: Await<ReturnType<typeof run>>;
 beforeAll(async () => {
   results = await run(

diff --git a/core/test-renderers/src/index.ts b/core/test-renderers/src/index.ts
@@ -5,6 +5,10 @@ import {
   mergeStoryProps,
   transformControls,
   StoryRenderFn,
+  ComponentControls,
+  ExampleControls,
+  mergeControlValues,
+  getControlValues,
 } from '@component-controls/core';
 import { loadConfigurations } from '@component-controls/config';
 import { render as reactRender } from '@component-controls/render/react';
@@ -28,6 +32,7 @@ export async function renderExample(
     projectFolder: string;
     configFolder?: string;
     renderer: 'react';
+    controls?: ExampleControls;
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   options?: any,
@@ -39,6 +44,7 @@ export async function renderExample<Props = unknown>(
     doc: Document;
     projectFolder: string;
     configFolder?: string;
+    controls?: ExampleControls;
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   options?: any,
@@ -51,6 +57,7 @@ export async function renderExample<Props = unknown>(
     projectFolder: string;
     configFolder?: string;
     renderer: 'rtr';
+    controls?: ExampleControls;
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   options?: any,
@@ -63,6 +70,7 @@ export async function renderExample<Props = unknown>(
     projectFolder: string;
     configFolder?: string;
     renderer: 'enzyme';
+    controls?: ExampleControls;
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   options?: any,
@@ -72,7 +80,7 @@ export async function renderExample<Props = unknown>(
  * render an example using a test framework.
  *
  * @param param0 inputs as example, doc, project folder and a selcted test rendering framework
- * @param options optional to bepassed to the render function of the selected testing framework
+ * @param options optional to be passed to the render function of the selected testing framework
  * @returns a toJson function to use in snapshots, in addition all the props returned by the selected test frameowrk
  */
 export async function renderExample<Props = unknown>(
@@ -82,12 +90,14 @@ export async function renderExample<Props = unknown>(
     projectFolder,
     configFolder,
     renderer = 'react',
+    controls,
   }: {
     example: Example<Props>;
     doc: Document;
     projectFolder: string;
     configFolder?: string;
     renderer?: rendererTypes;
+    controls?: ExampleControls;
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   options?: any,
@@ -102,6 +112,13 @@ export async function renderExample<Props = unknown>(
   }
   Object.assign(story, mergeStoryProps(mergeStoryProps(config, doc), story));
   story.controls = transformControls(story.controls);
+  if (controls && story.controls) {
+    story.controls = mergeControlValues(
+      story.controls,
+      undefined,
+      getControlValues(transformControls(controls as ComponentControls)),
+    );
+  }
   const rendererFn = renderers[renderer];
   return await rendererFn({ story, doc, config }, options);
 }
diff --git a/core/test-renderers/src/renderers/enzyme-react-16.ts b/core/test-renderers/src/renderers/enzyme-react-16.ts
@@ -1,12 +1,17 @@
 import { mount, configure, ReactWrapper } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { Await } from '@component-controls/core';
 import { RendererFn } from '../types';
 
 configure({ adapter: new Adapter() });
 
 export const render: RendererFn<{
-  component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  component: ReactWrapper<
+    any,
+    Readonly<unknown>,
+    React.Component<unknown, unknown, any>
+  >;
 }> = async ({ story, doc, config }, options?: any) => {
   const renderFn = config.renderFn;
   if (renderFn) {
@@ -17,5 +22,7 @@ export const render: RendererFn<{
       component,
     };
   }
-  return undefined;
+  return {
+    toJson: () => null,
+  } as Await<ReturnType<typeof render>>;
 };
diff --git a/core/test-renderers/src/renderers/react-test-renderer.ts b/core/test-renderers/src/renderers/react-test-renderer.ts
@@ -1,4 +1,5 @@
 import renderer, { ReactTestRenderer, act } from 'react-test-renderer';
+import { Await } from '@component-controls/core';
 import { RendererFn, Json } from '../types';
 
 export const render: RendererFn<renderer.ReactTestRenderer> = async (
@@ -19,5 +20,7 @@ export const render: RendererFn<renderer.ReactTestRenderer> = async (
       };
     }
   }
-  return undefined;
+  return {
+    toJson: () => null,
+  } as Await<ReturnType<typeof render>>;
 };
diff --git a/core/test-renderers/src/renderers/react-testing-library.ts b/core/test-renderers/src/renderers/react-testing-library.ts
@@ -1,4 +1,5 @@
 import { render as rtlRender, RenderResult } from '@testing-library/react';
+import { Await } from '@component-controls/core';
 import { RendererFn } from '../types';
 
 export const render: RendererFn<RenderResult> = async (
@@ -14,5 +15,7 @@ export const render: RendererFn<RenderResult> = async (
       ...results,
     };
   }
-  return undefined;
+  return {
+    toJson: () => null,
+  } as Await<ReturnType<typeof render>>;
 };
diff --git a/core/test-renderers/src/types.ts b/core/test-renderers/src/types.ts
@@ -15,4 +15,4 @@ export type RendererFnResult = {
 export type RendererFn<T extends unknown = unknown> = (
   props: { story: Story; doc: Document; config: RunConfiguration },
   options?: any,
-) => Promise<(RendererFnResult & T) | undefined>;
+) => Promise<RendererFnResult & T>;
diff --git a/core/test-renderers/test/jazmine-story.test.tsx b/core/test-renderers/test/jazmine-story.test.tsx
@@ -10,52 +10,54 @@ import doc, {
 
 describe('VariantButton', () => {
   test('controls', async () => {
-    const { component } =
-      (await renderExample<VariantButtonProps>({
-        example: overview,
-        doc,
-        projectFolder: path.join(__dirname, 'fixtures'),
-        renderer: 'enzyme',
-      })) || {};
-    expect(
-      component ? component.find('div[data-testid="label"]').text() : '',
-    ).toBe('Button');
+    const { component } = await renderExample<VariantButtonProps>({
+      example: overview,
+      doc,
+      projectFolder: path.join(__dirname, 'fixtures'),
+      renderer: 'enzyme',
+    });
+    expect(component.find('div[data-testid="label"]').text()).toBe('Button');
+  });
+  test('controls values', async () => {
+    const { component } = await renderExample<VariantButtonProps>({
+      example: overview,
+      doc,
+      projectFolder: path.join(__dirname, 'fixtures'),
+      renderer: 'enzyme',
+      controls: {
+        text: 'New Text',
+      },
+    });
+    expect(component.find('div[data-testid="label"]').text()).toBe('New Text');
   });
   test('primary', async () => {
-    const { toJson, component } =
-      (await renderExample({
-        example: primary,
-        doc,
-        projectFolder: path.join(__dirname, 'fixtures'),
-        renderer: 'enzyme',
-      })) || {};
+    const { toJson, component } = await renderExample({
+      example: primary,
+      doc,
+      projectFolder: path.join(__dirname, 'fixtures'),
+      renderer: 'enzyme',
+    });
 
-    expect(toJson ? toJson() : undefined).toMatchSnapshot();
-    if (component) {
-      const label = component.find('div[data-testid="label"]');
-      expect(label.text()).toBe('Primary');
+    expect(toJson()).toMatchSnapshot();
+    const label = component.find('div[data-testid="label"]');
+    expect(label.text()).toBe('Primary');
 
-      //global decorator in config file
-      expect(
-        component
-          .find('div')
-          .at(0)
-          .prop('style'),
-      ).toHaveProperty('background', 'lightblue');
-    }
+    //global decorator in config file
+    expect(
+      component
+        .find('div')
+        .at(0)
+        .prop('style'),
+    ).toHaveProperty('background', 'lightblue');
   });
   test('disabled', async () => {
-    const { toJson, component } =
-      (await renderExample({
-        example: disabled,
-        doc,
-        projectFolder: path.join(__dirname, 'fixtures'),
-        renderer: 'enzyme',
-      })) || {};
-    expect(toJson ? toJson() : undefined).toMatchSnapshot();
-    if (component) {
-      const disabled = component.find('button').prop('disabled');
-      expect(disabled).toBe(true);
-    }
+    const { toJson, component } = await renderExample({
+      example: disabled,
+      doc,
+      projectFolder: path.join(__dirname, 'fixtures'),
+      renderer: 'enzyme',
+    });
+    expect(toJson()).toMatchSnapshot();
+    expect(component.find('button').prop('disabled')).toBe(true);
   });
 });
diff --git a/core/test-renderers/test/jazmine.test.tsx b/core/test-renderers/test/jazmine.test.tsx
@@ -9,24 +9,21 @@ const Test = () => (
 );
 describe('jazmine', () => {
   test('render small component', async () => {
-    const { toJson, component } =
-      (await render({
-        story: {
-          name: 'test',
-          renderFn: Test,
-        },
-        doc: {
-          title: 'test',
-        },
-        config: {
-          renderFn: renderReact,
-        },
-      })) || {};
-    expect(toJson ? toJson() : undefined).toMatchSnapshot();
-    if (component) {
-      expect(
-        component.find('div[data-testid="test-component"]').prop('style'),
-      ).toHaveProperty('backgroundColor', 'red');
-    }
+    const { toJson, component } = await render({
+      story: {
+        name: 'test',
+        renderFn: Test,
+      },
+      doc: {
+        title: 'test',
+      },
+      config: {
+        renderFn: renderReact,
+      },
+    });
+    expect(toJson()).toMatchSnapshot();
+    expect(
+      component.find('div[data-testid="test-component"]').prop('style'),
+    ).toHaveProperty('backgroundColor', 'red');
   });
 });