chore: fix broken test & components refactoring

src/components/Responses/Response.tsx

@@ -1,28 +1,36 @@
-import { observer } from 'mobx-react';
 import * as React from 'react';
+import { observer } from 'mobx-react';
 
-import { ResponseModel } from '../../services/models';
+import type { ResponseModel, MediaTypeModel } from '../../services/models';
 import { ResponseDetails } from './ResponseDetails';
 import { ResponseDetailsWrap, StyledResponseTitle } from './styled.elements';
 
-@observer
+export interface ResponseViewProps {
-export class ResponseView extends React.Component<{ response: ResponseModel }> {
+  response: ResponseModel;
-  toggle = () => {
+}
-    this.props.response.toggle();
-  };
 
-  render() {
+export const ResponseView = observer(({ response }: ResponseViewProps): React.ReactElement => {
-    const { extensions, headers, type, summary, description, code, expanded, content } = this.props.response;
+  const { extensions, headers, type, summary, description, code, expanded, content } = response;
-    const mimes =
-      content === undefined ? [] : content.mediaTypes.filter(mime => mime.schema !== undefined);
 
-    const empty = (!extensions || Object.keys(extensions).length === 0) &&
+  const mimes = React.useMemo<MediaTypeModel[]>(
-      headers.length === 0 && mimes.length === 0 && !description;
+    () =>
+      content === undefined ? [] : content.mediaTypes.filter(mime => mime.schema !== undefined),
+    [content],
+  );
+
+  const empty = React.useMemo<boolean>(
+    () =>
+      (!extensions || Object.keys(extensions).length === 0) &&
+      headers.length === 0 &&
+      mimes.length === 0 &&
+      !description,
+    [extensions, headers, mimes, description],
+  );
 
   return (
     <div>
       <StyledResponseTitle
-          onClick={this.toggle}
+        onClick={response.toggle}
         type={type}
         empty={empty}
         title={summary || ''}
@@ -31,10 +39,9 @@ export class ResponseView extends React.Component<{ response: ResponseModel }> {
       />
       {expanded && !empty && (
         <ResponseDetailsWrap>
-            <ResponseDetails response={this.props.response} />
+          <ResponseDetails response={response} />
         </ResponseDetailsWrap>
       )}
     </div>
   );
-  }
+});
-}

src/components/Responses/ResponseTitle.tsx

@@ -14,9 +14,15 @@ export interface ResponseTitleProps {
   onClick?: () => void;
 }
 
-export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
+function ResponseTitleComponent({
-  render() {
+  title,
-    const { title, type, empty, code, opened, className, onClick } = this.props;
+  type,
+  empty,
+  code,
+  opened,
+  className,
+  onClick,
+}: ResponseTitleProps): React.ReactElement {
   return (
     <button
       className={className}
@@ -36,5 +42,6 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
       <Markdown compact={true} inline={true} source={title} />
     </button>
   );
-  }
 }
+
+export const ResponseTitle = React.memo<ResponseTitleProps>(ResponseTitleComponent);

src/components/Responses/styled.elements.ts

@@ -11,14 +11,12 @@ export const StyledResponseTitle = styled(ResponseTitle)`
   border-radius: 2px;
   margin-bottom: 4px;
   line-height: 1.5em;
-  background-color: #f2f2f2;
   cursor: pointer;
 
   color: ${props => props.theme.colors.responses[props.type].color};
   background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
   &:focus {
-    outline: auto;
+    outline: auto ${props => props.theme.colors.responses[props.type].color};
-    outline-color: ${props => props.theme.colors.responses[props.type].color};
   }
   ${props =>
     (props.empty &&

src/services/__tests__/models/Response.test.ts

@@ -42,9 +42,16 @@ describe('Models', () => {
 
     test('ensure extensions are shown if showExtensions is true', () => {
       const options = new RedocNormalizedOptions({ showExtensions: true });
-      const resp = new ResponseModel(parser, 'default', true, { 'x-example': {a: 1} } as any, options);
+      const resp = new ResponseModel({
+        parser,
+        code: 'default',
+        defaultAsError: true,
+        infoOrRef: { 'x-example': { a: 1 } },
+        options,
+        isEvent: true,
+      });
       expect(Object.keys(resp.extensions).length).toEqual(1);
-      expect(resp.extensions['x-example']).toEqual({a: 1});
+      expect(resp.extensions['x-example']).toEqual({ a: 1 });
     });
   });
 });

src/services/models/RequestBody.ts

@@ -17,8 +17,7 @@ export class RequestBodyModel {
   required: boolean;
   content?: MediaContentModel;
 
-  constructor(props: RequestBodyProps) {
+  constructor({ parser, infoOrRef, options, isEvent }: RequestBodyProps) {
-    const { parser, infoOrRef, options, isEvent } = props;
     const isRequest = !isEvent;
     const info = parser.deref(infoOrRef);
     this.description = info.description || '';

src/services/models/Response.ts

@@ -2,10 +2,7 @@ import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIResponse, Referenced } from '../../types';
 
-import {
+import { getStatusCodeType, extractExtensions } from '../../utils';
-  getStatusCodeType,
-  extractExtensions
-} from '../../utils';
 import { OpenAPIParser } from '../OpenAPIParser';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import { FieldModel } from './Field';
@@ -32,9 +29,14 @@ export class ResponseModel {
   headers: FieldModel[] = [];
   extensions: Record<string, any>;
 
-  constructor(props: ResponseProps) {
+  constructor({
-    const { parser, code, defaultAsError, infoOrRef, options, isEvent } = props;
+    parser,
-    const isRequest = isEvent ? true : false;
+    code,
+    defaultAsError,
+    infoOrRef,
+    options,
+    isEvent: isRequest,
+  }: ResponseProps) {
     makeObservable(this);
 
     this.expanded = options.expandResponses === 'all' || options.expandResponses[code];