Skip to content

Commit

Permalink
feat(editor-content): add unit tests to DotFileFieldPreviewComponent #…
Browse files Browse the repository at this point in the history
  • Loading branch information
nicobytes committed Sep 26, 2024
1 parent 99f5ac3 commit 5654d70
Show file tree
Hide file tree
Showing 7 changed files with 444 additions and 156 deletions.
228 changes: 139 additions & 89 deletions core-web/libs/dotcms-scss/jsp/index.html

Large diffs are not rendered by default.

96 changes: 60 additions & 36 deletions core-web/libs/dotcms-scss/jsp/styleguide.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,29 +59,29 @@
<div class="yui-u first"><h1>dotCMS UI Style Guide</h1></div>
<div class="yui-u" style="text-align: right; padding: 10px 10px 0 0">
<div style="font-size: 85%">
<strong
><a href="/html/style_guide/code_style_guide.jsp"
>Code Style Guide</a
></strong
>
<strong>
<a href="/html/style_guide/code_style_guide.jsp">
Code Style Guide
</a>
</strong>
|
<a
href="http://demos.dojotoolkit.org/demos/"
target="_blank"
rel="noopener"
>Dojo Demos</a
>
rel="noopener">
Dojo Demos
</a>
|
<a
href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html"
target="_blank"
rel="noopener"
>Dijit Button Test</a
>
rel="noopener">
Dijit Button Test
</a>
|
<a href="http://docs.dojocampus.org/" target="_blank" rel="noopener"
>Dojo Campus</a
>
<a href="http://docs.dojocampus.org/" target="_blank" rel="noopener">
Dojo Campus
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -451,42 +451,60 @@ <h2>Action Icons</h2>
<td>
<span class="newWorkflowIcon"></span>
</td>
<td>Work Flow Task <strong>New</strong></td>
<td>
Work Flow Task
<strong>New</strong>
</td>
<td>newWorkflowIcon</td>
</tr>
<tr>
<td>
<span class="cancelWorkflowIcon"></span>
</td>
<td>Work Flow Task <strong>Cancel</strong></td>
<td>
Work Flow Task
<strong>Cancel</strong>
</td>
<td>cancelWorkflowIcon</td>
</tr>
<tr>
<td>
<span class="resolveWorkflowIcon"></span>
</td>
<td>Work Flow Task <strong>Resolve</strong></td>
<td>
Work Flow Task
<strong>Resolve</strong>
</td>
<td>resolveWorkflowIcon</td>
</tr>
<tr>
<td>
<span class="assignWorkflowIcon"></span>
</td>
<td>Work Flow Task <strong>Assign</strong></td>
<td>
Work Flow Task
<strong>Assign</strong>
</td>
<td>assignWorkflowIcon</td>
</tr>
<tr>
<td>
<span class="deleteWorkflowIcon"></span>
</td>
<td>Work Flow Task <strong>Delete</strong></td>
<td>
Work Flow Task
<strong>Delete</strong>
</td>
<td>deleteWorkflowIcon</td>
</tr>
<tr>
<td>
<span class="reopenWorkflowIcon"></span>
</td>
<td>Work Flow Task <strong>Reopen</strong></td>
<td>
Work Flow Task
<strong>Reopen</strong>
</td>
<td>reopenWorkflowIcon</td>
</tr>
<tr>
Expand Down Expand Up @@ -1029,7 +1047,10 @@ <h2>Forms</h2>
<div style="margin: 0 50px">
<form>
<dl>
<dt><span class="required"></span> First Name:</dt>
<dt>
<span class="required"></span>
First Name:
</dt>
<dd>
<input
type="text"
Expand Down Expand Up @@ -1305,9 +1326,9 @@ <h2>Example Code</h2>
<h2>Split Screen</h2>
<p>
Demonstration of how to split a screen for a side navigation, folder
tree, or search interface. <br /><strong style="color: red"
>ALETR:</strong
>
tree, or search interface.
<br />
<strong style="color: red">ALETR:</strong>
Height of Dojo BorderContainer and internal wrappers must be set with
JavaScript based of window size. See file
/dotCMS/html/portlet/ext/useradmin/view_user.jsp for a working example.
Expand Down Expand Up @@ -1531,20 +1552,23 @@ <h2>Dojo Quick Reference</h2>
<p>
Below are few example of commen Dojo functions used in the dotCMS. For other
Dojo resources and examples checkout these other sites:
<a href="http://demos.dojotoolkit.org/demos/" target="_blank" rel="noopener"
>Dojo Demos</a
>
<a
href="http://demos.dojotoolkit.org/demos/"
target="_blank"
rel="noopener">
Dojo Demos
</a>
|
<a
href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html"
target="_blank"
rel="noopener"
>Dijit Button Test</a
>
rel="noopener">
Dijit Button Test
</a>
|
<a href="http://docs.dojocampus.org/" target="_blank" rel="noopener"
>Dojo Campus</a
>
<a href="http://docs.dojocampus.org/" target="_blank" rel="noopener">
Dojo Campus
</a>
</p>
<hr class="spacer" />

Expand Down Expand Up @@ -1573,9 +1597,9 @@ <h2>Tool Tip</h2>
<button id="tip1" dojoType="dijit.form.Button" iconClass="infoIcon">
Tool Tip
</button>
<span id="one_tooltip" dojoType="dijit.Tooltip" connectId="tip1"
>This is a tool tip</span
>
<span id="one_tooltip" dojoType="dijit.Tooltip" connectId="tip1">
This is a tool tip
</span>

<pre><code>
&lt;a href="#" id="tip1">Tool Tip&lt;/a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,21 @@
</div>
<div class="preview-metadata__container">
@if (metadata) {
<span class="preview-metadata_header">{{ metadata.title }}</span>
<span data-testId="metadata-title" class="preview-metadata_header">
{{ metadata.title }}
</span>
@if (metadata.width && metadata.height) {
<div class="preview-metadata__info">
<i class="pi pi-arrows-alt"></i>
<span>{{ metadata.width }} x {{ metadata.height }}</span>
<span data-testId="metadata-dimensions">
{{ metadata.width }} x {{ metadata.height }}
</span>
</div>
}
@if (metadata.fileSize) {
<div class="preview-metadata__info">
<i class="pi pi-file"></i>
<span>{{ metadata.fileSize | dotFileSizeFormat }}</span>
<span data-testId="metadata-file-size">{{ metadata.fileSize | dotFileSizeFormat }}</span>
</div>
}
}
Expand Down Expand Up @@ -71,7 +75,7 @@
<p-button
(click)="toggleShowDialog()"
styleClass="p-button-rounded"
data-testId="infor-button-responsive"
data-testId="info-btn-responsive"
icon="pi pi-info" />
@if (downloadLink) {
<p-button
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
import {
Spectator,
createComponentFactory,
mockProvider,
SpyObject,
byTestId
} from '@ngneat/spectator/jest';
import { of, throwError } from 'rxjs';

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

import { Dialog } from 'primeng/dialog';

import { DotResourceLinksService } from '@dotcms/data-access';
import { DotCopyButtonComponent } from '@dotcms/ui';

import { DotFileFieldPreviewComponent } from './dot-file-field-preview.component';

import { NEW_FILE_MOCK, TEMP_FILE_MOCK, NEW_FILE_EDITABLE_MOCK } from '../../../../utils/mocks';

describe('DotFileFieldPreviewComponent', () => {
let spectator: Spectator<DotFileFieldPreviewComponent>;
let dotResourceLinksService: SpyObject<DotResourceLinksService>;

const createComponent = createComponentFactory({
component: DotFileFieldPreviewComponent,
detectChanges: false,
providers: [provideHttpClient()],
componentProviders: [
mockProvider(DotResourceLinksService, {
getFileResourceLinks: jest.fn().mockReturnValue(
of({
configuredImageURL: 'testConfiguredImageURL',
idPath: 'testIdPath',
mimeType: 'testMimeType',
text: 'testText',
versionPath: 'testVersionPath'
})
)
})
]
});

describe('temp preview file', () => {
beforeEach(() => {
spectator = createComponent({
props: {
previewFile: {
source: 'temp',
file: TEMP_FILE_MOCK
}
} as unknown
});
dotResourceLinksService = spectator.inject(DotResourceLinksService, true);
});

it('should be created', () => {
spectator.detectChanges();
expect(spectator.component).toBeTruthy();
});
});

describe('contentlet without content preview file', () => {
beforeEach(() => {
spectator = createComponent({
props: {
previewFile: {
source: 'contentlet',
file: NEW_FILE_MOCK.entity
}
} as unknown
});
dotResourceLinksService = spectator.inject(DotResourceLinksService, true);
});

it('should be created', () => {
spectator.detectChanges();
expect(spectator.component).toBeTruthy();
});

it('should be have a dot-contentlet-thumbnail', () => {
spectator.detectChanges();
expect(spectator.query('dot-contentlet-thumbnail')).toBeTruthy();
});

it('should show proper metadata', () => {
spectator.detectChanges();

const { title, width, height } = NEW_FILE_MOCK.entity.assetMetaData;

const metadataTitleElement = spectator.query(byTestId('metadata-title'));
const metadataDimensionsElement = spectator.query(byTestId('metadata-dimensions'));
const metadataFileSizeElement = spectator.query(byTestId('metadata-file-size'));

expect(metadataTitleElement).toHaveText(title);
expect(metadataDimensionsElement).toHaveText(`${width} x ${height}`);
expect(metadataFileSizeElement).toHaveText('3.70 MB');
});

it('should show a dialog when click on the proper btn', async () => {
spectator.detectChanges();

const infoBtnElement = spectator.query(byTestId('info-btn'));

const dialogComponent = spectator.query(Dialog);

spectator.click(infoBtnElement);
expect(dialogComponent.visible).toBeTruthy();
});


it('should show a dialog when click on the proper responsive btn', async () => {
spectator.detectChanges();

const infoBtnElement = spectator.query(byTestId('info-btn-responsive'));

const dialogComponent = spectator.query(Dialog);

spectator.click(infoBtnElement);
expect(dialogComponent.visible).toBeTruthy();
});

it('should call downloadAsset when click on the proper btn', async () => {
const spyWindowOpen = jest.spyOn(window, 'open');
spyWindowOpen.mockImplementation(jest.fn());

const { inode } = NEW_FILE_MOCK.entity;

const expectedUrl = `/contentAsset/raw-data/${inode}/asset?byInode=true&force_download=true`;

spectator.detectChanges();

const downloadBtnElement = spectator.query(byTestId('download-btn'));

spectator.click(downloadBtnElement);
expect(spyWindowOpen).toHaveBeenCalledWith(expectedUrl, '_self');
});

it('should handle a error in fetchResourceLinks', async () => {
dotResourceLinksService.getFileResourceLinks.mockReturnValue(throwError('error'));
spectator.detectChanges();
});

it('should there are the proper resources links', async () => {
spectator.detectChanges();

const infoBtnElement = spectator.query(byTestId('info-btn'));

spectator.click(infoBtnElement);

const links = spectator.queryAll('.file-info__item');
const copyBtns = spectator.queryAll(DotCopyButtonComponent);

expect(links.length).toBe(4);
expect(copyBtns.length).toBe(3);
});
});

describe('contentlet with content preview file', () => {
beforeEach(() => {
spectator = createComponent({
props: {
previewFile: {
source: 'contentlet',
file: NEW_FILE_EDITABLE_MOCK.entity
}
} as unknown
});
dotResourceLinksService = spectator.inject(DotResourceLinksService, true);
});

it('should be created', () => {
spectator.detectChanges();
expect(spectator.component).toBeTruthy();
});
});
});
Loading

0 comments on commit 5654d70

Please sign in to comment.