Skip to content

Commit

Permalink
feat(editor-content): add storybook and unit tests #29871
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicobytes
nicobytes committed Sep 18, 2024
1 parent 12f4f03 commit 7ac1bad
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 9 deletions.
8 changes: 4 additions & 4 deletions ...ent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,29 +26,29 @@
@if (store.allowURLImport()) {
<p-button
[label]="'dot.file.field.action.import.from.url' | dm"
data-testId="action-url-btn"
data-testId="action-import-from-url"
icon="pi pi-link"
styleClass="p-button-link p-button-sm" />
}
@if (store.allowExistingFile()) {
<p-button
[label]="'dot.file.field.action.select.existing.file' | dm"
data-testId="action-editor-btn"
data-testId="action-existing-file"
icon="pi pi-file"
styleClass="p-button-link p-button-sm" />
}
@if (store.allowCreateFile()) {
<p-button
[label]="'dot.file.field.action.create.new.file' | dm"
data-testId="action-editor-btn"
data-testId="action-new-file"
icon="pi pi-code"
styleClass="p-button-link p-button-sm" />
}
@if (store.allowGenerateImg()) {
<p-button
[disabled]="!store.isAIPluginInstalled()"
tooltipPosition="bottom"
data-testId="action-ai-btn"
data-testId="action-generate-with-ai"
styleClass="p-button-link p-button-sm pointer-events-auto">
<svg
fill="none"
Expand Down
97 changes: 92 additions & 5 deletions .../src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,111 @@
import { Spectator, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
import { Spectator, byTestId, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';

import { provideHttpClient } from '@angular/common/http';
import { ControlContainer } from '@angular/forms';

import { DotMessageService } from '@dotcms/data-access';
import {
DotDropZoneComponent,
} from '@dotcms/ui';

import { DotEditContentFileFieldComponent } from './dot-edit-content-file-field.component';
import { FileFieldStore } from './store/file-field.store';

import { BINARY_FIELD_MOCK, createFormGroupDirectiveMock, FILE_FIELD_MOCK, IMAGE_FIELD_MOCK } from '../../utils/mocks';


describe('DotEditContentFileFieldComponent', () => {
let spectator: Spectator<DotEditContentFileFieldComponent>;
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();
});
});


});
78 changes: 78 additions & 0 deletions ...c/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -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<Args> = {
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: `
<dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
<p>Current value: {{ value }}</p>
`
})
};
export default meta;

type Story = StoryObj<Args>;

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}
}
};
42 changes: 42 additions & 0 deletions core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts
View file
Original file line number Diff line number Diff line change
@@ -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':
'<strong>Couldn&apos;t load the file.</strong> Please try again or',
'dot.file.field.drag.and.drop.error.file.maxsize.exceeded.message':
'The file weight <strong>exceeds the limits of {0}</strong>, please reduce size before uploading.',
'dot.file.field.drag.and.drop.error.file.not.supported.message':
'This type of <strong>file is not supported</strong>, 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':
'<strong>Something went wrong</strong>, 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);

0 comments on commit 7ac1bad

Please sign in to comment.