Add first pass at code samples rendering https://github.com/readmeio/…

…api-explorer/issues/1

Still missing highlighting and values

packages/api-explorer-ui/.eslintrc

@@ -1,6 +1,6 @@
 {
   "extends": "airbnb",
   "rules": {
-
+    "arrow-body-style": 0
   }
 }

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

@@ -6,8 +6,6 @@ const CodeSample = require('../src/CodeSample');
 
 const oas = require('./fixtures/petstore/oas');
 
-const operation = oas.paths['/pet/{petId}'].get;
-
 describe('tabs', () => {
   // TODO this doesnt work in readme
   test('should display tabs if there are examples in the oas file');
@@ -19,9 +17,13 @@ describe('tabs', () => {
         oas={{
           [extensions.SAMPLES_ENABLED]: true,
           [extensions.SAMPLES_LANGUAGES]: languages,
+          servers: [
+            { url: 'http://example.com' },
+          ],
         }}
-        operation={operation}
         setLanguage={() => {}}
+        path="/pet/{id}"
+        method="get"
       />,
     );
 
@@ -36,8 +38,9 @@ describe('tabs', () => {
           [extensions.SAMPLES_ENABLED]: false,
           [extensions.SAMPLES_LANGUAGES]: ['node'],
         }}
-        operation={operation}
         setLanguage={() => {}}
+        path="/pet/{id}"
+        method="get"
       />,
     );
 
@@ -53,9 +56,13 @@ describe('code examples', () => {
         oas={{
           [extensions.SAMPLES_ENABLED]: true,
           [extensions.SAMPLES_LANGUAGES]: languages,
+          servers: [
+            { url: 'http://example.com' },
+          ],
         }}
-        operation={operation}
         setLanguage={() => {}}
+        path="/pet/{id}"
+        method="get"
       />,
     );
 
@@ -73,8 +80,13 @@ describe('updating language', () => {
         oas={{
           [extensions.SAMPLES_ENABLED]: true,
           [extensions.SAMPLES_LANGUAGES]: ['node'],
+          servers: [
+            { url: 'http://example.com' },
+          ],
         }}
         setLanguage={setLanguage}
+        path="/pet/{id}"
+        method="get"
       />,
     );
 

packages/api-explorer-ui/__tests__/lib/generate-code-snippets.test.js

@@ -0,0 +1,18 @@
+const generateCodeSnippets = require('../../src/lib/generate-code-snippets');
+
+test('should generate a HTML snippet for each lang', () => {
+  const languages = ['node', 'curl'];
+
+  const snippets = generateCodeSnippets({
+    servers: [
+      { url: 'http://example.com' },
+    ],
+  }, '/path', 'get', languages);
+
+  expect(Object.keys(snippets)).toEqual(languages);
+
+  Object.keys(snippets).forEach((lang) => {
+    expect(typeof snippets[lang]).toBe('string');
+    // expect(snippets[lang]).toEqual(expect.stringMatching(/cm-s-tomorrow-night/));
+  });
+});

packages/api-explorer-ui/__tests__/lib/oas-to-har.test.js

@@ -0,0 +1,37 @@
+const oasToHar = require('../../src/lib/oas-to-har');
+
+test('should output a har format', () => {
+  expect(oasToHar({})).toEqual({
+    headers: [],
+    queryString: [],
+    postData: {},
+    method: '',
+    url: '',
+  });
+});
+
+test('should uppercase the method', () => {
+  expect(oasToHar({}, '/', 'get').method).toBe('GET');
+});
+
+describe('url', () => {
+  test('should default to ""', () => {
+    expect(oasToHar({}, '', '').url).toBe('');
+    expect(oasToHar({}, '/path', '').url).toBe('/path');
+  });
+
+  test('should be constructed from servers[0]', () => {
+    expect(oasToHar({
+      servers: [{ url: 'http://example.com' }],
+    }, '/path', '').url).toBe('http://example.com/path');
+  });
+
+  it('should replace whitespace with %20', () => {
+    expect(oasToHar({
+      servers: [{ url: 'http://example.com' }],
+    }, '/path with spaces', '').url).toBe('http://example.com/path%20with%20spaces');
+  });
+
+  it('should replace path params with values');
+});
+