From 51b3e88d17914d79a76668247e013043ed195aca Mon Sep 17 00:00:00 2001
From: Leonie Koch <leonie.koch@digitalservice.bund.de>
Date: Tue, 24 Dec 2024 12:54:53 +0100
Subject: [PATCH] Category import (#2448)

* Refactor category import

RISDEV-5888

* Add spacing for error modal

RISDEV-5888

* Add active citations to category import

RISDEV-5888

* Add tests

RISDEV-5888

* Add tests for duplication

RISDEV-5888
---
 .../db-scripts/seed/R__seeding_testdata.sql   |  34 +++
 .../DocumentUnitContentRelatedIndexing.vue    |   8 +-
 .../category-import/CategoryImport.vue        | 182 ++++++++++++++--
 .../category-import/ImportCategoryItem.vue    |  58 -----
 .../category-import/ImportListCategories.vue  | 201 ------------------
 .../category-import/SingleCategory.vue        |  69 ++++++
 .../FieldOfLawExpandableContainer.vue         |   1 +
 .../importCategoryItem.spec.ts                |  66 ------
 .../category-import/importListCategories.ts   | 118 ----------
 .../category-import/singleCategory.spec.ts    |  65 ++++++
 .../test/e2e/caselaw/category-import.spec.ts  |  48 ++++-
 11 files changed, 386 insertions(+), 464 deletions(-)
 delete mode 100644 frontend/src/components/category-import/ImportCategoryItem.vue
 delete mode 100644 frontend/src/components/category-import/ImportListCategories.vue
 create mode 100644 frontend/src/components/category-import/SingleCategory.vue
 delete mode 100644 frontend/test/components/category-import/importCategoryItem.spec.ts
 delete mode 100644 frontend/test/components/category-import/importListCategories.ts
 create mode 100644 frontend/test/components/category-import/singleCategory.spec.ts

diff --git a/backend/src/main/resources/db-scripts/seed/R__seeding_testdata.sql b/backend/src/main/resources/db-scripts/seed/R__seeding_testdata.sql
index 803235cb0..be0f2996e 100644
--- a/backend/src/main/resources/db-scripts/seed/R__seeding_testdata.sql
+++ b/backend/src/main/resources/db-scripts/seed/R__seeding_testdata.sql
@@ -965,3 +965,37 @@ VALUES
             WHERE abbreviation = 'BGB'
         )
     );
+
+INSERT INTO
+    incremental_migration.related_documentation (id, dtype, document_number, documentation_unit_id, citation_type_id, referenced_documentation_unit_id, court_id, date)
+VALUES
+    (
+        gen_random_uuid (),
+        'caselaw_active_citation',
+        'YYTestDoc0013',
+        (
+            SELECT id
+            FROM incremental_migration.documentation_unit
+            WHERE document_number = 'YYTestDoc0013'
+        ),
+        (
+            SELECT id
+            FROM incremental_migration.citation_type
+            WHERE abbreviation = 'Änderung'
+        ),
+        (
+            SELECT id
+            FROM incremental_migration.documentation_unit
+            WHERE document_number = 'YYTestDoc0012'
+        ),
+        (
+            SELECT documentation_unit.court_id
+            FROM incremental_migration.documentation_unit
+            WHERE document_number = 'YYTestDoc0012'
+        ),
+        (
+            SELECT documentation_unit.decision_date
+            FROM incremental_migration.documentation_unit
+            WHERE document_number = 'YYTestDoc0012'
+        )
+    );
diff --git a/frontend/src/components/DocumentUnitContentRelatedIndexing.vue b/frontend/src/components/DocumentUnitContentRelatedIndexing.vue
index 48adf86bb..7ce0bcc3a 100644
--- a/frontend/src/components/DocumentUnitContentRelatedIndexing.vue
+++ b/frontend/src/components/DocumentUnitContentRelatedIndexing.vue
@@ -28,11 +28,11 @@ const hasKeywords = computed(
       label="Schlagwörter"
       :should-show-button="!hasKeywords"
     >
-      <KeyWords @reset="slotProps.reset" />
+      <KeyWords data-testid="keywords" @reset="slotProps.reset" />
     </CategoryWrapper>
-    <FieldsOfLaw />
-    <Norms />
-    <ActiveCitations />
+    <FieldsOfLaw data-testid="fieldsOfLaw" />
+    <Norms data-testid="norms" />
+    <ActiveCitations data-testid="activeCitations" />
     <OtherCategories />
   </div>
 </template>
diff --git a/frontend/src/components/category-import/CategoryImport.vue b/frontend/src/components/category-import/CategoryImport.vue
index 61aa63922..36bfc5e91 100644
--- a/frontend/src/components/category-import/CategoryImport.vue
+++ b/frontend/src/components/category-import/CategoryImport.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import { ref, toRaw, computed, watch } from "vue"
 import { RouterLink } from "vue-router"
-import ImportListCategories from "@/components/category-import/ImportListCategories.vue"
+import SingleCategory from "@/components/category-import/SingleCategory.vue"
 import IconBadge from "@/components/IconBadge.vue"
 import InputField from "@/components/input/InputField.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import TextInput from "@/components/input/TextInput.vue"
 import { useStatusBadge } from "@/composables/useStatusBadge"
+import { useValidationStore } from "@/composables/useValidationStore"
 import DocumentUnit from "@/domain/documentUnit"
 import NormReference from "@/domain/normReference"
+import SingleNorm from "@/domain/singleNorm"
 import documentUnitService from "@/services/documentUnitService"
+import { useDocumentUnitStore } from "@/stores/documentUnitStore"
 import BaselineArrowOutward from "~icons/ic/baseline-arrow-outward"
 import IconSearch from "~icons/ic/baseline-search"
 
 const props = defineProps<{
   documentNumber?: string
 }>()
+const store = useDocumentUnitStore()
+const validationStore = useValidationStore<keyof typeof labels>()
 
 const documentNumber = ref<string>(props.documentNumber ?? "")
 const documentUnitToImport = ref<DocumentUnit | undefined>(undefined)
@@ -40,6 +45,155 @@ async function searchForDocumentUnit() {
     errorMessage.value = "Keine Dokumentationseinheit gefunden."
   }
 }
+
+const labels = {
+  keywords: "Schlagwörter",
+  fieldsOfLaw: "Sachgebiete",
+  norms: "Normen",
+  activeCitations: "Aktivzitierung",
+}
+
+// Handle import logic
+const handleImport = async (key: keyof typeof labels) => {
+  validationStore.reset()
+
+  switch (key) {
+    case "keywords":
+      importKeywords()
+      break
+    case "fieldsOfLaw":
+      importFieldsOfLaw()
+      break
+    case "norms":
+      importNorms()
+      break
+    case "activeCitations":
+      importActiveCitations()
+      break
+  }
+
+  const updateResponse = await store.updateDocumentUnit()
+  if (updateResponse.error) {
+    validationStore.add("Fehler beim Speichern der " + labels[key], key) // add an errormessage to the validationstore field with the key
+  } else {
+    scrollToCategory(key)
+  }
+}
+
+function importKeywords() {
+  const source = documentUnitToImport.value?.contentRelatedIndexing.keywords
+  if (!source) return
+
+  const targetKeywords = store.documentUnit!.contentRelatedIndexing.keywords
+
+  if (targetKeywords) {
+    const uniqueImportableKeywords = source.filter(
+      (keyword) => !targetKeywords.includes(keyword),
+    )
+    targetKeywords.push(...uniqueImportableKeywords)
+  } else {
+    store.documentUnit!.contentRelatedIndexing.keywords = [...source]
+  }
+}
+
+function importFieldsOfLaw() {
+  const source = documentUnitToImport.value?.contentRelatedIndexing.fieldsOfLaw
+  if (!source) return
+
+  const targetFieldsOfLaw =
+    store.documentUnit!.contentRelatedIndexing.fieldsOfLaw
+  if (targetFieldsOfLaw) {
+    const uniqueImportableFieldsOfLaw = source.filter(
+      (fieldOfLaw) =>
+        !targetFieldsOfLaw.find(
+          (entry) => entry.identifier === fieldOfLaw.identifier,
+        ),
+    )
+    targetFieldsOfLaw.push(...uniqueImportableFieldsOfLaw)
+  } else {
+    store.documentUnit!.contentRelatedIndexing.fieldsOfLaw = [...source]
+  }
+}
+
+function importNorms() {
+  const source = documentUnitToImport.value?.contentRelatedIndexing.norms
+  if (!source) return
+
+  const targetNorms = store.documentUnit!.contentRelatedIndexing.norms
+  if (targetNorms) {
+    source.forEach((importableNorm) => {
+      const existingWithAbbreviation = targetNorms.find(
+        (existing) =>
+          existing.normAbbreviation?.abbreviation ===
+          importableNorm.normAbbreviation?.abbreviation,
+      )
+      if (existingWithAbbreviation) {
+        //import single norms into existing norm reference
+        const singleNorms = existingWithAbbreviation?.singleNorms
+        if (singleNorms && importableNorm.singleNorms) {
+          importableNorm.singleNorms
+            .filter(
+              (importableSingleNorm) =>
+                !singleNorms.some(
+                  (singleNorm) =>
+                    singleNorm.singleNorm === importableSingleNorm.singleNorm,
+                ),
+            )
+            .map((importableSingleNorm) => {
+              singleNorms.push(
+                new SingleNorm({
+                  ...(importableSingleNorm as SingleNorm),
+                  id: undefined,
+                }),
+              )
+            })
+        }
+      } else {
+        // import entire norm reference
+        importableNorm.singleNorms?.forEach(
+          (singleNorm) => (singleNorm.id = undefined),
+        )
+        targetNorms.push(
+          new NormReference({ ...(importableNorm as NormReference) }),
+        )
+      }
+    })
+  }
+}
+
+function importActiveCitations() {
+  const source =
+    documentUnitToImport.value?.contentRelatedIndexing.activeCitations
+  if (!source) return
+
+  const targetActiveCitations =
+    store.documentUnit!.contentRelatedIndexing.activeCitations
+  if (targetActiveCitations) {
+    // consider as duplicate, if real reference found with same docnumber and citation
+    const uniqueImportableFieldsOfLaw = source.filter(
+      (activeCitation) =>
+        !targetActiveCitations.find(
+          (entry) =>
+            entry.documentNumber === activeCitation.documentNumber &&
+            entry.citationType?.uuid === activeCitation.citationType?.uuid,
+        ),
+    )
+    targetActiveCitations.push(...uniqueImportableFieldsOfLaw)
+  } else {
+    store.documentUnit!.contentRelatedIndexing.activeCitations = [...source]
+  }
+}
+
+function scrollToCategory(key: string) {
+  const element = document.getElementById(key)
+  if (element) {
+    const headerOffset = 80
+    const offsetPosition =
+      element.getBoundingClientRect().top + window.scrollY - headerOffset
+    window.scrollTo({ top: offsetPosition, behavior: "smooth" })
+  }
+}
+
 watch(
   () => props.documentNumber,
   async () => {
@@ -114,19 +268,19 @@ watch(
           <BaselineArrowOutward class="mb-4 inline w-24" />
         </RouterLink>
       </span>
-
-      <ImportListCategories
-        v-if="documentUnitToImport.contentRelatedIndexing"
-        :importable-fields-of-law="
-          documentUnitToImport.contentRelatedIndexing.fieldsOfLaw
-        "
-        :importable-keywords="
-          documentUnitToImport.contentRelatedIndexing.keywords
-        "
-        :importable-norms="
-          documentUnitToImport.contentRelatedIndexing.norms as NormReference[]
-        "
-      />
+      <div v-for="(value, key) in labels" :key="key">
+        <SingleCategory
+          :error-message="validationStore.getByField(key)"
+          :handle-import="() => handleImport(key)"
+          :has-content="
+            !!(
+              documentUnitToImport.contentRelatedIndexing[key] &&
+              documentUnitToImport.contentRelatedIndexing[key].length > 0
+            )
+          "
+          :label="value"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/category-import/ImportCategoryItem.vue b/frontend/src/components/category-import/ImportCategoryItem.vue
deleted file mode 100644
index ecf59824d..000000000
--- a/frontend/src/components/category-import/ImportCategoryItem.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import IconBadge from "@/components/IconBadge.vue"
-import InfoModal from "@/components/InfoModal.vue"
-import TextButton from "@/components/input/TextButton.vue"
-import IconAdd from "~icons/ic/baseline-add"
-import IconCheck from "~icons/ic/baseline-check"
-import IconInfo from "~icons/ic/outline-info"
-
-defineProps<{
-  label: string
-  importable: boolean
-  importSuccess: boolean
-  errorMessage?: string
-}>()
-
-const emits = defineEmits<{
-  import: [void]
-}>()
-</script>
-
-<template>
-  <div class="flex flex-row items-center gap-16">
-    <TextButton
-      :aria-label="label + ' übernehmen'"
-      button-type="primary"
-      :disabled="!importable"
-      :icon="IconAdd"
-      size="medium"
-      @click="emits('import')"
-    />
-    <span
-      class="ds-label-01-reg"
-      :class="importable ? 'text-blue-800' : 'text-gray-900'"
-      >{{ label }}</span
-    >
-    <IconBadge
-      v-if="!importable"
-      background-color="bg-blue-300"
-      color="text-blue-900"
-      :data-testid="label + '-empty'"
-      :icon="IconInfo"
-      label="Quellrubrik leer"
-    />
-    <IconBadge
-      v-if="importSuccess"
-      background-color="bg-green-300"
-      color="text-green-800"
-      :data-testid="label + '-success'"
-      :icon="IconCheck"
-      label="Übernommen"
-    />
-  </div>
-  <InfoModal
-    v-if="errorMessage"
-    :aria-label="errorMessage"
-    :title="errorMessage"
-  />
-</template>
diff --git a/frontend/src/components/category-import/ImportListCategories.vue b/frontend/src/components/category-import/ImportListCategories.vue
deleted file mode 100644
index d12e18b5f..000000000
--- a/frontend/src/components/category-import/ImportListCategories.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from "vue"
-import ImportCategoryItem from "@/components/category-import/ImportCategoryItem.vue"
-import { DocumentUnitCategoriesEnum } from "@/components/enumDocumentUnitCategories"
-import { FieldOfLaw } from "@/domain/fieldOfLaw"
-import NormReference from "@/domain/normReference"
-import SingleNorm from "@/domain/singleNorm"
-import { useDocumentUnitStore } from "@/stores/documentUnitStore"
-
-const props = defineProps<{
-  importableKeywords?: string[]
-  importableFieldsOfLaw?: FieldOfLaw[]
-  importableNorms?: NormReference[]
-}>()
-
-const store = useDocumentUnitStore()
-
-const keywords = computed({
-  get: () => store.documentUnit?.contentRelatedIndexing.keywords ?? [],
-  set: (newValues: string[]) =>
-    (store.documentUnit!.contentRelatedIndexing.keywords = newValues),
-})
-
-const fieldsOfLaw = computed({
-  get: () => store.documentUnit?.contentRelatedIndexing.fieldsOfLaw ?? [],
-  set: (newValues: FieldOfLaw[]) =>
-    (store.documentUnit!.contentRelatedIndexing.fieldsOfLaw = newValues),
-})
-
-const norms = computed({
-  get: () => store.documentUnit?.contentRelatedIndexing.norms ?? [],
-  set: (newValues: NormReference[]) =>
-    (store.documentUnit!.contentRelatedIndexing.norms = newValues),
-})
-
-const importSuccess = ref({ keywords: false, fieldsOfLaw: false, norms: false })
-const errorMessage = ref({
-  keywords: undefined as string | undefined,
-  fieldsOfLaw: undefined as string | undefined,
-  norms: undefined as string | undefined,
-})
-
-const importableData = computed(() => ({
-  keywords: props.importableKeywords ?? [],
-  fieldsOfLaw: props.importableFieldsOfLaw ?? [],
-  norms: props.importableNorms ?? [],
-}))
-
-const isImportable = computed(() => ({
-  keywords: importableData.value.keywords.length > 0,
-  fieldsOfLaw: importableData.value.fieldsOfLaw.length > 0,
-  norms: importableData.value.norms.length > 0,
-}))
-
-const categoryIdentifier = {
-  keywords: DocumentUnitCategoriesEnum.KEYWORDS,
-  fieldsOfLaw: DocumentUnitCategoriesEnum.FIELDS_OF_LAW,
-  norms: DocumentUnitCategoriesEnum.NORMS,
-}
-
-const labelText = {
-  keywords: "Schlagwörter",
-  fieldsOfLaw: "Sachgebiete",
-  norms: "Normen",
-}
-
-type CategoryType = "keywords" | "fieldsOfLaw" | "norms"
-
-async function importData(type: CategoryType, mergeData: () => void) {
-  hideErrors()
-  if (!isImportable.value[type]) return
-
-  mergeData()
-
-  const updateResponse = await store.updateDocumentUnit()
-  if (updateResponse.error) {
-    errorMessage.value[type] = "Fehler beim Speichern der " + labelText[type]
-  } else {
-    displaySuccess(type)
-    scrollToCategory(categoryIdentifier[type])
-  }
-}
-
-function mergeKeywords() {
-  const uniqueImportableKeywords = importableData.value.keywords.filter(
-    (keyword) => !keywords.value.includes(keyword),
-  )
-  keywords.value.push(...uniqueImportableKeywords)
-}
-
-function mergeFieldsOfLaw() {
-  const uniqueImportableFieldsOfLaw = importableData.value.fieldsOfLaw.filter(
-    (fieldOfLaw) =>
-      !fieldsOfLaw.value.find(
-        (entry) => entry.identifier === fieldOfLaw.identifier,
-      ),
-  )
-  fieldsOfLaw.value.push(...uniqueImportableFieldsOfLaw)
-}
-
-function mergeNorms() {
-  importableData.value.norms.forEach((importableNorm) => {
-    const existingWithAbbreviation = norms.value.find(
-      (existing) =>
-        existing.normAbbreviation?.abbreviation ===
-        importableNorm.normAbbreviation?.abbreviation,
-    )
-    if (existingWithAbbreviation) {
-      //import single norms into existing norm reference
-      const singleNorms = existingWithAbbreviation?.singleNorms
-      if (singleNorms && importableNorm.singleNorms) {
-        importableNorm.singleNorms
-          .filter(
-            (importableSingleNorm) =>
-              !singleNorms.some(
-                (singleNorm) =>
-                  singleNorm.singleNorm === importableSingleNorm.singleNorm,
-              ),
-          )
-          .map((importableSingleNorm) => {
-            singleNorms.push(
-              new SingleNorm({ ...importableSingleNorm, id: undefined }),
-            )
-          })
-      }
-    } else {
-      // import entire norm reference
-      importableNorm.singleNorms?.forEach(
-        (singleNorm) => (singleNorm.id = undefined),
-      )
-      norms.value.push(new NormReference({ ...importableNorm }))
-    }
-  })
-}
-
-function displaySuccess(type: CategoryType) {
-  importSuccess.value[type] = true
-  setTimeout(() => (importSuccess.value[type] = false), 7000)
-}
-
-function scrollToCategory(category: DocumentUnitCategoriesEnum) {
-  const element = document.getElementById(category)
-  if (element) {
-    const headerOffset = 80
-    const offsetPosition =
-      element.getBoundingClientRect().top + window.scrollY - headerOffset
-    window.scrollTo({ top: offsetPosition, behavior: "smooth" })
-  }
-}
-
-function hideErrors() {
-  errorMessage.value = {
-    keywords: undefined,
-    fieldsOfLaw: undefined,
-    norms: undefined,
-  }
-}
-
-watch(
-  () => props,
-  () => hideErrors(),
-)
-</script>
-
-<template>
-  <ImportCategoryItem
-    :error-message="errorMessage.keywords"
-    :import-success="importSuccess.keywords"
-    :importable="isImportable.keywords"
-    :label="labelText.keywords"
-    @import="
-      importData('keywords', () => {
-        mergeKeywords()
-      })
-    "
-  />
-
-  <ImportCategoryItem
-    :error-message="errorMessage.fieldsOfLaw"
-    :import-success="importSuccess.fieldsOfLaw"
-    :importable="isImportable.fieldsOfLaw"
-    :label="labelText.fieldsOfLaw"
-    @import="
-      importData('fieldsOfLaw', () => {
-        mergeFieldsOfLaw()
-      })
-    "
-  />
-
-  <ImportCategoryItem
-    :error-message="errorMessage.norms"
-    :import-success="importSuccess.norms"
-    :importable="isImportable.norms"
-    :label="labelText.norms"
-    @import="
-      importData('norms', () => {
-        mergeNorms()
-      })
-    "
-  />
-</template>
diff --git a/frontend/src/components/category-import/SingleCategory.vue b/frontend/src/components/category-import/SingleCategory.vue
new file mode 100644
index 000000000..7f2b4bc75
--- /dev/null
+++ b/frontend/src/components/category-import/SingleCategory.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import IconBadge from "@/components/IconBadge.vue"
+import InfoModal from "@/components/InfoModal.vue"
+import TextButton from "@/components/input/TextButton.vue"
+import { ValidationError } from "@/components/input/types"
+import IconAdd from "~icons/ic/baseline-add"
+import IconCheck from "~icons/ic/baseline-check"
+import IconInfo from "~icons/ic/outline-info"
+
+const props = defineProps<{
+  label: string
+  errorMessage: ValidationError | undefined
+  hasContent: boolean
+  handleImport: () => void
+}>()
+
+const importSuccess = ref(false)
+const errorMessage = computed(() =>
+  props.errorMessage ? props.errorMessage.message : undefined,
+)
+
+function handleClick() {
+  props.handleImport()
+  importSuccess.value = true
+  setTimeout(() => (importSuccess.value = false), 7000)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-16">
+    <div class="flex flex-row items-center gap-16">
+      <TextButton
+        :aria-label="label + ' übernehmen'"
+        button-type="primary"
+        :disabled="!hasContent"
+        :icon="IconAdd"
+        size="medium"
+        @click="handleClick"
+      />
+      <span
+        class="ds-label-01-reg"
+        :class="hasContent ? 'text-blue-800' : 'text-gray-900'"
+        >{{ label }}</span
+      >
+      <IconBadge
+        v-if="!hasContent"
+        background-color="bg-blue-300"
+        color="text-blue-900"
+        :data-testid="label + '-empty'"
+        :icon="IconInfo"
+        label="Quellrubrik leer"
+      />
+      <IconBadge
+        v-if="importSuccess"
+        background-color="bg-green-300"
+        color="text-green-800"
+        :data-testid="label + '-success'"
+        :icon="IconCheck"
+        label="Übernommen"
+      />
+    </div>
+    <InfoModal
+      v-if="errorMessage"
+      :aria-label="errorMessage"
+      :title="errorMessage"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/field-of-law/FieldOfLawExpandableContainer.vue b/frontend/src/components/field-of-law/FieldOfLawExpandableContainer.vue
index 8cccbf624..725f4fb41 100644
--- a/frontend/src/components/field-of-law/FieldOfLawExpandableContainer.vue
+++ b/frontend/src/components/field-of-law/FieldOfLawExpandableContainer.vue
@@ -76,6 +76,7 @@ export enum InputMethod {
         </h2>
       </div>
       <FieldOfLawSummary
+        data-testid="field-of-law-summary"
         :fields-of-law="fieldsOfLaw"
         @node:clicked="nodeClicked"
         @node:remove="removeNode"
diff --git a/frontend/test/components/category-import/importCategoryItem.spec.ts b/frontend/test/components/category-import/importCategoryItem.spec.ts
deleted file mode 100644
index 4e8cb6c2d..000000000
--- a/frontend/test/components/category-import/importCategoryItem.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { userEvent } from "@testing-library/user-event"
-import { render, screen } from "@testing-library/vue"
-import { createRouter, createWebHistory } from "vue-router"
-import ImportCategoryItem from "@/components/category-import/ImportCategoryItem.vue"
-import routes from "~/test-helper/routes"
-
-function renderComponent(
-  label: string,
-  importable: boolean,
-  importSuccess: boolean,
-  errorMessage?: string,
-) {
-  const user = userEvent.setup()
-  const router = createRouter({
-    history: createWebHistory(),
-    routes: routes,
-  })
-  return {
-    user,
-    ...render(ImportCategoryItem, {
-      props: {
-        label: label,
-        importable: importable,
-        importSuccess: importSuccess,
-        errorMessage: errorMessage,
-      },
-      global: { plugins: [[router]] },
-    }),
-  }
-}
-
-describe("ImportCategoryItem", () => {
-  it("renders component initial state", async () => {
-    renderComponent("Importrubrik", true, false)
-
-    expect(screen.getByText("Importrubrik")).toBeInTheDocument()
-    expect(
-      screen.getByRole("button", { name: "Importrubrik übernehmen" }),
-    ).toBeInTheDocument()
-  })
-
-  it("emits on button click", async () => {
-    const { emitted, user } = renderComponent("Importrubrik", true, false)
-
-    await user.click(
-      screen.getByRole("button", { name: "Importrubrik übernehmen" }),
-    )
-
-    expect(emitted()["import"]).toBeTruthy()
-  })
-
-  it("displays success", async () => {
-    renderComponent("Importrubrik", true, true)
-    expect(screen.getByText("Übernommen")).toBeInTheDocument()
-  })
-
-  it("displays non importable", async () => {
-    renderComponent("Importrubrik", false, false)
-    expect(screen.getByText("Quellrubrik leer")).toBeInTheDocument()
-  })
-
-  it("displays error", async () => {
-    renderComponent("Importrubrik", true, false, "error message")
-    expect(screen.getByText("error message")).toBeInTheDocument()
-  })
-})
diff --git a/frontend/test/components/category-import/importListCategories.ts b/frontend/test/components/category-import/importListCategories.ts
deleted file mode 100644
index 5ef8f5d66..000000000
--- a/frontend/test/components/category-import/importListCategories.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { createTestingPinia } from "@pinia/testing"
-import { userEvent } from "@testing-library/user-event"
-import { render, screen } from "@testing-library/vue"
-import { setActivePinia } from "pinia"
-import { beforeEach } from "vitest"
-import { createRouter, createWebHistory } from "vue-router"
-import ImportListCategories from "@/components/category-import/ImportListCategories.vue"
-import { FieldOfLaw } from "@/domain/fieldOfLaw"
-import NormReference from "@/domain/normReference"
-import { useDocumentUnitStore } from "@/stores/documentUnitStore"
-import routes from "~/test-helper/routes"
-
-function renderComponent(
-  keywords?: string[],
-  fieldsOfLaw?: FieldOfLaw[],
-  norms?: NormReference[],
-) {
-  const user = userEvent.setup()
-  const router = createRouter({
-    history: createWebHistory(),
-    routes: routes,
-  })
-  return {
-    user,
-    ...render(ImportListCategories, {
-      props: {
-        importableKeywords: keywords,
-        importableFieldsOfLaw: fieldsOfLaw,
-        importableNorms: norms,
-      },
-      global: {
-        plugins: [[router]],
-      },
-    }),
-  }
-}
-
-describe("ImportKeywords", () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia())
-  })
-  it("renders component", () => {
-    renderComponent()
-    expect(screen.getByText("Schlagwörter")).toBeInTheDocument()
-    expect(screen.getByLabelText("Schlagwörter übernehmen")).toBeInTheDocument()
-    expect(screen.getByText("Sachgebiete")).toBeInTheDocument()
-    expect(screen.getByLabelText("Sachgebiete übernehmen")).toBeInTheDocument()
-    expect(screen.getByText("Normen")).toBeInTheDocument()
-    expect(screen.getByLabelText("Normen übernehmen")).toBeInTheDocument()
-  })
-
-  it("enables buttons with importable data", () => {
-    renderComponent(
-      ["one"],
-      [
-        {
-          identifier: "AB-01",
-          text: "Sachgebiet 1-2-3",
-          norms: [],
-          children: [],
-          hasChildren: false,
-        },
-      ],
-      [
-        new NormReference({
-          normAbbreviation: {
-            abbreviation: "abc",
-          },
-          singleNorms: [],
-          normAbbreviationRawValue: "",
-        }),
-      ],
-    )
-    expect(screen.getByLabelText("Schlagwörter übernehmen")).toBeEnabled()
-    expect(screen.getByLabelText("Sachgebiete übernehmen")).toBeEnabled()
-    expect(screen.getByLabelText("Normen übernehmen")).toBeEnabled()
-  })
-
-  it("disables buttons without importable data", () => {
-    renderComponent()
-    expect(screen.getByLabelText("Schlagwörter übernehmen")).toBeDisabled()
-    expect(screen.getByLabelText("Sachgebiete übernehmen")).toBeDisabled()
-    expect(screen.getByLabelText("Normen übernehmen")).toBeDisabled()
-  })
-
-  it("displays empty data badges without importable data", () => {
-    renderComponent()
-    expect(screen.getByTestId("Schlagwörter-empty")).toBeInTheDocument()
-    expect(screen.getByTestId("Sachgebiete-empty")).toBeInTheDocument()
-    expect(screen.getByTestId("Normen-empty")).toBeInTheDocument()
-  })
-
-  it("shows error modal if data could not be saved", async () => {
-    const mockedStore = useDocumentUnitStore()
-    vi.spyOn(mockedStore, "updateDocumentUnit").mockResolvedValue({
-      status: 400,
-      error: { title: "error" },
-    })
-    const { user } = renderComponent(["one"])
-    expect(screen.getByLabelText("Schlagwörter übernehmen")).toBeEnabled()
-    await user.click(screen.getByLabelText("Schlagwörter übernehmen"))
-    expect(
-      await screen.findByText("Fehler beim Speichern der Schlagwörter"),
-    ).toBeVisible()
-  })
-
-  it("shows success badge on successful import", async () => {
-    const mockedStore = useDocumentUnitStore()
-    vi.spyOn(mockedStore, "updateDocumentUnit").mockResolvedValue({
-      status: 200,
-      data: { documentationUnitVersion: 1, patch: [], errorPaths: [] },
-    })
-    const { user } = renderComponent(["one"])
-    expect(screen.getByLabelText("Schlagwörter übernehmen")).toBeEnabled()
-    await user.click(screen.getByLabelText("Schlagwörter übernehmen"))
-    expect(await screen.findByText("Übernommen")).toBeVisible()
-  })
-})
diff --git a/frontend/test/components/category-import/singleCategory.spec.ts b/frontend/test/components/category-import/singleCategory.spec.ts
new file mode 100644
index 000000000..69c35d50f
--- /dev/null
+++ b/frontend/test/components/category-import/singleCategory.spec.ts
@@ -0,0 +1,65 @@
+import { userEvent } from "@testing-library/user-event"
+import { render, screen } from "@testing-library/vue"
+import { createRouter, createWebHistory } from "vue-router"
+import SingleCategory from "@/components/category-import/SingleCategory.vue"
+import { ValidationError } from "@/components/input/types"
+import routes from "~/test-helper/routes"
+
+function renderComponent(options?: {
+  label?: string
+  errorMessage?: ValidationError | undefined
+  hasContent?: boolean
+  handleImport?: () => void
+}) {
+  const user = userEvent.setup()
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  })
+  return {
+    user,
+    ...render(SingleCategory, {
+      props: {
+        label: options?.label ?? "Testrubrik",
+        errorMessage: options?.errorMessage ?? undefined,
+        hasContent: options?.hasContent ?? true,
+        handleImport: options?.handleImport ?? vi.fn(),
+      },
+      global: { plugins: [[router]] },
+    }),
+  }
+}
+
+describe("SingleCategory", () => {
+  it("renders component initial state", async () => {
+    renderComponent()
+
+    expect(screen.getByText("Testrubrik")).toBeInTheDocument()
+    expect(
+      screen.getByRole("button", { name: "Testrubrik übernehmen" }),
+    ).toBeInTheDocument()
+  })
+
+  it("button disabled, if no content", async () => {
+    renderComponent({ hasContent: false })
+
+    expect(
+      screen.getByRole("button", { name: "Testrubrik übernehmen" }),
+    ).toBeDisabled()
+    expect(screen.getByText("Quellrubrik leer")).toBeInTheDocument()
+  })
+
+  it("displays error message", async () => {
+    renderComponent({ errorMessage: { instance: "test", message: "Error" } })
+
+    expect(screen.getByText("Error")).toBeInTheDocument()
+  })
+
+  it("displays success", async () => {
+    const { user } = renderComponent()
+    await user.click(
+      screen.getByRole("button", { name: "Testrubrik übernehmen" }),
+    )
+    expect(screen.getByText("Übernommen")).toBeInTheDocument()
+  })
+})
diff --git a/frontend/test/e2e/caselaw/category-import.spec.ts b/frontend/test/e2e/caselaw/category-import.spec.ts
index 721bf0d2f..5aac46174 100644
--- a/frontend/test/e2e/caselaw/category-import.spec.ts
+++ b/frontend/test/e2e/caselaw/category-import.spec.ts
@@ -50,6 +50,12 @@ test.describe("category import", () => {
 
       await expect(page.getByText("Übernommen")).toBeVisible()
       await expect(page.getByText("keyword1")).toBeVisible()
+
+      const keywordsContainer = page.getByTestId("keywords")
+      await expect(keywordsContainer.getByTestId("chip")).toHaveCount(1)
+      await page.getByLabel("Schlagwörter übernehmen").click()
+      // does not import duplicates
+      await expect(keywordsContainer.getByTestId("chip")).toHaveCount(1)
     },
   )
 
@@ -69,6 +75,11 @@ test.describe("category import", () => {
 
       await expect(page.getByText("Übernommen")).toBeVisible()
       await expect(page.getByText("AR-01")).toBeVisible()
+
+      await expect(page.getByTestId("field-of-law-summary")).toHaveCount(1)
+      await page.getByLabel("Sachgebiete übernehmen").click()
+      // does not import duplicates
+      await expect(page.getByTestId("field-of-law-summary")).toHaveCount(1)
     },
   )
 
@@ -88,6 +99,38 @@ test.describe("category import", () => {
 
       await expect(page.getByText("Übernommen")).toBeVisible()
       await expect(page.getByText("BGB")).toBeVisible()
+
+      const normContainer = page.getByTestId("norms")
+      await expect(normContainer.getByLabel("Listen Eintrag")).toHaveCount(2)
+      await page.getByLabel("Normen übernehmen").click()
+      // does not import duplicates
+      await expect(normContainer.getByLabel("Listen Eintrag")).toHaveCount(2)
+    },
+  )
+
+  test(
+    "import active citations",
+    { tag: ["@RISDEV-5888"] },
+    async ({ page, prefilledDocumentUnit }) => {
+      await navigateToCategoryImport(page, prefilledDocumentUnit.documentNumber)
+      await searchForDocumentUnitToImport(page, "YYTestDoc0013")
+      await expect(page.getByText("fileNumber5")).toBeVisible()
+
+      await expect(page.getByLabel("Aktivzitierung übernehmen")).toBeVisible()
+      await page.getByLabel("Aktivzitierung übernehmen").click()
+
+      await expect(page.getByText("Übernommen")).toBeVisible()
+      await expect(page.getByText("Änderung, BVerwG, 09.09.1987")).toBeVisible()
+
+      const activeCitationsContainer = page.getByTestId("activeCitations")
+      await expect(
+        activeCitationsContainer.getByLabel("Listen Eintrag"),
+      ).toHaveCount(2)
+      await page.getByLabel("Aktivzitierung übernehmen").click()
+      // does not import duplicates
+      await expect(
+        activeCitationsContainer.getByLabel("Listen Eintrag"),
+      ).toHaveCount(2)
     },
   )
 
@@ -106,9 +149,8 @@ test.describe("category import", () => {
   ) {
     await page
       .getByRole("textbox", { name: "Dokumentnummer Eingabefeld" })
-      .fill("")
-    await page.getByLabel("Dokumentnummer Eingabefeld").click()
-    await page.keyboard.type(documentNumber)
+      .fill(documentNumber)
+
     await expect(
       page.getByRole("button", { name: "Dokumentationseinheit laden" }),
     ).toBeEnabled()