foreman-tasks 12.1.0 → 12.2.1

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

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Tab, Tabs } from 'patternfly-react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import MessageBox from 'foremanReact/components/common/MessageBox';
@@ -31,6 +31,7 @@ const TaskDetails = ({
 }) => {
   const id = getTaskID();
   const { taskReload, status, isLoading } = props;
+  const [activeTabKey, setActiveTabKey] = useState(1);
 
   useEffect(() => {
     taskReloadStart(id);
@@ -58,27 +59,42 @@ const TaskDetails = ({
   }
   const resumable = executionPlan ? executionPlan.state === 'paused' : false;
   const cancellable = executionPlan ? executionPlan.cancellable : false;
+  const lockRecords = locks.concat(links);
+
+  const taskComponentProps = {
+    ...props,
+    cancellable,
+    resumable,
+    id,
+    status,
+    taskProgressToggle,
+    taskReloadStart,
+  };
+
   return (
     <div className="task-details-react well">
-      <Tabs defaultActiveKey={1} animation={false} id="task-details-tabs">
-        <Tab eventKey={1} title={__('Task')}>
-          {isLoading ? (
-            <TaskSkeleton />
-          ) : (
-            <Task
-              {...{
-                ...props,
-                cancellable,
-                resumable,
-                id,
-                status,
-                taskProgressToggle,
-                taskReloadStart,
-              }}
-            />
-          )}
+      <Tabs
+        id="task-details-tabs"
+        ouiaId="task-details-tabs"
+        activeKey={activeTabKey}
+        onSelect={(_event, tabKey) => setActiveTabKey(tabKey)}
+        mountOnEnter
+      >
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>{__('Task')}</TabTitleText>}
+          aria-label={__('Task')}
+          ouiaId="task-details-tab-task"
+        >
+          {isLoading ? <TaskSkeleton /> : <Task {...taskComponentProps} />}
         </Tab>
-        <Tab eventKey={2} disabled={isLoading} title={__('Running Steps')}>
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>{__('Running Steps')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Running Steps')}
+          ouiaId="task-details-tab-running-steps"
+        >
           <RunningSteps
             runningSteps={runningSteps}
             id={id}
@@ -87,16 +103,40 @@ const TaskDetails = ({
             taskReloadStart={taskReloadStart}
           />
         </Tab>
-        <Tab eventKey={3} disabled={isLoading} title={__('Errors')}>
+        <Tab
+          eventKey={3}
+          title={<TabTitleText>{__('Errors')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Errors')}
+          ouiaId="task-details-tab-errors"
+        >
           <Errors executionPlan={executionPlan} failedSteps={failedSteps} />
         </Tab>
-        <Tab eventKey={4} disabled={isLoading} title={__('Locks')}>
-          <Locks locks={locks.concat(links)} />
+        <Tab
+          eventKey={4}
+          title={<TabTitleText>{__('Locks')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Locks')}
+          ouiaId="task-details-tab-locks"
+        >
+          <Locks locks={lockRecords} />
         </Tab>
-        <Tab eventKey={5} disabled={isLoading} title={__('Dependencies')}>
+        <Tab
+          eventKey={5}
+          title={<TabTitleText>{__('Dependencies')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Dependencies')}
+          ouiaId="task-details-tab-dependencies"
+        >
           <Dependencies dependsOn={dependsOn} blocks={blocks} />
         </Tab>
-        <Tab eventKey={6} disabled={isLoading} title={__('Raw')}>
+        <Tab
+          eventKey={6}
+          title={<TabTitleText>{__('Raw')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Raw')}
+          ouiaId="task-details-tab-raw"
+        >
           <Raw
             id={id}
             label={props.label}

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;
     }
   }