Skip to content

Commit

Permalink
💚 ✔️ fix lineChartSettings test
Browse files Browse the repository at this point in the history
  • Loading branch information
kunkoala committed Nov 21, 2024
1 parent e3b5c60 commit 92c18e3
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ describe('LineChartSettings', () => {
const settingsButton = screen.getByTestId('settings-popover-button-testid');
await userEvent.click(settingsButton);

expect(screen.getByText('Horizontal Threshold Settings')).toBeInTheDocument();
expect(screen.getByTestId('settings-menu-item-horizontalThreshold')).toBeInTheDocument();
});

test('Navigates to all menu item in popover', async () => {
Expand All @@ -66,35 +66,25 @@ describe('LineChartSettings', () => {
await userEvent.click(settingsButton);

// add more menus here
const menuItems = ['Horizontal Threshold Settings'];

for (const menuItem of menuItems) {
await userEvent.click(screen.getByText(menuItem));
expect(screen.getByText(menuItem)).toBeInTheDocument();
const menuItemsTestId = [
{
settingsMenu: 'settings-menu-item-horizontalThreshold',
menuContainer: 'horizontalThresholdSettings-setting-container',
},
// add more menus here
];
for (const menuItem of menuItemsTestId) {
await userEvent.click(screen.getByTestId(menuItem.settingsMenu));
expect(screen.getByTestId(menuItem.menuContainer)).toBeInTheDocument();

const backButton = screen.getByTestId('settings-back-button');
await userEvent.click(backButton);

// Ensure we're back at the main settings menu
expect(screen.getByText('Line Chart Settings')).toBeInTheDocument();
expect(screen.getByTestId('main-settings-menu')).toBeInTheDocument();
}
});

test('Displays the settings main menu when back button is clicked from any menu', async () => {
render(<LineChartSettingsTest />);
const settingsButton = screen.getByTestId('settings-popover-button-testid');
await userEvent.click(settingsButton);

const thresholdSettingsButton = screen.getByText('Horizontal Threshold Settings');
await userEvent.click(thresholdSettingsButton);

const backButton = screen.getByTestId('settings-back-button');
await userEvent.click(backButton);

const settingsHeader = screen.getByText('Line Chart Settings');
expect(settingsHeader).toBeInTheDocument();
});

test('closes the popover when close button is clicked', async () => {
render(<LineChartSettingsTest />);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,10 @@ export function LineChartSettings({
};

const renderHeader = (title: string) => (
<Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginY: '1rem'}}>
<Box
sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginY: '1rem'}}
data-testid={`${currentView}-setting-container`}
>
<IconButton onClick={() => handleBackButton()} disabled={currentView === 'settingsMenu'}>
<ArrowBackIosNewIcon fontSize='small' data-testid='settings-back-button' />
</IconButton>
Expand Down Expand Up @@ -142,13 +145,17 @@ export function LineChartSettings({
}}
>
{currentView === 'settingsMenu' && (
<Box p={4}>
<Box p={4} data-testid='main-settings-menu'>
{renderHeader(tSettings('title'))}
{Object.entries(settingsMenu).map(([key, item]) => (
<>
<Divider sx={{marginY: 2}} />
<Box>
<Button key={key} onClick={() => handleNavigate(item.view as SettingsView)}>
<Button
key={key}
data-testid={`settings-menu-item-${key}`}
onClick={() => handleNavigate(item.view as SettingsView)}
>
<Box
sx={{
display: 'flex',
Expand Down

0 comments on commit 92c18e3

Please sign in to comment.