refactor: add changes after review

src/certificates/Certificates.jsx

@@ -32,7 +32,7 @@ const Certificates = ({ courseId }) => {
 
   if (loadingStatus === RequestStatus.DENIED) {
     return (
-      <div className="row justify-content-center m-6">
+      <div className="row justify-content-center m-6" data-testid="request-denied-placeholder">
         <Placeholder />
       </div>
     );

src/certificates/Certificates.test.jsx

@@ -6,6 +6,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { RequestStatus } from '../data/constants';
 import { executeThunk } from '../utils';
 import initializeStore from '../store';
 import { getCertificatesApiUrl } from './data/api';
@@ -161,4 +162,28 @@ describe('Certificates', () => {
     expect(queryByTestId('certificate-details')).not.toBeInTheDocument();
     expect(queryByTestId('signatory')).not.toBeInTheDocument();
   });
+
+  it('renders placeholder if request fails', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(403, certificatesDataMock);
+
+    const { getByTestId } = renderComponent();
+
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    expect(getByTestId('request-denied-placeholder')).toBeInTheDocument();
+  });
+
+  it('updates loading status if request fails', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(404, certificatesDataMock);
+
+    renderComponent();
+
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    expect(store.getState().certificates.loadingStatus).toBe(RequestStatus.FAILED);
+  });
 });

src/certificates/certificate-edit-form/CertificateEditForm.test.jsx

@@ -6,6 +6,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { RequestStatus } from '../../data/constants';
 import { executeThunk } from '../../utils';
 import initializeStore from '../../store';
 import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../data/api';
@@ -108,6 +109,25 @@ describe('CertificateEditForm Component', () => {
     });
   });
 
+  it('updates loading status if delete fails', async () => {
+    axiosMock.onDelete(
+      getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+    ).reply(404);
+
+    const { getByRole } = renderComponent();
+
+    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+    const confirmDeleteModal = getByRole('dialog');
+    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+    await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
+
+    await waitFor(() => {
+      expect(store.getState().certificates.savingStatus).toBe(RequestStatus.FAILED);
+    });
+  });
+
   it('cancel edit form', async () => {
     const { getByRole } = renderComponent();
 

src/certificates/layout/header-buttons/hooks/useHeaderButtons.jsx

@@ -26,7 +26,8 @@ const useHeaderButtons = () => {
   const previewUrl = useMemo(() => {
     if (!certificateWebViewUrl) { return ''; }
 
-    const url = new URL(certificateWebViewUrl, window.location.origin);
+    const getUrl = () => new URL(certificateWebViewUrl, window.location.origin);
+    const url = getUrl();
 
     const searchParams = new URLSearchParams(url.search);
     searchParams.set('preview', dropdowmItem);