test: add missing unittests

package.json

@@ -52,20 +52,20 @@
     "antd": "^5.21.4",
     "color": "^4.2.3",
     "dotenv": "^16.4.5",
+    "geostyler": "^15.0.1",
     "geostyler-openlayers-parser": "^5.0.0",
     "geostyler-style": "^9.1.0",
-    "geostyler": "^15.0.1",
-    "i18next-browser-languagedetector": "^8.0.0",
     "i18next": "^23.16.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "js-md5": "^0.8.3",
     "keycloak-js": "^26.0.0",
     "normalize.css": "^8.0.1",
     "ol": "^10.2.1",
+    "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.3",
     "react-redux": "^9.1.2",
-    "react": "^18.3.1",
     "shapefile.js": "^1.1.4"
   },
   "devDependencies": {
@@ -91,8 +91,8 @@
     "@semantic-release/release-notes-generator": "^14.0.1",
     "@stylistic/eslint-plugin": "^2.9.0",
     "@swc/helpers": "^0.5.13",
-    "@terrestris/eslint-config-typescript-react": "^3.0.0",
     "@terrestris/eslint-config-typescript": "^7.0.0",
+    "@terrestris/eslint-config-typescript-react": "^3.0.0",
     "@testing-library/jest-dom": "^6.6.1",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -107,25 +107,26 @@
     "chokidar": "^4.0.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
+    "eslint": "^9.12.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-react": "^7.37.1",
-    "eslint": "^9.12.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "fs-extra": "^11.2.0",
     "globals": "^15.11.0",
     "husky": "^9.1.6",
     "ignore-loader": "^0.1.2",
-    "jest-environment-jsdom": "^29.7.0",
     "jest": "^29.7.0",
-    "less-loader": "^12.2.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
     "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "mini-css-extract-plugin": "^2.9.1",
     "path-exists-cli": "2.0.0",
     "react-refresh": "^0.14.2",
     "semantic-release": "^24.1.2",
     "style-loader": "^4.0.0",
-    "typescript-eslint": "^8.9.0",
     "typescript": "^5.6.3",
+    "typescript-eslint": "^8.9.0",
     "webpack-merge": "^6.0.1"
   },
   "publishConfig": {

src/components/ToolMenu/Draw/Attributions/AttributionRow/index.spec.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import {
+  screen,
+  fireEvent,
+  render,
+  within
+} from '@testing-library/react';
+
+import { Form } from 'antd';
+
+import AttributionRow from './index';
+
+describe('<AttributionRow />', () => {
+  it('is defined', () => {
+    expect(AttributionRow).not.toBeUndefined();
+  });
+
+  it('can be rendered with placeholders and options', async () => {
+    render(
+      <Form>
+        <AttributionRow
+          keyName="testKey"
+          options={['Option1', 'Option2']}
+        />
+      </Form>
+    );
+
+    expect(screen.getByText('AttributionRow.keyPlaceholder')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('AttributionRow.valuePlaceholder')).toBeInTheDocument();
+
+    const autoComplete = document.querySelector('#field1_name');
+
+    if (!autoComplete) {
+      return;
+    };
+
+    expect(within(autoComplete.parentElement!).getByText('AttributionRow.keyPlaceholder')).toBeInTheDocument();
+
+    const input = screen.getByPlaceholderText('AttributionRow.valuePlaceholder');
+    expect(input).toBeInTheDocument();
+
+    fireEvent.focus(autoComplete);
+    expect(screen.getByText('Option1')).toBeInTheDocument();
+    expect(screen.getByText('Option2')).toBeInTheDocument();
+  });
+
+  it('calls onChange when Input value changes', () => {
+    const handleChange = jest.fn();
+
+    render(
+      <Form>
+        <AttributionRow
+          keyName="testKey"
+          onChange={handleChange}
+        />
+      </Form>
+    );
+
+    const input = screen.getByPlaceholderText('AttributionRow.valuePlaceholder');
+    fireEvent.change(input, { target: { value: 'TestValue' } });
+
+    expect(handleChange).toHaveBeenCalledWith('TestValue');
+  });
+
+  it('validates the required fields', async () => {
+    render(
+      <Form>
+        <AttributionRow keyName="testKey" />
+      </Form>
+    );
+
+    const autoComplete = document.querySelector('#field1_name');
+    const input = screen.getByPlaceholderText('AttributionRow.valuePlaceholder');
+
+    if (!autoComplete) {
+      return;
+    };
+
+    fireEvent.blur(autoComplete);
+    fireEvent.blur(input);
+
+    expect(await screen.findByText('AttributionRow.missingKey')).toBeInTheDocument();
+    expect(await screen.findByText('AttributionRow.missingValue')).toBeInTheDocument();
+  });
+
+  it('validates unique keys', async () => {
+    const mockFormData = {
+      fields: {
+        field1: { name: 'DuplicateKey' },
+        field2: { name: 'DuplicateKey' }
+      }
+    };
+
+    render(
+      <Form initialValues={mockFormData}>
+        <AttributionRow keyName="field1" />
+      </Form>
+    );
+
+    const autoComplete = document.querySelector('#field1_name');
+
+    if (!autoComplete) {
+      return;
+    };
+
+    fireEvent.change(autoComplete, { target: { value: 'DuplicateKey' } });
+    fireEvent.blur(autoComplete);
+
+    expect(await screen.findByText('AttributionRow.keyInUse')).toBeInTheDocument();
+  });
+});