Skip to content

Commit

Permalink
Merge pull request #1813 from stakwork/AhsanFarooqDev-browser_nav_bac…
Browse files Browse the repository at this point in the history 
…k_button_and_on_logo_click_back_button

Ahsan farooq dev browser nav back button and on logo click back button
  • Loading branch information
@Rassl
Rassl authored Jul 12, 2024
2 parents 1a07760 + 73982c1 commit 676e986
Show file tree
Hide file tree
Showing 14 changed files with 326 additions and 167 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"react-lottie": "^1.2.3",
"react-markdown": "^9.0.1",
"react-player": "^2.11.2",
"react-router-dom": "6.23.1",
"react-spinners": "^0.13.3",
"react-toastify": "^10.0.4",
"reactflow": "^11.9.2",
Expand Down
97 changes: 57 additions & 40 deletions src/components/App/MainToolbar/__tests__/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { ThemeProvider } from '@mui/material'
import { appTheme } from '../../Providers'
import { ThemeProvider as StyleThemeProvider } from 'styled-components'
import { isSphinx } from '../../../../utils/isSphinx'
import { MemoryRouter } from 'react-router-dom'

jest.mock('~/utils/isSphinx', () => ({
isSphinx: jest.fn(),
Expand Down Expand Up @@ -40,11 +41,13 @@ describe('MainToolbar Component Tests', () => {
})

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)
waitFor(() => {
fireEvent.click(screen.getByTestId('cy-open-soure-table'))
Expand All @@ -54,11 +57,13 @@ describe('MainToolbar Component Tests', () => {

it('renders MainToolbar component with correct elements', () => {
render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)

waitFor(() => {
Expand All @@ -76,11 +81,13 @@ describe('MainToolbar Component Tests', () => {
})

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)
fireEvent.click(screen.getByTestId('add-content-modal'))

Expand All @@ -94,11 +101,13 @@ describe('MainToolbar Component Tests', () => {
})

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)
fireEvent.click(screen.getByTestId('settings-modal'))

Expand All @@ -114,11 +123,13 @@ describe('MainToolbar Component Tests', () => {
})

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)
const feedbackButton = screen.getByTestId('feedback-modal')
expect(feedbackButton).toBeInTheDocument()
Expand All @@ -133,11 +144,13 @@ describe('MainToolbar Component Tests', () => {
})

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)
const feedbackButton = screen.queryByTestId('feedback-modal')
waitFor(() => {
Expand All @@ -151,11 +164,13 @@ describe('MainToolbar Component Tests', () => {
;(useFeatureFlagStore as unknown as jest.Mock).mockReturnValue({ userFeedbackFeatureFlag: true })

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)

const feedbackButton = screen.getByTestId('feedback-modal')
Expand All @@ -169,11 +184,13 @@ describe('MainToolbar Component Tests', () => {
})

render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>,
<MemoryRouter>
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<MainToolbar />
</StyleThemeProvider>
</ThemeProvider>
</MemoryRouter>,
)
const feedbackButton = screen.getByTestId('feedback-modal')
fireEvent.mouseOver(feedbackButton)
Expand Down
4 changes: 3 additions & 1 deletion src/components/App/MainToolbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { useModal } from '~/stores/useModalStore'
import { useUserStore } from '~/stores/useUserStore'
import { colors } from '~/utils/colors'
import { isSphinx } from '~/utils/isSphinx'
import { useNavigate } from 'react-router-dom'

export const MainToolbar = () => {
const { open: openSourcesModal } = useModal('sourcesTable')
Expand All @@ -20,6 +21,7 @@ export const MainToolbar = () => {
const { open: openSettingsModal } = useModal('settings')
const { open: openBlueprintModal } = useModal('blueprintGraph')
const { open: openFeedbackModal } = useModal('feedback')
const navigate = useNavigate()

const customSchemaFeatureFlag = useFeatureFlagStore((s) => s.customSchemaFeatureFlag)
const userFeedbackFeatureFlag = useFeatureFlagStore((s) => s.userFeedbackFeatureFlag)
Expand All @@ -29,7 +31,7 @@ export const MainToolbar = () => {

return (
<Wrapper>
<LogoButton>
<LogoButton onClick={() => navigate('/')}>
<img alt="Second brain" src="logo.svg" />
</LogoButton>
{isAdmin ? (
Expand Down
4 changes: 2 additions & 2 deletions src/components/App/SideBar/Dropdown/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { colors } from '~/utils/colors'

export const SelectWithPopover = () => {
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
const { sidebarFilter, setSidebarFilter, sidebarFilterCounts } = useDataStore((s) => s)
const currentFilter = sidebarFilter === 'undefined' ? '' : sidebarFilter.toLowerCase()
const { sidebarFilter, setSidebarFilter, sidebarFilterCounts = [] } = useDataStore((s) => s)
const currentFilter = (sidebarFilter ?? '').toLowerCase()
const currentFilterCount = sidebarFilterCounts.find((f) => f.name === currentFilter)?.count || 0

const capitalizeFirstLetter = (text: string): string => {
Expand Down
100 changes: 67 additions & 33 deletions src/components/App/SideBar/Trending/__tests__/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useAppStore } from '../../../../../stores/useAppStore'
import { useDataStore } from '../../../../../stores/useDataStore'
import { useModal } from '../../../../../stores/useModalStore'
import * as utils from '../../../../../utils/trending'
import { MemoryRouter } from 'react-router-dom'

jest.mock('~/components/Icons/SentimentDataIcon', () => jest.fn(() => <div data-testid="SentimentDataIcon" />))
jest.mock('~/components/Icons/PlayIcon', () => jest.fn(() => <div data-testid="PlayIcon" />))
Expand Down Expand Up @@ -53,18 +54,50 @@ describe('Trending Component', () => {
})

it('asserts that the component renders correctly', () => {
const { getByText, getByTestId } = render(<Trending />)
const { getByText, getByTestId } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

expect(getByText('Trending Topics')).toBeInTheDocument()
expect(getByTestId('SentimentDataIcon')).toBeInTheDocument()
;(async () => {
await waitFor(() => {
expect(getByText('Trending Topics')).toBeInTheDocument()
expect(getByTestId('SentimentDataIcon')).toBeInTheDocument()
})
})()
})

it('ensures that the "Add Content" button calls the openContentAddModal function', async () => {
const openContentAddModal = jest.fn()
mockedUseDataStore.mockReturnValue({ trendingTopics: [], setTrendingTopics: jest.fn() })

const { getByText, getByRole } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

;(async () => {
await waitFor(() => expect(getByText('No new trending topics in the last 24 hours')).toBeInTheDocument())
await waitFor(() => expect(getByRole('button', { name: 'Add Content' })).toBeInTheDocument())

fireEvent.click(getByRole('button', { name: 'Add Content' }))

expect(openContentAddModal).toHaveBeenCalled()
})()
})

it('verifies that the component fetches trending topics on mount and updates the state accordingly', () => {
const mockedSetTrendingTopics = jest.fn()

mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: mockedSetTrendingTopics })

render(<Trending />)
render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)
;(async () => {
await waitFor(() => {
expect(mockedGetTrends).toHaveBeenCalled()
Expand All @@ -76,7 +109,11 @@ describe('Trending Component', () => {
it('checks that the component renders a list of trending topics when data is available', () => {
mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: jest.fn() })

const { getByText } = render(<Trending />)
const { getByText } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

mockTrends.forEach(({ name }) => {
expect(getByText(`${name}`)).toBeInTheDocument()
Expand All @@ -86,7 +123,11 @@ describe('Trending Component', () => {
it('confirms the rendering of the BriefDescriptionModal when a TLDR button is clicked', () => {
mockedUseDataStore.mockReturnValue({ trendingTopics: [mockTrends[0]], setTrendingTopics: jest.fn() })

const { getByRole } = render(<Trending />)
const { getByRole } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

fireEvent.click(getByRole('button', { name: 'TLDR' }))

Expand All @@ -103,7 +144,11 @@ describe('Trending Component', () => {

jest.spyOn(utils, 'showPlayButton')

const { getByText, getByTestId, container } = render(<Trending />)
const { getByText, getByTestId, container } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

expect(getByText('Play All')).toBeInTheDocument()
expect(getByTestId('PlayIcon')).toBeInTheDocument()
Expand All @@ -120,7 +165,11 @@ describe('Trending Component', () => {

mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: mockedSelectTrendingTopic })

const { getByText } = render(<Trending />)
const { getByText } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

fireEvent.click(getByText(`${mockTrends[0].name}`))
;(async () => {
Expand All @@ -133,7 +182,11 @@ describe('Trending Component', () => {

mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: mockedSelectTrendingTopic })

const { getByText } = render(<Trending />)
const { getByText } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)

fireEvent.click(getByText(`${mockTrends[0].name}`))
;(async () => {
Expand All @@ -145,7 +198,11 @@ describe('Trending Component', () => {
})

test('Add tests to check that this scroll bar renders correctly', () => {
const { container } = render(<Trending />)
const { container } = render(
<MemoryRouter>
<Trending />
</MemoryRouter>,
)
const scrollbar = container.firstChild

// Assert that scrollbar exists
Expand All @@ -154,27 +211,4 @@ describe('Trending Component', () => {
// Assert that scrollbar has correct width
expect(scrollbar).toHaveStyle('width: 3')
})

it('ensures that the "Add Content" button calls the openContentAddModal function', () => {
mockedUseDataStore.mockReturnValue({ trendingTopics: [], setTrendingTopics: jest.fn() })

const loading = false

jest.spyOn(React, 'useState').mockImplementation(() => [loading, jest.fn()])

const { getByText, getByRole } = render(<Trending />)

expect(getByText('No new trending topics in the last 24 hours')).toBeInTheDocument()

expect(getByRole('button', { name: 'Add Content' })).toBeInTheDocument()

fireEvent.click(getByRole('button', { name: 'Add Content' }))

const { open: openAddContentMock } = mockedUseModal('addContent')

expect(mockedUseModal).toHaveBeenCalledWith('addContent')
;(async () => {
await waitFor(() => expect(openAddContentMock).toHaveBeenCalled())
})()
})
})
Loading

0 comments on commit 676e986

Please sign in to comment.