Setup tests for different utility functions and components

.github/workflows/checks.yml

@@ -0,0 +1,127 @@
+# This workflow performs basic checks:
+#
+#   1. run a preparation step to install and cache node modules
+#   2. once prep succeeds, lint and test run in parallel
+#
+# The checks only run on non-draft Pull Requests. They don't run on the main
+# branch prior to deploy. It's recommended to use branch protection to avoid
+# pushes straight to 'main'.
+
+name: Checks
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - ready_for_review
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  prep:
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: npm install
+
+  lint:
+    needs: prep
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: npm install
+
+      - name: Lint
+        run: npm run lint
+
+  test:
+    needs: prep
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: npm install
+
+      - name: Build plugins
+        run: npm run plugins:build
+
+      - name: Test
+        run: npm run test
+
+  build:
+    needs: prep
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: npm install
+
+      - name: Test
+        run: npm run all:build

jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

jest.config.ts

@@ -90,7 +90,7 @@ const config: Config = {
   // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: { 'lodash-es': 'lodash' },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],
@@ -137,7 +137,7 @@ const config: Config = {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

package.json

@@ -13,7 +13,8 @@
     "client:stage": "lerna run stage --scope='@stac-manager/client'",
     "all:build": "lerna run build",
     "all:clean": "lerna run clean",
-    "test": "jest"
+    "test": "jest",
+    "lint": "lerna run lint"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -23,6 +24,7 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.2",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "babel-jest": "^29.7.0",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",

packages/client/package.json

@@ -21,8 +21,7 @@
     "build": "npm run clean && NODE_ENV=production node tasks/build.mjs",
     "stage": "npm run clean && NODE_ENV=staging node tasks/build.mjs",
     "clean": "rm -rf dist .parcel-cache",
-    "lint": "yarn lint:scripts",
-    "lint:scripts": "eslint app/",
+    "lint": "eslint src/",
     "ts-check": "yarn tsc --noEmit --skipLibCheck",
     "test": "jest"
   },

packages/client/src/pages/CollectionDetail/index.tsx

@@ -24,7 +24,8 @@ import {
   PopoverArrow,
   PopoverBody,
   PopoverContent,
-  ButtonGroup
+  ButtonGroup,
+  Button
 } from '@chakra-ui/react';
 import { useCollection, useStacSearch } from '@developmentseed/stac-react';
 import {

packages/data-core/lib/components/__snapshots__/plugin-box.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginBox renders ErrorBox when editSchema is null 1`] = `
+<div
+  class="css-133ygyc"
+  data-testid="plugin-box-error"
+>
+  Plugin 
+  <code
+    class="chakra-code css-1fu8sp0"
+  >
+    TestPlugin
+  </code>
+   has no edit schema.
+</div>
+`;

packages/data-core/lib/components/plugin-box.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Formik } from 'formik';
+import { ChakraProvider } from '@chakra-ui/react';
+
+import { PluginBox } from './plugin-box';
+import { Plugin } from '../plugin-utils/plugin';
+
+const mockPlugin = {
+  name: 'TestPlugin',
+  editSchema: jest.fn()
+};
+
+// Custom renderer to add context or providers if needed
+const renderWithProviders = (
+  ui: React.ReactNode,
+  { renderOptions = {} } = {}
+) => {
+  // You can wrap the component with any context providers here
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ChakraProvider>
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          {children}
+        </Formik>
+      </ChakraProvider>
+    ),
+    ...renderOptions
+  });
+};
+
+describe('PluginBox', () => {
+  it('renders ErrorBox when editSchema is null', () => {
+    mockPlugin.editSchema.mockReturnValue(null);
+
+    const { getByTestId } = renderWithProviders(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <PluginBox plugin={mockPlugin as any}>
+          {({ field }) => <div>{field.label}</div>}
+        </PluginBox>
+      </Formik>
+    );
+
+    expect(getByTestId('plugin-box-error')).toMatchSnapshot();
+  });
+
+  it('renders nothing when editSchema is Plugin.HIDDEN', () => {
+    mockPlugin.editSchema.mockReturnValue(Plugin.HIDDEN);
+
+    const { container } = render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <PluginBox plugin={mockPlugin as any}>
+          {({ field }) => <div>{field.label}</div>}
+        </PluginBox>
+      </Formik>
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders children when editSchema is valid', () => {
+    const mockSchema = { type: 'string', label: 'testField' };
+    mockPlugin.editSchema.mockReturnValue(mockSchema);
+
+    const { getByText } = renderWithProviders(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <PluginBox plugin={mockPlugin as any}>
+          {({ field }) => <div>{field.label}</div>}
+        </PluginBox>
+      </Formik>
+    );
+
+    expect(getByText(/testField/i)).toBeInTheDocument();
+  });
+});

packages/data-core/lib/components/plugin-box.tsx

@@ -27,7 +27,7 @@ export function PluginBox(props: PluginBoxProps) {
 
   if (!editSchema) {
     return (
-      <ErrorBox>
+      <ErrorBox data-testid='plugin-box-error'>
         Plugin <Code color='red'>{plugin.name}</Code> has no edit schema.
       </ErrorBox>
     );