Have results show between tabs

packages/api-explorer-ui/__tests__/CodeSampleResponseTabs.test.jsx

@@ -0,0 +1,179 @@
+const React = require('react');
+const { shallow } = require('enzyme');
+// const extensions = require('../../readme-oas-extensions');
+const petstore = require('./fixtures/petstore/oas');
+
+const CodeSampleResponseTabs = require('../src/CodeSampleResponseTabs');
+const Oas = require('../src/lib/Oas');
+
+const { Operation } = Oas;
+const oas = new Oas(petstore);
+const props = {
+  result: {
+    init: true,
+    isBinary: false,
+    method: 'POST',
+    requestHeaders: 'Authorization : Bearer api-key',
+    responseHeaders: 'content-disposition,application/json',
+    statusCode: [200, 'OK', 'success'],
+    responseBody: {
+      id: 9205436248879918000,
+      category: { id: 0 },
+      name: '1',
+      photoUrls: ['1'],
+      tags: [],
+    },
+    url: 'http://petstore.swagger.io/v2/pet',
+  },
+  operation: new Operation({}, '/pet', 'post'),
+  styleClass: 'hub-reference-right hub-reference-results tabber-parent on',
+};
+
+describe('setTab', () => {
+  test('setTab should change state of selectedTab', () => {
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props} oas={oas} />);
+
+    expect(codeSampleResponseTabs.state('selectedTab')).toBe('result');
+
+    codeSampleResponseTabs.instance().setTab('metadata');
+
+    expect(codeSampleResponseTabs.state('selectedTab')).toBe('metadata');
+
+    codeSampleResponseTabs.instance().setTab('result');
+
+    expect(codeSampleResponseTabs.state('selectedTab')).toBe('result');
+  });
+});
+
+describe('no result', () => {
+  test('empty span should render', () => {
+    const noResult = {
+      result: null,
+      operation: new Operation({}, '/pet', 'post'),
+      styleClass: 'hub-reference-right hub-reference-results tabber-parent on',
+    };
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...noResult} oas={oas} />);
+
+    expect(codeSampleResponseTabs.find('span').length).toBe(1);
+  });
+});
+
+describe('tabs', () => {
+  test('should display tabs if there is a result', () => {
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props} oas={oas} />);
+
+    expect(codeSampleResponseTabs.find('ul').length).toBe(1);
+  });
+
+  test('should switch tabs', () => {
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props} oas={oas} />);
+
+    const resultTab = codeSampleResponseTabs.find('a').first();
+    const metadataTab = codeSampleResponseTabs.find('a').last();
+
+    expect(codeSampleResponseTabs.state('selectedTab')).toBe('result');
+    expect(
+      codeSampleResponseTabs
+        .find('a')
+        .first()
+        .hasClass('hub-reference-results-header-item tabber-tab selected'),
+    ).toEqual(true);
+
+    metadataTab.simulate('click', { preventDefault() {} });
+
+    expect(codeSampleResponseTabs.state('selectedTab')).toBe('metadata');
+    expect(
+      codeSampleResponseTabs
+        .find('a')
+        .first()
+        .hasClass('hub-reference-results-header-item tabber-tab'),
+    ).toEqual(true);
+
+    resultTab.simulate('click', { preventDefault() {} });
+    expect(codeSampleResponseTabs.state('selectedTab')).toBe('result');
+  });
+});
+
+describe('Results body', () => {
+  test('should display result body by default', () => {
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props} oas={oas} />);
+
+    // expect(
+    //   codeSampleResponseTabs.find('div.tabber-body tabber-body-result').prop('style')
+    // ).toEqual({
+    //   display: 'block',
+    // });
+    expect(codeSampleResponseTabs.find('pre.tomorrow-night').length).toBe(1);
+    // expect(codeSampleResponseTabs.find('div.cm-s-tomorrow-night codemirror-highlight').length).toBe(
+    //   1,
+    // );
+  });
+
+  test('should not display responseBody if isBinary is true', () => {
+    const props2 = {
+      result: {
+        init: true,
+        isBinary: true,
+        method: 'POST',
+        requestHeaders: 'Authorization : Bearer api-key',
+        responseHeaders: 'content-disposition,application/json',
+        statusCode: [200, 'OK', 'success'],
+        responseBody: {
+          id: 9205436248879918000,
+          category: { id: 0 },
+          name: '1',
+          photoUrls: ['1'],
+          tags: [],
+        },
+        url: 'http://petstore.swagger.io/v2/pet',
+      },
+      operation: new Operation({}, '/pet', 'post'),
+      styleClass: 'hub-reference-right hub-reference-results tabber-parent on',
+    };
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props2} oas={oas} />);
+
+    expect(
+      codeSampleResponseTabs.containsMatchingElement(<div> A binary file was returned</div>),
+    ).toEqual(true);
+  });
+
+  test('should display message if OAuth is incorrect or expired ', () => {
+    const props3 = {
+      result: {
+        init: true,
+        isBinary: true,
+        method: 'POST',
+        requestHeaders: 'Authorization : Bearer api-key',
+        responseHeaders: 'content-disposition,application/json',
+        statusCode: [401, 'Unauthorized', 'error'],
+        responseBody: {
+          id: 9205436248879918000,
+          category: { id: 0 },
+          name: '1',
+          photoUrls: ['1'],
+          tags: [],
+        },
+        url: 'http://petstore.swagger.io/v2/pet',
+      },
+      operation: new Operation({}, '/pet', 'post'),
+      styleClass: 'hub-reference-right hub-reference-results tabber-parent on',
+    };
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props3} oas={oas} />);
+
+    expect(
+      codeSampleResponseTabs.containsMatchingElement(
+        <div className="text-center hub-expired-token" />,
+      ),
+    ).toEqual(true);
+  });
+});
+
+describe('Metadata body', () => {
+  test('should display meta data body if selected', () => {
+    const codeSampleResponseTabs = shallow(<CodeSampleResponseTabs {...props} oas={oas} />);
+
+    codeSampleResponseTabs.setState({ selectedTab: 'metadata' });
+
+    expect(codeSampleResponseTabs.find('div.meta').length).toBe(6);
+  });
+});

packages/api-explorer-ui/__tests__/Doc.test.jsx

@@ -84,6 +84,17 @@ describe('onSubmit', () => {
 
     expect(doc.state('showAuthBox')).toBe(false);
     expect(doc.state('needsAuth')).toBe(false);
+    expect(doc.state('loading')).toBe(true);
+  });
+
+  xtest('should make request on Submit', () => {
+    const doc = mount(<Doc {...props} />);
+    doc.instance().onSubmit();
+    doc.instance().onChange({ auth: { api_key: 'api-key' } });
+    doc.instance().onSubmit();
+
+    expect(doc.state('result')).toBe(false);
+    expect(doc.state('needsAuth')).toBe(false);
   });
 });
 
@@ -103,6 +114,26 @@ describe('toggleAuth', () => {
   });
 });
 
+describe('hideResults', () => {
+  test('responseTabClass should change state of responseTabClass', () => {
+    const doc = shallow(<Doc {...props} />);
+
+    doc.setState({
+      responseTabClass: 'hub-reference-right hub-reference-results tabber-parent on',
+    });
+
+    expect(doc.state('responseTabClass')).toBe(
+      'hub-reference-right hub-reference-results tabber-parent on',
+    );
+
+    doc.instance().hideResults();
+
+    expect(doc.state('responseTabClass')).toBe(
+      'hub-reference-right hub-reference-results tabber-parent',
+    );
+  });
+});
+
 describe('state.loading', () => {
   test('should default to false', () => {
     const doc = shallow(<Doc {...props} />);

packages/api-explorer-ui/__tests__/lib/code-sample-response.test.js

@@ -0,0 +1,84 @@
+const codeSampleResponse = require('../../src/lib/code-sample-response');
+const { Headers } = require('node-fetch');
+
+const req = {
+  log: {
+    entries: [
+      {
+        request: {
+          headers: [
+            {
+              name: 'Authorization',
+              value: 'Bearer api-key',
+            },
+          ],
+          queryString: [],
+          postData: {
+            text: '{"category":{},"name":1,"photoUrls":[1]}',
+          },
+          method: 'POST',
+          url: 'http://petstore.swagger.io/v2/pet',
+        },
+      },
+    ],
+  },
+};
+const responseBody = {
+  id: 9205436248879918000,
+  category: { id: 0 },
+  name: '1',
+  photoUrls: ['1'],
+  tags: [],
+};
+
+const headers = new Headers();
+headers.set('Content-Disposition', 'application/json');
+
+describe('codeSampleResponse', () => {
+  it('should result object', () => {
+    const res = {
+      type: 'cors',
+      url: 'http://petstore.swagger.io/v2/pet',
+      redirected: false,
+      status: 200,
+      ok: true,
+      statusText: 'OK',
+      headers,
+    };
+
+    expect(codeSampleResponse(res, responseBody, req)).toEqual({
+      init: true,
+      isBinary: false,
+      method: 'POST',
+      requestHeaders: 'Authorization : Bearer api-key',
+      responseHeaders: 'content-disposition,application/json',
+      statusCode: [200, 'OK', 'success'],
+      responseBody,
+      url: 'http://petstore.swagger.io/v2/pet',
+    });
+  });
+});
+
+describe('codeSampleResponse', () => {
+  it('should result object', () => {
+    const res = {
+      type: 'cors',
+      url: 'http://petstore.swagger.io/v2/pet',
+      redirected: false,
+      ok: true,
+      statusText: 'OK',
+      headers,
+    };
+
+    expect(codeSampleResponse(res, responseBody, req)).toEqual({
+      init: true,
+      isBinary: false,
+      method: 'POST',
+      requestHeaders: 'Authorization : Bearer api-key',
+      responseHeaders: 'content-disposition,application/json',
+      statusCode: [404, 'Not Found', 'error'],
+      responseBody,
+      url: 'http://petstore.swagger.io/v2/pet',
+    });
+  });
+});

packages/api-explorer-ui/package.json

@@ -67,7 +67,7 @@
     "jest": "^20.0.4",
     "jsinspect": "^0.12.6",
     "mocha": "^3.4.2",
-    "node-fetch": "^1.7.3",
+    "node-fetch": "^2.0.0-alpha.9",
     "nyc": "^11.0.3",
     "prettier": "^1.6.1",
     "raf": "^3.4.0",