[feat] introduced jest to replace tape/sinon/enzyme for browser tests; upgrade typescript to 4.5.5

.eslintrc

@@ -5,13 +5,14 @@
     "prettier",
     "plugin:prettier/recommended",
     "prettier/react",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:jest/recommended"
   ],
   "env": {
     "es6": true,
     "browser": true,
     "node": true,
-    "jest": true
+    "jest/globals": true
   },
   "globals": {
     "page": true,

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 */**/node_modules/
 coverage/
+*-coverage/
 .nyc_output/
 dist/
 build/

examples/demo-app/package.json

@@ -3,7 +3,6 @@
     "start": "webpack-dev-server --mode development --progress --hot --open",
     "start-prod": "webpack-dev-server -p --progress --hot --open",
     "start-local": "webpack-dev-server --mode development --env.es6 --progress --hot --open",
-    "start-local-e2e": "webpack-dev-server --mode development --env.es6",
     "start-local-deck": "webpack-dev-server --mode development --env.es6 --env.deck --progress --hot --open",
     "start-local-deck-src": "webpack-dev-server --mode development --env.es6 --env.deck_src --progress --hot --open",
     "start-local-loaders-src": "webpack-dev-server --mode development --env.es6 --env.loaders_src --progress --hot --open",

jest-extend-image-snapshot.js → jest.setup.js

@@ -18,6 +18,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {toMatchImageSnapshot} from 'jest-image-snapshot';
+import '@testing-library/jest-dom';
+import * as Utils from './src/utils/utils';
 
-expect.extend({toMatchImageSnapshot});
+jest.mock('./src/utils/utils', () => ({
+  ...(jest.requireActual('./src/utils/utils')),
+  hasPortableWidth: jest.fn(),
+  hasMobileWidth: jest.fn()
+}));

package.json

@@ -49,9 +49,13 @@
     "test-browser-drive": "NODE_ENV=test node ./test/browser-drive.js debug",
     "test-node-debug": "NODE_ENV=test yarn babel-tape-runner ./test/node.js",
     "test-browser-debug": "NODE_ENV=test yarn babel-tape-runner -r ./test/setup-browser-env.js ./test/js-dom.js",
-    "test-e2e": "NODE_ENV=test HEADLESS=true SLOWMO=true jest",
-    "test": "yarn lint && yarn test-node && yarn test-browser",
-    "cover": "nyc --reporter=lcov --reporter html npm test",
+    "test-jest": "jest --watch",
+    "test-tape": "yarn test-node && yarn test-browser",
+    "test": "yarn test-jest && yarn test-tape",
+    "cover-tape": "nyc --reporter=json --report-dir=tape-coverage --reporter=html yarn test-tape",
+    "cover-jest": "yarn jest --coverage --reporter=html --watchAll=false",
+    "cover-copy": "rm -rf .nyc_output && mkdir .nyc_output && cp tape-coverage/coverage-final.json .nyc_output/tape-coverage-final.json && cp jest-coverage/coverage-final.json .nyc_output/jest-coverage-final.json",
+    "cover": "yarn cover-jest && yarn cover-tape && yarn cover-copy && nyc report --reporter=json --reporter=html --reporter=lcov",
     "start": "yarn install-and-start -- examples/demo-app start-local",
     "start:deck": "yarn install-and-start -- examples/demo-app start-local-deck",
     "start:deck-src": "yarn install-and-start -- examples/demo-app start-local-deck-src",
@@ -142,12 +146,14 @@
     "@probe.gl/env": "^3.5.0",
     "@probe.gl/test-utils": "^3.5.0",
     "@testing-library/dom": "^9.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^3.4.2",
     "@testing-library/user-event": "^14.4.3",
     "@types/d3-array": "^2.0.0",
     "@types/d3-scale": "^3.2.2",
     "@types/geojson": "^7946.0.7",
+    "@types/jsdom": "^21.1.1",
     "@types/redux-actions": "^2.6.2",
     "@types/supercluster": "^7.1.0",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
@@ -167,10 +173,13 @@
     "eslint-config-uber-jsx": "^3.3.3",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-enzyme-deprecation": "^0.7.7",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gl": "^4.9.2",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^16.4.0",
     "json-loader": "^0.5.4",
     "nyc": "^15.1.0",
@@ -192,7 +201,7 @@
     "tape": "^4.9.2",
     "tape-catch": "^1.0.6",
     "typedoc-plugin-markdown": "^3.0.11",
-    "typescript": "4.2.3",
+    "typescript": "4.5.5",
     "uber-licence": "^3.1.1",
     "url-loader": "^4.1.1",
     "watchify": "^3.6.1",

src/components/src/notification-panel/notification-item.tsx

@@ -22,6 +22,7 @@ import React, {Component} from 'react';
 import styled from 'styled-components';
 import {Delete, Info, Warning, Checkmark} from '../common/icons';
 import ReactMarkdown from 'react-markdown';
+import {dataTestIds} from '@kepler.gl/constants';
 import {ActionHandler, removeNotification as removeNotificationActions} from '@kepler.gl/actions';
 
 interface NotificationItemContentBlockProps {
@@ -114,10 +115,10 @@ const NotificationIcon = styled.div`
 `;
 
 const icons = {
-  info: <Info />,
-  warning: <Warning />,
-  error: <Warning />,
-  success: <Checkmark />
+  info: <Info data-testid={dataTestIds.infoIcon} />,
+  warning: <Warning data-testid={dataTestIds.warningIcon} />,
+  error: <Warning data-testid={dataTestIds.errorIcon} />,
+  success: <Checkmark data-testid={dataTestIds.successIcon} />
 };
 
 const LinkRenderer = props => {

src/components/src/side-panel/layer-panel/layer-list.tsx

@@ -30,6 +30,7 @@ import {useDroppable} from '@dnd-kit/core';
 import {useSortable, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
 import {findById} from '@kepler.gl/utils';
+import {dataTestIds} from '@kepler.gl/constants';
 
 export type LayerListProps = {
   datasets: Datasets;
@@ -93,6 +94,7 @@ function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>) {
       <SortableStyledItem
         ref={setNodeRef}
         className={classnames('sortable-layer-items', {sorting: isDragging})}
+        data-testid={dataTestIds.sortableLayerItems}
         transform={CSS.Transform.toString(transform)}
         transition={transition}
         {...attributes}

src/components/src/side-panel/layer-panel/layer-panel-header.tsx

@@ -42,6 +42,7 @@ import {
 
 import {InlineInput, StyledPanelHeader} from '../../common/styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
+import {dataTestIds} from '@kepler.gl/constants';
 import {RGBColor} from '@kepler.gl/types';
 import {BaseProps} from '../../common/icons';
 
@@ -206,6 +207,11 @@ export const DragHandle: React.FC<{
   </StyledDragHandle>
 );
 
+const noOp = (event: MouseEvent) => {
+  event.stopPropagation();
+  event.preventDefault();
+};
+
 export const LayerLabelEditor: React.FC<LayerLabelEditorProps> = ({
   layerId,
   label,
@@ -216,11 +222,9 @@ export const LayerLabelEditor: React.FC<LayerLabelEditorProps> = ({
   <InlineInput
     type="text"
     className="layer__title__editor"
+    data-testid={dataTestIds.layerTitleEditor}
     value={label}
-    onClick={(e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-    }}
+    onClick={noOp}
     onChange={onEdit}
     onFocus={onFocus}
     onBlur={onBlur}
@@ -302,6 +306,7 @@ export function LayerPanelHeaderActionSectionFactory(
           {showRemoveLayer ? (
             <PanelHeaderAction
               className="layer__remove-layer"
+              testId="remove-layer-action"
               id={layerId}
               tooltip={'tooltip.removeLayer'}
               onClick={onRemoveLayer}

src/components/src/side-panel/layer-panel/layer-panel.tsx

@@ -29,6 +29,7 @@ import styled from 'styled-components';
 
 import LayerConfiguratorFactory from './layer-configurator';
 import LayerPanelHeaderFactory from './layer-panel-header';
+import {dataTestIds} from '@kepler.gl/constants';
 import {NestedPartial, LayerVisConfig, ColorUI} from '@kepler.gl/types';
 import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
 import {toggleModal, VisStateActions, ActionHandler} from '@kepler.gl/actions';
@@ -151,6 +152,7 @@ function LayerPanelFactory(
         <PanelWrapper
           active={isConfigActive}
           className={`layer-panel ${this.props.className}`}
+          data-testid={dataTestIds.layerPanel}
           style={this.props.style}
           onMouseDown={this.props.onMouseDown}
           onTouchStart={this.props.onTouchStart}

src/components/src/side-panel/panel-header-action.tsx

@@ -39,15 +39,19 @@ export interface PanelHeaderActionProps {
   onClick?: MouseEventHandler;
   tooltipType?: TooltipProps['type'];
   IconComponent: PanelHeaderActionIcon;
+  testId?: string;
 }
 
 type HeaderActionWrapperProps = {
   flush?: boolean;
   active?: boolean;
   hoverColor?: string | null;
+  testId?: string;
 };
 
-const HeaderActionWrapper = styled.div<HeaderActionWrapperProps>`
+const HeaderActionWrapper = styled.div.attrs((props: HeaderActionWrapperProps) => ({
+  dataTestId: props.testId
+}))<HeaderActionWrapperProps>`
   margin-left: ${props => (props.flush ? 0 : 8)}px;
   display: flex;
   align-items: center;
@@ -81,7 +85,8 @@ export default function PanelHeaderActionFactory(): React.FC<PanelHeaderActionPr
     tooltipType,
     disabled,
     className,
-    IconComponent
+    IconComponent,
+    testId
   }) => {
     return (
       <HeaderActionWrapper
@@ -96,6 +101,7 @@ export default function PanelHeaderActionFactory(): React.FC<PanelHeaderActionPr
         {IconComponent ? (
           <IconComponent
             className="panel--header__action__component"
+            data-testid={testId}
             data-tip
             data-for={`${tooltip}_${id}`}
             height="16px"

src/constants/src/default-settings.ts

@@ -1126,3 +1126,15 @@ export const MAP_CONTROLS = keyMirror({
  * https://github.com/visgl/deck.gl/blob/master/docs/upgrade-guide.md
  */
 export const PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;
+
+export const dataTestIds: Record<string, string> = {
+  infoIcon: 'info-icon',
+  warningIcon: 'warning-icon',
+  errorIcon: 'error-icon',
+  successIcon: 'success-icon',
+  checkmarkIcon: 'checkmark-icon',
+  sortableLayerItems: 'sortable-layer-items',
+  layerTitleEditor: 'layer__title__editor',
+  removeLayerAction: 'remove-layer-action',
+  layerPanel: 'layer-panel'
+};

src/layers/src/mapbox-utils.ts

@@ -51,7 +51,7 @@ export function generateMapboxLayers(
           return acc;
         }
 
-        const layer = layers[layerId];
+        const layer = layers[layerIndex];
 
         if (!(layer.overlayType === OVERLAY_TYPE_CONST.mapboxgl && layersToRender[layerId])) {
           return acc;

src/reducers/src/layer-utils.ts

@@ -144,7 +144,8 @@ export function calculateLayerData<S extends MinVisStateForLayerData>(
     });
     layer.isValid = false;
 
-    layer.errorMessage = err?.message ? err.message.substring(0, 100) : 'Unknown error';
+    layer.errorMessage =
+      err instanceof Error && err.message ? err.message.substring(0, 100) : 'Unknown error';
 
     layerData = {};
   }

src/reducers/src/root.ts

@@ -89,7 +89,6 @@ export function provideInitialState(initialState, extraReducers?) {
     };
 
     // TODO: Understand why the Lint sees an error here, while the IDE does not.
-    // @ts-expect-error
     return handleActions(handlers, initialCoreState)(state, action);
   };
 }

src/utils/src/notifications-utils.ts

@@ -28,16 +28,17 @@ import {
   BUG_REPORT_LINK
 } from '@kepler.gl/constants';
 
+export type Notification = Record<string, any> & {
+  id: string;
+  message: string;
+  type: 'info' | 'error' | 'warning' | 'success';
+  topic: 'global' | 'file';
+  count: number;
+  options: any;
+};
+
 /**
  * Creates a notification
- * @param opt
- * @param opt.message - Message to display during the notification
- * @param opt.type - The type of message. One of DEFAULT_NOTIFICATION_TYPES
- * @param opt.topic - The topic the notification belongs to. One of DEFAULT_NOTIFICATION_TOPICS
- * @param opt.id - Optional id for the notification. If not provided it will be generated by the method
- * @param opt.count - Number of identical notifications present at the moment
- * @param opt.options - Extra parameters to store as part of the notification
- * @returns
  */
 export function createNotification({
   message = DEFAULT_NOTIFICATION_MESSAGE,
@@ -46,14 +47,7 @@ export function createNotification({
   id = generateHashId(DEFAULT_UUID_COUNT),
   count = 1,
   ...options
-}: {
-  message?: string;
-  type?: string;
-  topic?: string;
-  id?: string;
-  count?: number;
-  options?: any;
-}) {
+}: Partial<Notification>) {
   return {
     ...options,
     id,

test/browser/components/notifications/index.js

@@ -18,5 +18,4 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import './notification-item-test';
 import './notification-panel-test';