Merge pull request #4 from stoplightio/chore/SL-1223/tests

[SL-1223] tests

Author: P0lip

__mocks__/react.ts

@@ -0,0 +1,8 @@
+// https://github.com/airbnb/enzyme/issues/1875#issuecomment-451177239
+const r = require.requireActual('react');
+
+module.exports = {
+  ...r,
+  memo: jest.fn((x: Function) => x),
+  useCallback: jest.fn((fn: Function) => fn),
+};

package.json

@@ -49,11 +49,13 @@
     "@stoplight/storybook-config": "1.x.x",
     "@stoplight/types": "3.1.x",
     "@stoplight/ui-kit": "1.27.x",
+    "@types/enzyme": "3.1.x",
     "@types/react": "16.x.x",
     "@types/react-dom": "16.x.x",
     "enzyme": "3.x.x",
     "enzyme-adapter-react-16": "1.x.x",
     "enzyme-to-json": "3.x.x",
+    "jest-enzyme": "7.0.x",
     "react": "16.7.0-alpha.2",
     "react-dom": "16.7.0-alpha.2",
     "typescript": "3.2.2"

setupTests.ts

@@ -2,3 +2,5 @@ const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 
 Enzyme.configure({ adapter: new Adapter() });
+
+jest.mock('react');

src/__mocks__/theme.ts

@@ -0,0 +1,22 @@
+export const useTheme = () => ({
+  canvas: {
+    bg: '#111',
+    fg: '#fff',
+    error: 'red',
+    muted: 'rgba(255, 255, 255, 0.4)'
+  },
+
+  divider: {
+    bg: '#bababa',
+  },
+
+  row: {
+    hoverBg: '#999',
+    hoverFg: '#222',
+    evenBg: '#333',
+  },
+});
+
+export const ThemeZone = jest.fn(({ children }) => children);
+// @ts-ignore
+ThemeZone.displayName = 'ThemeZone';

src/__tests__/JsonSchemaViewer.spec.tsx

@@ -0,0 +1,48 @@
+/* @jsx jsx */
+import { jsx } from '@emotion/core';
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+import { MutedText } from '../common/MutedText';
+import { JsonSchemaViewer } from '../JsonSchemaViewer';
+import { SchemaView } from '../SchemaView';
+import { isSchemaViewerEmpty } from '../util/isSchemaViewerEmpty';
+
+jest.mock('../theme');
+jest.mock('../util/isSchemaViewerEmpty');
+
+const schema = {
+  properties: {
+    data: {
+      items: {
+        $ref: '#/definitions/Gif',
+      },
+      type: 'array',
+    },
+    meta: {
+      $ref: '#/definitions/Meta',
+    },
+    pagination: {
+      $ref: '#/definitions/Pagination',
+    },
+  },
+};
+
+describe('JSON Schema Viewer component', () => {
+  test('should render empty message if schema is empty', () => {
+    // @ts-ignore storybook has some issues with (isSchemaViewer as jest.Mock)
+    isSchemaViewerEmpty.mockReturnValue(true);
+    const wrapper = shallow(<JsonSchemaViewer schemas={{}} schema={{}} />);
+    expect(isSchemaViewerEmpty).toHaveBeenCalledWith({});
+    expect(wrapper.find(MutedText)).toExist();
+    expect(wrapper.find(SchemaView)).not.toExist();
+  });
+
+  test('should render SchemaView if schema is provided', () => {
+    // @ts-ignore storybook has some issues with (isSchemaViewer as jest.Mock)
+    isSchemaViewerEmpty.mockReturnValue(false);
+    const wrapper = shallow(<JsonSchemaViewer schemas={{}} schema={schema} />);
+    expect(isSchemaViewerEmpty).toHaveBeenCalledWith(schema);
+    expect(wrapper.find(MutedText)).not.toExist();
+    expect(wrapper.find(SchemaView)).toExist();
+  });
+});

src/__tests__/SchemaView.spec.tsx

@@ -0,0 +1,63 @@
+/* @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Button } from '@stoplight/ui-kit';
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+import * as React from 'react';
+import { MutedText } from '../common/MutedText';
+import { SchemaView } from '../SchemaView';
+
+jest.mock('../theme');
+
+const schema = {
+  properties: {
+    data: {
+      items: {
+        $ref: '#/definitions/Gif',
+      },
+      type: 'array',
+    },
+    meta: {
+      $ref: '#/definitions/Meta',
+    },
+    pagination: {
+      $ref: '#/definitions/Pagination',
+    },
+  },
+};
+
+describe('SchemaView', () => {
+  let useStateSpy: jest.SpyInstance;
+  let setStateActionSpy: jest.Mock;
+
+  beforeAll(() => {
+    setStateActionSpy = jest.fn();
+    useStateSpy = jest
+      .spyOn(React, 'useState')
+      .mockImplementation((initialValue: any) => [initialValue, setStateActionSpy]);
+  });
+
+  afterAll(() => {
+    useStateSpy.mockRestore();
+  });
+
+  test('should render empty text if schema has no properties', () => {
+    const emptyText = 'abc';
+    const wrapper = shallow(<SchemaView emptyText={emptyText} schema={{}} schemas={{}} />);
+
+    expect(wrapper).toContainReact(<MutedText>{emptyText}</MutedText>);
+  });
+
+  test('should limit display items to limitPropertyCount when limitPropertyCount > 0', () => {
+    const wrapper = shallow(<SchemaView emptyText="" schema={schema} schemas={{}} limitPropertyCount={2} />);
+
+    expect(wrapper.children()).toHaveLength(3);
+  });
+
+  test('should toggle showExtra on btn click', () => {
+    const wrapper = shallow(<SchemaView emptyText="" schema={schema} schemas={{}} limitPropertyCount={2} />);
+
+    wrapper.find(Button).simulate('click');
+    expect(setStateActionSpy).toHaveBeenLastCalledWith(true);
+  });
+});

src/renderers/__fixtures__/all-of.json

@@ -0,0 +1,15 @@
+{
+  "allOf": [
+    {
+      "properties": {
+        "id": {
+          "description": "Group ID",
+          "type": "string"
+        }
+      }
+    },
+    {
+      "$ref": "#/definitions/Group"
+    }
+  ]
+}

src/renderers/__fixtures__/nested-properties.json

@@ -0,0 +1,21 @@
+{
+  "properties": {
+    "members": {
+      "description": "List of Group members",
+      "items": {
+        "properties": {
+          "email": {
+            "description": "User email. If ID given, email is ignored.",
+            "type": "string"
+          },
+          "id": {
+            "description": "User ID.",
+            "type": "string"
+          }
+        }
+      },
+      "maximum": 30,
+      "type": "array"
+    }
+  }
+}

src/renderers/__fixtures__/properties.json

@@ -0,0 +1,16 @@
+{
+  "properties": {
+    "id": {
+      "description": "Group ID",
+      "type": "string"
+    },
+    "name": {
+      "description": "Group name",
+      "type": "string"
+    },
+    "total_members": {
+      "description": "Group member count",
+      "type": "integer"
+    }
+  }
+}