@patternfly/quickstarts 6.5.0-prerelease.4 → 6.5.0

package/dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines.md

@@ -50,7 +50,7 @@ Quick starts are usually surfaced within a catalog as [clickable cards.](/compon
 1. **Icon:** An icon associated with the quick start topic. If no specific icon exists, use the rocket icon.
 1. **Title:** The title (or display name) that briefly identifies the function that the quick start accomplishes. Avoid using the phrase “how to,” and instead begin the title with a gerund (verbs that end in ‘ing’).
     - Example: “Creating a Jupyter notebook”
-1. **Labels:** [Filled labels](/components/label#filled-labels) communicate the estimated completion time and status of a quick start. If the quick start is presented in a mixed catalog of resources, a label can indicate the type of resource.
+1. **Labels:** [Filled labels](/components/label#filled-labels) should be placed in a card to identify quick start experiences and communicate a few high-level details, like estimated completion time and completion status. To signify that a card is linked to a quick start, use a "Quick start" [nonstatus green label](/components/label/design-guidelines#nonstatus-labels). 
 1. **Description:** A description that summarizes the quick start outcome in 4 lines or fewer, without truncating. Begin the description with an action verb. 
     - Example: “Connect to Red Hat OpenShift Streams for Apache Kafka from a Jupyter notebook.”
 1. **Prerequisites (optional):** A bulleted list of prerequisites, displayed in a popover, which outlines permissions needed to complete the tasks, and anything that must be pre-configured before starting the quick start. Avoid phrasing prerequisites as questions. The total number of prerequisites is listed in parentheses on the quick start card.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.5.0-prerelease.4",
+  "version": "6.5.0",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -51,7 +51,7 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.2",
     "history": "^5.0.0"
   },
   "devDependencies": {
@@ -66,10 +66,9 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^13.4.0",
     "@types/dompurify": "^3.0.5",
-    "@types/enzyme": "^3.10.7",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "^4.7.8",
     "@types/node": "^14.14.35",
     "@types/react": "^18.2.79",
@@ -77,9 +76,6 @@
     "clean-css-cli": "^4.3.0",
     "concat-files": "^0.1.1",
     "dart-sass": "^1.25.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "enzyme-to-json": "^3.6.1",
     "monaco-editor": "0.34.1",
     "node-sass-glob-importer": "^5.3.2",
     "prettier": "^2.8.8",

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx

@@ -1,24 +1,38 @@
-import { shallow } from 'enzyme';
-import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
+import { render } from '@testing-library/react';
+import {
+  QuickStartContext,
+  QuickStartContextDefaults,
+} from '@quickstarts/utils/quick-start-context';
+import MarkdownCopyClipboard from '../MarkdownCopyClipboard';
+import { MARKDOWN_COPY_BUTTON_ID } from '../const';
 import { htmlDocumentForCopyClipboard } from './test-data';
 
+const contextValues = {
+  ...QuickStartContextDefaults,
+  getResource: (key: string) => key,
+};
+
 describe('MarkdownCopyClipboard', () => {
   beforeAll(() => {
     document.body.innerHTML = htmlDocumentForCopyClipboard;
   });
+
   it('should render null if no element is found', () => {
-    const wrapper = shallow(
-      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-3" />,
+    const { container } = render(
+      <QuickStartContext.Provider value={contextValues}>
+        <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-3" />
+      </QuickStartContext.Provider>,
     );
-    expect(wrapper.isEmptyRender()).toBe(true);
-    expect(wrapper.find(CopyClipboard).exists()).toBe(false);
+    expect(container.firstChild).toBeNull();
   });
 
-  it('should render null if no element is found', () => {
-    const wrapper = shallow(
-      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-1" />,
+  it('should render copy targets when rootSelector matches buttons in the document', () => {
+    render(
+      <QuickStartContext.Provider value={contextValues}>
+        <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-1" />
+      </QuickStartContext.Provider>,
     );
-    expect(wrapper.isEmptyRender()).toBe(false);
-    expect(wrapper.find(CopyClipboard).exists()).toBe(true);
+    const elements = document.querySelectorAll(`#copy-markdown-1 [${MARKDOWN_COPY_BUTTON_ID}]`);
+    expect(elements).toHaveLength(2);
   });
 });

package/src/catalog/__tests__/QuickStartCatalog.spec.tsx

@@ -1,34 +1,39 @@
-import { Gallery, Card } from '@patternfly/react-core';
-import { shallow } from 'enzyme';
-import { EmptyBox } from '@console/internal/components/utils';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getQuickStarts } from '../../data/test-utils';
-import { QuickStartCatalogPage } from '../../QuickStartCatalogPage';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartCatalog from '../QuickStartCatalog';
 
-jest.mock('@console/shared', () => {
-  const ActualShared = require.requireActual('@console/shared');
-  return {
-    ...ActualShared,
-    useQueryParams: () => new Map(),
-  };
-});
+const contextValues = {
+  ...QuickStartContextDefaults,
+  activeQuickStartID: '',
+  allQuickStartStates: {},
+  getResource: (key: string) => key,
+};
+
+const renderWithContext = (props: any) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartCatalog {...props} />
+    </QuickStartContext.Provider>,
+  );
 
 describe('QuickStartCatalog', () => {
-  it('should load an emptybox if no QS exist', () => {
-    const QuickStartCatalogProps = { quickStarts: [], onClick: jest.fn() };
-    const QuickStartCatalogWrapper = shallow(<QuickStartCatalogPage {...QuickStartCatalogProps} />);
-    expect(QuickStartCatalogWrapper.find(EmptyBox).exists()).toBeTruthy();
+  it('should render an empty state if no QS exist', () => {
+    renderWithContext({ quickStarts: [] });
+    // When no quickstarts, the catalog renders no cards
+    expect(screen.queryByRole('article')).not.toBeInTheDocument();
   });
-  it('should load a gallery if QS exist', () => {
-    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
-    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
-    expect(QuickStartCatalogWrapper.find(Gallery).exists()).toBeTruthy();
-  });
-  xit('should load galleryItems equal to the number of QS', () => {
-    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
-    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
-    const galleryItems = QuickStartCatalogWrapper.find(Card);
-    expect(galleryItems.exists()).toBeTruthy();
-    expect(galleryItems.length).toEqual(getQuickStarts().length);
+
+  it('should load a gallery if QS exist', async () => {
+    const quickStarts = getQuickStarts();
+    renderWithContext({ quickStarts });
+    // Each tile exposes the quick start display name as the title control (link-styled button)
+    await waitFor(() => {
+      quickStarts.forEach((qs) => {
+        expect(
+          screen.getByRole('button', { name: qs.spec.displayName }),
+        ).toBeInTheDocument();
+      });
+    });
   });
 });

package/src/catalog/__tests__/QuickStartTile.spec.tsx

@@ -1,37 +1,56 @@
-import { Card } from '@patternfly/react-core';
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getQuickStarts } from '../../data/test-utils';
 import { QuickStartStatus } from '../../utils/quick-start-types';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartTile from '../QuickStartTile';
 
-describe('QuickStartTile', () => {
-  const quickstarts = getQuickStarts();
+const contextValues = {
+  ...QuickStartContextDefaults,
+  activeQuickStartID: '',
+  setActiveQuickStart: jest.fn(),
+  getResource: (key: string) => key,
+};
+
+const quickstarts = getQuickStarts();
 
-  it('should load proper catalog tile without featured property', () => {
-    const wrapper = shallow(
-      <QuickStartTile
-        quickStart={quickstarts[0]}
-        status={QuickStartStatus.NOT_STARTED}
-        onClick={jest.fn()}
-        isActive={false}
-      />,
-    );
-    const catalogTile = wrapper.find(Card);
-    expect(catalogTile.exists()).toBeTruthy();
-    expect(catalogTile.hasClass('pf-m-current')).toBe(false);
+const renderWithContext = (props: any) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartTile {...props} />
+    </QuickStartContext.Provider>,
+  );
+
+describe('QuickStartTile', () => {
+  it('should load proper catalog tile without featured property', async () => {
+    const quickStart = quickstarts[0];
+    renderWithContext({
+      quickStart,
+      status: QuickStartStatus.NOT_STARTED,
+      onClick: jest.fn(),
+      isActive: false,
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: quickStart.spec.displayName }),
+      ).toBeInTheDocument();
+    });
+    // Status label is omitted for not-started tiles
+    expect(screen.queryByText('In progress')).not.toBeInTheDocument();
   });
 
-  it('should load proper catalog tile with featured property', () => {
-    const wrapper = shallow(
-      <QuickStartTile
-        quickStart={quickstarts[1]}
-        status={QuickStartStatus.IN_PROGRESS}
-        onClick={jest.fn()}
-        isActive
-      />,
-    );
-    const catalogTile = wrapper.find(Card);
-    expect(catalogTile.exists()).toBeTruthy();
-    expect(catalogTile.hasClass('pf-m-current')).toBe(true);
+  it('should load proper catalog tile with featured property', async () => {
+    const quickStart = quickstarts[1];
+    renderWithContext({
+      quickStart,
+      status: QuickStartStatus.IN_PROGRESS,
+      onClick: jest.fn(),
+      isActive: true,
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: quickStart.spec.displayName }),
+      ).toBeInTheDocument();
+    });
+    expect(screen.getByText('In progress')).toBeInTheDocument();
   });
 });

package/src/catalog/__tests__/QuickStartTileDescription.spec.tsx

@@ -1,43 +1,44 @@
-import { Popover } from '@patternfly/react-core';
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getQuickStarts } from '../../data/test-utils';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartTileDescription from '../QuickStartTileDescription';
 
-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,
+};
 
-xdescribe('QuickStartCatalog', () => {
-  beforeEach(() => {
-    spyOn(React, 'useContext').and.returnValue({
-      activeQuickStartID: '',
-      startQuickStart: () => {},
-      restartQuickStart: () => {},
-      getResource: (key) => `quickstart~${key}`,
-    });
-  });
+const renderWithContext = (props: any) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartTileDescription {...props} />
+    </QuickStartContext.Provider>,
+  );
 
-  it('should show prerequisites only if provided', () => {
-    // this quick start does not have prereqs
+describe('QuickStartTileDescription', () => {
+  it('should show prerequisites only if provided', async () => {
     const quickStart = getQuickStarts()[0].spec;
-    const QuickStartTileDescriptionWrapper = shallow(
-      <QuickStartTileDescription description={quickStart.description} />,
-    );
-    expect(QuickStartTileDescriptionWrapper.find(Text)).toHaveLength(0);
+    renderWithContext({ description: quickStart.description });
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: 'Show prerequisites' }),
+      ).not.toBeInTheDocument();
+    });
   });
 
-  it('shoould render prerequisites inside a popover', () => {
+  it('should render prerequisites trigger when prerequisite list is non-empty', async () => {
     const quickStart = getQuickStarts()[2].spec;
-    const QuickStartTileDescriptionWrapper = shallow(
-      <QuickStartTileDescription
-        description={quickStart.description}
-        prerequisites={quickStart.prerequisites}
-      />,
-    );
-    expect(QuickStartTileDescriptionWrapper.find(Popover)).toHaveLength(1);
+    renderWithContext({
+      description: quickStart.description,
+      prerequisites: quickStart.prerequisites,
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Show prerequisites' }),
+      ).toBeInTheDocument();
+    });
   });
 });

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

@@ -1,25 +1,19 @@
-import { ComponentProps } from 'react';
-import { Button } from '@patternfly/react-core';
-import { ShallowWrapper, shallow } from 'enzyme';
+import { render, 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 QuickStartConclusion from '../QuickStartConclusion';
 
-jest.mock('react', () => {
-  const ActualReact = require.requireActual('react');
-  return {
-    ...ActualReact,
-    useContext: () => jest.fn(),
-  };
-});
-
-const i18nNS = 'quickstart';
+const contextValues = {
+  ...QuickStartContextDefaults,
+  activeQuickStartID: '',
+  startQuickStart: jest.fn(),
+  restartQuickStart: jest.fn(),
+  getResource: (key: string) => key,
+};
 
-type QuickStartConclusionProps = ComponentProps<typeof QuickStartConclusion>;
-let wrapper: ShallowWrapper<QuickStartConclusionProps>;
-const props: QuickStartConclusionProps = {
+const defaultProps = {
   tasks: getQuickStartByName('explore-pipelines', allQuickStarts).spec.tasks,
   allTaskStatuses: [
     QuickStartTaskStatus.SUCCESS,
@@ -31,52 +25,56 @@ const props: QuickStartConclusionProps = {
   onQuickStartChange: jest.fn(),
 };
 
-xdescribe('QuickStartConclusion', () => {
+const renderWithContext = (props = {}) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartConclusion {...defaultProps} {...props} />
+    </QuickStartContext.Provider>,
+  );
+
+describe('QuickStartConclusion', () => {
   beforeEach(() => {
-    spyOn(React, 'useContext').and.returnValue({
-      activeQuickStartID: '',
-      startQuickStart: () => {},
-      restartQuickStart: () => {},
-      getResource: (key) => `quickstart~${key}`,
-    });
-    wrapper = shallow(<QuickStartConclusion {...props} />);
+    jest.clearAllMocks();
   });
 
-  it('should render conclusion if there are no failed tasks', () => {
-    expect(wrapper.find(QuickStartMarkdownView).first().props().content).toEqual('conclusion');
+  it('should render conclusion if there are no failed tasks', async () => {
+    renderWithContext();
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(/conclusion/);
+    });
   });
 
-  it('should render link for next quick start if nextQuickStart prop is available and there are no failed tasks', () => {
-    wrapper = shallow(
-      <QuickStartConclusion
-        {...props}
-        nextQuickStarts={[getQuickStartByName('explore-pipelines', allQuickStarts)]}
-      />,
-    );
-    expect(wrapper.find(Button).at(0).props().children).toEqual(
-      `${i18nNS}~Start Installing the Pipelines Operator quick start`,
-    );
+  it('should render link for next quick start if nextQuickStart prop is available and there are no failed tasks', async () => {
+    renderWithContext({
+      nextQuickStarts: [getQuickStartByName('explore-pipelines', allQuickStarts)],
+    });
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(
+        /Start Installing the Pipelines Operator quick start/,
+      );
+    });
   });
 
-  it('should not render link for next quick start if nextQuickStart props is not available', () => {
-    expect(wrapper.find(Button).length).toBe(0);
+  it('should not render link for next quick start if nextQuickStart props is not available', async () => {
+    renderWithContext();
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(/conclusion/);
+    });
+    expect(document.body.textContent).not.toMatch(/Start .* quick start/);
   });
 
-  it('should not render conclusion, link for next quick start and should render message for retrying if there are failed tasks', () => {
-    wrapper = shallow(
-      <QuickStartConclusion
-        {...props}
-        nextQuickStarts={[getQuickStartByName('explore-pipelines', allQuickStarts)]}
-        allTaskStatuses={[
-          QuickStartTaskStatus.FAILED,
-          QuickStartTaskStatus.SUCCESS,
-          QuickStartTaskStatus.SUCCESS,
-        ]}
-      />,
-    );
-    expect(wrapper.find(QuickStartMarkdownView).first().props().content).toEqual(
-      `${i18nNS}~One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.`,
-    );
-    expect(wrapper.find(Button).length).toBe(0);
+  it('should not render conclusion and should render message for retrying if there are failed tasks', async () => {
+    renderWithContext({
+      nextQuickStarts: [getQuickStartByName('explore-pipelines', allQuickStarts)],
+      allTaskStatuses: [
+        QuickStartTaskStatus.FAILED,
+        QuickStartTaskStatus.SUCCESS,
+        QuickStartTaskStatus.SUCCESS,
+      ],
+    });
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(/One or more verifications did not pass/);
+    });
+    expect(document.body.textContent).not.toMatch(/Start .* quick start/);
   });
 });

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

@@ -1,52 +1,71 @@
-import { ComponentProps } from 'react';
-import { ShallowWrapper, shallow } from 'enzyme';
+import { render, waitFor } from '@testing-library/react';
 import { allQuickStarts } from '../../data/quick-start-test-data';
 import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import { getQuickStartByName } from '../../utils/quick-start-utils';
-import QuickStartConclusion from '../QuickStartConclusion';
 import QuickStartContent from '../QuickStartContent';
-import QuickStartIntroduction from '../QuickStartIntroduction';
-import QuickStartTasks from '../QuickStartTasks';
 
-type QuickStartContentProps = ComponentProps<typeof QuickStartContent>;
+const contextValues = {
+  ...QuickStartContextDefaults,
+  getResource: (key: string) => key,
+};
 
-let wrapper: ShallowWrapper<QuickStartContentProps>;
+const quickStart = getQuickStartByName('explore-serverless', allQuickStarts);
+const totalTasks = quickStart.spec.tasks.length;
 
-const props: QuickStartContentProps = {
-  quickStart: getQuickStartByName('explore-serverless', allQuickStarts),
-  allTaskStatuses: [
-    QuickStartTaskStatus.INIT,
-    QuickStartTaskStatus.INIT,
-    QuickStartTaskStatus.INIT,
-  ],
+const defaultProps = {
+  quickStart,
+  allTaskStatuses: [QuickStartTaskStatus.INIT, QuickStartTaskStatus.INIT],
   taskNumber: -1,
   onTaskReview: jest.fn(),
   onTaskSelect: jest.fn(),
   onQuickStartChange: jest.fn(),
 };
 
+const renderWithContext = (props = {}) =>
+  render(
+    <QuickStartContext.Provider value={contextValues}>
+      <QuickStartContent {...defaultProps} {...props} />
+    </QuickStartContext.Provider>,
+  );
+
 describe('QuickStartContent', () => {
   beforeEach(() => {
-    wrapper = shallow(<QuickStartContent {...props} />);
+    jest.clearAllMocks();
   });
 
-  it('should render QuickStartIntroduction when the tour status is Not Started', () => {
-    expect(wrapper.find(QuickStartIntroduction).length).toBe(1);
-    expect(wrapper.find(QuickStartTasks).length).toBe(0);
-    expect(wrapper.find(QuickStartConclusion).length).toBe(0);
+  it('should render QuickStartIntroduction when the tour status is Not Started', async () => {
+    renderWithContext();
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(
+        new RegExp(`In this quick start, you will complete ${totalTasks} task`),
+      );
+    });
+    expect(document.body.textContent).not.toMatch(/Your Serverless Operator is ready/);
   });
 
-  it('should render QuickStartTasks when the tour is In Progress', () => {
-    wrapper = shallow(<QuickStartContent {...props} taskNumber={1} />);
-    expect(wrapper.find(QuickStartIntroduction).length).toBe(0);
-    expect(wrapper.find(QuickStartTasks).length).toBe(1);
-    expect(wrapper.find(QuickStartConclusion).length).toBe(0);
+  it('should render QuickStartTasks when the tour is In Progress', async () => {
+    // taskNumber is 0-based index into spec.tasks; first task visible and active when non-INIT
+    renderWithContext({
+      taskNumber: 0,
+      allTaskStatuses: [QuickStartTaskStatus.VISITED, QuickStartTaskStatus.INIT],
+    });
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(/Install the OpenShift Serverless Operator/);
+    });
+    expect(document.body.textContent).not.toMatch(
+      new RegExp(`In this quick start, you will complete ${totalTasks} task`),
+    );
   });
 
-  it('should render QuickStartConclusion when the tour is Complete', () => {
-    wrapper = shallow(<QuickStartContent {...props} taskNumber={2} />);
-    expect(wrapper.find(QuickStartIntroduction).length).toBe(0);
-    expect(wrapper.find(QuickStartTasks).length).toBe(0);
-    expect(wrapper.find(QuickStartConclusion).length).toBe(1);
+  it('should render QuickStartConclusion when the tour is Complete', async () => {
+    renderWithContext({ taskNumber: totalTasks });
+    await waitFor(() => {
+      expect(document.body.textContent).toMatch(/Your Serverless Operator is ready/);
+    });
+    // Conclusion still lists task headers; intro copy is not shown
+    expect(document.body.textContent).not.toMatch(
+      /In this quick start, you will complete \d+ task/,
+    );
   });
 });

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();
+    });
   });
 });