tests: add JsonViewer basic unit tests

src/components/JsonViewer/index.tsx

@@ -0,0 +1 @@
+export * from './JsonViewer';

src/components/__tests__/JsonViewer.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+
+import { JsonViewer } from '../';
+import { withTheme } from '../testProviders';
+
+import { ClipboardService } from '../../services/ClipboardService';
+
+const origCopySelected = ClipboardService.copySelected;
+
+describe('Components', () => {
+ describe('JsonViewer', () => {
+ let component: ReactWrapper;
+ const data = { a: 1, b: { c: 'hello' } };
+ beforeEach(() => {
+ component = mount(withTheme(<JsonViewer data={data} />));
+ ClipboardService.copySelected = origCopySelected;
+ });
+
+ test('should render inner HTML', () => {
+ expect(component.html()).toContain('class="redoc-json"');
+ });
+
+ test('should collapse/uncollapse', () => {
+ expect(component.html()).not.toContain('class="hoverable"'); // all are collapesed by default
+ const expandAll = component.find('div > span[children=" Expand all "]');
+ expandAll.simulate('click');
+ expect(component.html()).toContain('class="hoverable"'); // all are collapesed
+
+ const collapseAll = component.find('div > span[children=" Collapse all "]');
+ collapseAll.simulate('click');
+ expect(component.html()).not.toContain('class="hoverable"'); // all are collapesed
+ });
+
+ test('should collapse/uncollapse', () => {
+ ClipboardService.copySelected = jest.fn();
+
+ const copy = component.find('span[onClick]').first();
+ copy.simulate('click');
+
+ expect(ClipboardService.copySelected as jest.Mock).toHaveBeenCalled();
+ });
+ });
+});

src/components/index.ts

@@ -6,6 +6,7 @@ export * from './SearchBox/SearchBox';
 export * from './Operation/Operation';
 export * from './Loading/Loading';
 export * from './RedocStandalone';
+export * from './JsonViewer';
 
 export * from './ErrorBoundary';
 export * from './StoreProvider';

src/components/testProviders.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
+import defaultTheme from '../theme';
+
+export default class TestThemeProvider extends React.Component {
+ render() {
+ return <ThemeProvider theme={defaultTheme}>{this.props.children}</ThemeProvider>;
+ }
+}
+
+export function withTheme(children) {
+ return <TestThemeProvider>{children}</TestThemeProvider>;
+}