diff --git a/frontend/src/userOnboarding/__tests__/TourComponent.test.js b/frontend/src/userOnboarding/__tests__/TourComponent.test.js
index 3ef3728e8..13d1f2344 100644
--- a/frontend/src/userOnboarding/__tests__/TourComponent.test.js
+++ b/frontend/src/userOnboarding/__tests__/TourComponent.test.js
@@ -1,83 +1,130 @@
import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
import { TourComponent } from '../components/TourComponent'
import { useTour } from '../hooks/useTour'
-
-jest.mock('../hooks/useTour')
+import { MockedProvider } from '@apollo/client/testing'
+import { UserVarProvider } from '../../utilities/userState'
+import { makeVar } from '@apollo/client'
+import { I18nProvider } from '@lingui/react'
+import { ChakraProvider, theme } from '@chakra-ui/react'
+import { MemoryRouter } from 'react-router-dom'
+import { TourProvider } from '../contexts/TourContext'
+import { setupI18n } from '@lingui/core'
+import { en } from 'make-plural'
+import { fireEvent, screen } from '@testing-library/dom'
+
+const i18n = setupI18n({
+ locale: 'en',
+ messages: {
+ en: {},
+ },
+ localeData: {
+ en: { plurals: en },
+ },
+})
jest.mock('../config/tourSteps', () => ({
mainTourSteps: {
- home: {
+ landingPage: {
requiresAuth: false,
steps: [
{
target: '.step-1',
- content: 'Home Step 1',
+ content: 'Landing Step 1',
+ disableBeacon: true,
},
{
target: '.step-2',
- content: 'Home Step 2',
+ content: 'Landing Step 2',
+ disableBeacon: true,
},
],
},
},
}))
-// Mock the Joyride component
-jest.mock('react-joyride', () => {
- const tourSteps = require('../config/tourSteps').mainTourSteps['home']['steps']
- const MockJoyride = () =>
Mocked Joyride with steps: {JSON.stringify(tourSteps)}
- MockJoyride.displayName = 'MockJoyride'
- return MockJoyride
-})
+describe('TourComponent', () => {
+ afterEach(() => {
+ localStorage.clear()
+ })
-const mockLocalStorage = (() => {
- let store = {}
- return {
- getItem(key) {
- return store[key] || null
- },
- setItem(key, value) {
- store[key] = value.toString()
- },
- removeItem(key) {
- delete store[key]
- },
- clear() {
- store = {}
- },
- }
-})()
+ it('renders the mocked landing page tour for users who have not seen it', async () => {
+ expect(localStorage.getItem('hasSeenTour_landingPage')).toBe(null)
+
+ const { getByText, getByRole, queryByText } = render(
+
+
+
+
+
+
+
+ Test 1
+ Test 2
+
+
+
+
+
+ ,
+ )
+
+ // Element will exist but not be visible
+ expect(getByText(/Landing Step 1/)).not.toBeNull()
+
+ await waitFor(() => {
+ expect(getByText(/Landing Step 1/)).toBeVisible()
+ })
-describe('TourComponent', () => {
- beforeEach(() => {
- useTour.mockReturnValue({
- isTourOpen: false,
- startTour: jest.fn(),
- endTour: jest.fn(),
+ let nextBtn = getByRole('button', { name: /Next/ })
+
+ expect(nextBtn).toBeInTheDocument()
+
+ fireEvent.click(nextBtn)
+
+ await waitFor(() => {
+ expect(getByText(/Landing Step 2/)).toBeVisible()
})
- mockLocalStorage.clear()
- // Replace the real localStorage with our mock
- Object.defineProperty(window, 'localStorage', { value: mockLocalStorage })
- })
- afterEach(() => {
- jest.clearAllMocks()
- })
+ nextBtn = getByRole('button', { name: /Finish/ })
- test('TourComponent renders with mock Joyride', () => {
- render()
- expect(screen.getByTestId('mockJoyride')).toBeInTheDocument()
- })
+ expect(nextBtn).toBeInTheDocument()
- it('does not start the tour for users who have seen it', () => {
- localStorage.setItem('hasSeenTour_home', 'true')
- const mockStartTour = jest.fn()
- useTour.mockReturnValue({ isTourOpen: false, startTour: mockStartTour, endTour: jest.fn() })
+ fireEvent.click(nextBtn)
- render()
+ await waitFor(() => {
+ expect(queryByText(/Landing Step 2/)).toBeNull()
+ })
+
+ // Ensure that the tour has been marked as seen
+ expect(localStorage.getItem('hasSeenTour_landingPage')).toBe('true')
+ })
- expect(mockStartTour).not.toHaveBeenCalled()
+ it('does not render the tour for users who have seen it', async () => {
+ localStorage.setItem('hasSeenTour_landingPage', 'true')
+
+ expect(localStorage.getItem('hasSeenTour_landingPage')).toBe('true')
+
+ const { queryByText } = render(
+
+
+
+
+
+
+
+ Test 1
+ Test 2
+
+
+
+
+
+ ,
+ )
+
+ // Element should not exist
+ expect(queryByText(/Landing Step 1/)).toBeNull()
})
})