foreman-tasks 12.1.1 → 12.2.1

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.test.js

@@ -1,24 +1,48 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import TaskDetails from '../TaskDetails';
 import { minProps } from './TaskDetails.fixtures';
 
-const fixtures = {
-  'render with loading Props': { ...minProps, isLoading: true },
-  'render with error Props': {
-    ...minProps,
-    status: 'ERROR',
-    APIerror: { message: 'some-error' },
-  },
-  'render with min Props': minProps,
-};
-
 delete window.location;
 window.location = new URL(
   'https://foreman.com/foreman_tasks/tasks/a15dd820-32f1-4ced-9ab7-c0fab8234c47/'
 );
 
 describe('TaskDetails', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(TaskDetails, fixtures));
+  it('shows error message when status is ERROR', () => {
+    render(
+      <TaskDetails
+        {...minProps}
+        status="ERROR"
+        APIerror={{ message: 'some-error' }}
+      />
+    );
+    expect(
+      screen.getByText(/could not receive data: some-error/i)
+    ).toBeInTheDocument();
+  });
+
+  it('shows skeleton while loading on the Task tab', () => {
+    const { container } = render(<TaskDetails {...minProps} isLoading />);
+    expect(
+      container.querySelector('.react-loading-skeleton')
+    ).toBeInTheDocument();
+  });
+
+  it('renders six tabs with expected labels', () => {
+    render(<TaskDetails {...minProps} />);
+    expect(document.getElementById('task-details-tabs')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^task$/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: /running steps/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /errors/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /locks/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: /dependencies/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /raw/i })).toBeInTheDocument();
+  });
 });

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsActions.test.js

@@ -1,9 +1,12 @@
-import { testActionSnapshotWithFixtures } from '@theforeman/test';
 import {
   taskReloadStop,
   taskReloadStart,
   cancelStep,
 } from '../TaskDetailsActions';
+import {
+  FOREMAN_TASK_DETAILS,
+  TASK_STEP_CANCEL,
+} from '../TaskDetailsConstants';
 
 jest.mock('foremanReact/components/ToastsList', () => ({
   addToast: toast => ({
@@ -14,11 +17,53 @@ jest.mock('foremanReact/components/ToastsList', () => ({
   }),
 }));
 
-const fixtures = {
-  'should start reload': () => taskReloadStart(1),
-  'should stop reload': () => taskReloadStop(),
-  'should cancelStep': () => cancelStep('task-id', 'step-id'),
-};
+describe('TaskDetails - Actions', () => {
+  it('should stop reload', () => {
+    expect(taskReloadStop()).toEqual({
+      type: 'STOP_INTERVAL',
+      key: FOREMAN_TASK_DETAILS,
+    });
+  });
+
+  it('should start reload', () => {
+    const dispatch = jest.fn();
+    taskReloadStart(1)(dispatch);
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    const [action] = dispatch.mock.calls[0];
+    expect(action.type).toBe('API_GET');
+    expect(action.interval).toBe(5000);
+    expect(action.payload.key).toBe(FOREMAN_TASK_DETAILS);
+    expect(action.payload.url).toBe(
+      '/foreman_tasks/api/tasks/1/details?include_permissions'
+    );
+    expect(action.payload.handleSuccess).toEqual(expect.any(Function));
+    expect(action.payload.handleError).toEqual(expect.any(Function));
+  });
+
+  it('should cancelStep', async () => {
+    const dispatch = jest.fn();
+    await cancelStep('task-id', 'step-id')(dispatch);
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+
+    expect(dispatch.mock.calls[0][0]).toEqual({
+      type: 'TOASTS_ADD',
+      payload: {
+        message: {
+          message: 'Trying to cancel step step-id',
+          type: 'info',
+        },
+      },
+    });
 
-describe('TaskDetails - Actions', () =>
-  testActionSnapshotWithFixtures(fixtures));
+    const postAction = dispatch.mock.calls[1][0];
+    expect(postAction.type).toBe('API_POST');
+    expect(postAction.payload.key).toBe(TASK_STEP_CANCEL);
+    expect(postAction.payload.url).toBe(
+      '/foreman_tasks/tasks/task-id/cancel_step?step_id=step-id'
+    );
+    expect(postAction.payload.handleSuccess).toEqual(expect.any(Function));
+    expect(postAction.payload.handleError).toEqual(expect.any(Function));
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.test.js

@@ -1,11 +1,57 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from '../TasksDonutChart/TasksDonutChartConstants';
 
 import PausedTasksCard from './PausedTasksCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with some props': { some: 'prop' },
-};
+jest.mock('../TasksDonutChart/TasksDonutChart', () => {
+  const React = require('react');
+  const Stub = props => (
+    <div
+      data-testid="tasks-donut-chart-stub"
+      data-last={props.last}
+      data-older={props.older}
+      data-focused-on={props.focusedOn}
+    />
+  );
+  Stub.displayName = 'TasksDonutChart';
+  return Stub;
+});
+
+describe('PausedTasksCard', () => {
+  it('renders Paused title, card id, and chart area', () => {
+    render(<PausedTasksCard />);
+    expect(screen.getByText('Paused')).toBeInTheDocument();
+    expect(document.getElementById('paused-tasks-card')).toBeInTheDocument();
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '0');
+    expect(chart).toHaveAttribute('data-older', '0');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NORMAL
+    );
+  });
+
+  it('forwards extra props to the underlying donut card', () => {
+    const updateQuery = jest.fn();
+    render(
+      <PausedTasksCard
+        updateQuery={updateQuery}
+        data={{ last: 1, older: 2 }}
+        query={{ state: 'paused' }}
+      />
+    );
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '1');
+    expect(chart).toHaveAttribute('data-older', '2');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.TOTAL
+    );
 
-describe('PausedTasksCard', () =>
-  testComponentSnapshotsWithFixtures(PausedTasksCard, fixtures));
+    fireEvent.click(screen.getByText('Paused'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: 'paused' });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/RunningTasksCard/RunningTasksCard.test.js

@@ -1,11 +1,57 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from '../TasksDonutChart/TasksDonutChartConstants';
 
 import RunningTasksCard from './RunningTasksCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with some props': { some: 'prop' },
-};
+jest.mock('../TasksDonutChart/TasksDonutChart', () => {
+  const React = require('react');
+  const Stub = props => (
+    <div
+      data-testid="tasks-donut-chart-stub"
+      data-last={props.last}
+      data-older={props.older}
+      data-focused-on={props.focusedOn}
+    />
+  );
+  Stub.displayName = 'TasksDonutChart';
+  return Stub;
+});
+
+describe('RunningTasksCard', () => {
+  it('renders Running title, card id, and chart area', () => {
+    render(<RunningTasksCard />);
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    expect(document.getElementById('running-tasks-card')).toBeInTheDocument();
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '0');
+    expect(chart).toHaveAttribute('data-older', '0');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NORMAL
+    );
+  });
+
+  it('forwards extra props to the underlying donut card', () => {
+    const updateQuery = jest.fn();
+    render(
+      <RunningTasksCard
+        updateQuery={updateQuery}
+        data={{ last: 2, older: 4 }}
+        query={{ state: 'running' }}
+      />
+    );
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '2');
+    expect(chart).toHaveAttribute('data-older', '4');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.TOTAL
+    );
 
-describe('RunningTasksCard', () =>
-  testComponentSnapshotsWithFixtures(RunningTasksCard, fixtures));
+    fireEvent.click(screen.getByText('Running'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: 'running' });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card } from 'patternfly-react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -32,14 +32,15 @@ const ScheduledTasksCard = ({
       )}
       {...props}
       id="scheduled-tasks-card"
+      ouiaId="scheduled-tasks-card"
     >
-      <Card.Title onClick={onClick}>{__('Scheduled')}</Card.Title>
-      <Card.Body>
+      <CardTitle onClick={onClick}>{__('Scheduled')}</CardTitle>
+      <CardBody>
         <div className="scheduled-data" onClick={onClick}>
           {data}
           <p>{__('Total')}</p>
         </div>
-      </Card.Body>
+      </CardBody>
     </Card>
   );
 };

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.test.js

@@ -1,18 +1,48 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
 import ScheduledTasksCard from './ScheduledTasksCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with props': {
-    data: 3,
-    className: 'some-class',
-  },
-  'render selected': {
-    query: { state: TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.SCHEDULED },
-  },
-};
-
-describe('ScheduledTasksCard', () =>
-  testComponentSnapshotsWithFixtures(ScheduledTasksCard, fixtures));
+const { SCHEDULED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+
+describe('ScheduledTasksCard', () => {
+  it('renders scheduled count, labels, and card structure', () => {
+    render(<ScheduledTasksCard data={3} />);
+    expect(screen.getByText('Scheduled')).toBeInTheDocument();
+    expect(screen.getByText('Total')).toBeInTheDocument();
+    expect(document.getElementById('scheduled-tasks-card')).toBeInTheDocument();
+    expect(document.querySelector('.scheduled-data')?.textContent).toContain(
+      '3'
+    );
+  });
+
+  it('merges optional className onto the card', () => {
+    const { container } = render(
+      <ScheduledTasksCard className="extra-scheduled-class" />
+    );
+    expect(container.querySelector('.extra-scheduled-class')).toBeInTheDocument();
+  });
+
+  it('marks the card selected when query state is scheduled', () => {
+    const { container } = render(
+      <ScheduledTasksCard query={{ state: SCHEDULED }} />
+    );
+    expect(container.querySelector('#scheduled-tasks-card')).toHaveClass(
+      'selected-tasks-card'
+    );
+  });
+
+  it('calls updateQuery with scheduled state when title or data area is clicked', () => {
+    const updateQuery = jest.fn();
+    render(<ScheduledTasksCard updateQuery={updateQuery} />);
+
+    fireEvent.click(screen.getByText('Scheduled'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: SCHEDULED });
+
+    updateQuery.mockClear();
+    fireEvent.click(document.querySelector('.scheduled-data'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: SCHEDULED });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card } from 'patternfly-react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -38,11 +38,12 @@ const StoppedTasksCard = ({
       )}
       {...props}
       id="stopped-tasks-card"
+      ouiaId="stopped-tasks-card"
     >
-      <Card.Title onClick={() => updateQuery({ state: STOPPED })}>
+      <CardTitle onClick={() => updateQuery({ state: STOPPED })}>
         {__('Stopped')}
-      </Card.Title>
-      <Card.Body>
+      </CardTitle>
+      <CardBody>
         <React.Fragment>
           <StoppedTable
             data={data.results}
@@ -56,7 +57,7 @@ const StoppedTasksCard = ({
             query={query}
           />
         </React.Fragment>
-      </Card.Body>
+      </CardBody>
     </Card>
   );
 };

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/TasksDonutCard/TasksDonutCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Card } from 'patternfly-react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import { noop } from 'foremanReact/common/helpers';
 
 import {
@@ -42,9 +42,10 @@ const TasksDonutCard = ({
         'not-focused': focusedOn === TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NONE,
       })}
       {...props}
+      ouiaId="tasks-donut-card"
     >
-      <Card.Title onClick={onTotalClick}>{title}</Card.Title>
-      <Card.Body>
+      <CardTitle onClick={onTotalClick}>{title}</CardTitle>
+      <CardBody className="card-pf-body">
         <TasksDonutChart
           last={data.last}
           older={data.older}
@@ -66,7 +67,7 @@ const TasksDonutCard = ({
             })
           }
         />
-      </Card.Body>
+      </CardBody>
     </Card>
   );
 };

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/TasksDonutCard/TasksDonutCard.scss

@@ -1,22 +1,17 @@
 .tasks-donut-card {
   &.not-focused {
-    .card-pf-title,
+    .pf-v5-c-card__title-text,
     .card-pf-body {
       opacity: 0.6;
     }
   }
-  .card-pf-title {
+  .pf-v5-c-card__title-text {
     text-align: center;
-    font-size: 180%;
     cursor: pointer;
   }
 
-  .card-pf-body {
-    padding-left: 15px;
-  }
-
   &.selected-tasks-card {
-    .card-pf-title {
+    .pf-v5-c-card__title-text {
       font-weight: bold;
     }
   }

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/TasksDonutCard/TasksDonutCard.test.js

@@ -1,4 +1,6 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import {
   TASKS_DASHBOARD_AVAILABLE_TIMES,
@@ -6,38 +8,77 @@ import {
 } from '../../../../TasksDashboardConstants';
 import TasksDonutCard from './TasksDonutCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with props': {
-    title: 'some title',
-    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    wantedQueryState: 'some-state',
-    className: 'some-classname',
+jest.mock('../TasksDonutChart/TasksDonutChart', () => {
+  const React = require('react');
+  const Stub = props => (
+    <div
+      data-testid="tasks-donut-chart-stub"
+      data-focused-on={props.focusedOn}
+      data-time={props.time}
+    />
+  );
+  Stub.displayName = 'TasksDonutChart';
+  return Stub;
+});
+
+describe('TasksDonutCard', () => {
+  const baseProps = {
+    title: 'Card title',
+    wantedQueryState: 'running',
     data: { last: 3, older: 5 },
-  },
-  'render with total selected': {
-    wantedQueryState: 'some-state',
-    query: { state: 'some-state' },
-  },
-  'render with last selected': {
-    wantedQueryState: 'some-state',
-    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    query: {
-      state: 'some-state',
-      mode: TASKS_DASHBOARD_AVAILABLE_QUERY_MODES.LAST,
-      time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    },
-  },
-  'render with older selected': {
-    wantedQueryState: 'some-state',
     time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    query: {
-      state: 'some-state',
-      mode: TASKS_DASHBOARD_AVAILABLE_QUERY_MODES.OLDER,
-      time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    },
-  },
-};
-
-describe('TasksDonutCard', () =>
-  testComponentSnapshotsWithFixtures(TasksDonutCard, fixtures));
+  };
+
+  it('renders title and wires chart stub with time and focus from query', () => {
+    render(
+      <TasksDonutCard
+        {...baseProps}
+        query={{ state: 'running', mode: TASKS_DASHBOARD_AVAILABLE_QUERY_MODES.LAST, time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK }}
+      />
+    );
+    expect(screen.getByText('Card title')).toBeInTheDocument();
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-focused-on', 'last');
+  });
+
+  it('clicking the title requests the wanted query state', () => {
+    const updateQuery = jest.fn();
+    render(<TasksDonutCard {...baseProps} updateQuery={updateQuery} />);
+    fireEvent.click(screen.getByText('Card title'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: 'running' });
+  });
+
+  it('applies selected styling when this card state matches the query (total focus)', () => {
+    const { container } = render(
+      <TasksDonutCard {...baseProps} query={{ state: 'running' }} />
+    );
+    expect(container.querySelector('.tasks-donut-card')).toHaveClass(
+      'selected-tasks-card'
+    );
+  });
+
+  it('applies not-focused when another dashboard state is active', () => {
+    const { container } = render(
+      <TasksDonutCard {...baseProps} query={{ state: 'paused' }} />
+    );
+    expect(container.querySelector('.tasks-donut-card')).toHaveClass(
+      'not-focused'
+    );
+  });
+
+  it('merges className onto the card', () => {
+    const { container } = render(
+      <TasksDonutCard {...baseProps} className="extra-donut" />
+    );
+    expect(container.querySelector('.tasks-donut-card')).toHaveClass(
+      'extra-donut'
+    );
+  });
+
+  it('does not mark the card selected or dimmed when the query is empty', () => {
+    const { container } = render(<TasksDonutCard {...baseProps} query={{}} />);
+    const card = container.querySelector('.tasks-donut-card');
+    expect(card).not.toHaveClass('selected-tasks-card');
+    expect(card).not.toHaveClass('not-focused');
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/TasksDonutChart/TasksDonutChart.test.js

@@ -1,40 +1,63 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY } from './TasksDonutChartConstants';
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from './TasksDonutChartConstants';
 import TasksDonutChart from './TasksDonutChart';
 
-jest.mock('./TasksDonutChartHelper', () => ({
-  shouleBeSelected: focusedOn => focusedOn !== 'normal' && focusedOn !== 'none',
-  getBaseChartConfig: jest.fn(() => ({ base: 'some-base-config' })),
-  createChartData: jest.fn(() => ({
-    columns: 'some-columns',
-    names: 'some-names',
-    onItemClick: jest.fn(),
-  })),
-  updateChartTitle: jest.fn(),
-}));
-
-const createRequiredProps = () => ({ last: 3, older: 5 });
-
-const fixtures = {
-  'render with minimal props': { ...createRequiredProps() },
-  'render with props': {
-    ...createRequiredProps(),
-    className: 'some-class',
-    time: 'time-period',
-    colorsPattern: ['color1', 'color2'],
-    onTotalClick: jest.fn(),
-    onLastClick: jest.fn(),
-    onOlderClick: jest.fn(),
-  },
-};
-
-TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY.forEach(mode => {
-  fixtures[`render with focused-on ${mode}`] = {
-    ...createRequiredProps(),
-    focusedOn: mode,
+jest.mock('./TasksDonutChartHelper', () => {
+  const actual = jest.requireActual('./TasksDonutChartHelper');
+  return {
+    ...actual,
+    getBaseChartConfig: jest.fn(() => ({ mockBase: true })),
+    updateChartTitle: jest.fn(),
+    assignExtraChartEvents: jest.fn(),
+    clearExtraChartEvents: jest.fn(),
   };
 });
 
-describe('TasksDonutChart', () =>
-  testComponentSnapshotsWithFixtures(TasksDonutChart, fixtures));
+jest.mock('../../../../../../Components/Chart/Chart', () => {
+  const React = require('react');
+  return class MockChart extends React.Component {
+    componentDidMount() {
+      this.props.onChartCreate?.({
+        element: {},
+        focus: jest.fn(),
+        revert: jest.fn(),
+      });
+    }
+
+    render() {
+      return <div data-testid="chart-root" className={this.props.className} />;
+    }
+  };
+});
+
+const { NORMAL, TOTAL } = TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS;
+
+describe('TasksDonutChart', () => {
+  const required = { last: 3, older: 5 };
+
+  it('renders a chart with donut classes', () => {
+    render(<TasksDonutChart {...required} />);
+    const root = screen.getByTestId('chart-root');
+    expect(root).toHaveClass('donut-chart-pf', 'tasks-donut-chart');
+  });
+
+  it('adds selection class when focusedOn is not normal or none', () => {
+    render(<TasksDonutChart {...required} focusedOn={TOTAL} />);
+    expect(screen.getByTestId('chart-root')).toHaveClass('tasks-donut-selected');
+  });
+
+  it('does not add selection class in normal focus', () => {
+    render(<TasksDonutChart {...required} focusedOn={NORMAL} />);
+    expect(screen.getByTestId('chart-root')).not.toHaveClass(
+      'tasks-donut-selected'
+    );
+  });
+
+  it('merges custom className', () => {
+    render(<TasksDonutChart {...required} className="custom-chart" />);
+    expect(screen.getByTestId('chart-root')).toHaveClass('custom-chart');
+  });
+});