diff --git a/core/core/src/common.ts b/core/core/src/common.ts index a9b669045..b00b02709 100644 --- a/core/core/src/common.ts +++ b/core/core/src/common.ts @@ -23,7 +23,7 @@ export interface SmartControls { * story properties that can be inherited from the document, or each story can have its properties */ -export interface StoryProps { +export interface StoryProps { /** * id for component associated with the story */ @@ -62,7 +62,9 @@ export interface StoryProps { category?: string; } -export const extractStoryProps = (src: StoryProps): StoryProps => { +export const extractStoryProps = ( + src: StoryProps, +): StoryProps => { return { component: src.component, subcomponents: src.subcomponents, @@ -82,9 +84,9 @@ export const extractStoryProps = (src: StoryProps): StoryProps => { * @param src the props to keep, unless they are undefined * @returns the merged props */ -export const mergeStoryProps = ( - dest: StoryProps | undefined = {}, - src: StoryProps | undefined = {}, +export const mergeStoryProps = ( + dest: StoryProps | undefined = {}, + src: StoryProps | undefined = {}, ): StoryProps => { const destProps = extractStoryProps(dest); return deepMerge(destProps, src); diff --git a/core/core/src/document.ts b/core/core/src/document.ts index b8b5d5eed..d3b80b59d 100644 --- a/core/core/src/document.ts +++ b/core/core/src/document.ts @@ -66,7 +66,7 @@ export type StoryArguments = StoryArgument[]; /** * Story interface - usually extracted by the AST instrumenting loader */ -export type Story = { +export type Story = { /** * name of the Story. */ @@ -140,7 +140,7 @@ export type ExampleControls = { /** * es named export function, excapsulates a contained example code. */ -export type Example = { +export type Example = { (props: PropsWithChildren, context?: any): ReactElement< any, any @@ -162,7 +162,7 @@ export const defDocType: DocType = 'story'; * For MDX files, fromtmatter is used to declare the document properties. * For ESM (ES Modules) documentation files, the default export is used. */ -export type Document = { +export type Document = { /** * title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. * This is the only required field, to show the document in the menu structures. diff --git a/core/test-renderers/src/index.ts b/core/test-renderers/src/index.ts index cc1683f0f..25659dd5a 100644 --- a/core/test-renderers/src/index.ts +++ b/core/test-renderers/src/index.ts @@ -1,65 +1,2 @@ -import { - Example, - Document, - Story, - mergeStoryProps, - transformControls, - StoryRenderFn, - ComponentControls, - ExampleControls, - mergeControlValues, - getControlValues, - FrameworkRenderFn, - RunConfiguration, -} from '@component-controls/core'; -import { loadConfigurations } from '@component-controls/config'; -import { render as reactRender } from '@component-controls/render/react'; - -/** - * 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 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 function renderExample({ - example, - doc, - config, - controls, -}: { - example: Example; - doc: Document; - config: string | RunConfiguration; - controls?: ExampleControls; -}): ReturnType { - let runtimeConfig; - if (typeof config === 'string') { - runtimeConfig = loadConfigurations(config); - if (!runtimeConfig) { - throw new Error(`Could not load configuration ${config}`); - } - } else { - runtimeConfig = config; - } - if (!runtimeConfig.renderFn) { - runtimeConfig.renderFn = reactRender; - } - const story = example as Story; - if (typeof example === 'function') { - story.renderFn = example as StoryRenderFn; - } - Object.assign( - story, - mergeStoryProps(mergeStoryProps(runtimeConfig, doc), story), - ); - story.controls = transformControls(story.controls); - if (controls && story.controls) { - story.controls = mergeControlValues( - story.controls, - undefined, - getControlValues(transformControls(controls as ComponentControls)), - ); - } - return (runtimeConfig.renderFn as StoryRenderFn)(story, doc); -} +export { renderExample } from './render-example'; +export { renderDocument } from './render-document'; diff --git a/core/test-renderers/src/render-document.ts b/core/test-renderers/src/render-document.ts new file mode 100644 index 000000000..1fe30cf24 --- /dev/null +++ b/core/test-renderers/src/render-document.ts @@ -0,0 +1,29 @@ +import { + Example, + Document, + FrameworkRenderFn, + RunConfiguration, +} from '@component-controls/core'; +import { renderExample } from './render-example'; + +/** + * returns an array of the rendered all stories(examples) imports from a document using a test framework. + * @param param0 inputs as example, doc, project folder and a selected test rendering framework + * @returns an array of the rendered examples + */ + +export function renderDocument( + props: { + [prop: string]: Document | Example; + }, + config: string | RunConfiguration, +): { rendered: ReturnType; name: string }[] { + const doc = props['default'] as Document; + const examples = Object.keys(props) + .filter(key => key !== 'default') + .map(key => props[key] as Example); + return examples.map(example => ({ + rendered: renderExample({ doc, example, config }), + name: example.name, + })); +} diff --git a/core/test-renderers/src/render-example.ts b/core/test-renderers/src/render-example.ts new file mode 100644 index 000000000..b73148bc5 --- /dev/null +++ b/core/test-renderers/src/render-example.ts @@ -0,0 +1,64 @@ +import { + Example, + Document, + Story, + mergeStoryProps, + transformControls, + StoryRenderFn, + ComponentControls, + ExampleControls, + mergeControlValues, + getControlValues, + FrameworkRenderFn, + RunConfiguration, +} from '@component-controls/core'; +import { loadConfigurations } from '@component-controls/config'; +import { render as reactRender } from '@component-controls/render/react'; + +/** + * render an example using a test framework. + * + * @param param0 inputs as example, doc, project folder and a selected test rendering framework + * @returns the rendered example + */ +export function renderExample({ + example, + doc, + config, + controls, +}: { + example: Example; + doc: Document; + config: string | RunConfiguration; + controls?: ExampleControls; +}): ReturnType { + let runtimeConfig; + if (typeof config === 'string') { + runtimeConfig = loadConfigurations(config); + if (!runtimeConfig) { + throw new Error(`Could not load configuration ${config}`); + } + } else { + runtimeConfig = config; + } + if (!runtimeConfig.renderFn) { + runtimeConfig.renderFn = reactRender; + } + const story = example as Story; + if (typeof example === 'function') { + story.renderFn = example as StoryRenderFn; + } + Object.assign( + story, + mergeStoryProps(mergeStoryProps(runtimeConfig, doc), story), + ); + story.controls = transformControls(story.controls); + if (controls && story.controls) { + story.controls = mergeControlValues( + story.controls, + undefined, + getControlValues(transformControls(controls as ComponentControls)), + ); + } + return (runtimeConfig.renderFn as StoryRenderFn)(story, doc); +} diff --git a/core/test-renderers/src/types.ts b/core/test-renderers/src/types.ts deleted file mode 100644 index 7563f7763..000000000 --- a/core/test-renderers/src/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Story, Document, RunConfiguration } from '@component-controls/core'; - -export type Json = - | { - type: string; - props?: { [key: string]: any }; - children: Array | null; - } - | DocumentFragment; - -export type RendererFnResult = { - toJson: () => Json | null; -}; - -export type RendererFn = ( - props: { story: Story; doc: Document; config: RunConfiguration }, - options?: any, -) => Promise; diff --git a/examples/stories/src/blogs/custom-test-runners.mdx b/examples/stories/src/blogs/custom-test-runners.mdx deleted file mode 100644 index c733f25f3..000000000 --- a/examples/stories/src/blogs/custom-test-runners.mdx +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Custom test runners -type: blog -date: 2020-09-04 -author: atanasster -route: /blogs/custom-test-runners -description: A step-by-step guide on how to create custom test runners using the component-controls stories compiler. -tags: - - testing - - jest - - stories ---- - -# Overview - -The standalone stories compiler [@component-controls/webpack-compile](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile) makes it possible to create custom test runners for the stories embedded in your documentation. - - -# Install the compiler: - -```bash -yarn add @component-controls/webpack-compile -``` - -# Create a new test runner file - -For this example, we will create a file `tests/testrunner.js` that we can launch using the shell or from a script in your project's `package.json`. - -```bash -node tests/testrunner.js`. -``` - -# Compile the stories - -We will assume your component-controls configuration files are located in the `.config` folder of your project. We will also specify a custom distribution folder (by default `public`) and bundle name (by default `component-controls.js`) for the compiler stories bundle. The last parameter is an array of a few presets that are standard for `react` projects. - -> Before launching the webpack compiler, we need to set the `NODE_ENV` environment variable. - - -```js:title=tests/testrunner.js -const path = require('path'); -const { compile } = require('@component-controls/webpack-compile'); - -(async () => { - process.env.NODE_ENV = 'development'; - const { bundleName} = await compile({ - configPath: path.resolve(__dirname, '../.config'), - distFolder: bundleFolder, - bundleName: 'stories.js', - presets: ['react', 'react-docgen-typescript'], - }); - - //more code below -})(); -``` -The compiler is an async function that returns the name of the bundle of static stories. - -## Load run-time store - -The above-compiled bundle of stores is the **static** version of the stories before they are loaded into the browser. - -> Any dynamic document and story properties that are calculated at run-time, as well as the stories render functions are not available from the static store. - -To load the run-time stories, we will need to use the [@component-controls/store](https://github.com/ccontrols/component-controls/tree/master/core/store) package. - -```bash -yarn add @component-controls/store -``` - -And create a file `store_loader.js` that will be used by the individual test files to load the static store at run-time. - -```js:title=tests/store_loader.js -const path = require('path'); -const { loadStore } = require('@component-controls/store'); - -const bundleName = path.resolve(__dirname,'stories.js'); -const store = loadStore(require(bundleName)); -module.exports.store = store; -``` -## Create tests folder - -We will first create a separate folder for the dynamically created test files. - -> The dynamically created test files can be cleaned (erased) at the end of running the tests. - -```js:title=tests/testrunner.js -const fs = require('fs'); -... - let testFolder = path.resolve(__dirname, 'tests'); - if (!fs.existsSync(testFolder)) { - fs.mkdirSync(testFolder); - } -... -``` - -## Create test files - -Next, we will iterate through the static store and create a test file for each store(one per document) that has at least one story. - -```js:title=tests/testrunner.js -const staticStore = require(bundleName); - staticStore.stores.forEach(store => { - if (store.stories && Object.keys(store.stories).length) { - const doc = store.doc; - fs.writeFileSync(path.resolve(testFolder, `${doc.title}.test.js`), ` - //import the 'dynamic' store - const { store } = require('../store_loader'); - //we will use react-testing-library to render the stories - const { render: rtlRender, cleanup } = require('@testing-library/react'); - - //the document title is used for test describe - describe('${doc.title}', () => { - //rtl cleanup afdter each test - afterEach(cleanup); - //gain a reference to the dynamnic version of the document - const doc = store.docs['${doc.title}']; - //iterate through the document stories - doc.stories.forEach(storyId => { - const story = store.stories[storyId]; - const { renderFn } = story; - // will create a test only of the story has a valid render function - if (renderFn) { - it(story.name, () => { - //create a rendered story node - const storyRendered = store.config.renderFn(storyId, store); - //mount story on rtl rendered - const { asFragment } = rtlRender(storyRendered); - //compare snapshot - expect(asFragment).toMatchSnapshot(); - }); - } - }); - }); - `); - } - }); -``` - -## Run jest - -We will use the `jest-cli` package to run jest using its API. - -> All jest command-line options can be passed as the first argument to `jest-cli`. - -```js:title=tests/testrunner.js -const { run: runJest } = require('jest-cli'); -... -await runJest([], testFolder); - -``` - -## The final result - -The full source code for `testrunner.js` file: - -```js:title=tests/testrunner.js -const path = require('path'); -const fs = require('fs'); -const { run: runJest } = require('jest-cli'); -const { compile } = require('@component-controls/webpack-compile'); - -(async () => { - const bundleFolder = __dirname; - process.env.NODE_ENV = 'development'; - const { bundleName} = await compile({ - configPath: path.resolve(__dirname, '../.config'), - distFolder: bundleFolder, - bundleName: 'stories.js', - presets: ['react', 'react-docgen-typescript'], - - }); - let testFolder = path.resolve(__dirname, 'tests'); - if (!fs.existsSync(testFolder)) { - fs.mkdirSync(testFolder); - } - const staticStore = require(bundleName); - staticStore.stores.forEach(store => { - if (store.stories && Object.keys(store.stories).length) { - const doc = store.doc; - fs.writeFileSync(path.resolve(testFolder, `${doc.title}.test.js`), ` -const { store } = require('../store_loader'); -const { render: rtlRender, cleanup } = require('@testing-library/react'); - -describe('${doc.title}', () => { - afterEach(cleanup); - const doc = store.docs['${doc.title}']; - doc.stories.forEach(storyId => { - const story = store.stories[storyId]; - - const { renderFn } = story; - if (renderFn) { - it(story.name, () => { - const storyRendered = store.config.renderFn(storyId, store); - const { asFragment } = rtlRender(storyRendered); - expect(asFragment).toMatchSnapshot(); - }); - } - }); -}); -`); - - } - }); - - await runJest([], testFolder); -})(); -``` \ No newline at end of file diff --git a/examples/stories/src/tutorial/testing/jest-snapshots.mdx b/examples/stories/src/tutorial/testing/jest-snapshots.mdx index cd72baee3..0d089f443 100644 --- a/examples/stories/src/tutorial/testing/jest-snapshots.mdx +++ b/examples/stories/src/tutorial/testing/jest-snapshots.mdx @@ -13,7 +13,7 @@ author: atanasster ## Overview -The [cc-cli](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli) package automatically creates snapshot tests for your component based on the already created documentation stories. +The [cc-cli](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli) package automatically creates snapshot tests for your components based on the already created documentation stories. 3 levels from ease of use to full control: @@ -57,10 +57,17 @@ Using this approach will generate a test file in `tests/stories.test.js` that wi ### CLI Parameters -| Parameter | Explanation | Input type | Default value | -| --------------------- | ---------------------- | ---------------------------- | ------------- | -| `--renderer`
`-r` | jest framework rendere | 'react' \| 'rtr' \| 'enzyme' | `react` | -| `--test`
`-t` | tests output folder | string | `tests` | +| Parameter | Explanation | Input type | Default value | +| ---------------------- | ----------------------------------------------------------- | -------------------------- | ------------------------------ | +| `--config`
`-c` | configuration files folder | string | `.config` | +| `--generate`
`-g` | generate test files for whole store or story/by story files | 'store' \| 'story' | `store` | +| `--renderer`
`-r` | jest framework renderer | 'rtl' \| 'rtr' \| 'enzyme' | `rtl` | +| `--output`
`-o` | generated tests output folder | string | `tests` | +| `--test`
`-t` | generated tests file name | string | `stories.test.js` | +| `--format`
`-f` | generated test files format | 'cjs' \| 'esm' \| 'ts' | `cjs` | +| `--overwrite`
`-w` | force ovewrite existing test files | boolean | `false` | +| `--bundle`
`-b` | bundle path, if store loaded from bundle | string | | +| `--name`
`-n` | name of the test group/describe section | string | `component-controls generated` | Examples: diff --git a/plugins/cc-cli/README.md b/plugins/cc-cli/README.md index dc264b86c..efe8aaffd 100644 --- a/plugins/cc-cli/README.md +++ b/plugins/cc-cli/README.md @@ -1,15 +1,22 @@ # Table of contents -- [Overview](#overview) -- [Install](#install) -- [API](#api) +- [Overview](#overview) +- [Install](#install) +- [API](#api) + - [createStoreTemplate](#inscreatestoretemplateins) + - [createStoriesTemplate](#inscreatestoriestemplateins) + - [createTemplate](#inscreatetemplateins) + - [cliStore](#insclistoreins) + - [cliStory](#insclistoryins) + - [run](#insrunins) + - [saveTemplate](#inssavetemplateins) # Overview -- Easy to use cli with "zero" configuration. -- Generates test files in cjs, esm or typescript format. -- More advanced level to customize the framework renderer. -- Advanced level for full control over which stories to use for the tests. +- Easy to use cli with "zero" configuration. +- Generates test files in cjs, esm or typescript format. +- More advanced level to customize the framework renderer. +- Advanced level for full control over which stories to use for the tests. # Install @@ -23,4 +30,110 @@ yarn add @component-controls/cc-cli --dev +## createStoreTemplate + +create one large dynamic test for all the stories in the configuration/bundle + +_createStoreTemplate [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/store-template.ts)_ + +### properties + +| Name | Type | Description | +| ---------- | ---------------------------- | ---------------------------------------------------------------------------- | +| `renderer` | _"rtl" \| "rtr" \| "enzyme"_ | which renderer to use for generating the tests | +| `format` | _TeplateFormats_ | files format - default common js | +| `config` | _string_ | configuration files folder | +| `bundle` | _string_ | if specified, will get stories from the bundle instead of directly importing | +| `output` | _string_ | tests output folder - where to create them | +| `name` | _string_ | describe section label | + +## createStoriesTemplate + +create tests on a stories base (a test file for each document and inside, a test for each story) + +_createStoriesTemplate [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/stories-template.ts)_ + +### properties + +| Name | Type | Description | +| ----------- | ---------------------------- | ---------------------------------------------------------------------------- | +| `storyPath` | _string_ | | +| `renderer` | _"rtl" \| "rtr" \| "enzyme"_ | which renderer to use for generating the tests | +| `format` | _TeplateFormats_ | files format - default common js | +| `config` | _string_ | configuration files folder | +| `bundle` | _string_ | if specified, will get stories from the bundle instead of directly importing | +| `output` | _string_ | tests output folder - where to create them | +| `name` | _string_ | describe section label | + +## createTemplate + +from a template, render all variables + +_createTemplate [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/template.ts)_ + +### properties + +| Name | Type | Description | +| -------------- | ---------------------------- | ---------------------------------------------------------------------------- | +| `renderer` | _"rtl" \| "rtr" \| "enzyme"_ | which renderer to use for generating the tests | +| `format` | _TeplateFormats_ | files format - default common js | +| `config` | _string_ | configuration files folder | +| `bundle` | _string_ | if specified, will get stories from the bundle instead of directly importing | +| `output` | _string_ | tests output folder - where to create them | +| `name` | _string_ | describe section label | +| `storeRender*` | _string_ | | +| `template*` | _string_ | | +| `vars*` | _Record<string, any>_ | | + +## cliStore + +cli function to create a test file with dynamic tests for the entre store + +_cliStore [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/cli/cli-store.ts)_ + +### properties + +| Name | Type | Description | +| ------------ | ---------------------------- | ---------------------------------------------------------------------------- | +| `overwrite*` | _boolean_ | | +| `test*` | _string_ | | +| `renderer` | _"rtl" \| "rtr" \| "enzyme"_ | which renderer to use for generating the tests | +| `format` | _TeplateFormats_ | files format - default common js | +| `config` | _string_ | configuration files folder | +| `bundle` | _string_ | if specified, will get stories from the bundle instead of directly importing | +| `output` | _string_ | tests output folder - where to create them | +| `name` | _string_ | describe section label | + +## cliStory + +cli function to create tests on a story by story basis + +_cliStory [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/cli/cli-story.ts)_ + +### properties + +| Name | Type | Description | +| ------------ | ---------------------------- | ---------------------------------------------------------------------------- | +| `overwrite*` | _boolean_ | | +| `test*` | _string_ | | +| `renderer` | _"rtl" \| "rtr" \| "enzyme"_ | which renderer to use for generating the tests | +| `format` | _TeplateFormats_ | files format - default common js | +| `config` | _string_ | configuration files folder | +| `bundle` | _string_ | if specified, will get stories from the bundle instead of directly importing | +| `output` | _string_ | tests output folder - where to create them | +| `name` | _string_ | describe section label | + +## run + +cc-cli central function. based on the selected g/generate option will call the specific +cli function - store, stories + +_run [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/cli/cli.ts)_ + +## saveTemplate + +save a template file based on options + +_saveTemplate [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli/src/cli/save-template.ts)_ + diff --git a/plugins/cc-cli/src/cli/args.ts b/plugins/cc-cli/src/cli/args.ts index caffd6b11..c66e8dcee 100644 --- a/plugins/cc-cli/src/cli/args.ts +++ b/plugins/cc-cli/src/cli/args.ts @@ -12,7 +12,7 @@ export const jestCliArgs: ArgOptions = [ options: { alias: 'g', description: 'generate tests level type', - choices: ['store', 'story'], + choices: ['store', 'doc', 'story'], default: 'store', }, }, @@ -47,7 +47,7 @@ export const jestCliArgs: ArgOptions = [ name: 'bundle', options: { alias: 'b', - description: 'bundle path, if store loaded ffrom bundle', + description: 'bundle path, if store loaded from bundle', type: 'string', }, }, diff --git a/plugins/cc-cli/src/cli/cli-store.ts b/plugins/cc-cli/src/cli/cli-store.ts index 9d5e948f9..1a0626a62 100644 --- a/plugins/cc-cli/src/cli/cli-store.ts +++ b/plugins/cc-cli/src/cli/cli-store.ts @@ -2,6 +2,10 @@ import { CliOptions } from './types'; import { saveTemplate } from './save-template'; import { createStoreTemplate } from '../store-template'; +/** + * cli function to create a test file with dynamic tests for the entre store + * @param options file and rendering options + */ export const cliStore = async (options: CliOptions): Promise => { const { renderer, diff --git a/plugins/cc-cli/src/cli/cli-story.ts b/plugins/cc-cli/src/cli/cli-story.ts index 7235b4bd7..cc707b349 100644 --- a/plugins/cc-cli/src/cli/cli-story.ts +++ b/plugins/cc-cli/src/cli/cli-story.ts @@ -5,6 +5,7 @@ import { StoryTemplateOptions, TeplateFormats } from '../types'; import { CliOptions } from './types'; import { saveTemplate } from './save-template'; import { createStoriesTemplate } from '../stories-template'; +import { createDocumentTemplate } from '../document-template'; const formatExtensions: { [key in TeplateFormats]: string } = { cjs: '.js', @@ -21,7 +22,15 @@ export const formatExtension = ( return path.join(path.dirname(fileName), basename + extension); }; -export const cliStory = async (options: CliOptions): Promise => { +/** + * cli function to create tests on a story by story basis + * @param options file and rendering options + * @param generateDoc - if true will generate document-level template. Default is to generate tests for each story in the document + */ +export const cliStory = async ( + options: CliOptions, + generateDoc: boolean, +): Promise => { const { renderer, format, @@ -52,6 +61,9 @@ export const cliStory = async (options: CliOptions): Promise => { format || path.extname(name).startsWith('.ts') ? 'ts' : 'esm'; const testName = test || formatExtension(`${componentName}.test.js`, fileFormat); + const templateFn = generateDoc + ? createDocumentTemplate + : createStoriesTemplate; await saveTemplate( { renderer, @@ -68,7 +80,7 @@ export const cliStory = async (options: CliOptions): Promise => { ? path.dirname(bundle) : path.dirname(name), }, - createStoriesTemplate, + templateFn, ); } }; diff --git a/plugins/cc-cli/src/cli/cli.ts b/plugins/cc-cli/src/cli/cli.ts index 3010ae58a..e6e8cac35 100644 --- a/plugins/cc-cli/src/cli/cli.ts +++ b/plugins/cc-cli/src/cli/cli.ts @@ -4,6 +4,10 @@ import { cliStore } from './cli-store'; import { cliStory } from './cli-story'; import { CliOptions } from './types'; +/** + * cc-cli central function. based on the selected g/generate option will call the specific + * cli function - store, stories + */ export const run = async (): Promise => { const args = cliArgs(jestCliArgs); const parsedArgs = args.parse(); @@ -30,15 +34,19 @@ export const run = async (): Promise => { output, } as CliOptions); case 'story': - return await cliStory({ - renderer, - format, - overwrite, - config, - test, - bundle, - name, - output, - } as CliOptions); + case 'doc': + return await cliStory( + { + renderer, + format, + overwrite, + config, + test, + bundle, + name, + output, + } as CliOptions, + parsedArgs.generate === 'doc', + ); } }; diff --git a/plugins/cc-cli/src/cli/save-template.ts b/plugins/cc-cli/src/cli/save-template.ts index 1509a2f85..4f3e6ea3a 100644 --- a/plugins/cc-cli/src/cli/save-template.ts +++ b/plugins/cc-cli/src/cli/save-template.ts @@ -3,6 +3,12 @@ import fs from 'fs'; import { CliOptions } from './types'; import { TemplateFunction, TemplateOptions } from '../types'; +/** + * save a template file based on options + * @param options - the rendering and file options + * @param templateFn - a selected templating function + * @returns a promise, since the function is async + */ export const saveTemplate = async

( options: CliOptions

, templateFn: TemplateFunction

, diff --git a/plugins/cc-cli/src/document-template.ts b/plugins/cc-cli/src/document-template.ts new file mode 100644 index 000000000..1854dce22 --- /dev/null +++ b/plugins/cc-cli/src/document-template.ts @@ -0,0 +1,132 @@ +import fs from 'fs'; +import path from 'path'; +import dot from 'dot'; +import { parseStories } from '@component-controls/instrument'; + +import { Document } from '@component-controls/core'; +import { loadStore } from '@component-controls/store'; +import { createTemplate } from './template'; +import { StoryTemplateOptions, renderers, TemplateFunction } from './types'; + +dot.templateSettings.strip = false; +(dot as any).log = false; + +/** + * create tests on a document base (a test file for each document and inside, dynamic tests to iterate through the stories) + * @param options - rendering options + * @returns a string with the rendered template + */ +export const createDocumentTemplate: TemplateFunction = async ( + options: StoryTemplateOptions, +): Promise => { + const { + storyPath = '', + renderer = 'rtl', + format = 'cjs', + name, + output, + bundle, + ...rest + } = options; + let stories: { id?: string; name: string }[] = []; + let doc: Document = { title: 'doc' }; + if (bundle) { + if (!name) { + throw new Error( + 'When using a bundle, you must specify the document title/name as name parameter', + ); + } + const store = loadStore(require(bundle)); + + if (!store.docs[name]) { + throw new Error( + `Could not find document ${name} in the specified bundle`, + ); + } + doc = store.docs[name]; + if (doc.stories) { + stories = doc.stories.map(id => { + const story = store.stories[id]; + return { name: story.name, id }; + }); + } + } else { + const { doc: storeDoc, stories: storeStories } = await parseStories( + storyPath, + ); + if (storeDoc) { + doc = storeDoc; + } + if (storeStories) { + stories = Object.keys(storeStories).map(key => ({ + name: storeStories[key].name, + id: key, + })); + } + } + const store = bundle ? 'bundle' : 'imports'; + const documentLoopPath = path.resolve( + __dirname, + `../templates/document/loop/${store}-${renderers[renderer]}.js`, + ); + const importPath = `.${path.sep}${(output + ? path.relative(output, storyPath) + : path.basename(storyPath) + ) + .split('.') + .slice(0, -1) + .join('.')}`; + const storiesFileImports = bundle + ? '' + : format === 'cjs' + ? `const examples = require('${importPath}');` + : `import * as examples from '${importPath}';`; + const vars = { + stories, + bundle: !!bundle, + documentLoop: dot.template(fs.readFileSync(documentLoopPath, 'utf8'))({ + type: + format === 'ts' ? ': ReturnType = []' : ' = []', + }), + doc: bundle ? `const doc = store.docs['${doc.title}'];` : '', + utilityImports: fs.readFileSync( + path.resolve(__dirname, `../templates/setups/imports.${format}.js`), + ), + setupTests: fs.readFileSync( + path.resolve(__dirname, `../templates/setups/setup.${format}.js`), + ), + storyImports: fs.readFileSync( + path.resolve( + __dirname, + `../templates/document/import/${store}.${format}.js`, + ), + 'utf8', + ), + + storiesFileImports, + name: name || doc.title, + }; + const template = ` +{{=it.topImports}} +{{=it.utilityImports}} +{{=it.storyImports}} +{{=it.imports}} +{{=it.storiesFileImports}} + +describe('{{=it.name}}', () => { + {{=it.setupTests}} + {{=it.load}} + {{=it.documentLoop}} +}); +`; + return createTemplate({ + renderer, + output, + format, + name, + bundle, + template, + vars, + ...rest, + }); +}; diff --git a/plugins/cc-cli/src/store-template.ts b/plugins/cc-cli/src/store-template.ts index e17ca7075..a320d9c8d 100644 --- a/plugins/cc-cli/src/store-template.ts +++ b/plugins/cc-cli/src/store-template.ts @@ -7,6 +7,11 @@ import { createTemplate } from './template'; dot.templateSettings.strip = false; (dot as any).log = false; +/** + * create one large dynamic test for all the stories in the configuration/bundle + * @param options - rendering options + * @returns a string with the rendered template + */ export const createStoreTemplate: TemplateFunction = async ( options: TemplateOptions, ) => { @@ -19,11 +24,6 @@ export const createStoreTemplate: TemplateFunction = async ( } = options; const store = bundle ? 'bundle' : 'imports'; - const storeRenderPath = path.resolve( - __dirname, - `../templates/store/render/${store}.js`, - ); - const storeRender = fs.readFileSync(storeRenderPath, 'utf8'); const storeImportPath = path.resolve( __dirname, `../templates/store/import/${store}.${format}.js`, @@ -37,11 +37,10 @@ export const createStoreTemplate: TemplateFunction = async ( `../templates/framework-render/${renderers[renderer]}.js`, ); const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({ - storeRender, + bundle: !!bundle, }); const vars = { render, - storeRender, storeImports: fs.readFileSync(storeImportPath, 'utf8'), storeLoop: dot.template(fs.readFileSync(storeLoopPath, 'utf8'))({ render, @@ -67,7 +66,6 @@ describe('{{=it.name}}', () => { name, bundle, template, - storeRender, vars, ...rest, }); diff --git a/plugins/cc-cli/src/stories-template.ts b/plugins/cc-cli/src/stories-template.ts index 40fd439fc..9244e4fe8 100644 --- a/plugins/cc-cli/src/stories-template.ts +++ b/plugins/cc-cli/src/stories-template.ts @@ -11,6 +11,11 @@ import { StoryTemplateOptions, renderers, TemplateFunction } from './types'; dot.templateSettings.strip = false; (dot as any).log = false; +/** + * create tests on a stories base (a test file for each document and inside, a test for each story) + * @param options - rendering options + * @returns a string with the rendered template + */ export const createStoriesTemplate: TemplateFunction = async ( options: StoryTemplateOptions, ): Promise => { @@ -60,34 +65,39 @@ export const createStoriesTemplate: TemplateFunction = asy } } const store = bundle ? 'bundle' : 'imports'; - const storeRender = fs.readFileSync( - path.resolve(__dirname, `../templates/story/render/${store}.js`), - 'utf8', - ); const renderPath = path.resolve( __dirname, `../templates/framework-render/${renderers[renderer]}.js`, ); const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({ - storeRender, + bundle: !!bundle, }); + const importPath = `.${path.sep}${(output + ? path.relative(output, storyPath) + : path.basename(storyPath) + ) + .split('.') + .slice(0, -1) + .join('.')}`; const storiesFileImports = bundle ? '' + : format === 'cjs' + ? ` +const doc = require('${importPath}'); +const { ${stories + .map(story => + story.name === 'example' ? 'example as example_story' : story.name, + ) + .join(', ')} } = require('${importPath}'); + ` : `import doc, { ${stories .map(story => story.name === 'example' ? 'example as example_story' : story.name, ) - .join(', ')} } from '.${path.sep}${(output - ? path.relative(output, storyPath) - : path.basename(storyPath) - ) - .split('.') - .slice(0, -1) - .join('.')}';`; + .join(', ')} } from '${importPath}';`; const vars = { stories, render, - storeRender, doc: bundle ? `const doc = store.docs['${doc.title}'];` : '', utilityImports: fs.readFileSync( path.resolve(__dirname, `../templates/setups/imports.${format}.js`), @@ -136,7 +146,6 @@ describe('{{=it.name}}', () => { name, bundle, template, - storeRender, vars, ...rest, }); diff --git a/plugins/cc-cli/src/template.ts b/plugins/cc-cli/src/template.ts index ed188db4d..6bc021a5e 100644 --- a/plugins/cc-cli/src/template.ts +++ b/plugins/cc-cli/src/template.ts @@ -8,9 +8,13 @@ import { TemplateOptions, renderers } from './types'; dot.templateSettings.strip = false; (dot as any).log = false; +/** + * from a template, render all variables + * @param options - rendering options + * @returns a string with the rendered template + */ export const createTemplate = ( options: TemplateOptions & { - storeRender: string; template: string; vars: Record; }, diff --git a/plugins/cc-cli/src/types.ts b/plugins/cc-cli/src/types.ts index 19663f72b..2bdc87e72 100644 --- a/plugins/cc-cli/src/types.ts +++ b/plugins/cc-cli/src/types.ts @@ -9,11 +9,29 @@ export type Renderers = keyof typeof renderers; export type TeplateFormats = 'cjs' | 'esm' | 'ts'; export type TemplateOptions = { + /** + * which renderer to use for generating the tests + */ renderer?: Renderers; + /** + * files format - default common js + */ format?: TeplateFormats; + /** + * configuration files folder + */ config?: string; + /** + * if specified, will get stories from the bundle instead of directly importing + */ bundle?: string; + /** + * tests output folder - where to create them + */ output?: string; + /** + * describe section label + */ name?: string; }; diff --git a/plugins/cc-cli/templates/document/import/bundle.cjs.js b/plugins/cc-cli/templates/document/import/bundle.cjs.js new file mode 100644 index 000000000..a36950734 --- /dev/null +++ b/plugins/cc-cli/templates/document/import/bundle.cjs.js @@ -0,0 +1,2 @@ +const { loadStore } = require('@component-controls/store'); +const { render: reactRender } = require('@component-controls/render/react'); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/import/bundle.esm.js b/plugins/cc-cli/templates/document/import/bundle.esm.js new file mode 100644 index 000000000..8199e7f0a --- /dev/null +++ b/plugins/cc-cli/templates/document/import/bundle.esm.js @@ -0,0 +1,2 @@ +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/import/bundle.ts.js b/plugins/cc-cli/templates/document/import/bundle.ts.js new file mode 100644 index 000000000..8199e7f0a --- /dev/null +++ b/plugins/cc-cli/templates/document/import/bundle.ts.js @@ -0,0 +1,2 @@ +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/import/imports.cjs.js b/plugins/cc-cli/templates/document/import/imports.cjs.js new file mode 100644 index 000000000..d992b4eef --- /dev/null +++ b/plugins/cc-cli/templates/document/import/imports.cjs.js @@ -0,0 +1,3 @@ +const { loadConfigurations } = require('@component-controls/config'); +const { renderDocument } = require('@component-controls/test-renderers'); +const { render: reactRender } = require('@component-controls/render/react'); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/import/imports.esm.js b/plugins/cc-cli/templates/document/import/imports.esm.js new file mode 100644 index 000000000..964121032 --- /dev/null +++ b/plugins/cc-cli/templates/document/import/imports.esm.js @@ -0,0 +1,3 @@ +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/import/imports.ts.js b/plugins/cc-cli/templates/document/import/imports.ts.js new file mode 100644 index 000000000..964121032 --- /dev/null +++ b/plugins/cc-cli/templates/document/import/imports.ts.js @@ -0,0 +1,3 @@ +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/loop/bundle-enzyme-react-17.js b/plugins/cc-cli/templates/document/loop/bundle-enzyme-react-17.js new file mode 100644 index 000000000..e84bfd63f --- /dev/null +++ b/plugins/cc-cli/templates/document/loop/bundle-enzyme-react-17.js @@ -0,0 +1,16 @@ + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + const rendered = renderFn(story, doc); + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); + }); + } + }); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/loop/bundle-react-test-renderer.js b/plugins/cc-cli/templates/document/loop/bundle-react-test-renderer.js new file mode 100644 index 000000000..052d70c56 --- /dev/null +++ b/plugins/cc-cli/templates/document/loop/bundle-react-test-renderer.js @@ -0,0 +1,27 @@ + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); + }); + } + }); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/loop/bundle-react-testing-library.js b/plugins/cc-cli/templates/document/loop/bundle-react-testing-library.js new file mode 100644 index 000000000..b5495ee28 --- /dev/null +++ b/plugins/cc-cli/templates/document/loop/bundle-react-testing-library.js @@ -0,0 +1,23 @@ + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); + }); + } + }); \ No newline at end of file diff --git a/plugins/cc-cli/templates/document/loop/imports-enzyme-react-17.js b/plugins/cc-cli/templates/document/loop/imports-enzyme-react-17.js new file mode 100644 index 000000000..33d7db05a --- /dev/null +++ b/plugins/cc-cli/templates/document/loop/imports-enzyme-react-17.js @@ -0,0 +1,7 @@ +const renderedExamples = renderDocument(examples, config); +renderedExamples.forEach(({ name, rendered}) => { + it(name, async () => { + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); +}); diff --git a/plugins/cc-cli/templates/document/loop/imports-react-test-renderer.js b/plugins/cc-cli/templates/document/loop/imports-react-test-renderer.js new file mode 100644 index 000000000..e8dcd21a8 --- /dev/null +++ b/plugins/cc-cli/templates/document/loop/imports-react-test-renderer.js @@ -0,0 +1,18 @@ +let renderedExamples {{=it.type}}; +act(() => { + renderedExamples = renderDocument(examples, config); +}); +if (!renderedExamples.length) { + renderErr(); + return; +} +renderedExamples.forEach(({ name, rendered}) => { + it(name, async () => { + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/plugins/cc-cli/templates/document/loop/imports-react-testing-library.js b/plugins/cc-cli/templates/document/loop/imports-react-testing-library.js new file mode 100644 index 000000000..9265d67f9 --- /dev/null +++ b/plugins/cc-cli/templates/document/loop/imports-react-testing-library.js @@ -0,0 +1,15 @@ +let renderedExamples {{=it.type}}; +act(() => { + renderedExamples = renderDocument(examples, config); +}); +if (!renderedExamples) { + renderErr(); + return; +} +renderedExamples.forEach(({ name, rendered}) => { + it(name, async () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + + }); +}); diff --git a/plugins/cc-cli/templates/framework-render/enzyme-react-17.js b/plugins/cc-cli/templates/framework-render/enzyme-react-17.js index d000e2866..dee44b5ff 100644 --- a/plugins/cc-cli/templates/framework-render/enzyme-react-17.js +++ b/plugins/cc-cli/templates/framework-render/enzyme-react-17.js @@ -1,4 +1,11 @@ -let rendered; -{{=it.storeRender}} +{{? it.bundle }} +const rendered = renderFn(story, doc); +{{?? true }} +const rendered = renderExample({ + example, + doc, + config, +}); +{{?}} const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); diff --git a/plugins/cc-cli/templates/framework-render/react-test-renderer.js b/plugins/cc-cli/templates/framework-render/react-test-renderer.js index ccdbce165..d9ede40ec 100644 --- a/plugins/cc-cli/templates/framework-render/react-test-renderer.js +++ b/plugins/cc-cli/templates/framework-render/react-test-renderer.js @@ -1,6 +1,14 @@ let rendered; act(() => { - {{=it.storeRender}} + {{? it.bundle }} + rendered = renderFn(story, doc); + {{?? true }} + rendered = renderExample({ + example, + doc, + config, + }); + {{?}} }) if (!rendered) { renderErr(); diff --git a/plugins/cc-cli/templates/framework-render/react-testing-library.js b/plugins/cc-cli/templates/framework-render/react-testing-library.js index 33c2fc1f2..da23dcf76 100644 --- a/plugins/cc-cli/templates/framework-render/react-testing-library.js +++ b/plugins/cc-cli/templates/framework-render/react-testing-library.js @@ -1,6 +1,14 @@ let rendered; act(() => { - {{=it.storeRender}} + {{? it.bundle }} + rendered = renderFn(story, doc); + {{?? true }} + rendered = renderExample({ + example, + doc, + config, + }); + {{?}} }); if (!rendered) { renderErr(); diff --git a/plugins/cc-cli/templates/store/render/bundle.js b/plugins/cc-cli/templates/store/render/bundle.js index 3dbe82964..a1c95e408 100644 --- a/plugins/cc-cli/templates/store/render/bundle.js +++ b/plugins/cc-cli/templates/store/render/bundle.js @@ -1 +1 @@ - rendered = renderFn(story, doc); \ No newline at end of file +rendered = renderFn(story, doc); \ No newline at end of file diff --git a/plugins/cc-cli/templates/store/render/imports.js b/plugins/cc-cli/templates/store/render/imports.js index 69cf14178..625b744e9 100644 --- a/plugins/cc-cli/templates/store/render/imports.js +++ b/plugins/cc-cli/templates/store/render/imports.js @@ -1,5 +1,5 @@ - rendered = renderExample({ - example, - doc, - config, - }); \ No newline at end of file +rendered = renderExample({ + example, + doc, + config, +}); \ No newline at end of file diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-cjs.test.ts.snap new file mode 100644 index 000000000..7fd7a9f51 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-cjs.test.ts.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`enzyme bundle cjs 1`] = ` +"const path = require('path'); +const MatchMediaMock = require('jest-matchmedia-mock').default; +const { loadStore } = require('@component-controls/store'); +const { render: reactRender } = require('@component-controls/render/react'); +const { mount, configure } = require('enzyme'); +const toJson = require('enzyme-to-json').default; +const Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); + +configure({ adapter: new Adapter() }); + +describe('Components/Header', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + const rendered = renderFn(story, doc); + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-esm.test.ts.snap new file mode 100644 index 000000000..8ac1a4e6d --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-esm.test.ts.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`enzyme bundle esm 1`] = ` +"import * as path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); +import { mount, configure } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; + +configure({ adapter: new Adapter() }); + +describe('Components/Header', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + const rendered = renderFn(story, doc); + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-ts.test.ts.snap new file mode 100644 index 000000000..05cc2dcb8 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-ts.test.ts.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`enzyme bundle ts 1`] = ` +"import path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); +import { mount, configure } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; + +configure({ adapter: new Adapter() }); + +describe('Components/Header', () => { + let matchMedia: MatchMediaMock; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + const rendered = renderFn(story, doc); + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-cjs.test.ts.snap new file mode 100644 index 000000000..58efd8e87 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-enzyme-cjs.test.ts.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`enzyme cjs 1`] = ` +"const path = require('path'); +const MatchMediaMock = require('jest-matchmedia-mock').default; +const { loadConfigurations } = require('@component-controls/config'); +const { renderDocument } = require('@component-controls/test-renderers'); +const { render: reactRender } = require('@component-controls/render/react'); +const { mount, configure } = require('enzyme'); +const toJson = require('enzyme-to-json').default; +const Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); + +configure({ adapter: new Adapter() }); + +const examples = require('./fixtures/VariantButton.docs'); + +describe('VariantButton', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + const renderedExamples = renderDocument(examples, config); + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-esm.test.ts.snap new file mode 100644 index 000000000..d0bbf891a --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-enzyme-esm.test.ts.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`enzyme esm 1`] = ` +"import * as path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; +import { mount, configure } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; + +configure({ adapter: new Adapter() }); + +import * as examples from './fixtures/VariantButton.docs'; + +describe('VariantButton', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + const renderedExamples = renderDocument(examples, config); + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-ts.test.ts.snap new file mode 100644 index 000000000..0bd90e9b3 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-enzyme-ts.test.ts.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`enzyme ts 1`] = ` +"import path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; +import { mount, configure } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; + +configure({ adapter: new Adapter() }); + +import * as examples from './fixtures/VariantButton.docs'; + +describe('VariantButton', () => { + let matchMedia: MatchMediaMock; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + const renderedExamples = renderDocument(examples, config); + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const component = mount(rendered); + expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-cjs.test.ts.snap new file mode 100644 index 000000000..7b3d99b58 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-cjs.test.ts.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtl bundle cjs 1`] = ` +"const path = require('path'); +const MatchMediaMock = require('jest-matchmedia-mock').default; +const { loadStore } = require('@component-controls/store'); +const { render: reactRender } = require('@component-controls/render/react'); +const { render, act } = require('@testing-library/react'); + +const renderErr = () => { + throw new Error('Could not render the story'); +}; + +describe('Components/Header', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-esm.test.ts.snap new file mode 100644 index 000000000..3e7aaef2e --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-esm.test.ts.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtl bundle esm 1`] = ` +"import * as path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); +import { render, act } from '@testing-library/react'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; + +describe('Components/Header', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-ts.test.ts.snap new file mode 100644 index 000000000..94b79c1ca --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtl-bundle-ts.test.ts.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtl bundle ts 1`] = ` +"import path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); +import { render, act } from '@testing-library/react'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; + +describe('Components/Header', () => { + let matchMedia: MatchMediaMock; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-cjs.test.ts.snap new file mode 100644 index 000000000..6c6198975 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtl-cjs.test.ts.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtl cjs 1`] = ` +"const path = require('path'); +const MatchMediaMock = require('jest-matchmedia-mock').default; +const { loadConfigurations } = require('@component-controls/config'); +const { renderDocument } = require('@component-controls/test-renderers'); +const { render: reactRender } = require('@component-controls/render/react'); +const { render, act } = require('@testing-library/react'); + +const renderErr = () => { + throw new Error('Could not render the story'); +}; + +const examples = require('./fixtures/VariantButton.docs'); + +describe('VariantButton', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + let renderedExamples = []; + act(() => { + renderedExamples = renderDocument(examples, config); + }); + if (!renderedExamples) { + renderErr(); + return; + } + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-esm.test.ts.snap new file mode 100644 index 000000000..671ad2908 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtl-esm.test.ts.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtl esm 1`] = ` +"import * as path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; +import { render, act } from '@testing-library/react'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; + +import * as examples from './fixtures/VariantButton.docs'; + +describe('VariantButton', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + let renderedExamples = []; + act(() => { + renderedExamples = renderDocument(examples, config); + }); + if (!renderedExamples) { + renderErr(); + return; + } + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-ts.test.ts.snap new file mode 100644 index 000000000..dab83d58b --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtl-ts.test.ts.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtl ts 1`] = ` +"import path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; +import { render, act } from '@testing-library/react'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; + +import * as examples from './fixtures/VariantButton.docs'; + +describe('VariantButton', () => { + let matchMedia: MatchMediaMock; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + let renderedExamples: ReturnType = []; + act(() => { + renderedExamples = renderDocument(examples, config); + }); + if (!renderedExamples) { + renderErr(); + return; + } + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-cjs.test.ts.snap new file mode 100644 index 000000000..11450f9f9 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-cjs.test.ts.snap @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtr bundle cjs 1`] = ` +"const path = require('path'); +const MatchMediaMock = require('jest-matchmedia-mock').default; +const { loadStore } = require('@component-controls/store'); +const { render: reactRender } = require('@component-controls/render/react'); +const renderer = require('react-test-renderer'); +const act = renderer.act; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; +const componentErr = () => { + throw new Error('Error rendering component with react-test-renderer'); +}; + +describe('Components/Header', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-esm.test.ts.snap new file mode 100644 index 000000000..5b78d1b41 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-esm.test.ts.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtr bundle esm 1`] = ` +"import * as path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); +import renderer, { act } from 'react-test-renderer'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; +const componentErr = () => { + throw new Error('Error rendering component with react-test-renderer'); +}; + +describe('Components/Header', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-ts.test.ts.snap new file mode 100644 index 000000000..122d2cb6a --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtr-bundle-ts.test.ts.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtr bundle ts 1`] = ` +"import path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadStore } from '@component-controls/store'; +const { render: reactRender } = require('@component-controls/render/react'); +import renderer, { act } from 'react-test-renderer'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; +const componentErr = () => { + throw new Error('Error rendering component with react-test-renderer'); +}; + +describe('Components/Header', () => { + let matchMedia: MatchMediaMock; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const store = loadStore( + require(path.resolve(__dirname, './bundle/component-controls.js')), + ); + const renderFn = store.config.renderFn || reactRender; + Object.keys(store.docs).forEach(docId => { + const doc = store.docs[docId]; + if (doc.stories && doc.stories.length) { + const stories = doc.stories; + describe(doc.title, () => { + stories.forEach(storyId => { + const story = store.stories[storyId]; + it(story.name, async () => { + let rendered; + act(() => { + rendered = renderFn(story, doc); + }); + if (!rendered) { + renderErr(); + return; + } + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); + }); + } + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-cjs.test.ts.snap new file mode 100644 index 000000000..e39f6a12e --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtr-cjs.test.ts.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtr cjs 1`] = ` +"const path = require('path'); +const MatchMediaMock = require('jest-matchmedia-mock').default; +const { loadConfigurations } = require('@component-controls/config'); +const { renderDocument } = require('@component-controls/test-renderers'); +const { render: reactRender } = require('@component-controls/render/react'); +const renderer = require('react-test-renderer'); +const act = renderer.act; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; +const componentErr = () => { + throw new Error('Error rendering component with react-test-renderer'); +}; + +const examples = require('./fixtures/VariantButton.docs'); + +describe('VariantButton', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + let renderedExamples = []; + act(() => { + renderedExamples = renderDocument(examples, config); + }); + if (!renderedExamples.length) { + renderErr(); + return; + } + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-esm.test.ts.snap new file mode 100644 index 000000000..0a098a983 --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtr-esm.test.ts.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtr esm 1`] = ` +"import * as path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; +import renderer, { act } from 'react-test-renderer'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; +const componentErr = () => { + throw new Error('Error rendering component with react-test-renderer'); +}; + +import * as examples from './fixtures/VariantButton.docs'; + +describe('VariantButton', () => { + let matchMedia; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + let renderedExamples = []; + act(() => { + renderedExamples = renderDocument(examples, config); + }); + if (!renderedExamples.length) { + renderErr(); + return; + } + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-ts.test.ts.snap new file mode 100644 index 000000000..1101bb18e --- /dev/null +++ b/plugins/cc-cli/test/__snapshots__/document-rtr-ts.test.ts.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rtr ts 1`] = ` +"import path from 'path'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { loadConfigurations } from '@component-controls/config'; +import { renderDocument } from '@component-controls/test-renderers'; +import { render as reactRender } from '@component-controls/render/react'; +import renderer, { act } from 'react-test-renderer'; + +const renderErr = () => { + throw new Error('Could not render the story'); +}; +const componentErr = () => { + throw new Error('Error rendering component with react-test-renderer'); +}; + +import * as examples from './fixtures/VariantButton.docs'; + +describe('VariantButton', () => { + let matchMedia: MatchMediaMock; + beforeAll(() => { + jest.mock('rc-util/lib/Portal'); + matchMedia = new MatchMediaMock(); + }); + afterEach(() => { + matchMedia.clear(); + }); + const configPath = path.resolve(__dirname, '.config'); + const config = loadConfigurations(configPath); + if (!config.renderFn) { + config.renderFn = reactRender; + } + let renderedExamples: ReturnType = []; + act(() => { + renderedExamples = renderDocument(examples, config); + }); + if (!renderedExamples.length) { + renderErr(); + return; + } + renderedExamples.forEach(({ name, rendered }) => { + it(name, async () => { + const component = renderer.create(rendered); + if (!component) { + componentErr(); + return; + } + expect(component.toJSON()).toMatchSnapshot(); + }); + }); +}); +" +`; diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-cjs.test.ts.snap index eeb44a2c4..d1c0ed836 100644 --- a/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-cjs.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-cjs.test.ts.snap @@ -32,8 +32,8 @@ describe('component-controls generated', () => { stories.forEach(storyId => { const story = store.stories[storyId]; it(story.name, async () => { - let rendered; - rendered = renderFn(story, doc); + const rendered = renderFn(story, doc); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-esm.test.ts.snap index 74da8b529..0da5e010c 100644 --- a/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-esm.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-esm.test.ts.snap @@ -32,8 +32,8 @@ describe('component-controls generated', () => { stories.forEach(storyId => { const story = store.stories[storyId]; it(story.name, async () => { - let rendered; - rendered = renderFn(story, doc); + const rendered = renderFn(story, doc); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-ts.test.ts.snap index 96f793cbb..0abff5474 100644 --- a/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-ts.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-ts.test.ts.snap @@ -32,8 +32,8 @@ describe('component-controls generated', () => { stories.forEach(storyId => { const story = store.stories[storyId]; it(story.name, async () => { - let rendered; - rendered = renderFn(story, doc); + const rendered = renderFn(story, doc); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-cjs.test.ts.snap index 4858475f0..c62715f31 100644 --- a/plugins/cc-cli/test/__snapshots__/store-enzyme-cjs.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/store-enzyme-cjs.test.ts.snap @@ -42,12 +42,12 @@ describe('component-controls generated', () => { describe(doc.title, () => { examples.forEach(example => { it(example.name, async () => { - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-esm.test.ts.snap index d63b33d53..47f62276b 100644 --- a/plugins/cc-cli/test/__snapshots__/store-enzyme-esm.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/store-enzyme-esm.test.ts.snap @@ -42,12 +42,12 @@ describe('component-controls generated', () => { describe(doc.title, () => { examples.forEach(example => { it(example.name, async () => { - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap index 0c4393c12..9b6e76433 100644 --- a/plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap @@ -42,12 +42,12 @@ describe('component-controls generated', () => { describe(doc.title, () => { examples.forEach(example => { it(example.name, async () => { - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-cjs.test.ts.snap index c85a1b620..13d8a5952 100644 --- a/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-cjs.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-cjs.test.ts.snap @@ -29,8 +29,8 @@ describe('Components/Header', () => { test('Overview', () => { const story = store.stories['components-header--overview']; - let rendered; - rendered = renderFn(story, doc); + const rendered = renderFn(story, doc); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-esm.test.ts.snap index ebf3118ec..02ec7441a 100644 --- a/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-esm.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-esm.test.ts.snap @@ -29,8 +29,8 @@ describe('Components/Header', () => { test('Overview', () => { const story = store.stories['components-header--overview']; - let rendered; - rendered = renderFn(story, doc); + const rendered = renderFn(story, doc); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-ts.test.ts.snap index db30cd656..3d7cc2923 100644 --- a/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-ts.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-enzyme-bundle-ts.test.ts.snap @@ -29,8 +29,8 @@ describe('Components/Header', () => { test('Overview', () => { const story = store.stories['components-header--overview']; - let rendered; - rendered = renderFn(story, doc); + const rendered = renderFn(story, doc); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-enzyme-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-enzyme-cjs.test.ts.snap index b5f915abe..5e8d79355 100644 --- a/plugins/cc-cli/test/__snapshots__/story-enzyme-cjs.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-enzyme-cjs.test.ts.snap @@ -12,7 +12,8 @@ const Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); configure({ adapter: new Adapter() }); -import doc, { +const doc = require('./fixtures/VariantButton.docs'); +const { overview, primary, accent, @@ -20,7 +21,7 @@ import doc, { success, error, warning, -} from './fixtures/VariantButton.docs'; +} = require('./fixtures/VariantButton.docs'); describe('VariantButton', () => { let matchMedia; @@ -40,12 +41,12 @@ describe('VariantButton', () => { test('overview', () => { const example = overview; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -53,12 +54,12 @@ describe('VariantButton', () => { test('primary', () => { const example = primary; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -66,12 +67,12 @@ describe('VariantButton', () => { test('accent', () => { const example = accent; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -79,12 +80,12 @@ describe('VariantButton', () => { test('disabled', () => { const example = disabled; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -92,12 +93,12 @@ describe('VariantButton', () => { test('success', () => { const example = success; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -105,12 +106,12 @@ describe('VariantButton', () => { test('error', () => { const example = error; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -118,12 +119,12 @@ describe('VariantButton', () => { test('warning', () => { const example = warning; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-enzyme-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-enzyme-esm.test.ts.snap index 28747f8ac..35bf32db1 100644 --- a/plugins/cc-cli/test/__snapshots__/story-enzyme-esm.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-enzyme-esm.test.ts.snap @@ -40,12 +40,12 @@ describe('VariantButton', () => { test('overview', () => { const example = overview; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -53,12 +53,12 @@ describe('VariantButton', () => { test('primary', () => { const example = primary; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -66,12 +66,12 @@ describe('VariantButton', () => { test('accent', () => { const example = accent; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -79,12 +79,12 @@ describe('VariantButton', () => { test('disabled', () => { const example = disabled; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -92,12 +92,12 @@ describe('VariantButton', () => { test('success', () => { const example = success; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -105,12 +105,12 @@ describe('VariantButton', () => { test('error', () => { const example = error; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -118,12 +118,12 @@ describe('VariantButton', () => { test('warning', () => { const example = warning; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-enzyme-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-enzyme-ts.test.ts.snap index 77cba4597..76f8b82da 100644 --- a/plugins/cc-cli/test/__snapshots__/story-enzyme-ts.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-enzyme-ts.test.ts.snap @@ -40,12 +40,12 @@ describe('VariantButton', () => { test('overview', () => { const example = overview; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -53,12 +53,12 @@ describe('VariantButton', () => { test('primary', () => { const example = primary; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -66,12 +66,12 @@ describe('VariantButton', () => { test('accent', () => { const example = accent; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -79,12 +79,12 @@ describe('VariantButton', () => { test('disabled', () => { const example = disabled; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -92,12 +92,12 @@ describe('VariantButton', () => { test('success', () => { const example = success; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -105,12 +105,12 @@ describe('VariantButton', () => { test('error', () => { const example = error; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); @@ -118,12 +118,12 @@ describe('VariantButton', () => { test('warning', () => { const example = warning; - let rendered; - rendered = renderExample({ + const rendered = renderExample({ example, doc, config, }); + const component = mount(rendered); expect(toJson(component, { mode: 'deep' })).toMatchSnapshot(); }); diff --git a/plugins/cc-cli/test/__snapshots__/story-rtl-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-rtl-cjs.test.ts.snap index 467192e23..6760dc863 100644 --- a/plugins/cc-cli/test/__snapshots__/story-rtl-cjs.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-rtl-cjs.test.ts.snap @@ -12,7 +12,8 @@ const renderErr = () => { throw new Error('Could not render the story'); }; -import doc, { +const doc = require('./fixtures/VariantButton.docs'); +const { overview, primary, accent, @@ -20,7 +21,7 @@ import doc, { success, error, warning, -} from './fixtures/VariantButton.docs'; +} = require('./fixtures/VariantButton.docs'); describe('VariantButton', () => { let matchMedia; diff --git a/plugins/cc-cli/test/__snapshots__/story-rtr-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-rtr-cjs.test.ts.snap index 2ee83eee7..83559cf53 100644 --- a/plugins/cc-cli/test/__snapshots__/story-rtr-cjs.test.ts.snap +++ b/plugins/cc-cli/test/__snapshots__/story-rtr-cjs.test.ts.snap @@ -16,7 +16,8 @@ const componentErr = () => { throw new Error('Error rendering component with react-test-renderer'); }; -import doc, { +const doc = require('./fixtures/VariantButton.docs'); +const { overview, primary, accent, @@ -24,7 +25,7 @@ import doc, { success, error, warning, -} from './fixtures/VariantButton.docs'; +} = require('./fixtures/VariantButton.docs'); describe('VariantButton', () => { let matchMedia; diff --git a/plugins/cc-cli/test/document-enzyme-bundle-cjs.test.ts b/plugins/cc-cli/test/document-enzyme-bundle-cjs.test.ts new file mode 100644 index 000000000..0bf4713d9 --- /dev/null +++ b/plugins/cc-cli/test/document-enzyme-bundle-cjs.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'cjs', + renderer: 'enzyme', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-enzyme-bundle-esm.test.ts b/plugins/cc-cli/test/document-enzyme-bundle-esm.test.ts new file mode 100644 index 000000000..1225cd5bb --- /dev/null +++ b/plugins/cc-cli/test/document-enzyme-bundle-esm.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'esm', + renderer: 'enzyme', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-enzyme-bundle-ts.test.ts b/plugins/cc-cli/test/document-enzyme-bundle-ts.test.ts new file mode 100644 index 000000000..ac06dfa42 --- /dev/null +++ b/plugins/cc-cli/test/document-enzyme-bundle-ts.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'ts', + renderer: 'enzyme', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-enzyme-cjs.test.ts b/plugins/cc-cli/test/document-enzyme-cjs.test.ts new file mode 100644 index 000000000..cc53df749 --- /dev/null +++ b/plugins/cc-cli/test/document-enzyme-cjs.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'cjs', + renderer: 'enzyme', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-enzyme-esm.test.ts b/plugins/cc-cli/test/document-enzyme-esm.test.ts new file mode 100644 index 000000000..d273e6bb2 --- /dev/null +++ b/plugins/cc-cli/test/document-enzyme-esm.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'esm', + renderer: 'enzyme', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-enzyme-ts.test.ts b/plugins/cc-cli/test/document-enzyme-ts.test.ts new file mode 100644 index 000000000..da0faf178 --- /dev/null +++ b/plugins/cc-cli/test/document-enzyme-ts.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'ts', + renderer: 'enzyme', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-rtl-bundle-cjs.test.ts b/plugins/cc-cli/test/document-rtl-bundle-cjs.test.ts new file mode 100644 index 000000000..a8bdd9dbf --- /dev/null +++ b/plugins/cc-cli/test/document-rtl-bundle-cjs.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'cjs', + renderer: 'rtl', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-rtl-bundle-esm.test.ts b/plugins/cc-cli/test/document-rtl-bundle-esm.test.ts new file mode 100644 index 000000000..d5a172322 --- /dev/null +++ b/plugins/cc-cli/test/document-rtl-bundle-esm.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'esm', + renderer: 'rtl', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-rtl-bundle-ts.test.ts b/plugins/cc-cli/test/document-rtl-bundle-ts.test.ts new file mode 100644 index 000000000..6c188ace3 --- /dev/null +++ b/plugins/cc-cli/test/document-rtl-bundle-ts.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'ts', + renderer: 'rtl', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-rtl-cjs.test.ts b/plugins/cc-cli/test/document-rtl-cjs.test.ts new file mode 100644 index 000000000..7548904a8 --- /dev/null +++ b/plugins/cc-cli/test/document-rtl-cjs.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'cjs', + renderer: 'rtl', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-rtl-esm.test.ts b/plugins/cc-cli/test/document-rtl-esm.test.ts new file mode 100644 index 000000000..c8b88d50f --- /dev/null +++ b/plugins/cc-cli/test/document-rtl-esm.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'esm', + renderer: 'rtl', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-rtl-ts.test.ts b/plugins/cc-cli/test/document-rtl-ts.test.ts new file mode 100644 index 000000000..ef0813eb3 --- /dev/null +++ b/plugins/cc-cli/test/document-rtl-ts.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'ts', + renderer: 'rtl', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-rtr-bundle-cjs.test.ts b/plugins/cc-cli/test/document-rtr-bundle-cjs.test.ts new file mode 100644 index 000000000..3af1400f8 --- /dev/null +++ b/plugins/cc-cli/test/document-rtr-bundle-cjs.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'cjs', + renderer: 'rtr', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-rtr-bundle-esm.test.ts b/plugins/cc-cli/test/document-rtr-bundle-esm.test.ts new file mode 100644 index 000000000..f2cc2f9c5 --- /dev/null +++ b/plugins/cc-cli/test/document-rtr-bundle-esm.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'esm', + renderer: 'rtr', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-rtr-bundle-ts.test.ts b/plugins/cc-cli/test/document-rtr-bundle-ts.test.ts new file mode 100644 index 000000000..be3de3df0 --- /dev/null +++ b/plugins/cc-cli/test/document-rtr-bundle-ts.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'ts', + renderer: 'rtr', + bundle: path.resolve(__dirname, 'bundle/component-controls.js'), +}); diff --git a/plugins/cc-cli/test/document-rtr-cjs.test.ts b/plugins/cc-cli/test/document-rtr-cjs.test.ts new file mode 100644 index 000000000..66455b4a8 --- /dev/null +++ b/plugins/cc-cli/test/document-rtr-cjs.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'cjs', + renderer: 'rtr', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-rtr-esm.test.ts b/plugins/cc-cli/test/document-rtr-esm.test.ts new file mode 100644 index 000000000..b6fd8f6f3 --- /dev/null +++ b/plugins/cc-cli/test/document-rtr-esm.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'esm', + renderer: 'rtr', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/document-rtr-ts.test.ts b/plugins/cc-cli/test/document-rtr-ts.test.ts new file mode 100644 index 000000000..c1cb1ff58 --- /dev/null +++ b/plugins/cc-cli/test/document-rtr-ts.test.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { runTests } from './run-document-tests'; + +runTests({ + format: 'ts', + renderer: 'rtr', + config: path.resolve(__dirname, '.config'), +}); diff --git a/plugins/cc-cli/test/run-document-tests.ts b/plugins/cc-cli/test/run-document-tests.ts new file mode 100644 index 000000000..b04cd608b --- /dev/null +++ b/plugins/cc-cli/test/run-document-tests.ts @@ -0,0 +1,58 @@ +import fs from 'fs'; +import path from 'path'; +import { runCLI } from 'jest'; +import { Config } from '@jest/types'; +import { createDocumentTemplate } from '../src/document-template'; +import { StoryTemplateOptions } from '../src/types'; + +export const runTests = async ( + props: Omit, +): Promise => { + const { renderer, format, config, bundle, name } = props; + const extension = format === 'ts' ? 'ts' : 'js'; + const testName = `story_test_${renderer}_${format}${bundle ? '_bundle' : ''}`; + const testFileName = path.resolve(__dirname, `${testName}.test.${extension}`); + const snapshotFileName = path.resolve( + __dirname, + `__snapshots__/${testName}.test.${extension}.snap`, + ); + it(`${renderer} ${bundle ? 'bundle' : ''} ${format}`, async () => { + let renderedFile = ''; + renderedFile = await createDocumentTemplate({ + storyPath: path.resolve(__dirname, 'fixtures/VariantButton.docs.tsx'), + format, + name: bundle ? 'Components/Header' : undefined, + renderer, + bundle, + config, + output: __dirname, + }); + + fs.writeFileSync(testFileName, renderedFile); + if (fs.existsSync(snapshotFileName)) { + fs.unlinkSync(snapshotFileName); + } + try { + expect(renderedFile).toMatchSnapshot(); + if (name) { + await runCLI( + { + testRegex: testName, + testPathIgnorePatterns: ['/node_modules/', '/__snapshots__/'], + silent: true, + verbose: false, + watchman: false, + } as Config.Argv, + [__dirname], + ); + } + } finally { + if (fs.existsSync(testFileName)) { + fs.unlinkSync(testFileName); + } + if (fs.existsSync(snapshotFileName)) { + fs.unlinkSync(snapshotFileName); + } + } + }, 1000000); +};