@patternfly/quickstarts 6.5.0-prerelease.3 → 6.5.0

package/src/controller/__tests__/QuickStartFooter.spec.tsx

@@ -1,103 +1,87 @@
-import * as React from 'react';
-import { Button } from '@patternfly/react-core';
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import { QuickStartStatus } from '../../utils/quick-start-types';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartFooter from '../QuickStartFooter';
 
-jest.mock('react', () => {
-  const ActualReact = require.requireActual('react');
-  return {
-    ...ActualReact,
-    useContext: () => jest.fn(),
-  };
-});
+const contextValues = {
+  ...QuickStartContextDefaults,
+  activeQuickStartID: '',
+  startQuickStart: jest.fn(),
+  restartQuickStart: jest.fn(),
+  getResource: (key: string) => key,
+};
 
-describe('QuickStartFooter', () => {
-  type QuickStartFooterProps = React.ComponentProps<typeof QuickStartFooter>;
-  let quickStartFooterProps: QuickStartFooterProps;
-  beforeEach(() => {
-    spyOn(React, 'useContext').and.returnValue({
-      activeQuickStartID: '',
-      startQuickStart: () => {},
-      restartQuickStart: () => {},
-      getResource: (key) => `quickstart~${key}`,
-    });
-  });
+const renderWithContext = (props: any) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartFooter {...props} />
+    </QuickStartContext.Provider>,
+  );
 
-  it('should load Start button for not started tours', () => {
-    quickStartFooterProps = {
+describe('QuickStartFooter', () => {
+  it('should load Start button for not started tours', async () => {
+    renderWithContext({
       status: QuickStartStatus.NOT_STARTED,
       footerClass: 'test',
       quickStartId: 'test-quickstart',
-      onNext: () => null,
-      onBack: () => null,
+      onNext: jest.fn(),
+      onBack: jest.fn(),
       totalTasks: 4,
       taskNumber: -1,
-    };
-
-    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
-    const footerButtons = quickStartFooterWrapper.find(Button);
-    expect(footerButtons.exists()).toBeTruthy();
-    expect(footerButtons.length).toEqual(1);
-    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Start');
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Start' })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
   });
 
-  it('should load Continue and Restart buttons for in progress tours at into page', () => {
-    quickStartFooterProps = {
+  it('should load Continue and Restart buttons for in progress tours at intro page', async () => {
+    renderWithContext({
       status: QuickStartStatus.IN_PROGRESS,
       footerClass: 'test',
       quickStartId: 'test-quickstart',
-      onNext: () => null,
-      onBack: () => null,
+      onNext: jest.fn(),
+      onBack: jest.fn(),
       totalTasks: 4,
       taskNumber: -1,
-    };
-
-    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
-    const footerButtons = quickStartFooterWrapper.find(Button);
-    expect(footerButtons.exists()).toBeTruthy();
-    expect(footerButtons.length).toEqual(2);
-    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Continue');
-    expect(footerButtons.at(1).childAt(0).text()).toBe('quickstart~Restart');
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: 'Restart' })).toBeInTheDocument();
   });
 
-  it('should load Next and Back buttons, and Restart link for in progress tours in task page', () => {
-    quickStartFooterProps = {
+  it('should load Next, Back, and Restart buttons for in progress tours in task page', async () => {
+    renderWithContext({
       status: QuickStartStatus.IN_PROGRESS,
       footerClass: 'test',
       quickStartId: 'test-quickstart',
-      onNext: () => null,
-      onBack: () => null,
+      onNext: jest.fn(),
+      onBack: jest.fn(),
       totalTasks: 4,
       taskNumber: 2,
-    };
-
-    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
-    const footerButtons = quickStartFooterWrapper.find(Button);
-    expect(footerButtons.exists()).toBeTruthy();
-    expect(footerButtons.length).toEqual(3);
-    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Next');
-    expect(footerButtons.at(1).childAt(0).text()).toBe('quickstart~Back');
-    expect(footerButtons.at(2).childAt(0).text()).toBe('quickstart~Restart');
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Restart' })).toBeInTheDocument();
   });
 
-  it('should load Close, Back and Restart buttons for completed tours in conclusion page', () => {
-    quickStartFooterProps = {
+  it('should load Close, Back and Restart buttons for completed tours in conclusion page', async () => {
+    renderWithContext({
       status: QuickStartStatus.COMPLETE,
       footerClass: 'test',
       quickStartId: 'test-quickstart',
-      onNext: () => null,
-      onBack: () => null,
+      onNext: jest.fn(),
+      onBack: jest.fn(),
       totalTasks: 4,
       taskNumber: 4,
-    };
-
-    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
-    const footerButtons = quickStartFooterWrapper.find(Button);
-    expect(footerButtons.exists()).toBeTruthy();
-    expect(footerButtons.length).toEqual(3);
-    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Close');
-    expect(footerButtons.at(1).childAt(0).text()).toBe('quickstart~Back');
-    expect(footerButtons.at(2).childAt(0).text()).toBe('quickstart~Restart');
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Restart' })).toBeInTheDocument();
   });
 });

package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx

@@ -1,43 +1,47 @@
-import { ComponentProps } from 'react';
-import { Title, WizardNavItem } from '@patternfly/react-core';
-import { ShallowWrapper, shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartTaskHeader from '../QuickStartTaskHeader';
 
-type QuickStartTaskHeaderProps = ComponentProps<typeof QuickStartTaskHeader>;
-let wrapper: ShallowWrapper<QuickStartTaskHeaderProps>;
-const props: QuickStartTaskHeaderProps = {
+const contextValues = {
+  ...QuickStartContextDefaults,
+  getResource: (key: string) => key,
+};
+
+const defaultProps = {
   title: 'title',
   taskIndex: 1,
   subtitle: 'subtitle',
   taskStatus: QuickStartTaskStatus.INIT,
-  size: 'lg',
+  size: 'lg' as const,
   isActiveTask: true,
   onTaskSelect: jest.fn(),
 };
 
+const renderWithContext = (props = {}) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartTaskHeader {...defaultProps} {...props} />
+    </QuickStartContext.Provider>,
+  );
+
 describe('QuickStartTaskHeader', () => {
-  beforeEach(() => {
-    // DOMPurify.addHook = jest.fn();
-    wrapper = shallow(<QuickStartTaskHeader {...props} />);
+  it('should render subtitle for active task', async () => {
+    renderWithContext();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', {
+          name: new RegExp(`${defaultProps.title}.*${defaultProps.subtitle}`),
+        }),
+      ).toBeInTheDocument();
+    });
   });
 
-  it('should render subtitle for active task', () => {
-    expect(wrapper.find(WizardNavItem).dive().find(Title).length).toBe(1);
-    expect(
-      wrapper.find(WizardNavItem).dive().find('[data-test-id="quick-start-task-subtitle"]').props()
-        .children,
-    ).toEqual(props.subtitle);
-  });
-  it('should not render subtitle if task is not active', () => {
-    wrapper = shallow(<QuickStartTaskHeader {...props} isActiveTask={false} />);
-    expect(wrapper.find(WizardNavItem).dive().find(Title).length).toBe(1);
-    expect(
-      wrapper
-        .find(WizardNavItem)
-        .dive()
-        .find('[data-test-id="quick-start-task-subtitle"]')
-        .exists(),
-    ).toBe(false);
+  it('should not render subtitle if task is not active', async () => {
+    renderWithContext({ isActiveTask: false });
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: defaultProps.title })).toBeInTheDocument();
+    });
+    expect(screen.queryByText(defaultProps.subtitle)).not.toBeInTheDocument();
   });
 });

package/src/controller/__tests__/QuickStartTaskReview.spec.tsx

@@ -1,42 +1,57 @@
-import { Alert } from '@patternfly/react-core';
-import { ShallowWrapper, shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import { allQuickStarts } from '../../data/quick-start-test-data';
-import QuickStartMarkdownView from '../../QuickStartMarkdownView';
 import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import { getQuickStartByName } from '../../utils/quick-start-utils';
 import QuickStartTaskReview from '../QuickStartTaskReview';
-import { ComponentProps } from 'react';
 
-type QuickStartTaskReviewProps = ComponentProps<typeof QuickStartTaskReview>;
-let wrapper: ShallowWrapper<QuickStartTaskReviewProps>;
-const props: QuickStartTaskReviewProps = {
-  review: getQuickStartByName('explore-serverless', allQuickStarts).spec.tasks[0].review,
+const contextValues = {
+  ...QuickStartContextDefaults,
+  getResource: (key: string) => key,
+};
+
+const review = getQuickStartByName('explore-serverless', allQuickStarts).spec.tasks[0].review;
+
+const defaultProps = {
+  review,
   taskStatus: QuickStartTaskStatus.REVIEW,
   onTaskReview: jest.fn(),
 };
 
-describe('QuickStartTaskReview', () => {
-  it('should render alert with info variant when task status is review', () => {
-    wrapper = shallow(<QuickStartTaskReview {...props} />);
-    expect(wrapper.find(Alert).props().variant).toBe('info');
-  });
+const renderWithContext = (props = {}) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartTaskReview {...defaultProps} {...props} />
+    </QuickStartContext.Provider>,
+  );
 
-  it('should render alert with success variant when task status is success', () => {
-    props.taskStatus = QuickStartTaskStatus.SUCCESS;
-    wrapper = shallow(<QuickStartTaskReview {...props} />);
-    expect(wrapper.find(Alert).props().variant).toBe('success');
+describe('QuickStartTaskReview', () => {
+  it('should render review prompt with yes/no while task is in review', async () => {
+    renderWithContext();
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Check your work')).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Yes' })).not.toBeChecked();
+    expect(screen.getByRole('radio', { name: 'No' })).not.toBeChecked();
   });
 
-  it('should render alert with danger variant when task status is failed', () => {
-    props.taskStatus = QuickStartTaskStatus.FAILED;
-    wrapper = shallow(<QuickStartTaskReview {...props} />);
-    expect(wrapper.find(Alert).props().variant).toBe('danger');
+  it('should mark Yes selected when task status is success', async () => {
+    renderWithContext({ taskStatus: QuickStartTaskStatus.SUCCESS });
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: 'Yes' })).toBeChecked();
+    });
+    expect(screen.getByRole('radio', { name: 'No' })).not.toBeChecked();
   });
 
-  it('should render task help in markdown when task status is failed', () => {
-    wrapper = shallow(<QuickStartTaskReview {...props} />);
-    expect(wrapper.find(QuickStartMarkdownView).at(1).props().content).toEqual(
-      props.review.failedTaskHelp,
-    );
+  it('should mark No selected and show failed-task help when task status is failed', async () => {
+    renderWithContext({ taskStatus: QuickStartTaskStatus.FAILED });
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: 'No' })).toBeChecked();
+    });
+    expect(screen.getByRole('radio', { name: 'Yes' })).not.toBeChecked();
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(/This task is incomplete/);
+    });
   });
 });

package/src/controller/__tests__/QuickStartTasks.spec.tsx

@@ -1,25 +1,22 @@
-import * as React from 'react';
-import { ShallowWrapper, shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import { allQuickStarts } from '../../data/quick-start-test-data';
-import QuickStartMarkdownView from '../../QuickStartMarkdownView';
 import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import { getQuickStartByName } from '../../utils/quick-start-utils';
-import TaskHeader from '../QuickStartTaskHeader';
-import QuickStartTaskReview from '../QuickStartTaskReview';
-import QuickStartTask from '../QuickStartTasks';
+import QuickStartTasks from '../QuickStartTasks';
 
-jest.mock('react', () => {
-  const ActualReact = require.requireActual('react');
-  return {
-    ...ActualReact,
-    useContext: () => jest.fn(),
-  };
-});
+const contextValues = {
+  ...QuickStartContextDefaults,
+  activeQuickStartID: '',
+  startQuickStart: jest.fn(),
+  restartQuickStart: jest.fn(),
+  getResource: (key: string) => key,
+};
+
+const tasks = getQuickStartByName('monitor-sampleapp', allQuickStarts).spec.tasks;
 
-type QuickStartTaskProps = React.ComponentProps<typeof QuickStartTask>;
-let wrapper: ShallowWrapper<QuickStartTaskProps>;
-const props: QuickStartTaskProps = {
-  tasks: getQuickStartByName('monitor-sampleapp', allQuickStarts).spec.tasks,
+const defaultProps = {
+  tasks,
   allTaskStatuses: [
     QuickStartTaskStatus.SUCCESS,
     QuickStartTaskStatus.INIT,
@@ -30,49 +27,54 @@ const props: QuickStartTaskProps = {
   onTaskSelect: jest.fn(),
 };
 
+const renderWithContext = (props = {}) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartTasks {...defaultProps} {...props} />
+    </QuickStartContext.Provider>,
+  );
+
 describe('QuickStartTasks', () => {
   beforeEach(() => {
-    spyOn(React, 'useContext').and.returnValue({
-      activeQuickStartID: '',
-      startQuickStart: () => {},
-      restartQuickStart: () => {},
-      getResource: (key) => `quickstart~${key}`,
-    });
-    wrapper = shallow(<QuickStartTask {...props} />);
+    jest.clearAllMocks();
   });
 
-  it('should render correct number of tasks based on currentTaskIndex', () => {
-    expect(wrapper.find(TaskHeader).length).toBe(1);
+  it('should render correct number of tasks based on currentTaskIndex', async () => {
+    renderWithContext();
+    await waitFor(() => {
+      // Only non-INIT tasks are rendered; first task is SUCCESS so it shows
+      const taskHeaders = screen.getAllByRole('listitem');
+      expect(taskHeaders).toHaveLength(1);
+    });
   });
 
-  it('should render SyncMarkdownView with description if a task is active', () => {
-    wrapper = shallow(
-      <QuickStartTask
-        {...props}
-        allTaskStatuses={[
-          QuickStartTaskStatus.SUCCESS,
-          QuickStartTaskStatus.FAILED,
-          QuickStartTaskStatus.VISITED,
-        ]}
-        taskNumber={2}
-      />,
-    );
-    expect(wrapper.find(QuickStartMarkdownView).at(0).props().content).toEqual(
-      props.tasks[2].description,
-    );
+  it('should render description if a task is active', async () => {
+    renderWithContext({
+      allTaskStatuses: [
+        QuickStartTaskStatus.SUCCESS,
+        QuickStartTaskStatus.FAILED,
+        QuickStartTaskStatus.VISITED,
+      ],
+      taskNumber: 2,
+    });
+    await waitFor(() => {
+      // All 3 tasks are non-INIT, so all render
+      const taskHeaders = screen.getAllByRole('listitem');
+      expect(taskHeaders).toHaveLength(3);
+    });
   });
 
-  it('should render review when task is active and in Review state', () => {
-    wrapper = shallow(
-      <QuickStartTask
-        {...props}
-        allTaskStatuses={[
-          QuickStartTaskStatus.SUCCESS,
-          QuickStartTaskStatus.REVIEW,
-          QuickStartTaskStatus.INIT,
-        ]}
-      />,
-    );
-    expect(wrapper.find(QuickStartTaskReview).exists()).toBe(true);
+  it('should render review when task is active and in Review state', async () => {
+    renderWithContext({
+      allTaskStatuses: [
+        QuickStartTaskStatus.SUCCESS,
+        QuickStartTaskStatus.REVIEW,
+        QuickStartTaskStatus.INIT,
+      ],
+    });
+    await waitFor(() => {
+      // "Check your work" is the alert title for QuickStartTaskReview
+      expect(screen.getByText('Check your work')).toBeInTheDocument();
+    });
   });
 });