Show an error message when the page fails to load. fixes edgi-govdata…

…-archiving#166
steryereo · Mar 25, 2020 · 0f0954e · 0f0954e
1 parent 01495ba
commit 0f0954e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/src/components/__tests__/page-details.test.jsx b/src/components/__tests__/page-details.test.jsx
@@ -10,13 +10,16 @@ describe('page-details', () => {
   simplePage.versions.forEach(version => {
     version.capture_time = new Date(version.capture_time);
   });
-  const match = { params: { pageId: simplePage.uuid }};
-  const createMockApi = () => {
-    return Object.assign(Object.create(WebMonitoringDb.prototype), {
+  const match = {params: {pageId: simplePage.uuid}};
+
+  const createMockApi = overrides => Object.assign(
+    Object.create(WebMonitoringDb.prototype),
+    {
       getPage: jest.fn().mockResolvedValue(simplePage),
-      getVersions: jest.fn().mockResolvedValue(simplePage.versions)
-    });
-  };
+      getVersions: jest.fn().mockResolvedValue(simplePage.versions),
+    },
+    overrides
+  );
 
   it('can render', () => {
     const mockApi = createMockApi();
@@ -49,4 +52,21 @@ describe('page-details', () => {
     pageDetails.unmount();
     expect(document.title).toBe('Scanner');
   });
+
+  it('shows an error message if api.getPage throws an error', async () => {
+    const error = new Error('Page does not exist');
+    const mockApi = createMockApi({getPage: jest.fn().mockRejectedValue(error)});
+
+    const pageDetails = shallow(
+      <PageDetails
+        match={match}
+      />,
+      {context: {api: mockApi}}
+    );
+
+    await expect(mockApi.getPage.mock.results[0].value).rejects.toThrow();
+    await Promise.resolve(); // wait a tick for the error message to render
+
+    expect(pageDetails.find('[className*="danger"]').text()).toBe(error.message);
+  });
 });
diff --git a/src/components/page-details/page-details.jsx b/src/components/page-details/page-details.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import {Link, Redirect} from 'react-router-dom';
 import WebMonitoringDb from '../../services/web-monitoring-db';
 import ChangeView from '../change-view/change-view';
 import Loading from '../loading';
@@ -28,16 +28,18 @@ export default class PageDetails extends React.Component {
     // Clear existing content when switching pages
     if (state.page && state.page.uuid !== props.match.params.pageId) {
       return {
-        page: null,
-        error: null
+        page: null
       };
     }
     return null;
   }
 
   constructor(props) {
     super(props);
-    this.state = { page: null };
+    this.state = {
+      page: null,
+      error: null
+    };
     this._annotateChange = this._annotateChange.bind(this);
     this._navigateToChange = this._navigateToChange.bind(this);
   }
@@ -244,7 +246,7 @@ export default class PageDetails extends React.Component {
       }
     }
 
-    return { from, to, shouldRedirect };
+    return {from, to, shouldRedirect};
   }
 
   _loadPage(pageId) {
@@ -263,14 +265,14 @@ export default class PageDetails extends React.Component {
         this._loadVersions(page, cutoffDate, '')
           .then(versions => {
             page.versions = versions;
-            this.setState({ page });
+            this.setState({page});
           });
       })
-      .catch(error => this.setState({ error }));
+      .catch(error => this.setState({error}));
   }
 
   _loadVersions(page, dateFrom, dateTo) {
-    const capture_time = { 'capture_time': `${dateFrom}..${dateTo}` };
+    const capture_time = {'capture_time': `${dateFrom}..${dateTo}`};
     return this.context.api.getVersions(page.uuid, capture_time, Infinity);
   }