From 701be06545ea9cb3aa6341c7f3e751c886ac99f1 Mon Sep 17 00:00:00 2001 From: Arcadio Quintero Date: Thu, 18 Jul 2024 01:01:31 -0400 Subject: [PATCH] feat(edit-content) add new test #28493 --- ...gory-field-category-list.component.spec.ts | 10 +-- ...dot-category-field-selected.component.html | 13 ++-- ...dot-category-field-selected.component.scss | 3 +- ...-category-field-selected.component.spec.ts | 61 +++++++++++++++++++ .../dot-category-field-sidebar.component.scss | 6 +- .../mocks/category-field.mocks.ts | 32 +++++----- 6 files changed, 97 insertions(+), 28 deletions(-) create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.spec.ts diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts index 14c30bccdda8..5483c24f830a 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts @@ -10,7 +10,7 @@ import { import { CATEGORY_LIST_MOCK, - CATEGORY_LIST_MOCK_TRANSFORMED, + CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX, CATEGORY_MOCK_TRANSFORMED, SELECTED_LIST_MOCK } from '../../mocks/category-field.mocks'; @@ -26,7 +26,7 @@ describe('DotCategoryFieldCategoryListComponent', () => { beforeEach(() => { spectator = createComponent({ props: { - categories: CATEGORY_LIST_MOCK_TRANSFORMED, + categories: CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX, selected: SELECTED_LIST_MOCK } }); @@ -73,14 +73,14 @@ describe('DotCategoryFieldCategoryListComponent', () => { expect(emitSpy).toHaveBeenCalledWith({ index: 0, - item: CATEGORY_LIST_MOCK_TRANSFORMED[0][0] + item: CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX[0][0] }); }); it('should apply selected class to the correct item', () => { spectator = createComponent({ props: { - categories: CATEGORY_MOCK_TRANSFORMED, + categories: [CATEGORY_MOCK_TRANSFORMED], selected: SELECTED_LIST_MOCK } }); @@ -95,7 +95,7 @@ describe('DotCategoryFieldCategoryListComponent', () => { it('should not render any empty columns when there are enough categories', () => { const minColumns = 4; - const testCategories = Array(minColumns).fill(CATEGORY_LIST_MOCK_TRANSFORMED[0]); + const testCategories = Array(minColumns).fill(CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX[0]); spectator = createComponent({ props: { diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.html index f7becea69c96..455af45f864b 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.html @@ -1,13 +1,16 @@ diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.scss index 0f64e2d71b37..c8e75aa502a7 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.scss @@ -8,9 +8,10 @@ .category-list__item { display: grid; - grid-template-columns: 1fr 40px; + grid-template-columns: 1fr 32px; align-items: center; padding: $spacing-1 0; + gap: $spacing-1; border-bottom: 1px solid $color-palette-gray-300; } diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.spec.ts new file mode 100644 index 000000000000..363e71a8f0da --- /dev/null +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.spec.ts @@ -0,0 +1,61 @@ +import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; + +import { DotMessageService } from '@dotcms/data-access'; +import { DotMessagePipe } from '@dotcms/utils-testing'; + +import { DotCategoryFieldSelectedComponent } from './dot-category-field-selected.component'; + +import { CATEGORY_MOCK_TRANSFORMED } from '../../mocks/category-field.mocks'; + +describe('DotCategoryFieldSelectedComponent', () => { + let spectator: Spectator; + const createComponent = createComponentFactory({ + component: DotCategoryFieldSelectedComponent, + imports: [DotMessagePipe], + providers: [mockProvider(DotMessageService)] + }); + + beforeEach(() => { + spectator = createComponent(); + spectator.setInput('categories', CATEGORY_MOCK_TRANSFORMED); + spectator.detectChanges(); + }); + + it('should render the list of categories', () => { + expect(spectator.queryAll(byTestId('category-item')).length).toBe( + CATEGORY_MOCK_TRANSFORMED.length + ); + }); + + it('should display category name and path', () => { + const items = spectator.queryAll(byTestId('category-item')); + + items.forEach((item, index) => { + const title = item.querySelector('[data-testId="category-title"]'); + const path = item.querySelector('[data-testId="category-path"]'); + + expect(title).toContainText(CATEGORY_MOCK_TRANSFORMED[index].value); + expect(path?.getAttribute('ng-reflect-text')).toBe( + CATEGORY_MOCK_TRANSFORMED[index].path + ); + }); + }); + + it('should display remove button', () => { + const buttons = spectator.queryAll(byTestId('category-remove-btn')); + expect(buttons.length).toBe(CATEGORY_MOCK_TRANSFORMED.length); + }); + + it('should emit an event when remove button is clicked', () => { + const removeSpy = jest.spyOn(spectator.component.removeItem, 'emit'); + const button = spectator.query(byTestId('category-remove-btn')); + spectator.click(button); + expect(removeSpy).toHaveBeenCalledWith(CATEGORY_MOCK_TRANSFORMED[0].key); + }); + + it('should display "No Categories selected" when there are no categories', () => { + spectator.setInput('categories', []); + const emptyMessage = spectator.query(byTestId('category-list-empty')); + expect(emptyMessage).toBeTruthy(); + }); +}); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss index fb323f7293ad..8cdc74137a70 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss @@ -38,7 +38,7 @@ } .category-field__right-pane { - flex: 0 0 25%; // Ajusta según sea necesario + flex: 0 0 25%; gap: $spacing-1; } @@ -50,6 +50,10 @@ overflow: hidden; } +.category-field__selected-categories-list { + overflow-y: auto; +} + :host ::ng-deep .p-sidebar-content { padding: 0; height: 100%; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts index 14359c9208fd..b21f5883db24 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts @@ -201,27 +201,27 @@ export const CATEGORY_LIST_MOCK: DotCategory[][] = [[...CATEGORY_LEVEL_1], [...C */ export const SELECTED_LIST_MOCK = [CATEGORY_LEVEL_1[0].key, CATEGORY_LEVEL_1[1].key]; -export const CATEGORY_LIST_MOCK_TRANSFORMED: DotCategoryFieldKeyValueObj[][] = +export const CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX: DotCategoryFieldKeyValueObj[][] = CATEGORY_LIST_MOCK.map( (categoryLevel) => transformCategories(categoryLevel) as DotCategoryFieldKeyValueObj[], SELECTED_LIST_MOCK ); -export const CATEGORY_MOCK_TRANSFORMED: DotCategoryFieldKeyValueObj[][] = [ - [ - { - key: CATEGORY_LEVEL_1[0].key, - value: CATEGORY_LEVEL_1[0].categoryName, - hasChildren: true, - clicked: true - }, - { - key: CATEGORY_LEVEL_1[1].key, - value: CATEGORY_LEVEL_1[1].categoryName, - hasChildren: true, - clicked: false - } - ] +export const CATEGORY_MOCK_TRANSFORMED: DotCategoryFieldKeyValueObj[] = [ + { + key: CATEGORY_LEVEL_1[0].key, + value: CATEGORY_LEVEL_1[0].categoryName, + hasChildren: true, + clicked: true, + path: 'path' + }, + { + key: CATEGORY_LEVEL_1[1].key, + value: CATEGORY_LEVEL_1[1].categoryName, + hasChildren: true, + clicked: false, + path: 'path' + } ]; export const CATEGORIES_KEY_VALUE: DotCategoryFieldKeyValueObj[] = [