Add e2e test for creating complex field

dainst · Aug 1, 2023 · 2b335ad · 2b335ad
1 parent dd07d03
commit 2b335ad
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 7 deletions.
diff --git a/desktop/src/app/components/docedit/core/forms/complex-entry-modal.html b/desktop/src/app/components/docedit/core/forms/complex-entry-modal.html
@@ -5,7 +5,7 @@ <h5 *ngIf="!isNew" i18n="@@docedit.editEntry">Eintrag bearbeiten</h5>
 
 <div class="modal-body bg-light">
     <div *ngFor="let subfield of getSubfields()" class="subfield-section">
-        <label>{{getSubfieldLabel(subfield)}}</label>
+        <label class="complex-entry-modal-subfield-label">{{getSubfieldLabel(subfield)}}</label>
         <span *ngIf="getSubfieldDescription(subfield)"
                 placement="left"
                 container="body"
@@ -24,7 +24,7 @@ <h5 *ngIf="!isNew" i18n="@@docedit.editEntry">Eintrag bearbeiten</h5>
             (click)="confirm()">
         <span i18n="@@buttons.ok">OK</span>
     </button>
-    <div class="btn btn-secondary"
+    <div id="cancel-button" class="btn btn-secondary"
          (click)="cancel()">
         <span i18n="@@buttons.cancel">Abbrechen</span>
     </div>

diff --git a/desktop/src/app/components/docedit/core/forms/complex.html b/desktop/src/app/components/docedit/core/forms/complex.html
@@ -27,7 +27,7 @@
 	<input placeholder="Hinzufügen..." i18n-placeholder="@@docedit.forms.complex.add"
            type="text" disabled class="form-control">
 	<div class="input-group-append">
-        <button class="btn btn-success" (click)="createEntry()">
+        <button class="btn btn-success create-complex-entry-button" (click)="createEntry()">
             <span class="mdi mdi-plus-circle"></span>
         </button>
     </div>

diff --git a/desktop/test/e2e/configuration/configuration.spec.ts b/desktop/test/e2e/configuration/configuration.spec.ts
@@ -9,6 +9,7 @@ import { DoceditPage } from '../docedit/docedit.page';
 import { AddFieldModalPage } from './add-field-modal.page';
 import { AddGroupModalPage } from './add-group-modal.page';
 import { ManageValuelistsModalPage } from './manage-valuelists-modal.page';
+import { DoceditComplexEntryModalPage } from '../docedit/docedit-complex-entry-modal.page';
 
 const { test, expect } = require('@playwright/test');
 
@@ -730,4 +731,43 @@ test.describe('configuration --', () => {
         await DoceditPage.clickSaveDocument();
         expect(await ResourcesPage.getSelectedListItemShortDescriptionText()).toEqual('Value label');
     });
+
+
+    test('create complex field', async () => {
+
+        await CategoryPickerPage.clickSelectCategory('Place');
+        await ConfigurationPage.clickAddFieldButton();
+        await AddFieldModalPage.typeInSearchFilterInput('complexField');
+        await AddFieldModalPage.clickCreateNewField();
+
+        await EditConfigurationPage.clickInputTypeSelectOption('complex');
+        await EditConfigurationPage.typeInTranslation(0, 0, 'Kompositfeld');
+
+        await EditConfigurationPage.typeInNewSubfield('subfield1');
+        await EditConfigurationPage.clickCreateSubfield();
+        await EditConfigurationPage.clickInputTypeSelectOption('boolean', true);
+        await EditConfigurationPage.typeInTranslation(0, 0, 'Unterfeld 1', true);
+        await EditConfigurationPage.clickConfirmSubfield();
+
+        await EditConfigurationPage.typeInNewSubfield('subfield2');
+        await EditConfigurationPage.clickCreateSubfield();
+        await EditConfigurationPage.clickInputTypeSelectOption('input', true);
+        await EditConfigurationPage.typeInTranslation(0, 0, 'Unterfeld 2', true);
+        await EditConfigurationPage.clickConfirmSubfield();
+
+        await EditConfigurationPage.clickConfirm();
+        await ConfigurationPage.save();
+
+        await NavbarPage.clickCloseNonResourcesTab();
+        await ResourcesPage.performCreateResource('P1', 'place');
+        await ResourcesPage.openEditByDoubleClickResource('P1');
+        await DoceditPage.clickCreateComplexEntry('test-complexField');
+        expect(await DoceditComplexEntryModalPage.getSubfieldLabel(0)).toEqual('Unterfeld 1');
+        expect(await DoceditComplexEntryModalPage.getSubfieldLabel(1)).toEqual('Unterfeld 2');
+        waitForExist(await DoceditComplexEntryModalPage.getSubfieldInputElement(0, 'boolean'));
+        waitForExist(await DoceditComplexEntryModalPage.getSubfieldInputElement(1, 'input'));
+
+        await DoceditComplexEntryModalPage.clickCancel();
+        await DoceditPage.clickCloseEdit();
+    });
 });
diff --git a/desktop/test/e2e/configuration/edit-configuration.page.ts b/desktop/test/e2e/configuration/edit-configuration.page.ts
@@ -72,15 +72,27 @@ export class EditConfigurationPage {
     }
 
 
+    public static clickConfirmSubfield() {
+
+        return click('#confirm-subfield-button');
+    }
+
+
     public static clickAddValue() {
 
         return click('#add-value-button');
     }
 
 
-    public static clickInputTypeSelectOption(optionValue: string) {
+    public static clickCreateSubfield() {
 
-        return selectOption('#input-type-select', optionValue);
+        return click('#create-subfield-button');
+    }
+
+
+    public static clickInputTypeSelectOption(optionValue: string, isSubfield: boolean = false) {
+
+        return selectOption(this.getModalClass(isSubfield) + ' .input-type-select', optionValue);
     }
 
 
@@ -101,9 +113,11 @@ export class EditConfigurationPage {
 
     // type in
 
-    public static async typeInTranslation(inputIndex: number, translationIndex: number, text: string) {
+    public static async typeInTranslation(inputIndex: number, translationIndex: number, text: string,
+                                          isSubfield: boolean = false) {
 
-        const inputElement = (await getLocator('multi-language-input')).nth(inputIndex);
+        const inputElement = (await getLocator(this.getModalClass(isSubfield) + ' multi-language-input'))
+            .nth(inputIndex);
         const translationElement = (await inputElement.locator('.language-input input')).nth(translationIndex);
         return typeIn(translationElement, text);
     }
@@ -119,4 +133,18 @@ export class EditConfigurationPage {
 
         return typeIn('#new-value-input', valueId);
     }
+
+
+    public static typeInNewSubfield(subfieldName: string) {
+
+        return typeIn('#new-subfield-input', subfieldName);
+    }
+
+
+    private static getModalClass(isSubfield: boolean) {
+
+        return isSubfield
+            ? '.subfield-editor-modal-body'
+            : '.field-editor-modal-body';
+    }
 }
diff --git a/desktop/test/e2e/docedit/docedit-complex-entry-modal.page.ts b/desktop/test/e2e/docedit/docedit-complex-entry-modal.page.ts
@@ -0,0 +1,33 @@
+import { click, getLocator, getText } from '../app';
+
+
+/**
+ * @author Thomas Kleinke
+ */
+export class DoceditComplexEntryModalPage {
+
+    // click
+
+    public static async clickCancel() {
+
+        return click('#cancel-button');
+    }
+
+
+    // get text
+
+    public static async getSubfieldLabel(fieldIndex: number) {
+
+        const element = await getLocator('.subfield-section').nth(fieldIndex);
+        return getText(await element.locator('.complex-entry-modal-subfield-label'));
+    }
+
+
+    // elements
+
+    public static async getSubfieldInputElement(fieldIndex: number, inputType: string) {
+
+        const element = await getLocator('.subfield-section').nth(fieldIndex);
+        return element.locator('form-field-' + inputType);
+    }
+}
diff --git a/desktop/test/e2e/docedit/docedit.page.ts b/desktop/test/e2e/docedit/docedit.page.ts
@@ -159,6 +159,12 @@ export class DoceditPage {
     }
 
 
+    public static clickCreateComplexEntry(fieldName: string) {
+
+        return click('#edit-form-element-' + fieldName + ' .create-complex-entry-button');
+    }
+
+
     // get text
 
     public static async getSimpleInputFieldValue(index) {