|
1 | | -import { MonacoEditorComponent, MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'; |
2 | | -import { Spectator } from '@ngneat/spectator'; |
3 | | -import { createComponentFactory } from '@ngneat/spectator/jest'; |
4 | | -import { MockComponent } from 'ng-mocks'; |
5 | | - |
6 | | -import { |
7 | | - ControlContainer, |
8 | | - FormControl, |
9 | | - FormGroup, |
10 | | - FormGroupDirective, |
11 | | - FormsModule, |
12 | | - ReactiveFormsModule |
13 | | -} from '@angular/forms'; |
14 | | - |
15 | | -import { |
16 | | - DEFAULT_JSON_FIELD_EDITOR_CONFIG, |
17 | | - DotEditContentJsonFieldComponent |
18 | | -} from './dot-edit-content-json-field.component'; |
19 | | - |
20 | | -import { createFormGroupDirectiveMock, JSON_FIELD_MOCK } from '../../utils/mocks'; |
| 1 | +import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator/jest'; |
| 2 | + |
| 3 | +import { provideHttpClient } from '@angular/common/http'; |
| 4 | +import { provideHttpClientTesting } from '@angular/common/http/testing'; |
| 5 | +import { ControlContainer, FormGroupDirective } from '@angular/forms'; |
| 6 | + |
| 7 | +import { DotLanguageVariableSelectorComponent } from '@dotcms/ui'; |
| 8 | +import { monacoMock } from '@dotcms/utils-testing'; |
| 9 | + |
| 10 | +import { DotEditContentJsonFieldComponent } from './dot-edit-content-json-field.component'; |
| 11 | + |
| 12 | +import { AvailableLanguageMonaco } from '../../models/dot-edit-content-field.constant'; |
| 13 | +import { DotEditContentMonacoEditorControlComponent } from '../../shared/dot-edit-content-monaco-editor-control/dot-edit-content-monaco-editor-control.component'; |
| 14 | +import { JSON_FIELD_MOCK, createFormGroupDirectiveMock } from '../../utils/mocks'; |
| 15 | + |
| 16 | +// eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 17 | +(global as any).monaco = monacoMock; |
21 | 18 |
|
22 | 19 | describe('DotEditContentJsonFieldComponent', () => { |
23 | | - describe('test with value', () => { |
24 | | - let spectator: Spectator<DotEditContentJsonFieldComponent>; |
25 | | - let controlContainer: ControlContainer; |
| 20 | + let spectator: Spectator<DotEditContentJsonFieldComponent>; |
| 21 | + let component: DotEditContentJsonFieldComponent; |
26 | 22 |
|
27 | | - const FAKE_FORM_GROUP = new FormGroup({ |
28 | | - json: new FormControl("{ 'test': 'test' }") |
29 | | - }); |
| 23 | + const createComponent = createComponentFactory({ |
| 24 | + component: DotEditContentJsonFieldComponent, |
| 25 | + componentMocks: [ |
| 26 | + DotLanguageVariableSelectorComponent, |
| 27 | + DotEditContentMonacoEditorControlComponent |
| 28 | + ], |
| 29 | + componentViewProviders: [ |
| 30 | + { |
| 31 | + provide: ControlContainer, |
| 32 | + useValue: createFormGroupDirectiveMock() |
| 33 | + } |
| 34 | + ], |
| 35 | + providers: [FormGroupDirective, provideHttpClient(), provideHttpClientTesting()] |
| 36 | + }); |
| 37 | + |
| 38 | + beforeEach(() => { |
| 39 | + // Limpiar cualquier llamada anterior a los mocks |
| 40 | + jest.clearAllMocks(); |
30 | 41 |
|
31 | | - const createComponent = createComponentFactory({ |
32 | | - component: DotEditContentJsonFieldComponent, |
33 | | - imports: [FormsModule, ReactiveFormsModule, MonacoEditorModule], |
34 | | - declarations: [MockComponent(MonacoEditorComponent)], |
35 | | - componentViewProviders: [ |
36 | | - { |
37 | | - provide: ControlContainer, |
38 | | - useValue: createFormGroupDirectiveMock(FAKE_FORM_GROUP) |
39 | | - } |
40 | | - ], |
41 | | - providers: [FormGroupDirective], |
| 42 | + spectator = createComponent({ |
42 | 43 | detectChanges: false |
43 | 44 | }); |
| 45 | + spectator.setInput('field', JSON_FIELD_MOCK); |
| 46 | + spectator.detectChanges(); |
44 | 47 |
|
45 | | - beforeEach(() => { |
46 | | - spectator = createComponent(); |
47 | | - controlContainer = spectator.inject(ControlContainer, true); |
48 | | - spectator.setInput('field', JSON_FIELD_MOCK); |
49 | | - spectator.detectComponentChanges(); |
50 | | - }); |
| 48 | + component = spectator.component; |
| 49 | + }); |
51 | 50 |
|
52 | | - it('should render the Monoaco Editor with Current Value', () => { |
53 | | - const monacoEditorComponent = spectator.query(MonacoEditorComponent); |
54 | | - expect(monacoEditorComponent).not.toBeNull(); |
55 | | - }); |
| 51 | + it('should render the component container', () => { |
| 52 | + expect(spectator.query(byTestId('json-field-container'))).toBeTruthy(); |
| 53 | + }); |
56 | 54 |
|
57 | | - it('should have the form Variable as a FormControlName', () => { |
58 | | - const element = spectator.query('ngx-monaco-editor'); |
59 | | - expect(element.getAttribute('ng-reflect-name')).toBe(JSON_FIELD_MOCK.variable); |
60 | | - }); |
| 55 | + it('should render the language variable selector', () => { |
| 56 | + const languageVariableSelector = spectator.query(DotLanguageVariableSelectorComponent); |
| 57 | + expect(languageVariableSelector).toBeTruthy(); |
| 58 | + }); |
61 | 59 |
|
62 | | - it('should have the right editor options', () => { |
63 | | - const monacoEditorComponent = spectator.query(MonacoEditorComponent); |
64 | | - expect(monacoEditorComponent.options).toEqual(DEFAULT_JSON_FIELD_EDITOR_CONFIG); |
65 | | - }); |
| 60 | + it('should render the editor container', () => { |
| 61 | + expect(spectator.query(byTestId('json-field-editor'))).toBeTruthy(); |
| 62 | + }); |
66 | 63 |
|
67 | | - it('should called markForCheck when the value changes', () => { |
68 | | - const spy = jest.spyOn(spectator.component['cd'], 'markForCheck'); |
| 64 | + it('should render the monaco editor component', () => { |
| 65 | + const monacoEditor = spectator.query(DotEditContentMonacoEditorControlComponent); |
| 66 | + expect(monacoEditor).toBeTruthy(); |
| 67 | + }); |
69 | 68 |
|
70 | | - controlContainer.control.get(JSON_FIELD_MOCK.variable).setValue('{ "test": "test" }'); |
| 69 | + it('should pass JSON as forced language to monaco editor', () => { |
| 70 | + const monacoEditor = spectator.query(DotEditContentMonacoEditorControlComponent); |
| 71 | + expect(monacoEditor.$forcedLanguage()).toBe(AvailableLanguageMonaco.Json); |
| 72 | + }); |
71 | 73 |
|
72 | | - expect(spy).toHaveBeenCalled(); |
73 | | - }); |
| 74 | + it('should call insertLanguageVariableInMonaco when language variable is selected', () => { |
| 75 | + // Mock the insertLanguageVariableInMonaco private method |
| 76 | + const insertLanguageVariableInMonacoMock = jest.fn(); |
| 77 | + component['insertLanguageVariableInMonaco'] = insertLanguageVariableInMonacoMock; |
| 78 | + |
| 79 | + // Trigger onSelectLanguageVariable with a test variable |
| 80 | + const testVariable = 'test_variable'; |
| 81 | + component.onSelectLanguageVariable(testVariable); |
| 82 | + |
| 83 | + // Verify the mocked method was called with the correct variable |
| 84 | + expect(insertLanguageVariableInMonacoMock).toHaveBeenCalledWith(testVariable); |
74 | 85 | }); |
75 | 86 | }); |
0 commit comments