feat: backporting the legacy markdown engine to run alongside the new (…

…#516)

packages/api-explorer/__tests__/ResponseSchema.test.jsx

@@ -30,17 +30,30 @@ test('selectedStatus should change state of selectedStatus', () => {
   expect(responseSchema.state('selectedStatus')).toBe('400');
 });
 
-test('should display response schema description', () => {
-  const responseSchema = shallow(<ResponseSchema {...props} />);
-  const text = responseSchema
-    .find('div.desc')
-    .first()
-    .find('div.desc')
-    .find('p')
-    .first()
-    .text();
-  expect(text).toBe(props.operation.responses['200'].description);
-});
+test.each([[true], [false]])(
+  'should display response schema description [new markdown engine=%s]',
+  useNewMarkdownEngine => {
+    const responseSchema = shallow(<ResponseSchema {...props} useNewMarkdownEngine={useNewMarkdownEngine} />);
+    let text;
+
+    if (useNewMarkdownEngine) {
+      text = responseSchema
+        .find('div.desc')
+        .first()
+        .find('div.desc')
+        .find('p')
+        .first()
+        .text();
+    } else {
+      text = responseSchema
+        .find('div.desc')
+        .first()
+        .text();
+    }
+
+    expect(text).toBe(props.operation.responses['200'].description);
+  }
+);
 
 test('should work if there are no responses', () => {
   // Need to create a new operation without any responses

packages/api-explorer/__tests__/ResponseSchemaBody.test.jsx

@@ -221,7 +221,10 @@ test('render top level array of objects', () => {
   ).toHaveLength(1);
 });
 
-test('should render markdown in the description', () => {
+test.each([
+  [true, '<a href="https://example.com" target="_self" title="">Description</a>'],
+  [false, '<a href="https://example.com" target="_self">Description</a>'],
+])('should render markdown in the description [new markdown engine=%s]', (useNewMarkdownEngine, expected) => {
   const schema = {
     type: 'object',
     properties: {
@@ -233,10 +236,10 @@ test('should render markdown in the description', () => {
   };
 
   expect(
-    mount(<ResponseSchemaBody oas={oas} schema={schema} />)
+    mount(<ResponseSchemaBody oas={oas} schema={schema} useNewMarkdownEngine={useNewMarkdownEngine} />)
       .find('a')
       .html()
-  ).toBe('<a href="https://example.com" target="_self" title="">Description</a>');
+  ).toBe(expected);
 });
 
 test('should show "string" response type for a simple `string` schema', () => {

packages/api-explorer/__tests__/block-types/ApiHeader.test.jsx

@@ -0,0 +1,29 @@
+const React = require('react');
+const { shallow } = require('enzyme');
+const ApiHeader = require('../../src/block-types/ApiHeader');
+
+const block = {
+  type: 'api-header',
+  data: {
+    title: 'This is header',
+    type: 'post',
+  },
+};
+
+describe('ApiHeader', () => {
+  it('Api Header will render text in table header cells', () => {
+    const apiHeader = shallow(<ApiHeader block={block} />);
+    expect(apiHeader.find('h1').text()).toBe('This is header');
+  });
+
+  it('should render with the type in a span', () => {
+    const apiHeader = shallow(<ApiHeader block={block} />);
+    expect(apiHeader.find(`span.type-${block.data.type}`)).toHaveLength(1);
+  });
+
+  it('should create an #id with the slug of the title', () => {
+    const apiHeader = shallow(<ApiHeader block={block} />);
+    expect(apiHeader.find(`span#this-is-header`)).toHaveLength(1);
+    expect(apiHeader.find(`#section-this-is-header`)).toHaveLength(1);
+  });
+});

packages/api-explorer/__tests__/block-types/CallOut.test.jsx

@@ -0,0 +1,92 @@
+const React = require('react');
+const { shallow, mount } = require('enzyme');
+const CallOut = require('../../src/block-types/CallOut');
+
+test('should render title', () => {
+  const block = {
+    data: {
+      type: 'info',
+      title: 'Callout',
+    },
+  };
+  const callout = mount(<CallOut block={block} />);
+  expect(callout.find('h3').text()).toBe('Callout');
+});
+
+describe('icons', () => {
+  const icons = {
+    info: 'info-circle',
+    warning: 'exclamation-circle',
+    danger: 'exclamation-triangle',
+    success: 'check-square',
+  };
+
+  it('should render with title', () => {
+    Object.keys(icons).forEach(type => {
+      const className = icons[type];
+      const block = {
+        data: {
+          type,
+          title: 'Callout',
+        },
+      };
+      expect(mount(<CallOut block={block} />).find(`.fa-${className}`)).toHaveLength(1);
+    });
+  });
+
+  it('should render without title', () => {
+    Object.keys(icons).forEach(type => {
+      const className = icons[type];
+      const block = {
+        data: {
+          type,
+        },
+      };
+      expect(mount(<CallOut block={block} />).find(`.noTitleIcon .fa-${className}`)).toHaveLength(1);
+    });
+  });
+});
+
+test('should render nothing if no title and icon', () => {
+  const block = {
+    data: {
+      type: '',
+    },
+  };
+  const callout = mount(<CallOut block={block} />);
+  expect(callout.find('span').text()).toBe('');
+});
+
+test('should render body', () => {
+  const block = {
+    data: {
+      type: 'info',
+      body: 'body',
+    },
+  };
+
+  const callout = shallow(<CallOut block={block} />);
+  expect(
+    callout
+      .render()
+      .find('.callout-body')
+      .html()
+  ).toMatchSnapshot();
+});
+
+test('should render markdown in body', () => {
+  const block = {
+    data: {
+      type: 'info',
+      body: '# heading\n`test`',
+    },
+  };
+
+  const callout = shallow(<CallOut block={block} />);
+  expect(
+    callout
+      .render()
+      .find('.callout-body')
+      .html()
+  ).toMatchSnapshot();
+});

packages/api-explorer/__tests__/block-types/Code.test.jsx

@@ -0,0 +1,143 @@
+const React = require('react');
+const { mount } = require('enzyme');
+const Code = require('../../src/block-types/Code');
+
+const block = {
+  type: 'code',
+  sidebar: undefined,
+  data: {
+    codes: [
+      {
+        code: 'whjdwhjwejhkwhjk',
+        language: 'text',
+        status: 400,
+        name: 'test',
+      },
+      {
+        code: 'var a = 1',
+        language: 'javascript',
+      },
+      {
+        code: 'whjdwhjwejhkwhjk',
+        language: 'text',
+        name: 'test',
+      },
+    ],
+  },
+};
+
+const block3 = {
+  type: 'code',
+  sidebar: undefined,
+  data: {
+    codes: [
+      {
+        code: 'whjdwhjwejhkwhjk',
+        language: 'text',
+        status: 400,
+      },
+    ],
+  },
+};
+
+const badBlock = {
+  type: 'code',
+  sidebar: undefined,
+  data: {
+    codes: {
+      code: {
+        code: 'whjdwhjwejhkwhjk',
+        language: 'text',
+        status: 400,
+      },
+    },
+  },
+};
+
+const block2 = {
+  type: 'code',
+  sidebar: undefined,
+  data: {
+    codes: [
+      {
+        code: 'var a = 1',
+        language: 'javascript',
+      },
+    ],
+  },
+};
+
+test('Code will render name if provided within em tag if codes has a status', () => {
+  const codeInput = mount(<Code block={block} />);
+  expect(codeInput.find('em').text()).toBe('test');
+});
+
+test('Code will render status code within em tag', () => {
+  const codeInput = mount(<Code block={block3} />);
+  expect(codeInput.find('em').text()).toBe('Bad Request');
+});
+
+test('If codes array is not passed as an array expect empty array', () => {
+  const codeInput = mount(<Code block={badBlock} />);
+
+  expect(codeInput.find('span').text()).toBe('');
+});
+
+test('Code will render language if name or status is not provided within a tag if codes has a status', () => {
+  const codeInput = mount(<Code block={block2} />);
+  expect(codeInput.find('a').text()).toBe('JavaScript');
+});
+
+test('Code will render label if provided within opts', () => {
+  const codeInput = mount(<Code block={block} opts={{ label: 'label' }} />);
+  expect(codeInput.find('label').text()).toBe('label');
+});
+
+test('Code should switch tabs', () => {
+  const codeInput = mount(<Code block={block} opts={{}} />);
+  const anchor = codeInput.find('li a').at(1);
+  anchor.simulate('click');
+  expect(anchor.render().hasClass('active')).toBe(true);
+});
+
+test('should uppercase known languages', () => {
+  expect(
+    mount(
+      <Code
+        block={{
+          data: {
+            codes: [
+              {
+                language: 'http',
+                code: '',
+              },
+            ],
+          },
+        }}
+      />
+    )
+      .find('li a')
+      .text()
+  ).toBe('HTTP');
+});
+
+test('should pass through unknown languages', () => {
+  expect(
+    mount(
+      <Code
+        block={{
+          data: {
+            codes: [
+              {
+                language: 'unknown-language-somehow',
+                code: '',
+              },
+            ],
+          },
+        }}
+      />
+    )
+      .find('li a')
+      .text()
+  ).toBe('unknown-language-somehow');
+});