foreman-tasks 12.1.1 → 12.2.2

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');
+  });
+});

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

@@ -99,15 +99,29 @@ describe('TasksDonutChartHelper', () => {
   });
 
   it('should create chart-data', () => {
-    expect(
-      createChartData({
-        last: 1,
-        older: 3,
-        time: '24h',
-        onLastClick: jest.fn(),
-        onOlderClick: jest.fn(),
-      })
-    ).toMatchSnapshot();
+    const onLastClick = jest.fn();
+    const onOlderClick = jest.fn();
+    const result = createChartData({
+      last: 1,
+      older: 3,
+      time: '24h',
+      onLastClick,
+      onOlderClick,
+    });
+
+    expect(result.columns).toEqual([
+      [LAST, 1],
+      [OLDER, 3],
+    ]);
+    expect(result.names[LAST]).toMatch(/1/);
+    expect(result.names[LAST]).toMatch(/24h/);
+    expect(result.names[OLDER]).toMatch(/3/);
+    expect(result.names[OLDER]).toMatch(/24h/);
+
+    result.onItemClick(LAST);
+    expect(onLastClick).toHaveBeenCalledTimes(1);
+    result.onItemClick(OLDER);
+    expect(onOlderClick).toHaveBeenCalledTimes(1);
   });
 
   it('should update chart-title', () => {

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

@@ -8,18 +8,21 @@ export const MOCKED_DATA = {
     older: 5,
   },
   stopped: {
-    error: {
-      total: 8,
-      last: 1,
-    },
-    warning: {
-      total: 20,
-      last: 2,
-    },
-    success: {
-      total: 25,
-      last: 3,
+    results: {
+      error: {
+        total: 8,
+        last: 1,
+      },
+      warning: {
+        total: 20,
+        last: 2,
+      },
+      success: {
+        total: 25,
+        last: 3,
+      },
     },
+    other: 0,
   },
   scheduled: 1,
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CardGrid } from 'patternfly-react';
+import { Grid, GridItem } from '@patternfly/react-core';
 import { noop } from 'foremanReact/common/helpers';
 
 import RunningTasksCard from './Components/RunningTasksCard/RunningTasksCard';
@@ -15,26 +15,24 @@ import {
 import { timePropType, queryPropType } from '../../TasksDashboardPropTypes';
 
 const TasksCardsGrid = ({ time, query, data, updateQuery }) => (
-  <CardGrid matchHeight fluid>
-    <CardGrid.Row>
-      {[
-        [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING, RunningTasksCard],
-        [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.PAUSED, PausedTasksCard],
-        [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.STOPPED, StoppedTasksCard],
-        [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.SCHEDULED, ScheduledTasksCard],
-      ].map(([key, Card]) => (
-        <CardGrid.Col key={key}>
-          <Card
-            matchHeight
-            data={data[key]}
-            query={query}
-            time={time}
-            updateQuery={updateQuery}
-          />
-        </CardGrid.Col>
-      ))}
-    </CardGrid.Row>
-  </CardGrid>
+  <Grid hasGutter className="tasks-cards-grid">
+    {[
+      [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING, RunningTasksCard],
+      [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.PAUSED, PausedTasksCard],
+      [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.STOPPED, StoppedTasksCard],
+      [TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.SCHEDULED, ScheduledTasksCard],
+    ].map(([key, Card]) => (
+      <GridItem key={key} sm={12} xl={6} xl2={3}>
+        <Card
+          isFullHeight
+          data={data[key]}
+          query={query}
+          time={time}
+          updateQuery={updateQuery}
+        />
+      </GridItem>
+    ))}
+  </Grid>
 );
 
 TasksCardsGrid.propTypes = {

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

@@ -1,5 +1,6 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import {
   TASKS_DASHBOARD_AVAILABLE_TIMES,
   TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
@@ -7,15 +8,63 @@ import {
 import { MOCKED_DATA } from './TasksCardsGrid.fixtures';
 import TasksCardsGrid from './TasksCardsGrid';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with props': {
-    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    query: { state: TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING },
-    data: MOCKED_DATA,
-    updateQuery: jest.fn(),
-  },
-};
-
-describe('TasksCardsGrid', () =>
-  testComponentSnapshotsWithFixtures(TasksCardsGrid, fixtures));
+jest.mock('./Components/TasksDonutChart/TasksDonutChart', () => {
+  const React = require('react');
+  const Stub = () => <div data-testid="tasks-donut-chart-stub" />;
+  Stub.displayName = 'TasksDonutChart';
+  return Stub;
+});
+
+describe('TasksCardsGrid layout', () => {
+  it('uses PatternFly Grid with gutter and four responsive columns', () => {
+    const { container } = render(<TasksCardsGrid />);
+    const grid = container.querySelector('.tasks-cards-grid');
+    expect(grid).toBeInTheDocument();
+
+    const items = Array.from(grid.children);
+    expect(items).toHaveLength(4);
+
+    items.forEach(item => {
+      expect(item).toHaveClass('pf-m-12-col-on-sm');
+      expect(item).toHaveClass('pf-m-6-col-on-xl');
+      expect(item).toHaveClass('pf-m-3-col-on-2xl');
+    });
+  });
+
+  it('renders each card full-height and reflects dashboard query and data', () => {
+    const updateQuery = jest.fn();
+    const query = { state: TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING };
+    const { container } = render(
+      <TasksCardsGrid
+        query={query}
+        updateQuery={updateQuery}
+        time={TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK}
+        data={MOCKED_DATA}
+      />
+    );
+
+    const cardIds = [
+      'running-tasks-card',
+      'paused-tasks-card',
+      'stopped-tasks-card',
+      'scheduled-tasks-card',
+    ];
+
+    cardIds.forEach(id => {
+      const card = container.querySelector(`#${id}`);
+      expect(card).toBeInTheDocument();
+      expect(card).toHaveClass('pf-m-full-height');
+    });
+
+    expect(container.querySelector('#running-tasks-card')).toHaveClass(
+      'selected-tasks-card'
+    );
+
+    const scheduledDataEl = container.querySelector(
+      '#scheduled-tasks-card .scheduled-data'
+    );
+    expect(scheduledDataEl?.textContent).toContain(
+      String(MOCKED_DATA[TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.SCHEDULED])
+    );
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/Components/TimeDropDown/TimeDropDown.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropdownButton, MenuItem } from 'patternfly-react';
+import { SimpleDropdown } from '@patternfly/react-templates';
 import { noop } from 'foremanReact/common/helpers';
 
 import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
@@ -9,29 +9,21 @@ import { getQueryValueText } from '../../../../TasksDashboardHelper';
 const TimeDropDown = ({ id, className, selectedTime, onChange, ...props }) => {
   const availableTimes = Object.keys(TASKS_DASHBOARD_AVAILABLE_TIMES).map(
     key => ({
-      key,
-      text: getQueryValueText(key),
-      active: key === selectedTime,
+      value: key,
+      content: getQueryValueText(key),
+      onClick: () => key === selectedTime || onChange(key),
     })
   );
 
   return (
-    <DropdownButton
+    <SimpleDropdown
       id={id}
       className={className}
-      title={getQueryValueText(selectedTime)}
+      toggleVariant="plainText"
+      toggleContent={getQueryValueText(selectedTime)}
+      initialItems={availableTimes}
       {...props}
-    >
-      {availableTimes.map(({ key, text, active }) => (
-        <MenuItem
-          key={key}
-          active={active}
-          onClick={() => active || onChange(key)}
-        >
-          {text}
-        </MenuItem>
-      ))}
-    </DropdownButton>
+    />
   );
 };
 

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/Components/TimeDropDown/TimeDropDown.test.js

@@ -1,19 +1,55 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
 import TimeDropDown from './TimeDropDown';
 
-const createRequiredProps = () => ({ id: 'some-id' });
+describe('TimeDropDown interactions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-const fixtures = {
-  'render with minimal props': { ...createRequiredProps() },
-  'render with all props': {
-    ...createRequiredProps(),
-    className: 'some-class',
-    selectedTime: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
-    onChange: jest.fn(),
-  },
-};
+  it('calls onChange when a different time option is selected', async () => {
+    const onChange = jest.fn();
 
-describe('TimeDropDown', () =>
-  testComponentSnapshotsWithFixtures(TimeDropDown, fixtures));
+    render(
+      <TimeDropDown
+        id="time-dropdown"
+        selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H24}
+        onChange={onChange}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /24h/i }));
+
+    const menu = await screen.findByRole('menu');
+    fireEvent.click(within(menu).getByRole('menuitem', { name: /^12h$/i }));
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(
+        TASKS_DASHBOARD_AVAILABLE_TIMES.H12
+      );
+    });
+  });
+
+  it('does not call onChange when the already-selected option is clicked', async () => {
+    const onChange = jest.fn();
+
+    render(
+      <TimeDropDown
+        id="time-dropdown"
+        selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK}
+        onChange={onChange}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /^week$/i }));
+
+    const menu = await screen.findByRole('menu');
+    fireEvent.click(within(menu).getByRole('menuitem', { name: /^week$/i }));
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});