Skip to content

Commit

Permalink
feat(edit-content) fix test, added new test #28831
Browse files Browse the repository at this point in the history
  • Loading branch information
oidacra committed Jun 25, 2024
1 parent df84d30 commit 6c0e6ee
Show file tree
Hide file tree
Showing 17 changed files with 574 additions and 98 deletions.
3 changes: 2 additions & 1 deletion core-web/libs/dotcms-models/src/lib/dot-categories.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface DotCategory {
path?: string;
identifier: string;
inode: string;
name: string;
name?: string;
type: string;
source?: CATEGORY_SOURCE;
live?: boolean;
Expand All @@ -25,6 +25,7 @@ export interface DotCategory {
iDate: number;
keywords: string;
owner: string;
modDate?: number;
parentPermissionable?: {
hostname: string;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export interface DotCMSContentTypeField {
unique: boolean;
values?: string;
variable: string;
forceIncludeInApi?: boolean;
metadata?: { [key: string]: string | number | boolean };
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,37 @@
[ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }"
class="flex-1 category-list__category-list">
@for (column of categories(); let index = $index; track categories()[index]) {
<!--dynamic columns-->
<div #categoryColumn class="category-list__category-column">
@for (item of column; track item.inode) {
<div
class="flex align-content-center align-items-center category-list__item"
[ngClass]="{ 'category-list__item--selected': item.checked }"
(click)="itemClicked.emit({ index, item })">
<p-checkbox [(ngModel)]="itemsSelected" [value]="item.key" />
<!--dynamic columns-->
<div #categoryColumn class="category-list__category-column" data-testId="category-column">
@for (item of column; track item.inode) {
<div
data-testId="category-item"
class="flex align-content-center align-items-center category-list__item"
[ngClass]="{ 'category-list__item--selected': item.checked }"
(click)="itemClicked.emit({ index, item })">
<p-checkbox [(ngModel)]="itemsSelected" [value]="item.key" />

<label
class="flex flex-grow-1 category-list__item-label"
[ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
[for]="item.key"
>{{ item.categoryName }}</label
>
<label
data-testId="category-item-label"
class="flex flex-grow-1 category-list__item-label"
[ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
[for]="item.key"
>{{ item.categoryName }}</label
>

@if (item.childrenCount > 0) {
<i class="pi pi-chevron-right category-list__item-icon"></i>
}
</div>
@if (item.childrenCount > 0) {
<i
data-testId="category-item-with-child"
class="pi pi-chevron-right category-list__item-icon"></i>
}
</div>
}
</div>
}

<!--Fake empty columns-->
<div *ngFor="let _ of emptyColumns()" class="flex-grow-1 category-list__category-column"></div>
<div
*ngFor="let _ of emptyColumns()"
class="flex-grow-1 category-list__category-column"
data-testId="category-column-empty"></div>
</div>
Original file line number Diff line number Diff line change
@@ -1,22 +1,93 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { expect } from '@jest/globals';
import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';

import { DotCategoryFieldCategoryListComponent } from './dot-category-field-category-list.component';
import { DotMessageService } from '@dotcms/data-access';

import {
DotCategoryFieldCategoryListComponent,
MINIMUM_CATEGORY_COLUMNS
} from './dot-category-field-category-list.component';

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

describe('DotCategoryFieldCategoryListComponent', () => {
let component: DotCategoryFieldCategoryListComponent;
let fixture: ComponentFixture<DotCategoryFieldCategoryListComponent>;
let spectator: Spectator<DotCategoryFieldCategoryListComponent>;

const createComponent = createComponentFactory({
component: DotCategoryFieldCategoryListComponent,
providers: [mockProvider(DotMessageService)]
});

beforeEach(() => {
spectator = createComponent({
props: {
categories: CATEGORIES_MOCK,
selected: SELECTED_MOCK
}
});

spectator.detectChanges();
});

afterEach(() => {
jest.resetAllMocks();
});

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

it('should render correct number of category items', () => {
expect(spectator.queryAll(byTestId('category-item')).length).toBe(
CATEGORIES_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
);
});

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

it('should render one category item with child indicator', () => {
expect(spectator.queryAll(byTestId('category-item-with-child')).length).toBe(1);
});

it('should emit the correct item when clicked', () => {
const emitSpy = jest.spyOn(spectator.component.itemClicked, 'emit');
const items = spectator.queryAll(byTestId('category-item'));
spectator.click(items[0]);

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [DotCategoryFieldCategoryListComponent]
}).compileComponents();
expect(emitSpy).toHaveBeenCalledWith({
index: 0,
item: CATEGORIES_MOCK[0][0]
});
});

fixture = TestBed.createComponent(DotCategoryFieldCategoryListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
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');
});

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

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

spectator.detectChanges();

expect(spectator.queryAll(byTestId('category-column-empty')).length).toBe(0);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ import { DotCategory } from '@dotcms/dotcms-models';

import { DotCategoryFieldCategory } from '../../models/dot-category-field.models';

const MINIMUM_CATEGORY_COLUMNS = 4;
export const MINIMUM_CATEGORY_COLUMNS = 4;

const MINIMUM_CATEGORY_WITHOUT_SCROLLING = 3;

/**
Expand Down Expand Up @@ -61,11 +62,12 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
* Generate the empty columns
*/
emptyColumns = computed(() => {
const minimumCategoryColumns = MINIMUM_CATEGORY_COLUMNS;
const currentCategoriesLength = this.categories().length;
const numberOfEmptyColumns = Math.max(minimumCategoryColumns - currentCategoriesLength, 0);
const numberOfEmptyColumnsNeeded = Math.max(
MINIMUM_CATEGORY_COLUMNS - this.categories().length,
0
);

return Array(numberOfEmptyColumns).fill(null);
return Array(numberOfEmptyColumnsNeeded).fill(null);
});

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,40 +1,53 @@
import { expect, it } from '@jest/globals';
import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
import { mockProvider } from '@ngneat/spectator/jest';
import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
import { of } from 'rxjs';

import { Sidebar } from 'primeng/sidebar';

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

import { DotCategoryFieldSidebarComponent } from './dot-category-field-sidebar.component';

import { CATEGORIES_MOCK } from '../../mocks/category-field.mocks';
import { CategoriesService } from '../../services/categories.service';
import { CategoryFieldStore } from '../../store/content-category-field.store';
import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-category-list/dot-category-field-category-list.component';

describe('DotEditContentCategoryFieldSidebarComponent', () => {
let spectator: Spectator<DotCategoryFieldSidebarComponent>;

const createComponent = createComponentFactory({
component: DotCategoryFieldSidebarComponent,
providers: [mockProvider(DotMessageService)]
providers: [mockProvider(DotMessageService), CategoryFieldStore]
});

beforeEach(() => {
spectator = createComponent();
spectator = createComponent({
providers: [
mockProvider(CategoriesService, {
getChildren: jest.fn().mockReturnValue(of(CATEGORIES_MOCK))
})
]
});

spectator.detectChanges();
});

afterEach(() => {
jest.resetAllMocks();
});

it('should have `visible` property by default `true`', () => {
it('should have `visible` property set to `true` by default', () => {
expect(spectator.component.visible).toBe(true);
expect(spectator.query(Sidebar)).not.toBeNull();
});

it('should have a sidebar', () => {
expect(spectator.query(byTestId('sidebar'))).not.toBeNull();
});

it('should have a clear all button', () => {
it('should render a "clear all" button', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('clear_all-btn'))).not.toBeNull();
});

it('should close the sidebar when you click back', () => {
it('should emit event to close sidebar when "back" button is clicked', () => {
const closedSidebarSpy = jest.spyOn(spectator.component.closedSidebar, 'emit');
const cancelBtn = spectator.query(byTestId('back-btn'));
expect(cancelBtn).not.toBeNull();
Expand All @@ -44,4 +57,8 @@ describe('DotEditContentCategoryFieldSidebarComponent', () => {
spectator.click(cancelBtn);
expect(closedSidebarSpy).toHaveBeenCalled();
});

it('should render the CategoryFieldCategoryList component', () => {
expect(spectator.query(DotCategoryFieldCategoryListComponent)).not.toBeNull();
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { JsonPipe } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
Expand Down Expand Up @@ -30,8 +29,7 @@ import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-cat
ButtonModule,
DotMessagePipe,
SidebarModule,
DotCategoryFieldCategoryListComponent,
JsonPipe
DotCategoryFieldCategoryListComponent
],
templateUrl: './dot-category-field-sidebar.component.html',
styleUrl: './dot-category-field-sidebar.component.scss',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@if (store.selectedCategories().length) {
<div class="dot-category-field__categories" data-testId="category-chip-list">
@for (category of store.categoriesValue(); track category.key) {
<p-chip
[pTooltip]="category.value"
[removable]="true"
[label]="category.value"
tooltipPosition="top"
styleClass="p-chip-sm" />
}
</div>
<div class="dot-category-field__categories" data-testId="category-chip-list">
@for (category of store.categoriesValue(); track category.key) {
<p-chip
[pTooltip]="category.value"
[removable]="true"
[label]="category.value"
tooltipPosition="top"
styleClass="p-chip-sm" />
}
</div>
}

<div class="dot-category-field__select">
Expand All @@ -20,5 +20,4 @@
data-testId="show-sidebar-btn"
pButton></button>
</div>

<ng-container dotDynamic></ng-container>
<ng-container data-testId="sidebar-placeholder" dotDynamic></ng-container>
Loading

0 comments on commit 6c0e6ee

Please sign in to comment.