@patternfly/quickstarts 6.5.0-prerelease.3 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.5.0-prerelease.3",
+  "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/QuickStartTile.tsx

@@ -132,18 +132,14 @@ const QuickStartTile: FC<QuickStartTileProps> = ({
     />
   ) : undefined;
 
+  const cardClasses = `pfext-catalog-item${isActive ? ' pf-m-current' : ''}`;
+
   return (
     <Card
       id={`${id}-catalog-tile`}
       style={{ height: '100%' }}
       data-testid={`qs-card-${camelize(displayName)}`}
-      className="pfext-catalog-item"
-      {...(isActive && {
-        isClickable: true,
-        isSelectable: true,
-        isSelected: true,
-        isClicked: true,
-      })}
+      className={cardClasses}
     >
       <CardHeader
         {...(action && {

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,36 +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();
+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.prop('isSelected')).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/,
+    );
   });
 });