fix: render falsy validation values (#32)

* fix: render falsy validation values

* refactor: don't pass treeStore down

Author: P0lip

src/components/SchemaRow.tsx

@@ -1,5 +1,5 @@
 import { MarkdownViewer } from '@stoplight/markdown-viewer';
-import { IRowRendererOptions, TreeStore } from '@stoplight/tree-list';
+import { IRowRendererOptions } from '@stoplight/tree-list';
 import { Icon, Popover } from '@stoplight/ui-kit';
 import * as cn from 'classnames';
 import * as React from 'react';
@@ -15,15 +15,14 @@ import { Types } from './';
 export interface ISchemaRow {
   node: SchemaTreeListNode;
   rowOptions: IRowRendererOptions;
-  treeStore: TreeStore;
   onGoToRef?: GoToRefHandler;
 }
 
 const ICON_SIZE = 12;
 const ICON_DIMENSION = 20;
 const ROW_OFFSET = 7;
 
-export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore, onGoToRef }) => {
+export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, rowOptions, onGoToRef }) => {
   const schemaNode = node.metadata as SchemaNodeWithMeta;
   const { name, $ref, subtype, required } = schemaNode;
 
@@ -79,7 +78,7 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
             >
               <Icon
                 iconSize={ICON_SIZE}
-                icon={treeStore.isNodeExpanded(node) ? 'caret-down' : 'caret-right'}
+                icon={rowOptions.isExpanded ? 'caret-down' : 'caret-right'}
                 className="text-darken-9 dark:text-lighten-9"
               />
             </div>
@@ -140,7 +139,7 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
                   if (Array.isArray(validation)) {
                     elem = validation.map((v, i) => (
                       <div key={i} className="mt-1 mr-1 flex items-center">
-                        <div className="px-1 bg-gray-2 dark:bg-gray-8 font-bold text-sm rounded">{v}</div>
+                        <div className="px-1 bg-gray-2 dark:bg-gray-8 font-bold text-sm rounded">{String(v)}</div>
                         {i < validation.length - 1 ? <div>,</div> : null}
                       </div>
                     ));

src/components/__tests__/SchemaRow.spec.tsx

@@ -0,0 +1,36 @@
+import { Popover } from '@stoplight/ui-kit';
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+import * as React from 'react';
+import { SchemaTreeListNode } from '../../types';
+import { SchemaRow } from '../SchemaRow';
+
+describe('SchemaRow component', () => {
+  test('should render falsy validations', () => {
+    const node: SchemaTreeListNode = {
+      id: '0.n1f7tvhzoj',
+      level: 0,
+      name: '',
+      metadata: {
+        type: 'object',
+        validations: {
+          enum: [null, 0, false],
+        },
+        annotations: {},
+        enum: [null, 0, false],
+        path: [],
+      } as any,
+    };
+
+    const rowOptions = {
+      isEdited: false,
+      isExpanded: true,
+    };
+
+    const wrapper = shallow(shallow(<SchemaRow node={node as SchemaTreeListNode} rowOptions={rowOptions} />)
+      .find(Popover)
+      .prop('content') as React.ReactElement);
+
+    expect(wrapper).toHaveText('enum:null,0,false');
+  });
+});