From 7ac1bad969377dcc118c86cc06ffd4757102f698 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Wed, 18 Sep 2024 17:22:41 -0400 Subject: [PATCH] feat(editor-content): add storybook and unit tests #29871 --- ...dot-edit-content-file-field.component.html | 8 +- ...-edit-content-file-field.component.spec.ts | 97 ++++++++++++++++++- ...it-content-file-field.component.stories.ts | 78 +++++++++++++++ .../utils/mocks.ts | 42 ++++++++ 4 files changed, 216 insertions(+), 9 deletions(-) create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html index ecfe8f3f032b..fb0a4e9705b6 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html @@ -26,21 +26,21 @@ @if (store.allowURLImport()) { } @if (store.allowExistingFile()) { } @if (store.allowCreateFile()) { } @@ -48,7 +48,7 @@ { let spectator: Spectator; const createComponent = createComponentFactory({ component: DotEditContentFileFieldComponent, detectChanges: false, componentProviders: [FileFieldStore], - providers: [provideHttpClient(), mockProvider(DotMessageService)] + providers: [provideHttpClient(), mockProvider(DotMessageService)], + componentViewProviders: [ + { provide: ControlContainer, useValue: createFormGroupDirectiveMock() } + ], }); - beforeEach(() => (spectator = createComponent())); + describe('FileField', () => { + beforeEach(() => (spectator = createComponent({ + props: { + field: FILE_FIELD_MOCK + } as unknown + }))); + + it('should be created', () => { + expect(spectator.component).toBeTruthy(); + }); + + it('should have a DotDropZoneComponent', () => { + spectator.detectChanges(); + + expect(spectator.query(DotDropZoneComponent)).toBeTruthy(); + }); + + it('should show the proper actions', () => { + spectator.detectChanges(); - it('should be created', () => { - expect(spectator.component).toBeTruthy(); + expect(spectator.query(byTestId('action-import-from-url'))).toBeTruthy(); + expect(spectator.query(byTestId('action-existing-file'))).toBeTruthy(); + expect(spectator.query(byTestId('action-new-file'))).toBeTruthy(); + expect(spectator.query(byTestId('action-generate-with-ai'))).toBeFalsy(); + }); }); + + describe('ImageField', () => { + beforeEach(() => (spectator = createComponent({ + props: { + field: IMAGE_FIELD_MOCK + } as unknown + }))); + + it('should be created', () => { + expect(spectator.component).toBeTruthy(); + }); + + it('should have a DotDropZoneComponent', () => { + spectator.detectChanges(); + + expect(spectator.query(DotDropZoneComponent)).toBeTruthy(); + }); + + it('should show the proper actions', () => { + spectator.detectChanges(); + + expect(spectator.query(byTestId('action-import-from-url'))).toBeTruthy(); + expect(spectator.query(byTestId('action-existing-file'))).toBeTruthy(); + expect(spectator.query(byTestId('action-new-file'))).toBeFalsy(); + expect(spectator.query(byTestId('action-generate-with-ai'))).toBeTruthy(); + }); + }); + + describe('BinaryField', () => { + beforeEach(() => (spectator = createComponent({ + props: { + field: BINARY_FIELD_MOCK + } as unknown + }))); + + it('should be created', () => { + expect(spectator.component).toBeTruthy(); + }); + + it('should have a DotDropZoneComponent', () => { + spectator.detectChanges(); + + expect(spectator.query(DotDropZoneComponent)).toBeTruthy(); + }); + + it('should show the proper actions', () => { + spectator.detectChanges(); + + expect(spectator.query(byTestId('action-import-from-url'))).toBeTruthy(); + expect(spectator.query(byTestId('action-existing-file'))).toBeFalsy(); + expect(spectator.query(byTestId('action-new-file'))).toBeTruthy(); + expect(spectator.query(byTestId('action-generate-with-ai'))).toBeTruthy(); + }); + }); + + }); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts new file mode 100644 index 000000000000..be7671038901 --- /dev/null +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts @@ -0,0 +1,78 @@ +import { moduleMetadata, StoryObj, Meta, applicationConfig, argsToTemplate } from '@storybook/angular'; + +import { provideHttpClient } from '@angular/common/http'; +import { FormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + + +import { DotMessageService } from '@dotcms/data-access'; +import { DotCMSContentTypeField } from '@dotcms/dotcms-models'; + +import { DotEditContentFileFieldComponent } from './dot-edit-content-file-field.component'; +import { FileFieldStore } from './store/file-field.store'; +import { MessageServiceMock } from './utils/mocks'; + +import { + FILE_FIELD_MOCK, IMAGE_FIELD_MOCK, BINARY_FIELD_MOCK +} from '../../utils/mocks'; + +type Args = DotEditContentFileFieldComponent & { + field: DotCMSContentTypeField; + value: string; +} + +const meta: Meta = { + title: 'Library / Edit Content / File Field', + component: DotEditContentFileFieldComponent, + decorators: [ + applicationConfig({ + providers: [ + provideHttpClient(), + { + provide: DotMessageService, + useValue : MessageServiceMock + } + ] + }), + moduleMetadata({ + imports: [ + BrowserAnimationsModule, + FormsModule, + ], + providers: [ + FileFieldStore + ] + }) + ], + render: (args) => ({ + props: args, + template: ` + +

Current value: {{ value }}

+ ` + }) +}; +export default meta; + +type Story = StoryObj; + +export const FileField: Story = { + args: { + value: '', + field: {...FILE_FIELD_MOCK} + } +}; + +export const ImageField: Story = { + args: { + value: '', + field: {...IMAGE_FIELD_MOCK} + } +}; + +export const BinaryField: Story = { + args: { + value: '', + field: {...BINARY_FIELD_MOCK} + } +}; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts new file mode 100644 index 000000000000..699f6714e56b --- /dev/null +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts @@ -0,0 +1,42 @@ +import { MockDotMessageService } from "@dotcms/utils-testing"; + +const MESSAGES_MOCK = { + 'dot.file.field.action.choose.file': 'Choose File', + 'dot.file.field.action.create.new.file': 'Create New File', + 'dot.file.field.action.create.new.file.label': 'File Name', + 'dot.file.field.action.import.from.url.error.message': + 'The URL you requested is not valid. Please try again.', + 'dot.file.field.action.import.from.url': 'Import from URL', + 'dot.file.field.action.remove': 'Remove', + 'dot.file.field.dialog.create.new.file.header': 'File Details', + 'dot.file.field.dialog.import.from.url.header': 'URL', + 'dot.file.field.drag.and.drop.error.could.not.load.message': + 'Couldn't load the file. Please try again or', + 'dot.file.field.drag.and.drop.error.file.maxsize.exceeded.message': + 'The file weight exceeds the limits of {0}, please reduce size before uploading.', + 'dot.file.field.drag.and.drop.error.file.not.supported.message': + 'This type of file is not supported, Please select a {0} file.', + 'dot.file.field.drag.and.drop.error.multiple.files.dropped.message': + 'You can only upload one file at a time.', + 'dot.file.field.drag.and.drop.error.server.error.message': + 'Something went wrong, please try again or contact our support team.', + 'dot.file.field.drag.and.drop.message': 'Drag and Drop or', + 'dot.file.field.error.type.file.not.extension': "Please add the file's extension", + 'dot.file.field.error.type.file.not.supported.message': + 'This type of file is not supported. Please use a {0} file.', + 'dot.file.field.file.bytes': 'Bytes', + 'dot.file.field.file.dimension': 'Dimension', + 'dot.file.field.file.size': 'File Size', + 'dot.file.field.import.from.url.error.file.not.supported.message': + 'This type of file is not supported, Please import a {0} file.', + 'dot.file.field.action.generate.with.dotai': 'Generate with dotAI', + 'dot.file.field.action.select.existing.file': 'Select Existing File', + 'dot.common.cancel': 'Cancel', + 'dot.common.edit': 'Edit', + 'dot.common.import': 'Import', + 'dot.common.remove': 'Remove', + 'dot.common.save': 'Save', + 'error.form.validator.required': 'This field is required', +}; + +export const MessageServiceMock = new MockDotMessageService(MESSAGES_MOCK); \ No newline at end of file