Merge pull request #3 from chenz24/feat/test-utils

feat: Add tests utils

packages/tests/.npmignore

@@ -0,0 +1,2 @@
+src/
+tsconfig.*

packages/tests/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@kubed/tests",
+  "private": true,
+  "version": "0.0.1",
+  "description": "Testing utilities for Kubed components",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "browser": "lib/index.umd.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "enzyme": ">=3.11.0",
+    "jest-axe": ">=4.1.0",
+    "react": ">=16.8.0"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

packages/tests/src/checkAccessibility.tsx

@@ -0,0 +1,24 @@
+import { ReactWrapper } from 'enzyme';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+const config = {
+  rules: {
+    region: {
+      enabled: false,
+    },
+  },
+};
+
+export function checkAccessibility(elements: ReactWrapper[]) {
+  expect.extend(toHaveNoViolations);
+
+  it('has no accessibility violations', async () => {
+    // it does not work any other way
+    /* eslint-disable no-restricted-syntax, no-await-in-loop */
+    for (const element of elements) {
+      const result = await axe(element.getDOMNode(), config);
+      expect(result).toHaveNoViolations();
+    }
+    /* eslint-enable no-restricted-syntax, no-await-in-loop */
+  }, 30000);
+}

packages/tests/src/index.ts

@@ -0,0 +1,7 @@
+export { checkAccessibility } from './checkAccessibility';
+export { itRendersChildren } from './itRendersChildren';
+export { itSupportsClassName } from './itSupportsClassName';
+export { itSupportsOthers } from './itSupportsOthers';
+export { itSupportsRef } from './itSupportsRef';
+export { itSupportsStyle } from './itSupportsStyle';
+export { mockResizeObserver } from './mock-resize-observer';

packages/tests/src/itRendersChildren.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+export function itRendersChildren(
+  Component: React.ElementType,
+  requiredProps: Record<string, any>
+) {
+  it('renders children', () => {
+    const element = shallow(
+      <Component {...requiredProps}>
+        <span className="test-children">test-children</span>
+      </Component>
+    );
+    expect(element.render().find('.test-children')).toHaveLength(1);
+  });
+}

packages/tests/src/itSupportsClassName.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+export function itSupportsClassName(
+  Component: React.ElementType,
+  requiredProps: Record<string, any>
+) {
+  it('accepts className from props', () => {
+    const element = shallow(<Component {...requiredProps} className="test-class-name" />);
+    expect(element.render().hasClass('test-class-name')).toBe(true);
+  });
+}

packages/tests/src/itSupportsOthers.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+export function itSupportsOthers(Component: React.ElementType, requiredProps: Record<string, any>) {
+  it('supports ...others props', () => {
+    const element = shallow(<Component {...requiredProps} data-other-attribute="test" />);
+    expect(element.render().attr('data-other-attribute')).toBe('test');
+  });
+}

packages/tests/src/itSupportsRef.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+const waitForComponentToPaint = async (wrapper: any) => {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve));
+    wrapper.update();
+  });
+};
+
+export function itSupportsRef(
+  Component: React.ElementType,
+  requiredProps: Record<string, any>,
+  refType: any,
+  refProp: string = 'ref'
+) {
+  it('supports ref', async () => {
+    const ref = React.createRef<typeof refType>();
+    const element = mount(<Component {...requiredProps} {...{ [refProp]: ref }} />);
+    await waitForComponentToPaint(element);
+    expect(ref.current instanceof refType).toBe(true);
+  });
+}

packages/tests/src/itSupportsStyle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+export function itSupportsStyle(Component: React.ElementType, requiredProps: Record<string, any>) {
+  it('accepts style property', () => {
+    const element = shallow(
+      <Component {...requiredProps} style={{ border: '1px solid red', lineHeight: 1 }} />
+    ).render();
+    expect(element.css('border')).toBe('1px solid red');
+    expect(element.css('line-height')).toBe('1');
+  });
+}

packages/tests/src/mock-resize-observer.ts

@@ -0,0 +1,11 @@
+// Add ResizeObserver to window object
+// should be called in each file which uses resize observer
+export function mockResizeObserver() {
+  class ResizeObserver {
+    observe() {}
+    unobserve() {}
+  }
+
+  // @ts-ignore
+  window.ResizeObserver = ResizeObserver;
+}

packages/tests/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": ".",
+    "outDir": "lib",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "lib",
+    "composite": true
+  }
+}