Refactor to use a shared auth state at the very top level

This allows changes made in one endpoint to be mirrored across them all It also allows simplification and removal of two class components: AuthBox and Basic
readmeio · Jan 28, 2019 · 351303a · 351303a
1 parent 9d83774
commit 351303a
Show file tree

Hide file tree

Showing 17 changed files with 168 additions and 359 deletions.
diff --git a/packages/api-explorer/__tests__/AuthBox.test.jsx b/packages/api-explorer/__tests__/AuthBox.test.jsx
@@ -68,37 +68,3 @@ test('should display multiple securities', () => {
 
   expect(authBox.find('SecurityInput').length).toBe(2);
 });
-
-test('should merge securities auth changes', () => {
-  const onChange = jest.fn();
-  const authBox = mount(<AuthBox {...props} onChange={onChange} />);
-
-  authBox
-    .find('ApiKey')
-    .props()
-    .change('auth');
-  authBox
-    .find('Oauth2')
-    .props()
-    .change('auth');
-
-  expect(onChange.mock.calls[0][0]).toEqual({ auth: { apiKeyScheme: 'auth' } });
-  expect(onChange.mock.calls[1][0]).toEqual({ auth: { apiKeyScheme: 'auth', oauthScheme: 'auth' } });
-});
-
-test("should work for Basic (Basic has it's own state)", () => {
-  const authTypesOas = new Oas(authTypes);
-  const onChange = jest.fn();
-  const authBox = mount(
-    <AuthBox {...props} operation={authTypesOas.operation('/basic', 'post')} onChange={onChange} auth={{basic: {}}} />,
-  );
-  const basic = authBox.find('Basic').instance();
-
-  basic.inputChange('user', 'user');
-  basic.inputChange('password', 'password');
-
-  expect(onChange.mock.calls[0][0]).toEqual({ auth: { basic: { user: 'user', password: '' } } });
-  expect(onChange.mock.calls[1][0]).toEqual({
-    auth: { basic: { user: 'user', password: 'password' } },
-  });
-});
diff --git a/packages/api-explorer/__tests__/Doc.test.jsx b/packages/api-explorer/__tests__/Doc.test.jsx
@@ -24,7 +24,8 @@ const props = {
   language: 'node',
   suggestedEdits: false,
   oauth: false,
-  apiKey: '',
+  onAuthChange: () => {},
+  auth: {},
   tryItMetrics: () => {},
 };
 
@@ -73,8 +74,9 @@ test('should work without a doc.swagger/doc.path/oas', () => {
       language="node"
       suggestedEdits
       oauth={false}
-      apiKey=""
       tryItMetrics={() => {}}
+      onAuthChange={() => {}}
+      auth={{}}
     />,
   );
   expect(docComponent.find('Waypoint').length).toBe(1);
@@ -95,8 +97,9 @@ test('should still display `Content` with column-style layout', () => {
       suggestedEdits
       appearance={{ referenceLayout: 'column' }}
       oauth={false}
-      apiKey=""
       tryItMetrics={() => {}}
+      onAuthChange={() => {}}
+      auth={{}}
     />,
   );
   docComponent.setState({ showEndpoint: true });
@@ -155,6 +158,7 @@ describe('onSubmit', () => {
       setLanguage: () => {},
       language: 'node',
       oauth: false,
+      auth: { petstore_auth: 'api-key' },
     };
 
     const fetch = window.fetch;
@@ -169,7 +173,6 @@ describe('onSubmit', () => {
     };
 
     const doc = mount(<Doc {...props} {...props2} />);
-    doc.instance().onChange({ auth: { petstore_auth: 'api-key' } });
 
     doc
       .instance()
@@ -222,9 +225,9 @@ describe('onSubmit', () => {
         tryItMetrics={() => {
           called = true;
         }}
+        auth={{ api_key: 'api-key' }}
       />,
     );
-    doc.instance().onChange({ auth: { api_key: 'api-key' } });
 
     const fetch = window.fetch;
     window.fetch = () => {
@@ -308,30 +311,6 @@ describe('themes', () => {
   });
 });
 
-describe('`auth`', () => {
-  test('should set auth from user in formData if passed in', () => {
-    const doc = mount(
-      <Doc
-        {...props}
-        oas={multipleSecurities}
-        doc={{
-          swagger: { path: '/or-security' },
-          api: { method: 'post' },
-          title: 'title',
-          slug: 'slug',
-          type: 'endpoint',
-        }}
-        user={{
-          oauthScheme: 'oauth',
-          apiKeyScheme: 'apiKey',
-        }}
-      />,
-    );
-
-    expect(doc.state('formData').auth).toEqual({ oauthScheme: 'oauth', apiKeyScheme: 'apiKey' });
-  });
-});
-
 test('should output with an error message if the endpoint fails to load', () => {
   const brokenOas = {
     paths: {

diff --git a/packages/api-explorer/__tests__/SecurityInput.test.jsx b/packages/api-explorer/__tests__/SecurityInput.test.jsx
@@ -112,19 +112,25 @@ describe('apiKey', () => {
 describe('basic', () => {
   const props = { scheme: { type: 'http', scheme: 'basic', _key: 'test-basic' } };
 
-  test('should send auth apiKey into onChange()', () => {
+  test('should send both user/pass into onChange()', () => {
     const onChange = jest.fn();
     const securityInput = mount(<SecurityInput {...props} {...baseProps} auth={{ 'test-basic': {} }} onChange={onChange} />);
 
     securityInput.find('input[name="user"]').instance().value = 'user';
     securityInput.find('input[name="user"]').simulate('change');
-    securityInput.find('input[name="password"]').instance().value = 'pass';
-    securityInput.find('input[name="password"]').simulate('change');
+    securityInput.find('input[name="pass"]').instance().value = 'pass';
+    securityInput.find('input[name="pass"]').simulate('change');
 
-    expect(onChange.mock.calls[1][0]).toEqual({
+    expect(onChange.mock.calls[0][0]).toEqual({
       'test-basic': {
         user: 'user',
-        password: 'pass',
+        pass: '',
+      },
+    });
+    expect(onChange.mock.calls[1][0]).toEqual({
+      'test-basic': {
+        user: '',
+        pass: 'pass',
       },
     });
   });
@@ -137,6 +143,6 @@ describe('basic', () => {
     );
 
     expect(securityInput.find('input[name="user"]').prop('value')).toBe(user);
-    expect(securityInput.find('input[name="password"]').prop('value')).toBe(pass);
+    expect(securityInput.find('input[name="pass"]').prop('value')).toBe(pass);
   });
 });
diff --git a/packages/api-explorer/__tests__/index.test.jsx b/packages/api-explorer/__tests__/index.test.jsx
@@ -187,33 +187,13 @@ describe('oas', () => {
   });
 });
 
-describe('apiKey', () => {
-  afterEach(() => Cookie.remove('user_data'));
-
-  it('should read apiKey from `user_data.apiKey` cookie', () => {
-    const apiKey = '123456';
-    Cookie.set('user_data', JSON.stringify({ apiKey }));
-
-    const explorer = shallow(<ApiExplorer {...props} />);
-
-    expect(explorer.state('apiKey')).toBe(apiKey);
-  });
-
+describe('auth', () => {
   it('should read apiKey from `variables.user.apiKey`', () => {
     const apiKey = '123456';
 
     const explorer = shallow(<ApiExplorer {...props} variables={{ user: { apiKey } }} />);
 
-    expect(explorer.state('apiKey')).toBe(apiKey);
-  });
-
-  it('should read apiKey from `user_data.keys[].apiKey`', () => {
-    const apiKey = '123456';
-    Cookie.set('user_data', JSON.stringify({ keys: [{ name: 'project1', apiKey }] }));
-
-    const explorer = shallow(<ApiExplorer {...props} />);
-
-    expect(explorer.state('apiKey')).toBe(apiKey);
+    expect(explorer.state('auth')).toEqual({"api_key": "123456", "petstore_auth": "123456"});
   });
 
   it('should read apiKey from `variables.user.keys[].apiKey`', () => {
@@ -223,16 +203,7 @@ describe('apiKey', () => {
       <ApiExplorer {...props} variables={{ user: { keys: [{ name: 'a', apiKey }] } }} />,
     );
 
-    expect(explorer.state('apiKey')).toBe(apiKey);
-  });
-
-  it('should read apiKey from `user_data.keys[].api_key`', () => {
-    const apiKey = '123456';
-    Cookie.set('user_data', JSON.stringify({ keys: [{ name: 'project1', api_key: apiKey }] }));
-
-    const explorer = shallow(<ApiExplorer {...props} />);
-
-    expect(explorer.state('apiKey')).toBe(apiKey);
+    expect(explorer.state('auth')).toEqual({"api_key": "123456", "petstore_auth": "123456"});
   });
 
   it('should read apiKey from `user_data.keys[].api_key`', () => {
@@ -245,13 +216,13 @@ describe('apiKey', () => {
       />,
     );
 
-    expect(explorer.state('apiKey')).toBe(apiKey);
+    expect(explorer.state('auth')).toEqual({"api_key": "123456", "petstore_auth": undefined});
   });
 
   it('should default to undefined', () => {
     const explorer = shallow(<ApiExplorer {...props} />);
 
-    expect(explorer.state('apiKey')).toBe(undefined);
+    expect(explorer.state('auth')).toEqual({"api_key": undefined, "petstore_auth": undefined});
   });
 
   it('should be updated via editing authbox', () => {
@@ -270,11 +241,20 @@ describe('apiKey', () => {
     input.instance().value = '1234';
     input.simulate('change');
 
-    expect(doc.state.formData.auth.petstore_auth).toBe('1234');
+    expect(explorer.state('auth').petstore_auth).toBe('1234');
 
     input.instance().value += '5678';
     input.simulate('change');
 
-    expect(doc.state.formData.auth.petstore_auth).toBe('12345678');
+    expect(explorer.state('auth').petstore_auth).toBe('12345678');
+  });
+
+  test('should merge securities auth changes', () => {
+    const explorer = mount(<ApiExplorer {...props} />);
+
+    explorer.instance().onAuthChange({ api_key: '7890' });
+    explorer.instance().onAuthChange({ petstore_auth: '123456' });
+
+    expect(explorer.state('auth')).toEqual({"api_key": "7890", "petstore_auth": "123456"});
   });
 });