-
Notifications
You must be signed in to change notification settings - Fork 305
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(docgen-sidebar): add collapsible component to hide nested tags (#…
…3626) * fix(docgen-sidebar): add collapsible component to hide nested tags * fix(docgen-sidebar): nesting of tags in tag tree * fix(docgen-tags): update styles to use blueprint tokens * fix(docgen-tags): replace bdl tokens with blueprint tokens * fix(docgen-tags): convert test from enzyme to rtl * fix(docgen-tags): remove snapshots, reuse blueprint loader * fix(docgen-tags): address code review comments * fix(docgen-tags): remove the sidebar test file * fix(docgen-tags): file with updated name * Update src/elements/content-sidebar/__tests__/DocGenSidebar.test.tsx Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com> * Update src/elements/content-sidebar/__tests__/DocGenSidebar.test.tsx Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com> * fix(docgen-sidebar): address code review comments * fix(docgen-sidebar): address code review comments * fix(docgen-sidebar): remove unused mock --------- Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
- Loading branch information
3 people
authored
Sep 16, 2024
1 parent
7b0e0fb
commit 3480efb
Showing
9 changed files
with
191 additions
and
1,450 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
105 changes: 105 additions & 0 deletions
105
src/elements/content-sidebar/__tests__/DocGenSidebar.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import React from 'react'; | ||
| import { render, screen, waitFor, fireEvent } from '../../../test-utils/testing-library'; | ||
|
|
||
| import { DocGenSidebarComponent as DocGenSidebar } from '../DocGenSidebar/DocGenSidebar'; | ||
| import mockData from '../__mocks__/DocGenSidebar.mock'; | ||
|
|
||
| const docGenSidebarProps = { | ||
| getDocGenTags: jest.fn().mockReturnValue( | ||
| Promise.resolve({ | ||
| pagination: {}, | ||
| data: mockData, | ||
| }), | ||
| ), | ||
| }; | ||
|
|
||
| const noTagsMock = jest.fn().mockReturnValue(Promise.resolve({ data: [] })); | ||
| const errorTagsMock = jest.fn().mockRejectedValue([]); | ||
| const noDataMock = jest.fn().mockReturnValue(Promise.resolve({})); | ||
|
|
||
|
|
||
| describe('elements/content-sidebar/DocGenSidebar', () => { | ||
| const renderComponent = (props = {}) => | ||
| render(<DocGenSidebar logger={{ onReadyMetric: jest.fn() }} {...docGenSidebarProps} {...props} />); | ||
|
|
||
| test('componentDidMount() should call fetch tags', async () => { | ||
| renderComponent(); | ||
| await waitFor(() => expect(docGenSidebarProps.getDocGenTags).toHaveBeenCalled()); | ||
| }); | ||
|
|
||
| test('should render DocGen sidebar component correctly with tags list', async () => { | ||
| renderComponent(); | ||
| const tagList = await screen.findAllByTestId('bcs-TagsSection'); | ||
| expect(tagList).toHaveLength(2); | ||
| }); | ||
|
|
||
| test('should render DocGen sidebar component correctly with tags list', async () => { | ||
| renderComponent(); | ||
| const parentTag = await screen.findByText('about'); | ||
| let nestedTag = await screen.queryByText('name'); | ||
|
|
||
| expect(parentTag).toBeInTheDocument(); | ||
| expect(nestedTag).not.toBeInTheDocument(); | ||
|
|
||
| fireEvent.click(parentTag); | ||
|
|
||
| nestedTag = await screen.findByText('name'); | ||
| expect(nestedTag).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should render empty state when there are no tags', async () => { | ||
| renderComponent({ | ||
| getDocGenTags: noTagsMock, | ||
| }); | ||
|
|
||
| const emptyState = await screen.findByText('This document has no tags'); | ||
| expect(emptyState).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should render loading state', async () => { | ||
| const mockGetDocGenTags = jest.fn().mockReturnValue( | ||
| new Promise((resolve) => { | ||
| setTimeout(() => { | ||
| resolve({ | ||
| data: mockData, | ||
| }); | ||
| }, 1000); | ||
| }) | ||
| ); | ||
|
|
||
| renderComponent({ | ||
| getDocGenTags: mockGetDocGenTags, | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.getByRole('status', { name: 'Loading' })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.queryByRole('status', { name: 'Loading' })).not.toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| test('should re-trigger getDocGenTags on click on refresh button', async () => { | ||
| renderComponent({ | ||
| getDocGenTags: errorTagsMock, | ||
| }); | ||
|
|
||
| const errorState = await screen.findByTestId('docgen-sidebar-error'); | ||
| expect(errorState).toBeInTheDocument(); | ||
|
|
||
| const refreshButton = screen.getByRole('button', { name: 'Refresh' }); | ||
| fireEvent.click(refreshButton); | ||
|
|
||
| await waitFor(() => expect(errorTagsMock).toBeCalledTimes(2)); | ||
| }); | ||
|
|
||
| test('should handle undefined data', async () => { | ||
| renderComponent({ | ||
| getDocGenTags: noDataMock, | ||
| }); | ||
|
|
||
| const emptyState = await screen.findByText("We couldn't load the tags"); | ||
| expect(emptyState).toBeInTheDocument(); | ||
| }); | ||
| }); |
Oops, something went wrong.