Improve e2e tests

Squidex · Sep 5, 2024 · 55dfc04 · 55dfc04
1 parent 81d9ca1
commit 55dfc04
Show file tree

Hide file tree

Showing 17 changed files with 307 additions and 119 deletions.
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -24,9 +24,11 @@ module.exports = {
      */
     config.plugins.push(new CopyPlugin({
         patterns: [
-            { from: './node_modules/ace-builds/src-min/', to: 'dependencies/ace/' },
+            { from: './node_modules/ace-builds/src-min/', to: './dependencies/ace/' },
         ]
     }));
+
+    config.resolve?.extensions?.push('.d.ts');
     return config;
   },
   docs: {

diff --git a/frontend/.storybook/tsconfig.json b/frontend/.storybook/tsconfig.json
@@ -1,9 +1,6 @@
 {
   "extends": "../tsconfig.app.json",
   "compilerOptions": {
-    "types": [
-      "node"
-    ],
     "allowSyntheticDefaultImports": true
   },
   "exclude": [

diff --git a/frontend/angular.json b/frontend/angular.json
@@ -127,7 +127,7 @@
                   "inlineCritical": false
                 },
                 "fonts": true
-              },
+              }
             },
             "development": {
               "extractLicenses": false,

diff --git a/frontend/package.json b/frontend/package.json
@@ -33,7 +33,6 @@
     "@lithiumjs/angular": "^8.0.0",
     "@lithiumjs/ngx-virtual-scroll": "^0.3.2",
     "@marker.io/browser": "^0.19.0",
-    "@types/ace": "^0.0.52",
     "ace-builds": "^1.34.2",
     "angular-gridster2": "18.0.1",
     "angular-mentions": "1.5.0",
@@ -95,6 +94,7 @@
     "@storybook/addon-links": "^8.1.5",
     "@storybook/angular": "^8.1.5",
     "@storybook/testing-library": "^0.2.2",
+    "@types/ace": "^0.0.52",
     "@types/codemirror": "5.60.15",
     "@types/core-js": "2.5.8",
     "@types/jasmine": "5.1.4",

diff --git a/frontend/src/app/features/content/pages/content/content-page.component.ts b/frontend/src/app/features/content/pages/content/content-page.component.ts
@@ -280,17 +280,23 @@ export class ContentPageComponent implements CanComponentDeactivate, OnInit {
             this.contentsState.create(value, publish, this.contentId)
                 .subscribe({
                     next: content => {
-                        if (navigationMode == 'Edit') {
-                            this.contentForm.submitCompleted({ noReset: true });
-                            this.contentForm.load(content.data, true);
+                        switch (navigationMode) {
+                            case 'Add':
+                                this.contentForm = new EditContentForm(this.languages, this.schema, this.schemasState.schemaMap, this.formContext);
+                                break;
 
-                            this.router.navigate([content.id, 'history'], { relativeTo: this.route.parent! });
-                        } else if (navigationMode === 'Close') {
-                            this.autoSaveIgnore = true;
+                            case 'Edit':
+                                this.contentForm.submitCompleted({ noReset: true });
+                                this.contentForm.load(content.data, true);
 
-                            this.router.navigate(['./'], { relativeTo: this.route.parent! });
-                        } else {
-                            this.contentForm = new EditContentForm(this.languages, this.schema, this.schemasState.schemaMap, this.formContext);
+                                this.router.navigate([content.id, 'history'], { relativeTo: this.route.parent! });
+                                break;
+
+                            case 'Close':
+                                this.autoSaveIgnore = true;
+
+                                this.router.navigate(['./'], { relativeTo: this.route.parent! });
+                                break;
                         }
                     },
                     error: error => {

diff --git a/frontend/src/app/features/schemas/pages/schema/fields/field-wizard.component.html b/frontend/src/app/features/schemas/pages/schema/fields/field-wizard.component.html
@@ -9,7 +9,7 @@
 
     <ng-container content>
         @if (editForm) {
-            <form class="edit-form" [formGroup]="editForm.form" (ngSubmit)="save()">
+            <form class="edit-form" [formGroup]="editForm.form" (ngSubmit)="save('Close')">
                 <sqx-field-form
                     [field]="field"
                     [fieldForm]="editForm.form"
@@ -20,7 +20,7 @@
                     [settings]="settings"></sqx-field-form>
             </form>
         } @else {
-            <form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
+            <form [formGroup]="addFieldForm.form" (ngSubmit)="addField('Close')">
                 <sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
                 <div class="form-group">
                     <div class="row">
@@ -88,8 +88,8 @@
 
         @if (!editForm) {
             <div>
-                <div class="btn-group ms-2" attr.aria-label="{{ 'schemas.addFieldAndClose' | sqxTranslate }}" role="group">
-                    <button class="btn btn-success" (click)="addField(false)" shortcut="CTRL + SHIFT + S">
+                <div class="btn-group ms-2" attr.aria-label="{{ 'schemas.addField' | sqxTranslate }}" role="group">
+                    <button class="btn btn-success" (click)="addField('Close')" shortcut="CTRL + SHIFT + S">
                         {{ "schemas.addFieldAndClose" | sqxTranslate }}
                     </button>
                     <button
@@ -106,10 +106,10 @@
                         scrollY="true"
                         [sqxAnchoredTo]="buttonSave"
                         *sqxModal="addFieldModal; closeAlways: true">
-                        <a class="dropdown-item" (click)="addField(true)">
+                        <a class="dropdown-item" (click)="addField('Add')">
                             {{ "schemas.addFieldAndCreate" | sqxTranslate }}
                         </a>
-                        <a class="dropdown-item" (click)="addField(false, true)">
+                        <a class="dropdown-item" (click)="addField('Edit')">
                             {{ "schemas.addFieldAndEdit" | sqxTranslate }}
                         </a>
                     </sqx-dropdown-menu>
@@ -119,13 +119,9 @@
 
         @if (editForm) {
             <div>
-                <div
-                    class="btn-group ms-2"
-                    attr.aria-label="{{ 'schemas.addFieldAndClose' | sqxTranslate }}"
-                    position="top-end"
-                    role="group">
-                    <button class="btn btn-primary" (click)="save(true)" shortcut="CTRL + SHIFT + S">
-                        {{ "schemas.saveFieldAndNew" | sqxTranslate }}
+                <div class="btn-group ms-2" attr.aria-label="{{ 'schemas.saveField' | sqxTranslate }}" role="group">
+                    <button class="btn btn-primary" (click)="save('Close')" shortcut="CTRL + SHIFT + S">
+                        {{ "schemas.saveFieldAndClose" | sqxTranslate }}
                     </button>
                     <button
                         class="btn btn-primary"
@@ -141,8 +137,8 @@
                         scrollY="true"
                         [sqxAnchoredTo]="buttonSave"
                         *sqxModal="addFieldModal; closeAlways: true">
-                        <a class="dropdown-item" (click)="save()">
-                            {{ "schemas.saveFieldAndClose" | sqxTranslate }}
+                        <a class="dropdown-item" (click)="save('Add')">
+                            {{ "schemas.saveFieldAndNew" | sqxTranslate }}
                         </a>
                     </sqx-dropdown-menu>
                 </div>

diff --git a/frontend/src/app/features/schemas/pages/schema/fields/field-wizard.component.ts b/frontend/src/app/features/schemas/pages/schema/fields/field-wizard.component.ts
@@ -11,7 +11,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AddFieldForm, AppSettingsDto, ControlErrorsComponent, createProperties, DropdownMenuComponent, EditFieldForm, FieldDto, fieldTypes, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, LanguagesState, ModalDialogComponent, ModalDirective, ModalModel, ModalPlacementDirective, RootFieldDto, SchemaDto, SchemasState, TooltipDirective, TranslatePipe, Types } from '@app/shared';
 import { FieldFormComponent } from './forms/field-form.component';
 
-const DEFAULT_FIELD = { name: '', partitioning: 'invariant', properties: createProperties('String') };
+
+type SaveNavigationMode = 'Close' | 'Add' | 'Edit';
 
 @Component({
     standalone: true,
@@ -80,60 +81,73 @@ export class FieldWizardComponent implements OnInit {
         this.dialogClose.emit();
     }
 
-    public addField(addNew: boolean, edit = false) {
+    public addField(navigationMode: SaveNavigationMode) {
         const value = this.addFieldForm.submit();
 
-        if (value) {
-            this.schemasState.addField(this.schema, value, this.parent)
-                .subscribe({
-                    next: dto => {
-                        this.field = dto;
+        if (!value) {
+            return;
+        }
 
-                        this.addFieldForm.submitCompleted({ newValue: { ...DEFAULT_FIELD } });
+        this.schemasState.addField(this.schema, value, this.parent)
+            .subscribe({
+                next: dto => {
+                    switch (navigationMode) {
+                        case 'Add':
+                            this.addFieldForm.submitCompleted({ newValue: { ...DEFAULT_FIELD } });
 
-                        if (addNew) {
                             if (Types.isFunction(this.nameInput.nativeElement.focus)) {
                                 this.nameInput.nativeElement.focus();
                             }
-                        } else if (edit) {
+
+                            break;
+
+                        case 'Edit':
+                            this.field = dto;
+
                             this.editForm = new EditFieldForm(this.field.properties);
                             this.editForm.load(this.field.properties);
-                        } else {
+                            break;
+
+                        case 'Close':
                             this.emitClose();
-                        }
-                    },
-                    error: error => {
-                        this.addFieldForm.submitFailed(error);
-                    },
-                });
-        }
+                    }
+                },
+                error: error => {
+                    this.addFieldForm.submitFailed(error);
+                },
+            });
     }
 
-    public save(addNew = false) {
+    public save(navigationMode: SaveNavigationMode) {
         if (!this.editForm) {
             return;
         }
 
         const value = this.editForm.submit();
 
-        if (value) {
-            const properties = createProperties(this.field.properties.fieldType, value);
+        if (!value) {
+            return;
+        }
 
-            this.schemasState.updateField(this.schema, this.field as RootFieldDto, { properties })
-                .subscribe({
-                    next: () => {
-                        this.editForm!.submitCompleted();
+        const properties = createProperties(this.field.properties.fieldType, value);
 
-                        if (addNew) {
+        this.schemasState.updateField(this.schema, this.field as RootFieldDto, { properties })
+            .subscribe({
+                next: () => {
+                    switch (navigationMode) {
+                        case 'Add':
                             this.editForm = undefined;
-                        } else {
+                            break;
+                        case 'Close': {
                             this.emitClose();
                         }
-                    },
-                    error: error => {
-                        this.editForm!.submitFailed(error);
-                    },
-                });
-        }
+                    }
+                },
+                error: error => {
+                    this.editForm!.submitFailed(error);
+                },
+            });
     }
 }
+
+const DEFAULT_FIELD = { name: '', partitioning: 'invariant', properties: createProperties('String') };
diff --git a/frontend/src/app/features/schemas/pages/schema/fields/sortable-field-list.component.html b/frontend/src/app/features/schemas/pages/schema/fields/sortable-field-list.component.html
@@ -4,7 +4,7 @@
     [cdkDropListDisabled]="!sortable"
     (cdkDropListDropped)="sortGroups($event)"
     cdkDropListGroup>
-    @for (group of fieldGroups; track group) {
+    @for (group of fieldGroups; track group.id) {
         <div class="table-drag" cdkDrag [cdkDragDisabled]="!group.separator" cdkDragLockAxis="y">
             <sqx-field-group
                 [fieldGroup]="group"

diff --git a/frontend/src/app/framework/angular/forms/editable-title.stories.ts b/frontend/src/app/framework/angular/forms/editable-title.stories.ts
@@ -14,7 +14,7 @@ export default {
     component: EditableTitleComponent,
     argTypes: {
         inputTitle: {
-            control: 'inputTitle',
+            control: 'text',
         },
         closeButton: {
             control: 'boolean',

diff --git a/frontend/src/app/framework/angular/forms/editors/checkbox-group.stories.ts b/frontend/src/app/framework/angular/forms/editors/checkbox-group.stories.ts
@@ -36,8 +36,7 @@ export default {
     }),
     decorators: [
         moduleMetadata({
-            imports: [
-            ],
+            imports: [],
         }),
     ],
 } as Meta;

diff --git a/frontend/src/app/framework/angular/forms/editors/code-editor.component.ts b/frontend/src/app/framework/angular/forms/editors/code-editor.component.ts
@@ -143,7 +143,7 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, any> imple
     }
 
     public async ngAfterViewInit() {
-        this.valueChanged.pipe(debounceTime(500))
+        this.valueChanged.pipe(debounceTime(100))
             .subscribe(() => {
                 this.changeValue();
             });

diff --git a/frontend/src/app/framework/angular/forms/editors/code-editor.stories.ts b/frontend/src/app/framework/angular/forms/editors/code-editor.stories.ts
@@ -5,6 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+import { FormsModule } from '@angular/forms';
+import { action } from '@storybook/addon-actions';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { CodeEditorComponent, ScriptCompletions } from '@app/framework';
 
@@ -18,6 +20,12 @@ export default {
         dropdownFullWidth: {
             control: 'boolean',
         },
+        singleLine: {
+            control: false,
+        },
+    },
+    args: {
+        ngModelChange: action('ngModelChange'),
     },
     render: args => ({
         props: args,
@@ -28,6 +36,8 @@ export default {
                     [disabled]="disabled"
                     [height]="height"
                     [maxLines]="maxLines"
+                    (ngModelChange)="ngModelChange"
+                    [ngModel]="ngModel"
                     [singleLine]="singleLine"
                     [valueFile]="valueFile"
                     [valueMode]="valueMode"
@@ -39,6 +49,7 @@ export default {
     decorators: [
         moduleMetadata({
             imports: [
+                FormsModule,
             ],
         }),
     ],
@@ -63,11 +74,13 @@ type Story = StoryObj<CodeEditorComponent>;
 export const Default: Story = {
     args: {
         height: 'auto',
-    },
+        ngModel: 'Value',
+    } as any,
 };
 
 export const Completions: Story = {
     args: {
+        height: 200,
         completion: COMPLETIONS,
     },
 };
@@ -84,6 +97,8 @@ export const SingleLine: Story = {
                         [disabled]="disabled"
                         [height]="height"
                         [maxLines]="maxLines"
+                        (ngModelChange)="ngModelChange"
+                        [ngModel]="ngModel"
                         [singleLine]="singleLine"
                         [valueFile]="valueFile"
                         [valueMode]="valueMode"
@@ -98,5 +113,6 @@ export const SingleLine: Story = {
     }),
     args: {
         singleLine: true,
-    },
+        ngModelChange: action('ngModelChange'),
+    } as any,
 };
diff --git a/frontend/src/app/framework/angular/forms/editors/radio-group.stories.ts b/frontend/src/app/framework/angular/forms/editors/radio-group.stories.ts
@@ -36,8 +36,7 @@ export default {
     }),
     decorators: [
         moduleMetadata({
-            imports: [
-            ],
+            imports: [],
         }),
     ],
 } as Meta;