Settings: Fix and extend page tests

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js

@@ -43,10 +43,6 @@ export function ReviewWorkflowsPage() {
     dispatch(setWorkflows({ status: workflowsData.status, data: workflowsData.data }));
   }, [workflowsData.status, workflowsData.data, dispatch]);
 
-  if (!formik.values?.stages) {
-    return null;
-  }
-
   return (
     <Layout>
       <SettingsPageTitle
@@ -81,20 +77,20 @@ export function ReviewWorkflowsPage() {
                   id: 'Settings.review-workflows.page.subtitle',
                   defaultMessage: '{count, plural, one {# stage} other {# stages}}',
                 },
-                { count: currentWorkflow.stages?.length ?? 0 }
+                { count: currentWorkflow?.stages?.length ?? 0 }
               )}
             />
             <ContentLayout>
-              {status === 'loading' ? (
+              {status === 'loading' && (
                 <Loader>
                   {formatMessage({
                     id: 'Settings.review-workflows.page.isLoading',
                     defaultMessage: 'Workflow is loading',
                   })}
                 </Loader>
-              ) : (
-                <Stages stages={formik.values.stages} />
               )}
+
+              {formik.values?.stages && <Stages stages={formik.values.stages} />}
             </ContentLayout>
           </Form>
         </FormikProvider>

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stages.js

@@ -69,7 +69,7 @@ Stages.defaultProps = {
 Stages.propTypes = {
   stages: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.number.isRequired,
+      id: PropTypes.number,
       name: PropTypes.string.isRequired,
     })
   ),

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/tests/ReviewWorkflows.test.js

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { QueryClientProvider, QueryClient } from 'react-query';
+import userEvent from '@testing-library/user-event';
 
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 
@@ -13,12 +14,7 @@ import { useReviewWorkflows } from '../hooks/useReviewWorkflows';
 
 jest.mock('../hooks/useReviewWorkflows', () => ({
   ...jest.requireActual('../hooks/useReviewWorkflows'),
-  useReviewWorkflows: jest.fn().mockReturnValue({
-    workflows: {
-      status: 'loading',
-      data: null,
-    },
-  }),
+  useReviewWorkflows: jest.fn().mockReturnValue(),
 }));
 
 const client = new QueryClient({
@@ -47,19 +43,12 @@ const ComponentFixture = () => {
 
 const setup = (props) => render(<ComponentFixture {...props} />);
 
+const user = userEvent.setup();
+
 describe('Admin | Settings | Review Workflow | ReviewWorkflowsPage', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
+    jest.restoreAllMocks();
 
-  test('handle initial loading state', () => {
-    const { getByText } = setup();
-
-    expect(getByText('0 stages')).toBeInTheDocument();
-    expect(getByText('Workflow is loading')).toBeInTheDocument();
-  });
-
-  test('display stages', () => {
     useReviewWorkflows.mockReturnValue({
       workflows: {
         status: 'success',
@@ -76,11 +65,56 @@ describe('Admin | Settings | Review Workflow | ReviewWorkflowsPage', () => {
         ],
       },
     });
+  });
 
-    const { getByText, queryByText } = setup();
+  test('handle initial loading state', () => {
+    useReviewWorkflows.mockReturnValue({
+      workflows: {
+        status: 'loading',
+        data: [],
+      },
+    });
+
+    const { getByText } = setup();
+
+    expect(getByText('0 stages')).toBeInTheDocument();
+    expect(getByText('Workflow is loading')).toBeInTheDocument();
+  });
+
+  test('loading state is not present', () => {
+    const { queryByText } = setup();
+
+    expect(queryByText('Workflow is loading')).not.toBeInTheDocument();
+  });
+
+  test('display stages', () => {
+    const { getByText } = setup();
 
     expect(getByText('1 stage')).toBeInTheDocument();
-    expect(queryByText('Workflow is loading')).not.toBeInTheDocument();
     expect(getByText('stage-1')).toBeInTheDocument();
   });
+
+  test('Save button is disabled by default', async () => {
+    const { getByRole } = setup();
+
+    const saveButton = getByRole('button', { name: /save/i });
+
+    expect(saveButton).toBeInTheDocument();
+    expect(saveButton.getAttribute('disabled')).toBeDefined();
+  });
+
+  test('Save button is enabled after a stage has been added', async () => {
+    const { getByText, getByRole } = setup();
+
+    await user.click(
+      getByRole('button', {
+        name: /add new stage/i,
+      })
+    );
+
+    const saveButton = getByRole('button', { name: /save/i });
+
+    expect(getByText('2 stages')).toBeInTheDocument();
+    expect(saveButton.hasAttribute('disabled')).toBeFalsy();
+  });
 });