Skip to content

Commit

Permalink
feat(edit-content) add new test #28493
Browse files Browse the repository at this point in the history
  • Loading branch information
oidacra committed Jul 18, 2024
1 parent a5b5ca6 commit 701be06
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
}
});
Expand Down Expand Up @@ -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
}
});
Expand All @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<ul class="category-list">
@for (category of $categories(); track category.key) {
<li class="category-list__item" @fadeAnimation>
<li class="category-list__item" @fadeAnimation data-testId="category-item">
<div class="category-list__item-content">
<div class="category-list__title">{{ category.value }}</div>
<div class="category-list__title" data-testId="category-title">
{{ category.value }}
</div>
<div class="category-list__path">
<span
[pTooltip]="category.path"
tooltipPosition="top"
class="category-list__path-content">
class="category-list__path-content"
data-testId="category-path">
{{ category.path || 'edit.content.category-field.category.root-name' | dm }}
</span>
</div>
Expand All @@ -18,12 +21,12 @@
(click)="removeItem.emit(category.key)"
icon="pi pi-times"
class="p-button-sm p-button-text p-button-secondary"
data-testId="category-list__remove-btn"
data-testId="category-remove-btn"
pButton></button>
</div>
</li>

} @empty {
<li>No Categories selected</li>
<li data-testId="category-list-empty">No Categories selected</li>
}
</ul>
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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<DotCategoryFieldSelectedComponent>;
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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
}

.category-field__right-pane {
flex: 0 0 25%; // Ajusta según sea necesario
flex: 0 0 25%;
gap: $spacing-1;
}

Expand All @@ -50,6 +50,10 @@
overflow: hidden;
}

.category-field__selected-categories-list {
overflow-y: auto;
}

:host ::ng-deep .p-sidebar-content {
padding: 0;
height: 100%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [
Expand Down

0 comments on commit 701be06

Please sign in to comment.