katello 4.1.4 → 4.2.0.rc1

data/webpack/scenes/ContentViews/Details/Histories/ContentViewHistories.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector } from 'react-redux';
 import { TableVariant, TableText } from '@patternfly/react-table';
 import { Label } from '@patternfly/react-core';
@@ -26,14 +27,6 @@ const ContentViewHistories = ({ cvId }) => {
   const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
 
-  const taskTypes = {
-    publish: 'Actions::Katello::ContentView::Publish',
-    promotion: 'Actions::Katello::ContentView::Promote',
-    removal: 'Actions::Katello::ContentView::Remove',
-    incrementalUpdate: 'Actions::Katello::ContentView::IncrementalUpdates',
-    export: 'Actions::Katello::ContentViewVersion::Export',
-  };
-
   const columnHeaders = [
     __('Date'),
     __('Version'),
@@ -44,7 +37,15 @@ const ContentViewHistories = ({ cvId }) => {
   ];
 
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
+    const taskTypes = {
+      publish: 'Actions::Katello::ContentView::Publish',
+      promotion: 'Actions::Katello::ContentView::Promote',
+      removal: 'Actions::Katello::ContentView::Remove',
+      incrementalUpdate: 'Actions::Katello::ContentView::IncrementalUpdates',
+      export: 'Actions::Katello::ContentViewVersion::Export',
+    };
+
     const actionText = (history) => {
       const {
         action,
@@ -102,7 +103,7 @@ const ContentViewHistories = ({ cvId }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)], setMetadata, loading, setRows);
+  }, [response, setMetadata, loading, setRows, cvId]);
 
   const emptyContentTitle = __("You currently don't have any history for this content view.");
   const emptyContentBody = __('History will appear here when the content view is published or promoted.'); // needs link
@@ -126,7 +127,7 @@ const ContentViewHistories = ({ cvId }) => {
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint={`/content_views/${cvId}/history/auto_complete_search`}
-      fetchItems={params => getContentViewHistories(cvId, params)}
+      fetchItems={useCallback(params => getContentViewHistories(cvId, params), [cvId])}
     />);
 };
 

data/webpack/scenes/ContentViews/Details/Histories/__tests__/contentViewHistory.test.js

@@ -44,7 +44,7 @@ test('Can call API and show history on page load', async (done) => {
   // Nothing will show at first, page is loading
   expect(queryByText(firstHistory.description)).toBeNull();
   // Assert that the repo name is now showing on the screen, but wait for it to appear.
-  await patientlyWaitFor(() => expect(getByText(firstHistory.description)).toBeTruthy());
+  await patientlyWaitFor(() => expect(getByText(firstHistory.description)).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
@@ -88,7 +88,7 @@ test('Can handle no History being present', async (done) => {
   const { queryByText } = renderWithRedux(<ContentViewHistories cvId={1} />, renderOptions);
 
   expect(queryByText(firstHistory.description)).toBeNull();
-  await patientlyWaitFor(() => expect(queryByText("You currently don't have any history for this content view.")).toBeTruthy());
+  await patientlyWaitFor(() => expect(queryByText("You currently don't have any history for this content view.")).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });

data/webpack/scenes/ContentViews/Details/Repositories/ContentViewRepositories.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import {
   Bullseye,
@@ -74,7 +75,7 @@ const ContentViewRepositories = ({ cvId }) => {
   ];
   const loading = status === STATUS.PENDING;
 
-  const buildRows = (results) => {
+  const buildRows = useCallback((results) => {
     const newRows = [];
     results.forEach((repo) => {
       const {
@@ -101,9 +102,9 @@ const ContentViewRepositories = ({ cvId }) => {
       newRows.push({ repoId: id, cells });
     });
     return newRows;
-  };
+  }, [statusSelected]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { results, ...meta } = response;
     setMetadata(meta);
 
@@ -111,19 +112,19 @@ const ContentViewRepositories = ({ cvId }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)]);
+  }, [response, loading, buildRows]);
 
   useEffect(() => {
     dispatch(getRepositoryTypes());
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const rowsAreSelected = rows.some(row => row.selected);
     setBulkActionEnabled(rowsAreSelected);
   }, [rows]);
 
   // Get repo type filter selections dynamically from the API
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) {
       const allRepoTypes = {};
       allRepoTypes[allRepositories] = 'all';
@@ -135,7 +136,7 @@ const ContentViewRepositories = ({ cvId }) => {
       });
       setRepoTypes(allRepoTypes);
     }
-  }, [JSON.stringify(repoTypesResponse), repoTypesStatus]);
+  }, [repoTypesResponse, repoTypesStatus]);
 
   const toggleBulkAction = () => {
     setBulkActionOpen(!bulkActionOpen);
@@ -154,12 +155,14 @@ const ContentViewRepositories = ({ cvId }) => {
   };
 
   const addBulk = () => {
+    setBulkActionOpen(false);
     const reposToAdd = [];
     rows.forEach(row => row.selected && reposToAdd.push(row.repoId));
     onAdd(reposToAdd);
   };
 
   const removeBulk = () => {
+    setBulkActionOpen(false);
     const reposToDelete = [];
     rows.forEach(row => row.selected && reposToDelete.push(row.repoId));
     onRemove(reposToDelete);
@@ -186,12 +189,12 @@ const ContentViewRepositories = ({ cvId }) => {
     ];
   };
 
-  const getCVReposWithOptions = (params = {}) => {
+  const getCVReposWithOptions = useCallback((params = {}) => {
     const allParams = { ...params };
     if (typeSelected !== 'All repositories') allParams.content_type = repoTypes[typeSelected];
 
     return getContentViewRepositories(cvId, allParams, statusSelected);
-  };
+  }, [cvId, repoTypes, statusSelected, typeSelected]);
 
   const emptyContentTitle = __("You currently don't have any repositories to add to this content view.");
   const emptyContentBody = __('Please add some repositories.'); // needs link
@@ -201,10 +204,10 @@ const ContentViewRepositories = ({ cvId }) => {
     (statusSelected && statusSelected !== ALL_STATUSES);
   const dropdownItems = [
     <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!bulkActionEnabled} component="button" onClick={addBulk}>
-      Add
+      {__('Add')}
     </DropdownItem>,
     <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={removeBulk}>
-      Remove
+      {__('Remove')}
     </DropdownItem>,
   ];
 
@@ -228,7 +231,7 @@ const ContentViewRepositories = ({ cvId }) => {
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint="/repositories/auto_complete_search"
-      fetchItems={params => getCVReposWithOptions(params)}
+      fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
       additionalListeners={[typeSelected, statusSelected]}
     >
       <Split hasGutter>

data/webpack/scenes/ContentViews/Details/Repositories/LastSync.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { CheckCircleIcon, ExclamationTriangleIcon, CloseIcon, InProgressIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon, ExclamationTriangleIcon, ExclamationCircleIcon, InProgressIcon } from '@patternfly/react-icons';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
 import InactiveText from '../../components/InactiveText';
@@ -17,9 +17,9 @@ const LastSync = ({ lastSyncWords, lastSync, emptyMessage }) => {
       Icon = ExclamationTriangleIcon;
       color = 'orange';
     } else if (result === 'error' || result === 'failed') {
-      Icon = CloseIcon;
+      Icon = ExclamationCircleIcon;
       color = 'red';
-    } else if (result === 'in progress') {
+    } else if (result === 'in progress' || result === 'pending') {
       Icon = InProgressIcon;
       color = 'blue';
     } else {

data/webpack/scenes/ContentViews/Details/Repositories/__tests__/contentViewAddRemove.test.js

@@ -52,7 +52,7 @@ test('Can enable and disable add repositories button', async (done) => {
     renderOptions,
   );
 
-  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeTruthy());
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeInTheDocument());
   expect(getByLabelText('Select all rows')).toBeInTheDocument();
   expect(getByLabelText('add_repositories')).toHaveAttribute('aria-disabled', 'true');
   getByLabelText('Select all rows').click();
@@ -118,7 +118,7 @@ test('Can remove repositories', async (done) => {
     renderOptions,
   );
 
-  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeTruthy());
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeInTheDocument());
   expect(getByLabelText('Select all rows')).toBeInTheDocument();
   getByLabelText('Select all rows').click();
   await patientlyWaitFor(() => {

data/webpack/scenes/ContentViews/Details/Repositories/__tests__/contentViewDetailRepos.test.js

@@ -19,6 +19,9 @@ let searchDelayScope;
 let autoSearchScope;
 
 beforeEach(() => {
+  if (!nock.isActive()) {
+    nock.activate();
+  }
   const { results } = repoData;
   [firstRepo] = results;
   searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
@@ -34,6 +37,7 @@ afterEach(() => {
   nock.cleanAll();
   assertNockRequest(searchDelayScope);
   assertNockRequest(autoSearchScope);
+  nock.restore();
 });
 
 test('Can call API and show repositories on page load', async (done) => {
@@ -52,7 +56,7 @@ test('Can call API and show repositories on page load', async (done) => {
   // Nothing will show at first, page is loading
   expect(queryByText(firstRepo.name)).toBeNull();
   // Assert that the repo name is now showing on the screen, but wait for it to appear.
-  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeTruthy());
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeInTheDocument());
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
@@ -83,7 +87,7 @@ test('Can filter by repository type', async (done) => {
   const selectYum = getByLabelText('select Yum Repositories');
   fireEvent.click(selectYum); // select yum repos
   await patientlyWaitForRemoval(() => getByText('Loading'));
-  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeTruthy());
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeInTheDocument());
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(allTypesScope);

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersions.js

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useDispatch, useSelector } from 'react-redux';
 import { TableVariant, TableText } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
@@ -17,12 +18,16 @@ import {
   selectCVVersionsStatus,
   selectCVVersionsError,
 } from '../ContentViewDetailSelectors';
+import TaskPresenter from '../../components/TaskPresenter/TaskPresenter';
+import { startPollingTask } from '../../../Tasks/TaskActions';
 
 const ContentViewVersions = ({ cvId }) => {
   const response = useSelector(state => selectCVVersions(state, cvId));
   const status = useSelector(state => selectCVVersionsStatus(state, cvId));
   const error = useSelector(state => selectCVVersionsError(state, cvId));
+  const [pollingFinished, setPollingFinished] = useState(false);
   const loading = status === STATUS.PENDING;
+  const dispatch = useDispatch();
 
   const [rows, setRows] = useState([]);
   const [metadata, setMetadata] = useState({});
@@ -37,29 +42,64 @@ const ContentViewVersions = ({ cvId }) => {
     __('Description'),
   ];
 
+  const buildCells = useCallback((cvVersion) => {
+    const {
+      version,
+      description,
+      id: versionId,
+      environments,
+      rpm_count: packageCount,
+      errata_counts: errataCounts,
+    } = cvVersion;
+    return [
+      { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}`, '')}>{__('Version ')}{version}</a> },
+      { title: <ContentViewVersionEnvironments {...{ environments }} /> },
+      { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/packages`, '')}>{`${packageCount}`}</a> },
+      { title: <ContentViewVersionErrata {...{ cvId, versionId, errataCounts }} /> },
+      { title: <ContentViewVersionContent {...{ cvId, versionId, cvVersion }} /> },
+      { title: description ? <TableText wrapModifier="truncate">{description}</TableText> : <InactiveText text={__('No description')} /> },
+    ];
+  }, [cvId]);
 
-  useEffect(() => {
+  const buildActiveTaskCells = useCallback((cvVersion) => {
+    const {
+      version,
+      description,
+      id: versionId,
+      active_history: activeHistory,
+    } = cvVersion;
+    const { task } = activeHistory[0];
+    const { result } = task || {};
+    if (result !== 'error') {
+      dispatch(startPollingTask(task.id, task));
+    }
+
+    return [
+      { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}`, '')}>{__('Version ')}{version}</a> },
+      {
+        title: <TaskPresenter
+          activeHistory={activeHistory[0]}
+          setPollingFinished={setPollingFinished}
+        />,
+      },
+      { title: '' },
+      { title: '' },
+      { title: '' },
+      { title: description ? <TableText wrapModifier="truncate">{description}</TableText> : <InactiveText text={__('No description')} /> },
+    ];
+  }, [cvId, dispatch]);
+
+  useDeepCompareEffect(() => {
     const buildRows = (results) => {
       const newRows = [];
       results.forEach((cvVersion) => {
         const {
-          version,
-          description,
-          id: versionId,
-          environments,
-          rpm_count: packageCount,
-          errata_counts: errataCounts,
+          active_history: activeHistory,
         } = cvVersion;
 
-        const cells = [
-          { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}`, '')}>{`Version ${version}`}</a> },
-          { title: <ContentViewVersionEnvironments {...{ environments }} /> },
-          { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/packages`, '')}>{`${packageCount}`}</a> },
-          { title: <ContentViewVersionErrata {...{ cvId, versionId, errataCounts }} /> },
-          { title: <ContentViewVersionContent {...{ cvId, versionId, cvVersion }} /> },
-          { title: description ? <TableText wrapModifier="truncate">{description}</TableText> : <InactiveText text={__('No description')} /> },
-        ];
-
+        const cells = activeHistory.length ?
+          buildActiveTaskCells(cvVersion) :
+          buildCells(cvVersion);
         newRows.push({ cells });
       });
       return newRows;
@@ -71,7 +111,7 @@ const ContentViewVersions = ({ cvId }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)], setMetadata, loading, setRows);
+  }, [response, setMetadata, buildActiveTaskCells, buildCells, dispatch, loading, setRows]);
 
   const emptyContentTitle = __("You currently don't have any versions for this content view.");
   const emptyContentBody = __('Versions will appear here when the content view is published.'); // needs link
@@ -95,7 +135,8 @@ const ContentViewVersions = ({ cvId }) => {
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint={`/content_view_versions/auto_complete_search?content_view_id=${cvId}`}
-      fetchItems={params => getContentViewVersions(cvId, params)}
+      fetchItems={useCallback(params => getContentViewVersions(cvId, params), [cvId])}
+      additionalListeners={[pollingFinished]}
     />);
 };
 

data/webpack/scenes/ContentViews/Details/Versions/__tests__/contentViewTaskInProgressResponse.fixtures.json

@@ -0,0 +1,71 @@
+{
+  "id": "6b900ff8-62bb-42ac-8c45-da86b7258520",
+  "label": "Actions::Katello::ContentView::Publish",
+  "pending": true,
+  "action": "Publish content view '5'; organization 'Default Organization'",
+  "username": "admin",
+  "started_at": "2021-07-27 13:51:11 -0400",
+  "ended_at": null,
+  "state": "running",
+  "result": "pending",
+  "progress": 0.5,
+  "input": {
+    "content_view": {
+      "id": 13,
+      "name": "5",
+      "label": "5"
+    },
+    "organization": {
+      "id": 1,
+      "name": "Default Organization",
+      "label": "Default_Organization"
+    },
+    "services_checked": [
+      "pulp3",
+      "candlepin",
+      "candlepin_auth"
+    ],
+    "history_id": 188,
+    "content_view_id": 13,
+    "auto_publish_composite_ids": [],
+    "content_view_version_name": "5 12.0",
+    "content_view_version_id": 109,
+    "environment_id": 1,
+    "user_id": 4,
+    "skip_promotion": null,
+    "locale": "en",
+    "current_request_id": "d9d0dcbe-ea44-4316-ade5-cd1a074e31e7",
+    "current_timezone": "America/New_York",
+    "current_organization_id": 1,
+    "current_location_id": 2,
+    "current_user_id": 4
+  },
+  "output": {},
+  "humanized": {
+    "action": "Publish",
+    "input": [
+      [
+        "content_view",
+        {
+          "text": "content view '5'",
+          "link": "/content_views/13/versions"
+        }
+      ],
+      [
+        "organization",
+        {
+          "text": "organization 'Default Organization'",
+          "link": "/organizations/1/edit"
+        }
+      ]
+    ],
+    "output": "",
+    "errors": []
+  },
+  "cli_example": null,
+  "start_at": "2021-07-27 13:51:11 -0400",
+  "available_actions": {
+    "cancellable": false,
+    "resumable": false
+  }
+}

data/webpack/scenes/ContentViews/Details/Versions/__tests__/contentViewTaskResponse.fixtures.json

@@ -0,0 +1,75 @@
+{
+  "id": "6b900ff8-62bb-42ac-8c45-da86b7258520",
+  "label": "Actions::Katello::ContentView::Publish",
+  "pending": false,
+  "action": "Publish content view '5'; organization 'Default Organization'",
+  "username": "admin",
+  "started_at": "2021-07-27 12:10:19 -0400",
+  "ended_at": "2021-07-27 12:10:56 -0400",
+  "state": "stopped",
+  "result": "success",
+  "progress": 1,
+  "input": {
+    "content_view": {
+      "id": 13,
+      "name": "5",
+      "label": "5"
+    },
+    "organization": {
+      "id": 1,
+      "name": "Default Organization",
+      "label": "Default_Organization"
+    },
+    "services_checked": [
+      "pulp3",
+      "candlepin",
+      "candlepin_auth"
+    ],
+    "history_id": 184,
+    "content_view_id": 13,
+    "auto_publish_composite_ids": [],
+    "content_view_version_name": "5 11.0",
+    "content_view_version_id": 108,
+    "environment_id": 1,
+    "user_id": 4,
+    "skip_promotion": null,
+    "locale": "en",
+    "current_request_id": "1d10507b-643a-4e9b-a317-c525a6293917",
+    "current_timezone": "America/New_York",
+    "current_organization_id": 1,
+    "current_location_id": 2,
+    "current_user_id": 4
+  },
+  "output": {
+    "content_view_id": 13,
+    "content_view_version_id": 108,
+    "skip_promotion": null
+  },
+  "humanized": {
+    "action": "Publish",
+    "input": [
+      [
+        "content_view",
+        {
+          "text": "content view '5'",
+          "link": "/content_views/13/versions"
+        }
+      ],
+      [
+        "organization",
+        {
+          "text": "organization 'Default Organization'",
+          "link": "/organizations/1/edit"
+        }
+      ]
+    ],
+    "output": "",
+    "errors": []
+  },
+  "cli_example": null,
+  "start_at": "2021-07-27 12:10:19 -0400",
+  "available_actions": {
+    "cancellable": false,
+    "resumable": false
+  }
+}

data/webpack/scenes/ContentViews/Details/Versions/__tests__/contentViewVersions.test.js

@@ -7,10 +7,14 @@ import ContentViewVersions from '../ContentViewVersions';
 
 const cvVersionsData = require('./contentViewVersions.fixtures.json');
 const emptyCVVersionData = require('./emptyCVVersion.fixtures.json');
+const cvVersionsTasksData = require('./contentViewVersionsWithTask.fixtures.json');
+const contentViewTaskInProgressResponseData = require('./contentViewTaskInProgressResponse.fixtures.json');
+const contentViewTaskResponseData = require('./contentViewTaskResponse.fixtures.json');
 
 const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
 const cvVersions = api.getApiUrl('/content_view_versions/');
 const autocompleteUrl = '/content_view_versions/auto_complete_search';
+const taskPollingUrl = '/foreman_tasks/api/tasks/6b900ff8-62bb-42ac-8c45-da86b7258520';
 
 let firstVersion;
 let searchDelayScope;
@@ -148,7 +152,88 @@ test('Can load for empty versions', async () => {
 
   expect(queryByText(`Version ${firstVersion.version}`)).toBeNull();
   await patientlyWaitFor(() =>
-    expect(queryByText("You currently don't have any versions for this content view.")).toBeTruthy());
+    expect(queryByText("You currently don't have any versions for this content view.")).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope);
 });
+
+test('Can call API and show versions with tasks on page load', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const { results: withTaskResults } = cvVersionsTasksData;
+  [firstVersion] = withTaskResults;
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsTasksData);
+
+  const taskInProgressScope = nockInstance
+    .get(taskPollingUrl)
+    .reply(200, contentViewTaskInProgressResponseData);
+
+  const {
+    getByLabelText, queryByText,
+  } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(`Version ${firstVersion.version}`)).toBeNull();
+  // Assert that the CV version and active task is rendered on the screen.
+  await patientlyWaitFor(() => {
+    expect(queryByText(`Version ${firstVersion.version}`)).toBeInTheDocument();
+    expect(getByLabelText('task_presenter')).toBeInTheDocument();
+    expect(getByLabelText('task_presenter')).toHaveAttribute('aria-valuenow', '50');
+  });
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+  assertNockRequest(taskInProgressScope, done);
+});
+
+test('Can reload versions upon task completion', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const { results: withTaskResults } = cvVersionsTasksData;
+  [firstVersion] = withTaskResults;
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsTasksData);
+
+  const taskSuccessScope = nockInstance
+    .get(taskPollingUrl)
+    .reply(200, contentViewTaskResponseData);
+
+  const reloadScope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsData);
+
+
+  const {
+    getByText, queryByLabelText, getByLabelText, queryByText,
+  } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(`Version ${firstVersion.version}`)).toBeNull();
+  // Assert that the CV version and active task is now showing on the screen.
+  await patientlyWaitFor(() => {
+    expect(queryByText(`Version ${firstVersion.version}`)).toBeInTheDocument();
+    expect(getByLabelText('task_presenter')).toBeInTheDocument();
+  });
+  const { results } = cvVersionsData;
+  [firstVersion] = results;
+
+  // Assert that the CV version is shown and active task is not rendered anymore on the screen.
+  await patientlyWaitFor(() => {
+    expect(getByText(`Version ${firstVersion.version}`)).toBeInTheDocument();
+    expect(queryByLabelText('task_presenter')).not.toBeInTheDocument();
+  });
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+  assertNockRequest(taskSuccessScope);
+  // Assert CV Versions API is called upon task completion
+  assertNockRequest(reloadScope, done);
+});