Add another test

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

@@ -1,6 +1,5 @@
 const React = require('react');
-const { shallow } = require('enzyme');
-// const extensions = require('../../readme-oas-extensions');
+const { shallow, mount } = require('enzyme');
 const petstore = require('./fixtures/petstore/oas');
 
 const Response = require('../src/Response');
@@ -9,23 +8,24 @@ const Oas = require('../src/lib/Oas');
 const { Operation } = Oas;
 const oas = new Oas(petstore);
 
-const noResult = {
+const props = {
   result: null,
   operation: new Operation({}, '/pet', 'post'),
   hideResults: () => {},
+  oas,
 };
 
 describe('no result', () => {
   test('nothing should render', () => {
-    const codeSampleResponseTabs = shallow(<Response {...noResult} oas={oas} />);
+    const codeSampleResponseTabs = shallow(<Response {...props} />);
 
     expect(codeSampleResponseTabs.find('span').length).toBe(0);
   });
 });
 
 describe('setTab', () => {
   test('setTab should change state of selectedTab', () => {
-    const doc = shallow(<Response {...noResult} oas={oas} />);
+    const doc = shallow(<Response {...props} />);
 
     expect(doc.state('responseTab')).toBe('result');
 
@@ -41,7 +41,7 @@ describe('setTab', () => {
 
 describe('exampleTab', () => {
   test('exampleTab should change state of exampleTab', () => {
-    const doc = shallow(<Response {...noResult} oas={oas} />);
+    const doc = shallow(<Response {...props} />);
 
     expect(doc.state('exampleTab')).toBe(0);
 
@@ -50,3 +50,24 @@ describe('exampleTab', () => {
     expect(doc.state('exampleTab')).toBe(1);
   });
 });
+
+test('should show different component tabs based on state', () => {
+  const doc = mount(
+    <Response
+      {...props}
+      result={{
+        status: 200,
+        responseBody: JSON.stringify({ a: 1 }),
+        requestHeaders: [],
+        method: 'post',
+        responseHeaders: [],
+      }}
+    />,
+  );
+  expect(doc.find('ResponseBody').length).toBe(1);
+  doc.instance().setTab('metadata');
+
+  // I want to do the below assertion instead, but it's not working
+  // expect(doc.find('ResponseMetadata').length).toBe(1);
+  expect(doc.html().includes('Response Headers')).toBe(true);
+});

packages/api-explorer-ui/src/Response.jsx

@@ -32,9 +32,7 @@ class Response extends React.Component {
 
   render() {
     const { result, oas, operation, oauthUrl, hideResults } = this.props;
-
-    const { responseTab, exampleTab } = this.state;
-
+    const { responseTab } = this.state;
     const securities = operation.prepareSecurity();
 
     return (
@@ -67,7 +65,7 @@ class Response extends React.Component {
             operation={operation}
             result={result}
             oas={oas}
-            selected={exampleTab}
+            selected={this.state.exampleTab}
             setExampleTab={this.setExampleTab}
           />
         </div>