feat(edit-content): fix DotEditContentMultiSelectFieldComponent test

dotCMS · Oct 26, 2023 · 5ef6b3c · 5ef6b3c
1 parent 02409f0
commit 5ef6b3c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 22 deletions.
diff --git a/...dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component.spec.ts b/...dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component.spec.ts
@@ -3,11 +3,11 @@ import { createComponentFactory } from '@ngneat/spectator/jest';
 
 import { ControlContainer, FormControl, FormGroup, FormGroupDirective } from '@angular/forms';
 
-import { MultiSelect, MultiSelectItem } from 'primeng/multiselect';
+import { MultiSelect, MultiSelectItem, MultiSelectModule } from 'primeng/multiselect';
 
 import { DotEditContentMultiSelectFieldComponent } from './dot-edit-content-multi-select-field.component';
 
-import { MULTI_SELECT_FIELD_MOCK, createFormGroupDirectiveMock } from '../../utils/mocks';
+import { createFormGroupDirectiveMock, MULTI_SELECT_FIELD_MOCK } from '../../utils/mocks';
 
 describe('DotEditContentMultiselectFieldComponent', () => {
     describe('test with value', () => {
@@ -25,18 +25,16 @@ describe('DotEditContentMultiselectFieldComponent', () => {
                     useValue: createFormGroupDirectiveMock(FAKE_FORM_GROUP)
                 }
             ],
-            providers: [FormGroupDirective],
-            detectChanges: false
+            providers: [FormGroupDirective]
         });
 
         beforeEach(() => {
-            spectator = createComponent();
+            spectator = createComponent({ detectChanges: false });
         });
 
         it('should render a options selected if the form have value', () => {
             spectator.setInput('field', MULTI_SELECT_FIELD_MOCK);
-            spectator.detectComponentChanges();
-
+            spectator.detectChanges();
             expect(spectator.query(MultiSelect).valuesAsString).toEqual('one, two');
         });
     });
@@ -52,29 +50,41 @@ describe('DotEditContentMultiselectFieldComponent', () => {
                     useValue: createFormGroupDirectiveMock()
                 }
             ],
-            providers: [FormGroupDirective],
-            detectChanges: false
+            imports: [MultiSelectModule],
+            providers: [FormGroupDirective]
         });
 
+        // Mock de matchMedia
+        // @ts-ignore
+        window.matchMedia =
+            window.matchMedia ||
+            function () {
+                return {
+                    matches: false
+                };
+            };
+
         beforeEach(() => {
-            spectator = createComponent();
+            spectator = createComponent({
+                detectChanges: false
+            });
         });
 
         it('should render no options selected', () => {
             spectator.setInput('field', MULTI_SELECT_FIELD_MOCK);
-            spectator.detectComponentChanges();
+            spectator.detectChanges();
 
             expect(spectator.query(MultiSelect).valuesAsString).toEqual(undefined);
         });
 
         it('should render options', () => {
-            //Working on this test.
             spectator.setInput('field', MULTI_SELECT_FIELD_MOCK);
-            spectator.detectComponentChanges();
+            spectator.detectChanges();
+
             spectator.query(MultiSelect).show();
+            spectator.detectComponentChanges();
 
-            const multiSelectItems = spectator.queryAll(MultiSelectItem);
-            expect(multiSelectItems.length).toBe(2);
+            expect(spectator.queryAll(MultiSelectItem).length).toBe(2);
         });
     });
 });
diff --git a/...elds/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component.ts b/...elds/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component.ts
@@ -1,11 +1,19 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    Input,
+    OnChanges,
+    SimpleChanges
+} from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { MultiSelectModule } from 'primeng/multiselect';
 
 import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 
 import { getSingleSelectableFieldOptions } from '../../utils/functions.util';
+
 @Component({
     selector: 'dot-edit-content-multi-select-field',
     standalone: true,
@@ -20,14 +28,14 @@ import { getSingleSelectableFieldOptions } from '../../utils/functions.util';
         }
     ]
 })
-export class DotEditContentMultiSelectFieldComponent implements OnInit {
+export class DotEditContentMultiSelectFieldComponent implements OnChanges {
     @Input() field!: DotCMSContentTypeField;
     options = [];
 
-    ngOnInit() {
-        this.options = getSingleSelectableFieldOptions(
-            this.field.values || '',
-            this.field.dataType
-        );
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.field && changes.field.currentValue) {
+            const { values, dataType } = changes.field.currentValue;
+            this.options = getSingleSelectableFieldOptions(values || '', dataType);
+        }
     }
 }