Add tests for MetadataFields component

Author: zubron

webui/package-lock.json

@@ -66,7 +66,9 @@
     "@stoplight/prism-cli": "^5.14.2",
     "@stoplight/prism-core": "^5.8.0",
     "@stoplight/prism-http-server": "^5.12.2",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/bootstrap": "^5.2.10",
     "@types/js-yaml": "^4.0.9",
     "@types/jsonwebtoken": "^9.0.10",

webui/package.json

@@ -43,7 +43,7 @@ const CompareBranchesActionsBar = (
 
 const MergeButton = ({repo, onDone, source, dest, disabled = false}) => {
     const textRef = useRef(null);
-    const [metadataFields, setMetadataFields] = useState([]);
+    const [metadataFields, setMetadataFields] = useState([])
     const initialMerge = {
         merging: false,
         show: false,
@@ -77,7 +77,7 @@ const MergeButton = ({repo, onDone, source, dest, disabled = false}) => {
         }
         const message = textRef.current.value;
         const metadata = {};
-        metadataFields.forEach(pair => metadata[pair.key] = pair.value);
+        metadataFields.forEach(pair => metadata[pair.key] = pair.value)
 
         let strategy = mergeState.strategy;
         if (strategy === "none") {
@@ -150,11 +150,7 @@ const MergeButton = ({repo, onDone, source, dest, disabled = false}) => {
                     <Button variant="secondary" disabled={mergeState.merging} onClick={hide}>
                         Cancel
                     </Button>
-                    <Button
-                        variant="success"
-                        disabled={mergeState.merging}
-                        onClick={onSubmit}
-                    >
+                    <Button variant="success" disabled={mergeState.merging} onClick={onSubmit}>
                         {(mergeState.merging) ? 'Merging...' : 'Merge'}
                     </Button>
                 </Modal.Footer>

webui/src/lib/components/repository/compareBranchesActionBar.jsx

@@ -6,11 +6,6 @@ import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 
-/**
- * Helper to check if a metadata key is empty or whitespace-only
- */
-const isEmptyKey = (key) => !key || key.trim() === "";
-
 /**
  * MetadataFields is a component that allows the user to add/remove key-value pairs of metadata.
  * @param {Array<{key: string, value: string, touched: boolean}>} metadataFields - current metadata fields to display
@@ -33,14 +28,9 @@ export const MetadataFields = ({ metadataFields, setMetadataFields, ...rest}) =>
     };
 
     const onBlurKey = (i) => () => {
-        setMetadataFields(prev =>
-            prev.map((field, idx) =>
-                idx === i ? {...field, touched: true} : field
-            )
-        );
+        setMetadataFields(prev => [...prev.slice(0,i),  {...prev[i], touched: true}, ...prev.slice(i+1)]);
     };
 
-
     const onRemoveKeyValue = (i) => {
         return () => setMetadataFields(prev => [...prev.slice(0, i), ...prev.slice(i + 1)]);
     };
@@ -76,7 +66,7 @@ export const MetadataFields = ({ metadataFields, setMetadataFields, ...rest}) =>
                             </Col>
                             <Col md={{span: 1}}>
                                 <Form.Text>
-                                    <Button size="sm" variant="secondary" onClick={onRemoveKeyValue(i)}>
+                                    <Button size="sm" variant="secondary" onClick={onRemoveKeyValue(i)} aria-label={`Remove metadata field ${i + 1}`} >
                                         <XIcon/>
                                     </Button>
                                 </Form.Text>
@@ -93,6 +83,8 @@ export const MetadataFields = ({ metadataFields, setMetadataFields, ...rest}) =>
     )
 }
 
+const isEmptyKey = (key) => !key || key.trim() === "";
+
 /**
  * Validates metadata fields and marks empty keys as touched to show validation errors.
  * Use this before submitting to ensure all keys are filled in.

webui/src/lib/components/repository/metadata.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MetadataFields, validateMetadataKeys } from './metadata';
+
+/**
+ * TestContainer is a component wrapper used for testing the MetadataFields component.
+ * It uses the actual React useState hook to manage the state passed to MetadataFields,
+ * ensuring that state updates automatically trigger re-renders in the test environment.
+ *
+ * @param {object} props
+ * @param {Array<Object>} [props.initialFields=[]] - The initial array of metadata field objects to populate the component's state.
+ * @returns {React.JSX.Element} The MetadataFields component rendered with real state management.
+ */
+const TestContainer = ({ initialFields }) => {
+    const [fields, setFields] = React.useState(initialFields);
+
+    return (<MetadataFields metadataFields={fields} setMetadataFields={setFields}/>);
+};
+
+describe('MetadataFields validation flow', () => {
+    it('does not show error when key is valid', () => {
+        render(<TestContainer initialFields={[{ key: 'environment', value: 'prod', touched: false }]} />);
+
+        expect(screen.queryByText('Key is required')).not.toBeInTheDocument();
+    });
+
+    it('shows error after user blurs empty key field', async () => {
+        const user = userEvent.setup();
+
+        render(<TestContainer initialFields={[{ key: '', value: '', touched: false }]} />);
+        expect(screen.queryByText('Key is required')).not.toBeInTheDocument();
+
+        const keyInput = screen.getByPlaceholderText('Key');
+        await user.click(keyInput);
+        await user.tab();
+
+        expect(await screen.findByText('Key is required')).toBeInTheDocument();
+    });
+
+    it('clears error when user enters a valid key after blur', async () => {
+        const user = userEvent.setup();
+
+        render(<TestContainer initialFields={[{ key: '', value: '', touched: false }]} />);
+
+        const keyInput = screen.getByPlaceholderText('Key');
+        await user.click(keyInput);
+        await user.tab();
+        expect(await screen.findByText('Key is required')).toBeInTheDocument();
+
+        await user.type(keyInput, 'env');
+
+        expect(screen.queryByText('Key is required')).not.toBeInTheDocument();
+        expect(keyInput).not.toHaveClass('is-invalid');
+        expect(keyInput).toHaveValue('env');
+    });
+
+    it('adds a new metadata field row when clicking Add button', async () => {
+        const user = userEvent.setup();
+
+        render(<TestContainer initialFields={[]} />);
+
+        await user.click(screen.getByText(/Add Metadata field/i));
+
+        expect(screen.getAllByPlaceholderText('Key')).toHaveLength(1);
+        expect(screen.getByPlaceholderText('Value')).toHaveValue('');
+    });
+
+    it('removes the correct metadata row', async () => {
+        const user = userEvent.setup();
+
+        render(<TestContainer initialFields={[
+            { key: 'a', value: '1', touched: false },
+            { key: 'b', value: '2', touched: false }
+        ]} />);
+
+        const firstDeleteButton = screen.getByRole('button', { name: 'Remove metadata field 1' });
+
+        await user.click(firstDeleteButton);
+
+        const keyInputs = screen.getAllByPlaceholderText('Key');
+        expect(keyInputs).toHaveLength(1);
+        expect(keyInputs[0]).toHaveValue('b');
+        expect(screen.queryByDisplayValue('a')).not.toBeInTheDocument();
+    });
+});
+
+describe('validateMetadataKeys', () => {
+    it('returns true for empty array', () => {
+        const set = vi.fn();
+        expect(validateMetadataKeys([], set)).toBe(true);
+        expect(set).not.toHaveBeenCalled();
+    });
+
+    it('returns true when all keys are valid', () => {
+        const set = vi.fn();
+        const fields = [
+            { key: "key1", value: "value1", touched: false },
+            { key: "key2", value: "", touched: false },
+        ];
+
+        expect(validateMetadataKeys(fields, set)).toBe(true);
+        expect(set).not.toHaveBeenCalled();
+    });
+
+    it('returns false when any key is empty or whitespace', () => {
+        const set = vi.fn();
+        const fields = [
+            { key: "", value: "value", touched: false },
+            { key: "   ", value: "value", touched: false },
+        ];
+
+        expect(validateMetadataKeys(fields, set)).toBe(false);
+        expect(set).toHaveBeenCalledTimes(1);
+    });
+});

webui/src/lib/components/repository/metadata.test.js

@@ -82,9 +82,9 @@ const isAbortedError = (error, controller) => {
 const CommitButton = ({repo, onCommit, enabled = false}) => {
     const textRef = useRef(null);
 
-    const [committing, setCommitting] = useState(false);
-    const [show, setShow] = useState(false);
-    const [metadataFields, setMetadataFields] = useState([]);
+    const [committing, setCommitting] = useState(false)
+    const [show, setShow] = useState(false)
+    const [metadataFields, setMetadataFields] = useState([])
 
     const hide = () => {
         if (committing) return;
@@ -98,8 +98,8 @@ const CommitButton = ({repo, onCommit, enabled = false}) => {
         }
         const message = textRef.current.value;
         const metadata = {};
-        metadataFields.forEach(pair => metadata[pair.key] = pair.value);
-        setCommitting(true);
+        metadataFields.forEach(pair => metadata[pair.key] = pair.value)
+        setCommitting(true)
         onCommit({message, metadata}, () => {
             setCommitting(false)
             setShow(false);
@@ -130,11 +130,7 @@ const CommitButton = ({repo, onCommit, enabled = false}) => {
                     <Button variant="secondary" disabled={committing} onClick={hide}>
                         Cancel
                     </Button>
-                    <Button
-                        variant="success"
-                        disabled={committing}
-                        onClick={onSubmit}
-                    >
+                    <Button variant="success" disabled={committing} onClick={onSubmit}>
                         Commit Changes
                     </Button>
                 </Modal.Footer>
@@ -231,7 +227,7 @@ const ImportModal = ({config, repoId, referenceId, referenceType, path = '', onD
         setImportPhase(ImportPhase.InProgress);
         try {
             const metadata = {};
-            metadataFields.forEach(pair => metadata[pair.key] = pair.value);
+            metadataFields.forEach(pair => metadata[pair.key] = pair.value)
             setImportPhase(ImportPhase.InProgress)
             await startImport(
                 setImportID,
@@ -299,8 +295,7 @@ const ImportModal = ({config, repoId, referenceId, referenceType, path = '', onD
                         importPhase={importPhase}
                         importFunc={doImport}
                         doneFunc={hide}
-                        isEnabled={isImportEnabled}
-                    />
+                        isEnabled={isImportEnabled}/>
         </Modal.Footer>
       </Modal>
     </>

webui/src/lib/components/repository/metadata.test.jsx

@@ -0,0 +1,9 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(matchers);
+
+afterEach(() => {
+    cleanup();
+});

webui/src/pages/repositories/repository/objects.jsx

@@ -9,6 +9,7 @@ export default ({ command }) => {
     test: {
       environment: 'happy-dom',
       exclude: ["./test/e2e/**/*", "./node_modules/**/*"],
+      setupFiles: './test/setup.js',
     },
     plugins: [
       replace({