Skip to content

Commit

Permalink
✔️ Fix tests
Browse files Browse the repository at this point in the history
  • Loading branch information
emilijadunoska committed Aug 8, 2024
1 parent c10aef6 commit c4b7bcd
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 125 deletions.
20 changes: 12 additions & 8 deletions frontend/src/__tests__/components/Onboarding/InfoButton.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,17 @@ import {Provider} from 'react-redux';
import React from 'react';
import InfoButton from '../../../components/OnboardingComponents/InfoButton';
import {setShowTooltip} from '../../../store/UserOnboardingSlice';
import {ThemeProvider} from '@mui/system';
import Theme from 'util/Theme';

describe('InfoButton', () => {
const renderComponent = () => {
render(
<Provider store={Store}>
<InfoButton />
</Provider>
<ThemeProvider theme={Theme}>
<Provider store={Store}>
<InfoButton />
</Provider>
</ThemeProvider>
);
};

Expand All @@ -29,15 +33,15 @@ describe('InfoButton', () => {
await waitFor(() => expect(screen.getByLabelText('tooltip-info-button')).toBeInTheDocument());
});

test('opens popover when the info button is clicked', () => {
test('popover is not open if not clicked', () => {
renderComponent();
fireEvent.click(screen.getByLabelText('tooltip-info-button'));
expect(screen.getByLabelText('popover')).toBeInTheDocument();
expect(screen.queryByLabelText('popover')).not.toBeInTheDocument();
});

test('popover is not open if not clicked', () => {
test('opens popover when the info button is clicked', () => {
renderComponent();
expect(screen.queryByLabelText('popover')).not.toBeInTheDocument();
fireEvent.click(screen.getByLabelText('tooltip-info-button'));
expect(screen.getByLabelText('popover')).toBeInTheDocument();
});

test('closes popover when close button is clicked', async () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
// SPDX-License-Identifier: Apache-2.0

import {render, screen} from '@testing-library/react';
import {describe, test, expect} from 'vitest';
import React, {useState} from 'react';
import {ThemeProvider} from '@mui/system';
import Theme from 'util/Theme';
import TopBarPopover from 'components/OnboardingComponents/TopBarPopover';
import {Provider} from 'react-redux';
import {Store} from '../../../store';

type TopBarPopoverTestProps = {
allToursCompletedProp?: boolean;
};

const TopBarPopoverTest: React.FC<TopBarPopoverTestProps> = ({allToursCompletedProp = false}) => {
const [anchorEl] = useState<HTMLElement | null>(document.createElement('div'));
const [open, setOpen] = useState(true);

const onClose = () => setOpen(false);
const allToursCompleted = allToursCompletedProp;
const completedTours = allToursCompleted ? 5 : 2;
const totalTours = 5;

return (
<ThemeProvider theme={Theme}>
<Provider store={Store}>
<TopBarPopover
anchorEl={anchorEl}
open={open}
onClose={onClose}
allToursCompleted={allToursCompleted}
completedTours={completedTours}
totalTours={totalTours}
/>
</Provider>
</ThemeProvider>
);
};
describe('TopBarPopover', () => {
test('renders the popover with the correct content', () => {
render(<TopBarPopoverTest />);

expect(screen.getByTestId('popover-testid')).toBeInTheDocument();
expect(screen.getByText('getStarted')).toBeInTheDocument();
expect(screen.getByText('getStartedContent')).toBeInTheDocument();

const progressBar = screen.getByRole('progressbar');
expect(progressBar).toHaveAttribute('aria-valuenow', '40'); // two out of five tours completed is 40%
expect(screen.getByText('40% completed')).toBeInTheDocument();
});

test('displays the correct content when all tours are completed', () => {
render(<TopBarPopoverTest allToursCompletedProp={true} />);

expect(screen.getByText('completedTours')).toBeInTheDocument();
expect(screen.getByText('completedToursContent')).toBeInTheDocument();
});
});
34 changes: 0 additions & 34 deletions frontend/src/__tests__/components/Onboarding/TourChips.test.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
// SPDX-License-Identifier: Apache-2.0

import {render, fireEvent, screen} from '@testing-library/react';
import {describe, test, expect} from 'vitest';
import {Store} from '../../../store';
import {I18nextProvider} from 'react-i18next';
import i18n from '../../../util/i18nForTests';
import {Provider} from 'react-redux';
import React, {Suspense} from 'react';
import WelcomeDialog from '../../../components/OnboardingComponents/WelcomeDialog';
import {ThemeProvider} from '@mui/system';
import Theme from 'util/Theme';

describe('WelcomeDialog', () => {
const renderComponent = () => {
render(
<ThemeProvider theme={Theme}>
<Provider store={Store}>
<I18nextProvider i18n={i18n}>
<Suspense>
<WelcomeDialog />
</Suspense>
</I18nextProvider>
</Provider>
</ThemeProvider>
);
};

test('renders correctly when the user is a first time user', () => {
renderComponent();
expect(screen.getByLabelText('welcome-modal')).toBeInTheDocument();
});

test('goes to the next slide when forward arrow is clicked', () => {
renderComponent();
const arrowForwardButton = screen.getByTestId('arrow-forward-button');
fireEvent.click(arrowForwardButton);

expect(screen.getByText('welcomeModalSlides.slide2.title')).toBeInTheDocument();
});

test('goes to the previous slide when back arrow is clicked', () => {
renderComponent();
fireEvent.click(screen.getByTestId('arrow-forward-button'));
fireEvent.click(screen.getByTestId('arrow-backward-button'));

expect(screen.getByText('welcomeModalSlides.slide1.title')).toBeInTheDocument();
});

test('does not render if close button is clicked', () => {
renderComponent();
fireEvent.click(screen.getByTestId('CloseIcon'));
expect(screen.queryByLabelText('welcome-modal')).not.toBeInTheDocument();
});
});
68 changes: 0 additions & 68 deletions frontend/src/__tests__/components/Onboarding/WelcomeModal.test.tsx

This file was deleted.

65 changes: 52 additions & 13 deletions frontend/src/__tests__/store/UserOnboardingSlice.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@
// SPDX-License-Identifier: Apache-2.0

import {describe, test, expect} from 'vitest';
import userOnboardingReducer, {setTourCompleted, setShowTooltip, UserOnboarding} from '../../store/UserOnboardingSlice';
import userOnboardingReducer, {
setTourCompleted,
setShowTooltip,
UserOnboarding,
setActiveTour,
setShowWelcomeDialog,
setShowPopover,
setIsFilterDialogOpen,
setIsParametersTabClicked,
} from '../../store/UserOnboardingSlice';
import {TourType} from 'types/tours';

describe('userOnboardingSlice', () => {
Expand All @@ -12,46 +21,76 @@ describe('userOnboardingSlice', () => {
scenario: null,
lineChart: null,
filter: null,
parameters: null,
},
activeTour: null,
allToursCompleted: false,
showTooltip: false,
showWelcomeDialog: true,
showPopover: false,
isFilterDialogOpen: false,
isParametersTabClicked: false,
};

test('initial state', () => {
expect(userOnboardingReducer(undefined, {type: ''})).toEqual(initialState);
});

test('setActiveTour updates the active tour', () => {
const tourType: TourType = 'scenario';
const newState = userOnboardingReducer(initialState, setActiveTour(tourType));

expect(newState.activeTour).toEqual(tourType);
});

test('complete all onboarding tours', () => {
let newState = userOnboardingReducer(initialState, setTourCompleted({tour: 'districtMap', completed: true}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'scenario', completed: true}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'lineChart', completed: true}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'filter', completed: true}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'parameters', completed: true}));

expect(newState.tours.districtMap).toEqual(true);
expect(newState.tours.scenario).toEqual(true);
expect(newState.tours.lineChart).toEqual(true);
expect(newState.tours.filter).toEqual(true);
expect(newState.allToursCompleted).toEqual(true);
});

test('skip all onboarding tours', () => {
let newState = userOnboardingReducer(initialState, setTourCompleted({tour: 'districtMap', completed: false}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'scenario', completed: false}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'lineChart', completed: false}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'filter', completed: false}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'parameters', completed: false}));

expect(newState.tours.districtMap).toEqual(false);
expect(newState.tours.scenario).toEqual(false);
expect(newState.tours.lineChart).toEqual(false);
expect(newState.tours.filter).toEqual(false);
expect(newState.allToursCompleted).toEqual(false);
});

test('complete only districtMap tour', () => {
const tourType: TourType = 'districtMap';
const newState = userOnboardingReducer(initialState, setTourCompleted({tour: tourType, completed: true}));
expect(newState.tours.districtMap).toEqual(true);
test('partial completion of the tour does not set allToursCompleted to true', () => {
let newState = userOnboardingReducer(initialState, setTourCompleted({tour: 'districtMap', completed: true}));
newState = userOnboardingReducer(newState, setTourCompleted({tour: 'scenario', completed: true}));
expect(newState.allToursCompleted).toEqual(false);
});

test('set showTooltip to true', () => {
const newState = userOnboardingReducer(initialState, setShowTooltip(true));
expect(newState.showTooltip).toEqual(true);
});

test('set showWelcomeDialog to false', () => {
const newState = userOnboardingReducer(initialState, setShowWelcomeDialog(false));
expect(newState.showWelcomeDialog).toEqual(false);
});

test('set showPopover to true', () => {
const newState = userOnboardingReducer(initialState, setShowPopover(true));
expect(newState.showPopover).toEqual(true);
});

test('set isFilterDialogOpen to true', () => {
const newState = userOnboardingReducer(initialState, setIsFilterDialogOpen(true));
expect(newState.isFilterDialogOpen).toEqual(true);
});

test('set isParametersTabClicked to true', () => {
const newState = userOnboardingReducer(initialState, setIsParametersTabClicked(true));
expect(newState.isParametersTabClicked).toEqual(true);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,15 @@ export default function TopBarPopover(props: TopBarPopoverProps): JSX.Element {
</Box>
<IconButton
aria-label='close-info-button'
test-id='close-info-button'
onClick={props.onClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
}}
>
<CloseIcon />
<CloseIcon test-id='close-info-button' />
</IconButton>
<Box mt={4}>
<TourChips />
Expand Down
Loading

0 comments on commit c4b7bcd

Please sign in to comment.