test: upgrade ui tests to story based

plugins/addon-catalog/package.json

@@ -21,7 +21,7 @@
     "fix": "yarn lint --fix",
     "lint": "yarn eslint . --ext mdx,ts,tsx",
     "prepare": "yarn build",
-    "test:create": "cc-cli -c ./.config -o tests -t stories.test.ts -f ts",
+    "test:create": "cc-cli -g story -c ./.config -w",
     "test": "yarn jest"
   },
   "homepage": "https://github.com/ccontrols/component-controls",
@@ -61,7 +61,7 @@
   "jest": {
     "preset": "ts-jest",
     "roots": [
-      "./tests"
+      "./src"
     ]
   }
 }

plugins/addon-catalog/src/stories/Catalog.test.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { loadConfigurations } from '@component-controls/config';
+import { renderExample } 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 doc, { overview } from './Catalog.stories';
+
+describe('Catalog', () => {
+  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;
+  }
+
+  test('overview', () => {
+    const example = overview;
+
+    let rendered;
+    act(() => {
+      rendered = renderExample({
+        example,
+        doc,
+        config,
+      });
+    });
+    if (!rendered) {
+      renderErr();
+      return;
+    }
+    const { asFragment } = render(rendered);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

plugins/addon-catalog/src/stories/ComponentCard.test.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { loadConfigurations } from '@component-controls/config';
+import { renderExample } 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 doc, { overview } from './ComponentCard.stories';
+
+describe('ComponentCard', () => {
+  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;
+  }
+
+  test('overview', () => {
+    const example = overview;
+
+    let rendered;
+    act(() => {
+      rendered = renderExample({
+        example,
+        doc,
+        config,
+      });
+    });
+    if (!rendered) {
+      renderErr();
+      return;
+    }
+    const { asFragment } = render(rendered);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

plugins/addon-catalog/src/stories/ComponentFilter.test.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { loadConfigurations } from '@component-controls/config';
+import { renderExample } 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 doc, { overview } from './ComponentFilter.stories';
+
+describe('ComponentFilter', () => {
+  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;
+  }
+
+  test('overview', () => {
+    const example = overview;
+
+    let rendered;
+    act(() => {
+      rendered = renderExample({
+        example,
+        doc,
+        config,
+      });
+    });
+    if (!rendered) {
+      renderErr();
+      return;
+    }
+    const { asFragment } = render(rendered);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

plugins/addon-catalog/src/stories/ComponentList.test.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { loadConfigurations } from '@component-controls/config';
+import { renderExample } 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 doc, { overview } from './ComponentList.stories';
+
+describe('ComponentList', () => {
+  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;
+  }
+
+  test('overview', () => {
+    const example = overview;
+
+    let rendered;
+    act(() => {
+      rendered = renderExample({
+        example,
+        doc,
+        config,
+      });
+    });
+    if (!rendered) {
+      renderErr();
+      return;
+    }
+    const { asFragment } = render(rendered);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

plugins/addon-catalog/src/stories/ComponentsCatalog.test.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { loadConfigurations } from '@component-controls/config';
+import { renderExample } 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 doc, { overview } from './ComponentsCatalog.stories';
+
+describe('ComponentsCatalog', () => {
+  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;
+  }
+
+  test('overview', () => {
+    const example = overview;
+
+    let rendered;
+    act(() => {
+      rendered = renderExample({
+        example,
+        doc,
+        config,
+      });
+    });
+    if (!rendered) {
+      renderErr();
+      return;
+    }
+    const { asFragment } = render(rendered);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});