#25959 Added testing to the preview components

dotCMS · Oct 17, 2023 · 6495f18 · 6495f18
1 parent e3c9eb9
commit 6495f18
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 11 deletions.
diff --git a/...ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.spec.ts b/...ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.spec.ts
@@ -9,11 +9,13 @@ import { MockDotMessageService } from '@dotcms/utils-testing';
 import { DotSeoMetaTagsService } from './dot-seo-meta-tags.service';
 
 import { seoOGTagsResultOgMock } from '../../../seo/components/dot-results-seo-tool/mocks';
+import { IMG_NOT_FOUND_KEY } from '../dot-edit-content-html/models/meta-tags-model';
 
 describe('DotSetMetaTagsService', () => {
     let service: DotSeoMetaTagsService;
     let testDoc: Document;
     let head: HTMLElement;
+    let getImageFileSizeSpy;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -116,7 +118,7 @@ describe('DotSetMetaTagsService', () => {
             ]
         });
         service = TestBed.inject(DotSeoMetaTagsService);
-        spyOn(service, 'getImageFileSize').and.returnValue(
+        getImageFileSizeSpy = spyOn(service, 'getImageFileSize').and.returnValue(
             of({
                 length: 8000000,
                 url: 'https://www.dotcms.com/dA/4e870b9fe0/1200w/jpeg/70/dotcms-defualt-og.jpg'
@@ -283,4 +285,57 @@ describe('DotSetMetaTagsService', () => {
             done();
         });
     });
+
+    it('should og:image meta tag not found!', (done) => {
+        const imageDocument: Document = document.implementation.createDocument(
+            'http://www.w3.org/1999/xhtml',
+            'html',
+            null
+        );
+
+        const head = imageDocument.createElement('head');
+        imageDocument.documentElement.appendChild(head);
+
+        const ogImage = imageDocument.createElement('og:image');
+        imageDocument.documentElement.appendChild(ogImage);
+        head.appendChild(ogImage);
+
+        getImageFileSizeSpy.and.callFake(() => {
+            return of({
+                length: 0,
+                url: IMG_NOT_FOUND_KEY
+            });
+        });
+
+        service.getMetaTagsResults(imageDocument).subscribe((value) => {
+            expect(value[1].items[0].message).toEqual('<code>og:image</code> meta tag not found!');
+            done();
+        });
+    });
+
+    it('should og:image meta tag not found!', (done) => {
+        const descriptionDocument: Document = document.implementation.createDocument(
+            'http://www.w3.org/1999/xhtml',
+            'html',
+            null
+        );
+
+        const head = descriptionDocument.createElement('head');
+        descriptionDocument.documentElement.appendChild(head);
+
+        const ogDescription = descriptionDocument.createElement('meta');
+        ogDescription.setAttribute('property', 'og:description');
+        ogDescription.setAttribute(
+            'content',
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra maximus enim ac tincidunt. Vivamus vestibulum sed enim sed consectetur. Nulla malesuada libero a tristique bibendum. Suspendisse blandit ligula velit, eu volutpat arcu ornare sed.'
+        );
+        head.appendChild(ogDescription);
+
+        service.getMetaTagsResults(descriptionDocument).subscribe((value) => {
+            expect(value[5].items[0].message).toEqual(
+                '<code>og:description</code> meta tag found, but has more than 150 characters.'
+            );
+            done();
+        });
+    });
 });
diff --git a/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html b/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html
@@ -15,14 +15,16 @@
                             <div class="results-seo-tool__card-title">
                                 <div
                                     class="results-seo-tool__card-favicon"
-                                    *ngIf="noFavicon; else favicon">
+                                    *ngIf="noFavicon; else favicon"
+                                    data-testId="favicon-default">
                                     <i class="pi pi-globe"></i>
                                 </div>
                                 <ng-template #favicon>
                                     <img
                                         class="results-seo-tool__card-favicon"
                                         [src]="seoOGTags.favicon"
                                         (error)="onFaviconError()"
+                                        data-testId="favicon-image"
                                         alt="favicon" />
                                 </ng-template>
                                 <span data-testId="page-hostName">{{ preview.hostName }}</span>

diff --git a/.../dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.spec.ts b/.../dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.spec.ts
@@ -352,4 +352,24 @@ describe('DotResultsSeoToolComponent', () => {
             '<span><a target="_blank" href="https://ahrefs.com/blog/seo-meta-tags/">Meta Tags for SEO: A Simple Guide for Beginners</a>. <i class="pi pi-external-link"></i></span>'
         );
     });
+
+    it('should display the default icon when noFavicon is true', () => {
+        spectator.component.noFavicon = true;
+        spectator.detectComponentChanges();
+
+        const defaultIcon = spectator.query(byTestId('favicon-default'));
+        expect(defaultIcon).toBeTruthy();
+        expect(defaultIcon.querySelector('.pi-globe')).toBeTruthy();
+    });
+
+    it('should display the favicon image when noFavicon is false', () => {
+        spectator.component.noFavicon = false;
+        spectator.component.seoOGTags.favicon = 'favicon-image-url.png';
+
+        spectator.detectComponentChanges();
+
+        const faviconImage = spectator.query(byTestId('favicon-image'));
+        expect(faviconImage).toBeTruthy();
+        expect(faviconImage.getAttribute('src')).toBe('favicon-image-url.png');
+    });
 });
diff --git a/...pps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/mocks.ts b/...pps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/mocks.ts
@@ -294,13 +294,14 @@ const seoOGTagsResultOgMock = [
     {
         key: 'twitter:image',
         title: 'image',
-        keyIcon: 'pi-exclamation-triangle',
-        keyColor: 'results-seo-tool__result-icon--alert-red',
+        keyIcon: 'pi-check-circle',
+        keyColor: 'results-seo-tool__result-icon--alert-green',
         items: [
             {
-                message: '<code>twitter:image</code> meta tag not found!',
-                color: 'results-seo-tool__result-icon--alert-red',
-                itemIcon: 'pi-times'
+                message:
+                    '<code>twitter:image</code> meta tag found, with an appropriate sized image!',
+                color: 'results-seo-tool__result-icon--alert-green',
+                itemIcon: 'pi-check'
             },
             {
                 message: '<code>twitter:image</code> meta tag found, but image is over 5 MB.',

diff --git a/...s/dot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.html b/...s/dot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.html
@@ -1,4 +1,7 @@
-<div class="dot-seo-image-preview__default" *ngIf="noImageAvailable; else imagePreview">
+<div
+    class="dot-seo-image-preview__default"
+    *ngIf="noImageAvailable; else imagePreview"
+    data-testid="seo-image-default">
     <i class="pi pi-exclamation-triangle pi-"></i>
     <h5>{{ 'seo.rules.media.preview.not.defined' | dm }}</h5>
 </div>
@@ -7,5 +10,6 @@ <h5>{{ 'seo.rules.media.preview.not.defined' | dm }}</h5>
         class="dot-seo-image-preview__image"
         [src]="image"
         (error)="onImageError()"
+        data-testid="seo-image-preview"
         alt="preview image" />
 </ng-template>
diff --git a/...ot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.spec.ts b/...ot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.spec.ts
@@ -1,14 +1,58 @@
-import { Spectator, createComponentFactory } from '@ngneat/spectator';
+import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { MockDotMessageService } from '@dotcms/utils-testing';
 
 import { DotSeoImagePreviewComponent } from './dot-seo-image-preview.component';
 
 describe('DotSeoImagePreviewComponent', () => {
     let spectator: Spectator<DotSeoImagePreviewComponent>;
-    const createComponent = createComponentFactory(DotSeoImagePreviewComponent);
 
-    it('should create', () => {
+    const createComponent = createComponentFactory({
+        component: DotSeoImagePreviewComponent,
+        providers: [
+            {
+                provide: DotMessageService,
+                useValue: new MockDotMessageService({
+                    'seo.rules.media.preview.not.defined': 'Social Media Preview Image Not Defined!'
+                })
+            }
+        ]
+    });
+
+    beforeEach(() => {
         spectator = createComponent();
+    });
 
+    it('should create', () => {
         expect(spectator.component).toBeTruthy();
     });
+
+    it('should display an error message when noImageAvailable is true', () => {
+        (spectator.component.noImageAvailable = true), spectator.detectComponentChanges();
+
+        const errorMessage = spectator.query(byTestId('seo-image-default'));
+        expect(errorMessage).toBeTruthy();
+    });
+
+    it('should display an image when noImageAvailable is false', () => {
+        (spectator.component.noImageAvailable = false),
+            spectator.setInput({
+                image: 'sample-image-url.jpg'
+            });
+        spectator.detectChanges();
+
+        const imageElement = spectator.query(byTestId('seo-image-preview'));
+        expect(imageElement).toBeTruthy();
+        expect(imageElement.getAttribute('src')).toBe('sample-image-url.jpg');
+    });
+
+    it('should call onImageError() when the image fails to load', () => {
+        const onImageErrorSpy = spyOn(spectator.component, 'onImageError');
+        const imageElement = spectator.query(byTestId('seo-image-preview'));
+
+        spectator.dispatchFakeEvent(imageElement, 'error');
+
+        expect(onImageErrorSpy).toHaveBeenCalled();
+    });
 });