@stoplight/elements-core 9.0.11 → 9.0.12-beta-0.1

package/src/components/TableOfContents/TableOfContents.spec.tsx

@@ -0,0 +1,301 @@
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { withMosaicProvider } from '../../hoc/withMosaicProvider';
+import { TableOfContents as TOC } from './TableOfContents';
+import { TableOfContentsItem } from './types';
+import { findFirstNode } from './utils';
+
+const TableOfContents = withMosaicProvider(TOC);
+
+const Link: React.FC = ({ children }) => <>{children}</>;
+
+describe('TableOfContents', () => {
+  describe('Group', () => {
+    it('should only render group contents when open', () => {
+      const { unmount } = render(
+        <TableOfContents
+          activeId=""
+          tree={[
+            {
+              title: 'Root',
+              items: [
+                {
+                  id: 'targetId',
+                  title: 'Target',
+                  slug: 'target',
+                  type: 'article',
+                  meta: '',
+                },
+              ],
+            },
+          ]}
+          Link={Link}
+        />,
+      );
+
+      expect(screen.queryByTitle('Root')).toBeInTheDocument();
+      expect(screen.queryByTitle('Target')).not.toBeInTheDocument();
+
+      unmount();
+    });
+
+    it('it renders group contents if maxDepthOpenByDefault > 0', () => {
+      const { unmount } = render(
+        <TableOfContents
+          activeId=""
+          tree={[
+            {
+              title: 'Root',
+              items: [
+                {
+                  id: 'targetId',
+                  title: 'Target',
+                  slug: 'target',
+                  type: 'article',
+                  meta: '',
+                },
+              ],
+            },
+          ]}
+          Link={Link}
+          maxDepthOpenByDefault={1}
+        />,
+      );
+
+      expect(screen.queryByTitle('Root')).toBeInTheDocument();
+      expect(screen.queryByTitle('Target')).toBeInTheDocument();
+
+      unmount();
+    });
+
+    it('should default open when nested child is active', () => {
+      const { unmount } = render(
+        <TableOfContents
+          activeId="targetId"
+          tree={[
+            {
+              title: 'Root',
+              items: [
+                {
+                  title: 'Group',
+                  items: [
+                    {
+                      id: 'targetId',
+                      title: 'Target',
+                      slug: 'target',
+                      type: 'article',
+                      meta: '',
+                    },
+                  ],
+                },
+              ],
+            },
+          ]}
+          Link={Link}
+        />,
+      );
+
+      expect(screen.queryByTitle(/Root/)).toBeInTheDocument();
+      expect(screen.queryByTitle(/Group/)).toBeInTheDocument();
+      expect(screen.queryByTitle(/Target/)).toBeInTheDocument();
+
+      unmount();
+    });
+
+    it('should close an opened group on click, with active highlighting', () => {
+      const { unmount } = render(
+        <TableOfContents
+          maxDepthOpenByDefault={1}
+          activeId="targetId"
+          tree={[
+            {
+              title: 'Root',
+              items: [
+                {
+                  id: 'targetId',
+                  title: 'Target',
+                  slug: 'target',
+                  type: 'article',
+                  meta: '',
+                },
+              ],
+            },
+          ]}
+          Link={Link}
+        />,
+      );
+
+      const Root = screen.queryByTitle(/Root/);
+
+      expect(Root).toBeInTheDocument();
+      expect(Root).toHaveClass('sl-bg-canvas-100');
+      expect(screen.queryByTitle('Target')).toBeInTheDocument();
+
+      Root?.click();
+      expect(Root).toHaveClass('sl-bg-primary-tint');
+      expect(screen.queryByTitle('Target')).not.toBeInTheDocument();
+
+      unmount();
+    });
+
+    it('should open a closed group on click', () => {
+      const { unmount } = render(
+        <TableOfContents
+          activeId=""
+          tree={[
+            {
+              title: 'Root',
+              items: [
+                {
+                  id: 'targetId',
+                  title: 'Target',
+                  slug: 'target',
+                  type: 'article',
+                  meta: '',
+                },
+              ],
+            },
+          ]}
+          Link={Link}
+        />,
+      );
+
+      const Root = screen.queryByTitle(/Root/);
+
+      expect(Root).toBeInTheDocument();
+      expect(screen.queryByTitle(/Target/)).not.toBeInTheDocument();
+
+      Root?.click();
+
+      expect(screen.queryByTitle(/Target/)).toBeInTheDocument();
+
+      unmount();
+    });
+
+    it('should display item version', () => {
+      const { unmount } = render(
+        <TableOfContents
+          activeId=""
+          maxDepthOpenByDefault={1}
+          tree={[
+            {
+              title: 'Root',
+              items: [
+                {
+                  id: 'abc',
+                  title: 'Todo Api',
+                  slug: 'abc-todo-api',
+                  type: 'http_service',
+                  items: [],
+                  meta: '',
+                  version: '2',
+                },
+                {
+                  id: 'def',
+                  title: 'Todo',
+                  slug: 'def-todo',
+                  type: 'model',
+                  meta: '',
+                  version: '1.0.1',
+                },
+                {
+                  id: 'ghi',
+                  title: 'Get Todo',
+                  slug: 'ghi-get-todo',
+                  type: 'http_operation',
+                  meta: 'get',
+                  version: '1.0.2',
+                },
+              ],
+            },
+          ]}
+          Link={Link}
+        />,
+      );
+
+      expect(screen.queryByText(/v2/)).toBeInTheDocument();
+      expect(screen.queryByText(/v1.0.1/)).toBeInTheDocument();
+
+      expect(screen.queryByText(/v1.0.2/)).not.toBeInTheDocument();
+
+      unmount();
+    });
+  });
+});
+
+describe('utils', () => {
+  describe('findFirstNode', () => {
+    it('should find the first node', () => {
+      const items: TableOfContentsItem[] = [
+        {
+          title: 'group',
+          items: [
+            {
+              id: 'abc',
+              title: 'Doc',
+              type: 'article',
+              slug: 'abc-doc',
+              meta: '',
+            },
+            {
+              id: 'targetId',
+              title: 'Target',
+              slug: 'target',
+              type: 'article',
+              meta: '',
+            },
+          ],
+        },
+      ];
+
+      const firstNode = findFirstNode(items);
+
+      expect(firstNode).toEqual({
+        id: 'abc',
+        title: 'Doc',
+        type: 'article',
+        slug: 'abc-doc',
+        meta: '',
+      });
+    });
+
+    it('should ignore group node if slug is empty', () => {
+      const items: TableOfContentsItem[] = [
+        {
+          id: 'abc',
+          title: 'Todo API',
+          type: 'http_service',
+          meta: '',
+          slug: '',
+          items: [
+            {
+              id: 'def',
+              title: 'Get Todo',
+              slug: 'def-get-todo',
+              type: 'http_operation',
+              meta: 'get',
+            },
+            {
+              id: 'ghi',
+              title: 'Add Todo',
+              slug: 'ghi-add-todo',
+              type: 'http_operation',
+              meta: 'post',
+            },
+          ],
+        },
+      ];
+
+      const firstNode = findFirstNode(items);
+      expect(firstNode).toEqual({
+        id: 'def',
+        title: 'Get Todo',
+        slug: 'def-get-todo',
+        type: 'http_operation',
+        meta: 'get',
+      });
+    });
+  });
+});

package/src/components/TableOfContents/TableOfContents.stories.tsx

@@ -0,0 +1,121 @@
+import { Flex } from '@stoplight/mosaic';
+import { Story } from '@storybook/react';
+import * as React from 'react';
+
+import { TableOfContents } from './TableOfContents';
+import { TableOfContentsProps } from './types';
+
+export default {
+  title: 'Internal/TableOfContents',
+  component: TableOfContents,
+  argTypes: {
+    tree: { table: { category: 'Input' } },
+  },
+};
+
+export const Playground: Story<TableOfContentsProps> = args => (
+  <Flex justifyContent="center" style={{ width: '300px' }}>
+    <TableOfContents {...args} />
+  </Flex>
+);
+Playground.storyName = 'Todo API';
+Playground.args = {
+  tree: [
+    {
+      id: '/',
+      slug: '/',
+      title: 'Overview',
+      type: 'overview',
+      meta: '',
+    },
+    {
+      title: 'Endpoints',
+    },
+    {
+      id: '/operations/get-todos',
+      slug: '/operations/get-todos',
+      title: 'List Todos',
+      type: 'http_operation',
+      meta: 'get',
+    },
+    {
+      id: '/operations/post-todos',
+      slug: '/operations/post-todos',
+      title: 'Create Todo',
+      type: 'http_operation',
+      meta: 'post',
+    },
+    {
+      id: '/operations/get-todos-id',
+      slug: '/operations/get-todos-id',
+      title: 'Get Todo',
+      type: 'http_operation',
+      meta: 'get',
+    },
+    {
+      id: '/operations/put-todos-id',
+      slug: '/operations/put-todos-id',
+      title: 'Replace Todo',
+      type: 'http_operation',
+      meta: 'put',
+    },
+    {
+      id: '/operations/delete-todos-id',
+      slug: '/operations/delete-todos-id',
+      title: 'Delete Todo',
+      type: 'http_operation',
+      meta: 'delete',
+    },
+    {
+      id: '/operations/patch-todos-id',
+      slug: '/operations/patch-todos-id',
+      title: 'Update Todo',
+      type: 'http_operation',
+      meta: 'patch',
+    },
+    {
+      title: 'Users',
+      items: [
+        {
+          id: '/operations/get-users',
+          slug: '/operations/get-users',
+          title: 'Get User',
+          type: 'http_operation',
+          meta: 'get',
+        },
+        {
+          id: '/operations/delete-users-userID',
+          slug: '/operations/delete-users-userID',
+          title: 'Delete User',
+          type: 'http_operation',
+          meta: 'delete',
+        },
+        {
+          id: '/operations/post-users-userID',
+          slug: '/operations/post-users-userID',
+          title: 'Create User',
+          type: 'http_operation',
+          meta: 'post',
+        },
+      ],
+    },
+    {
+      title: 'Schemas',
+    },
+    {
+      id: '/schemas/Todos',
+      slug: '/schemas/Todos',
+      title: 'Todo',
+      type: 'model',
+      meta: '',
+      version: '1.0.2',
+    },
+    {
+      id: '/schemas/User',
+      slug: '/schemas/User',
+      title: 'User',
+      type: 'model',
+      meta: '',
+    },
+  ],
+};