Skip to content

Commit

Permalink
feat(edit-content) fix comments, added new test #28831
Browse files Browse the repository at this point in the history
  • Loading branch information
@oidacra
oidacra committed Jun 26, 2024
1 parent c40a6c8 commit dd91c79
Show file tree
Hide file tree
Showing 16 changed files with 552 additions and 361 deletions.
6 changes: 6 additions & 0 deletions core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import {
} from './dot-categories.service';

const mockCategory: DotCategory = {
active: false,
childrenCount: 0,
description: '',
iDate: 0,
keywords: '',
owner: '',
categoryId: '1222',
categoryName: 'Test',
key: 'adsdsd',
Expand Down
16 changes: 14 additions & 2 deletions ...src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,13 @@ xdescribe('DotCategoriesListingTableComponent', () => {
working: false,
name: 'dsdsd',
friendlyName: 'dfdf',
type: 'ASD'
type: 'ASD',
active: false,
childrenCount: 0,
description: '',
iDate: 0,
keywords: '',
owner: ''
},
{
categoryId: '9e882f2a-ada2-47e3-a441-bdf9a7254216',
Expand All @@ -72,7 +78,13 @@ xdescribe('DotCategoriesListingTableComponent', () => {
working: false,
name: 'dsdsd',
friendlyName: 'dfdf',
type: 'ASD'
type: 'ASD',
active: false,
childrenCount: 0,
description: '',
iDate: 0,
keywords: '',
owner: ''
}
];
beforeEach(() => {
Expand Down
11 changes: 6 additions & 5 deletions core-web/libs/edit-content/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/no-host-metadata-property": 0,
"@angular-eslint/directive-selector": [
"error",
{
Expand All @@ -21,11 +26,7 @@
"style": "kebab-case"
}
]
},
"extends": [
"plugin:@nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
]
}
},
{
"files": ["*.html"],
Expand Down
144 changes: 54 additions & 90 deletions ...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,94 +6,58 @@
{{ field.name }}
</label>

@switch (field.fieldType) {
@case (fieldTypes.SELECT) {
<dot-edit-content-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.RADIO) {
<dot-edit-content-radio-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.TEXT) {
<dot-edit-content-text-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.TEXTAREA) {
<dot-edit-content-text-area
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.CHECKBOX) {
<dot-edit-content-checkbox-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.MULTI_SELECT) {
<dot-edit-content-multi-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (calendarTypes.includes(field.fieldType) ? field.fieldType : '') {
<dot-edit-content-calendar-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.TAG) {
<dot-edit-content-tag-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.JSON) {
<dot-edit-content-json-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.BINARY) {
<dot-edit-content-binary-field
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.CUSTOM_FIELD) {
<dot-edit-content-custom-field
[field]="field"
[contentType]="contentType"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.BLOCK_EDITOR) {
<dot-block-editor
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.KEY_VALUE) {
<dot-edit-content-key-value
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.WYSIWYG) {
<dot-edit-content-wysiwyg-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.HOST_FOLDER) {
<dot-edit-content-host-folder-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
@case (fieldTypes.CATEGORY) {
<dot-edit-content-category-field
[attr.data-testId]="'field-' + field.variable"
[contentlet]="contentlet"
[field]="field" />
}
}
@if (field.hint) {
<small [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
@switch (field.fieldType) { @case (fieldTypes.SELECT) {
<dot-edit-content-select-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.RADIO) {
<dot-edit-content-radio-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.TEXT) {
<dot-edit-content-text-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.TEXTAREA) {
<dot-edit-content-text-area [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.CHECKBOX) {
<dot-edit-content-checkbox-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.MULTI_SELECT) {
<dot-edit-content-multi-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
} @case (calendarTypes.includes(field.fieldType) ? field.fieldType : '') {
<dot-edit-content-calendar-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.TAG) {
<dot-edit-content-tag-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.JSON) {
<dot-edit-content-json-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.BINARY) {
<dot-edit-content-binary-field
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.CUSTOM_FIELD) {
<dot-edit-content-custom-field
[field]="field"
[contentType]="contentType"
[attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.BLOCK_EDITOR) {
<dot-block-editor
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.KEY_VALUE) {
<dot-edit-content-key-value
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.WYSIWYG) {
<dot-edit-content-wysiwyg-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.HOST_FOLDER) {
<dot-edit-content-host-folder-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
} @case (fieldTypes.CATEGORY) {
<dot-edit-content-category-field
[attr.data-testId]="'field-' + field.variable"
[contentlet]="contentlet"
[field]="field" />
} } @if (field.hint) {
<small [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
}
5 changes: 3 additions & 2 deletions ...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
[ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }"
class="flex-1 category-list__category-list">
@for (column of categories(); let index = $index; track categories()[index]) {
@for (column of categories(); let index = $index; track index) {
<!--dynamic columns-->
<div #categoryColumn class="category-list__category-column" data-testId="category-column">
@for (item of column; track item.inode) {
Expand Down Expand Up @@ -32,8 +32,9 @@
}

<!--Fake empty columns-->
@for (_ of emptyColumns(); track _) {
<div
*ngFor="let _ of emptyColumns()"
class="flex-grow-1 category-list__category-column"
data-testId="category-column-empty"></div>
}
</div>
2 changes: 1 addition & 1 deletion ...mponents/dot-category-field-category-list/dot-category-field-category-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
}

.category-list__item {
gap: 1rem;
gap: $spacing-3;
padding: 0 $spacing-1 0 $spacing-1;
transition: background-color $basic-speed;
height: 40px;
Expand Down
25 changes: 14 additions & 11 deletions ...nents/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
MINIMUM_CATEGORY_COLUMNS
} from './dot-category-field-category-list.component';

import { CATEGORIES_MOCK, SELECTED_MOCK } from '../../mocks/category-field.mocks';
import { CATEGORY_LIST_MOCK, SELECTED_LIST_MOCK } from '../../mocks/category-field.mocks';

describe('DotCategoryFieldCategoryListComponent', () => {
let spectator: Spectator<DotCategoryFieldCategoryListComponent>;
Expand All @@ -21,8 +21,8 @@ describe('DotCategoryFieldCategoryListComponent', () => {
beforeEach(() => {
spectator = createComponent({
props: {
categories: CATEGORIES_MOCK,
selected: SELECTED_MOCK
categories: CATEGORY_LIST_MOCK,
selected: SELECTED_LIST_MOCK
}
});

Expand All @@ -34,24 +34,26 @@ describe('DotCategoryFieldCategoryListComponent', () => {
});

it('should render correct number of category columns', () => {
expect(spectator.queryAll(byTestId('category-column')).length).toBe(CATEGORIES_MOCK.length);
expect(spectator.queryAll(byTestId('category-column')).length).toBe(
CATEGORY_LIST_MOCK.length
);
});

it('should render correct number of category items', () => {
expect(spectator.queryAll(byTestId('category-item')).length).toBe(
CATEGORIES_MOCK.flat().length
CATEGORY_LIST_MOCK.flat().length
);
});

it('should render correct number of category item labels', () => {
expect(spectator.queryAll(byTestId('category-item-label')).length).toBe(
CATEGORIES_MOCK.flat().length
CATEGORY_LIST_MOCK.flat().length
);
});

it('should render correct number of empty columns', () => {
expect(spectator.queryAll(byTestId('category-column-empty')).length).toBe(
MINIMUM_CATEGORY_COLUMNS - CATEGORIES_MOCK.length
MINIMUM_CATEGORY_COLUMNS - CATEGORY_LIST_MOCK.length
);
});

Expand All @@ -66,23 +68,24 @@ describe('DotCategoryFieldCategoryListComponent', () => {

expect(emitSpy).toHaveBeenCalledWith({
index: 0,
item: CATEGORIES_MOCK[0][0]
item: CATEGORY_LIST_MOCK[0][0]
});
});

it('should apply selected class to the correct item', () => {
const items = spectator.queryAll(byTestId('category-item'));
expect(items[0].className).toContain('category-list__item--selected');
expect(items[1].className).toContain('category-list__item--selected');
expect(items[2].className).toContain('category-list__item--selected');
});

it('should not render any empty columns when there are enough categories', () => {
const minColumns = 4;
const testCategories = Array(minColumns).fill(CATEGORIES_MOCK[0]);
const testCategories = Array(minColumns).fill(CATEGORY_LIST_MOCK[0]);

spectator = createComponent({
props: {
categories: testCategories,
selected: SELECTED_MOCK
selected: SELECTED_LIST_MOCK
}
});

Expand Down
17 changes: 10 additions & 7 deletions ...components/dot-category-field-category-list/dot-category-field-category-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
EventEmitter,
inject,
input,
OnDestroy,
Output,
QueryList,
ViewChildren
Expand Down Expand Up @@ -41,12 +42,11 @@ const MINIMUM_CATEGORY_WITHOUT_SCROLLING = 3;
templateUrl: './dot-category-field-category-list.component.html',
styleUrl: './dot-category-field-category-list.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
class: 'category-list__wrapper'
}
})
export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
export class DotCategoryFieldCategoryListComponent implements AfterViewInit, OnDestroy {
@ViewChildren('categoryColumn') categoryColumns: QueryList<ElementRef>;

/**
Expand Down Expand Up @@ -82,11 +82,9 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {

readonly #destroyRef = inject(DestroyRef);

constructor() {
effect(() => {
this.itemsSelected = this.selected();
});
}
#effectRef = effect(() => {
this.itemsSelected = this.selected();
});

ngAfterViewInit() {
// Handle the horizontal scroll to make visible the last column
Expand All @@ -95,6 +93,10 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
});
}

ngOnDestroy(): void {
this.#effectRef.destroy();
}

private scrollHandler() {
try {
const columnsArray = this.categoryColumns.toArray();
Expand All @@ -114,6 +116,7 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
inline: 'end'
});
} else {
// scroll to the first column
columnsArray[0].nativeElement.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
Expand Down
Loading

0 comments on commit dd91c79

Please sign in to comment.