From 097ad6fae510db6ac97bac685b396060917e5189 Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Wed, 16 Mar 2022 21:20:51 -0500 Subject: [PATCH] Add specs --- .../src/__tests__/{index.js => index.test.ts} | 0 lib/ui/src/components/sidebar/Sidebar.tsx | 146 +++++++++--------- .../sidebar/__tests__/Sidebar.test.tsx | 107 +++++++++++++ .../sidebar/{ => __tests__}/data.test.ts | 2 +- 4 files changed, 181 insertions(+), 74 deletions(-) rename lib/ui/src/__tests__/{index.js => index.test.ts} (100%) create mode 100644 lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx rename lib/ui/src/components/sidebar/{ => __tests__}/data.test.ts (98%) diff --git a/lib/ui/src/__tests__/index.js b/lib/ui/src/__tests__/index.test.ts similarity index 100% rename from lib/ui/src/__tests__/index.js rename to lib/ui/src/__tests__/index.test.ts diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx index 554fef817b5..7c6e5e52d52 100644 --- a/lib/ui/src/components/sidebar/Sidebar.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.tsx @@ -88,8 +88,8 @@ export interface SidebarProps { enableShortcuts?: boolean; } -export const Sidebar: FunctionComponent = React.memo( - ({ +export const Sidebar: FunctionComponent = React.memo((props) => { + const { storyId = null, refId = DEFAULT_REF_ID, stories: storiesHash, @@ -99,78 +99,78 @@ export const Sidebar: FunctionComponent = React.memo( menuHighlighted = false, enableShortcuts = true, refs = {}, - }) => { - const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; - const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); - const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); + } = props; - const adaptedRefs = useMemo(() => { - return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { - if (ref.stories) { - acc[id] = { - ...ref, - stories: collapseFn(ref.stories), - }; - } else { - acc[id] = ref; - } - return acc; - }, {}); - }, [DOCS_MODE, refs]); + const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; + const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); + const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); - const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); - const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; - const lastViewedProps = useLastViewed(selected); + const adaptedRefs = useMemo(() => { + return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { + if (ref.stories) { + acc[id] = { + ...ref, + stories: collapseFn(ref.stories), + }; + } else { + acc[id] = ref; + } + return acc; + }, {}); + }, [DOCS_MODE, refs]); - return ( - - - - + const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); + const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; + const lastViewedProps = useLastViewed(selected); - - {({ - query, - results, - isBrowsing, - closeMenu, - getMenuProps, - getItemProps, - highlightedIndex, - }) => ( - - - - - )} - - - - - ); - } -); + return ( + + + + + + + {({ + query, + results, + isBrowsing, + closeMenu, + getMenuProps, + getItemProps, + highlightedIndex, + }) => ( + + + + + )} + + + + + ); +}); diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx new file mode 100644 index 00000000000..84e21d0bebe --- /dev/null +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { ThemeProvider, ensure, themes } from '@storybook/theming'; + +import type { Story, StoriesHash } from '@storybook/api'; +import type { Theme } from '@storybook/theming'; +import { Sidebar } from '../Sidebar'; + +global.DOCS_MODE = false; + +const factory = (props) => { + const theme: Theme = ensure(themes.light); + + return render( + + + + ); +}; + +const generateStories: StoriesHash = ({ kind, refId }) => { + const [root, storyName] = kind.split('/'); + const rootId = root.toLowerCase().replace(/\s+/g, '-'); + const hypenatedstoryName = storyName.toLowerCase().replace(/\s+/g, '-'); + const storyId = `${rootId}-${hypenatedstoryName}`; + const pageId = `${rootId}-${hypenatedstoryName}--page`; + + const storyBase = [ + { + id: rootId, + name: root, + children: [storyId], + startCollapsed: false, + }, + { + id: storyId, + name: storyName, + children: [pageId], + isComponent: true, + parent: rootId, + }, + { + id: pageId, + name: 'Page', + story: 'Page', + kind, + componentId: storyId, + parent: storyId, + title: kind, + }, + ]; + + return storyBase.reduce((accumulator: StoriesHash, current: any, index: number) => { + const { id, name } = current; + const isRoot = index === 0; + + const story: Story = { + ...current, + depth: index, + isRoot, + isLeaf: name === 'Page', + refId, + }; + + if (!isRoot) { + story.parameters = {}; + story.parameters.docsOnly = true; + } + + accumulator[id] = story; + + return accumulator; + }, {}); +}; + +describe('Sidebar', () => { + test("should not render an extra nested 'Page'", async () => { + const refId = 'next'; + const kind = 'Getting Started/Install'; + const refStories = generateStories({ refId, kind }); + const internalStories = generateStories({ kind: 'Welcome/Example' }); + const lastStoryId = Object.keys(refStories)[Object.keys(refStories).length - 1]; + + const refs = { + [refId]: { + stories: refStories, + id: refId, + ready: true, + title: refId, + }, + }; + + factory({ + refs, + lastStoryId, + refId, + stories: internalStories, + }); + + fireEvent.click(screen.getByText('Install')); + fireEvent.click(screen.getByText('Example')); + + const pageItems = await screen.queryAllByText('Page'); + + expect(pageItems).toHaveLength(0); + }); +}); diff --git a/lib/ui/src/components/sidebar/data.test.ts b/lib/ui/src/components/sidebar/__tests__/data.test.ts similarity index 98% rename from lib/ui/src/components/sidebar/data.test.ts rename to lib/ui/src/components/sidebar/__tests__/data.test.ts index 366338d251d..918542cff32 100644 --- a/lib/ui/src/components/sidebar/data.test.ts +++ b/lib/ui/src/components/sidebar/__tests__/data.test.ts @@ -1,5 +1,5 @@ import type { StoriesHash } from '@storybook/api'; -import { collapseDocsOnlyStories, collapseAllStories } from './data'; +import { collapseDocsOnlyStories, collapseAllStories } from '../data'; type Item = StoriesHash[keyof StoriesHash];