add unit tests

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+/* eslint-env node */
+module.exports = 'test-file-stub';

__mocks__/i18next.js

@@ -0,0 +1,13 @@
+/* eslint-env node */
+const dependency = require.requireActual('i18next');
+module.exports = {
+  ...dependency,
+  default: {
+    ...dependency.default,
+    use() {
+      return this;
+    },
+    init: () => Promise.resolve(),
+    t: (key) => (key?.indexOf('~') !== -1 ? key.substring(key.indexOf('~') + 1) : key),
+  },
+};

__mocks__/localStorage.ts

@@ -0,0 +1,13 @@
+let _localStorage = {};
+
+(window as any).localStorage = (window as any).sessionStorage = {
+  setItem(key: string, value: string) {
+    Object.assign(_localStorage, { [key]: value });
+  },
+  getItem(key: string): string | null {
+    return _localStorage.hasOwnProperty(key) ? _localStorage[key] : null;
+  },
+  clear() {
+    _localStorage = {};
+  },
+};

__mocks__/matchMedia.js

@@ -0,0 +1 @@
+window.matchMedia = () => ({ matches: true });

__mocks__/mutationObserver.js

@@ -0,0 +1,7 @@
+/* eslint-disable */
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};

__mocks__/react-i18next.js

@@ -0,0 +1,8 @@
+/* eslint-env node */
+const reactI18next = require.requireActual('react-i18next');
+module.exports = {
+  ...reactI18next,
+  useTranslation: () => ({
+    t: (key) => (key?.indexOf('~') !== -1 ? key.substring(key.indexOf('~') + 1) : key),
+  }),
+};

__mocks__/serverFlags.js

@@ -0,0 +1,4 @@
+window.SERVER_FLAGS = {
+  basePath: '/',
+  consolePlugins: [],
+};

__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+/* eslint-env node */
+module.exports = {};

__mocks__/websocket.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import { WebSocket } from 'mock-socket';
+
+global.WebSocket = WebSocket;

before-tests.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+
+import { configure } from 'enzyme';
+import * as Adapter from 'enzyme-adapter-react-16';
+
+import 'url-search-params-polyfill';
+
+// http://airbnb.io/enzyme/docs/installation/index.html#working-with-react-16
+configure({ adapter: new Adapter() });

jest-resolver.js

@@ -0,0 +1,16 @@
+const defaultResolver = require('jest-resolve/build/defaultResolver').default;
+
+// eslint-disable-next-line no-undef
+module.exports = (request, options) => {
+  let packageFilter;
+  if (request.startsWith('i18next')) {
+    packageFilter = (pkg) => ({
+      ...pkg,
+      main: pkg.module || pkg.main,
+    });
+  }
+  return defaultResolver(request, {
+    ...options,
+    packageFilter,
+  });
+};

package.json

@@ -11,9 +11,67 @@
     "build": "yarn workspace @patternfly/quickstarts build",
     "start": "yarn workspace @patternfly/quickstarts-dev start",
     "watch": "yarn build && concurrently --kill-others \"yarn workspace @patternfly/quickstarts watch\" \"yarn start\"",
-    "build:dev": "yarn workspace @patternfly/quickstarts-dev build"
+    "build:dev": "yarn workspace @patternfly/quickstarts-dev build",
+    "test": "LANG=en_US.UTF-8 jest"
   },
   "devDependencies": {
-    "concurrently": "^5.3.0"
+    "@types/jest": "^26.0.14",
+    "concurrently": "^5.3.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest": "21.x",
+    "jest-resolve": "^26.4.0",
+    "jsdom": "^16.6.0",
+    "mock-socket": "^9.0.3",
+    "ts-jest": "21.x",
+    "url-search-params-polyfill": "2.x"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "ts",
+      "tsx",
+      "json",
+      "gql",
+      "graphql"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js",
+      "^@console/shared(.*)$": "<rootDir>/packages/module/src/ConsoleShared$1",
+      "^@console/internal(.*)$": "<rootDir>/packages/module/src/ConsoleInternal$1",
+      "^@quickstarts(.*)$": "<rootDir>/packages/module/src$1"
+    },
+    "transform": {
+      "^.+\\.(ts|tsx|js|jsx)$": "./node_modules/ts-jest/preprocessor.js"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(lodash-es|@console|@novnc|@spice-project|@popperjs|i18next|@patternfly\\S*?)/.*)"
+    ],
+    "testPathIgnorePatterns": [
+      "node_modules"
+    ],
+    "testRegex": ".*\\.spec\\.(ts|tsx|js|jsx)$",
+    "testURL": "http://localhost",
+    "setupFiles": [
+      "./__mocks__/localStorage.ts",
+      "./__mocks__/matchMedia.js",
+      "./__mocks__/serverFlags.js",
+      "./__mocks__/mutationObserver.js",
+      "./__mocks__/websocket.js",
+      "./before-tests.js"
+    ],
+    "coverageDirectory": "__coverage__",
+    "coverageReporters": [
+      "json",
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!**/node_modules/**"
+    ],
+    "resolver": "./jest-resolver.js"
   }
 }

packages/dev/package.json

@@ -9,7 +9,7 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.0-rc.4",
+    "@patternfly/quickstarts": "1.0.0-rc.5",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
     "react": "^16.14.0",

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "description": "PatternFly quick starts",
   "files": [
     "dist"
@@ -22,7 +22,7 @@
     "prebuild": "yarn clean",
     "build": "rollup -c && yarn post-css",
     "watch": "rollup -cw",
-    "test": "jest",
+    "test": "LANG=en_US.UTF-8 jest",
     "eslint": "eslint --ext .tsx,.js ./src/",
     "lint": "yarn eslint",
     "format": "prettier --check --write ./src/**/*.{tsx,ts}",
@@ -63,10 +63,10 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
     "@testing-library/react": "^11.2.2",
+    "@types/dompurify": "^2.2.2",
     "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "^4.7.8",
-    "@types/jest": "^26.0.14",
     "@types/node": "^14.14.35",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
@@ -82,7 +82,6 @@
     "eslint-plugin-react-hooks": "^4.1.2",
     "express": "^4.17.1",
     "imagemin": "^7.0.0",
-    "jest": "^26.5.3",
     "node-sass": "^5.0.0",
     "prettier": "^2.1.2",
     "prop-types": "^15.6.1",
@@ -99,7 +98,6 @@
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^4.2.0",
-    "ts-jest": "^26.4.1",
     "tslib": "^2.0.3",
     "typescript": "^4.3.2"
   }

packages/module/src/ConsoleInternal/components/markdown-view.tsx

@@ -5,11 +5,13 @@ import _reduce from 'lodash-es/reduce';
 import _truncate from 'lodash-es/truncate';
 import _uniqueId from 'lodash-es/uniqueId';
 import { Converter } from 'showdown';
-import DOMPurify from 'dompurify';
 import { useTranslation } from 'react-i18next';
 
 import './_markdown-view.scss';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const DOMPurify = require('dompurify');
+
 const tableTags = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];
 
 type ShowdownExtension = {

packages/module/src/QuickStartCatalogPage.tsx

@@ -12,14 +12,11 @@ import {
   EmptyStateIcon,
   EmptyStatePrimary,
   Title,
-  TextContent,
   Text,
-  PageSection,
-  PageSectionVariants,
   Divider,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
-import { removeQueryArgument } from '@console/internal/components/utils';
+import { EmptyBox, LoadingBox, removeQueryArgument } from '@console/internal/components/utils';
 import QuickStartCatalogFilter from './catalog/Toolbar/QuickStartCatalogFilter';
 
 type QuickStartCatalogPageProps = {
@@ -125,7 +122,10 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
     [allQuickStartStates, quickStarts],
   );
 
-  return (
+  if (!filteredQuickStarts) return <LoadingBox />;
+  return filteredQuickStarts.length === 0 ? (
+    <EmptyBox label={t('quickstart~Quick Starts')} />
+  ) : (
     <>
       {showTitle && (
         <div className="ocs-page-layout__header">

packages/module/src/__tests__/quick-start-utils.spec.tsx

@@ -0,0 +1,16 @@
+import { getQuickStartByName, isDisabledQuickStart } from '../utils/quick-start-utils';
+import { allQuickStarts } from '../data/quick-start-test-data';
+
+describe('quick-start-utils', () => {
+  it('should return the quick start corresponding to the id for getQuickStartByName function', () => {
+    const mockID = allQuickStarts[0].metadata.name;
+    const quickStart = getQuickStartByName(mockID, allQuickStarts);
+    expect(quickStart.metadata.name === mockID).toBe(true);
+  });
+
+  it('should filter out disabled quick starts', () => {
+    const disabledQuickStarts = [allQuickStarts[0].metadata.name]; // setting allQuickStart[0] as disabled
+    expect(isDisabledQuickStart(allQuickStarts[1], disabledQuickStarts)).toBe(false);
+    expect(isDisabledQuickStart(allQuickStarts[0], disabledQuickStarts)).toBe(true);
+  });
+});

packages/module/src/catalog/__tests__/QuickStartCatalog.spec.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { EmptyBox } from '@console/internal/components/utils';
+import { QuickStartCatalogPage } from '../../QuickStartCatalogPage';
+import QuickStartCatalog from '../QuickStartCatalog';
+import { getQuickStarts } from '../../data/test-utils';
+
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key: string) => key }),
+  };
+});
+
+jest.mock('@console/shared', () => {
+  const ActualShared = require.requireActual('@console/shared');
+  return {
+    ...ActualShared,
+    useQueryParams: () => new Map(),
+  };
+});
+
+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 load a gallery if QS exist', () => {
+    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
+    expect(QuickStartCatalogWrapper.find(Gallery).exists()).toBeTruthy();
+  });
+  it('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(GalleryItem);
+    expect(galleryItems.exists()).toBeTruthy();
+    expect(galleryItems.length).toEqual(getQuickStarts().length);
+  });
+});

packages/module/src/catalog/__tests__/QuickStartTile.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { CatalogTile } from '@patternfly/react-catalog-view-extension';
+import { getQuickStarts } from '../../data/test-utils';
+import QuickStartTile from '../QuickStartTile';
+import { QuickStartStatus } from '../../utils/quick-start-types';
+
+describe('QuickStartTile', () => {
+  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(CatalogTile);
+    expect(catalogTile.exists()).toBeTruthy();
+    expect(catalogTile.prop('featured')).toBe(false);
+  });
+
+  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(CatalogTile);
+    expect(catalogTile.exists()).toBeTruthy();
+    expect(catalogTile.prop('featured')).toBe(true);
+  });
+});