From 91a002faaa3e44e0b7e63ee8398e54121d3e4770 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 26 Sep 2023 11:36:35 +0200 Subject: [PATCH] test(thumbnail): add tests for bg color --- .../lib/thumbnail/thumbnail.component.spec.ts | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts index a9522c7566..598a4fc5a4 100644 --- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts +++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts @@ -38,10 +38,12 @@ describe('ThumbnailComponent', () => { describe(' element', () => { describe('When no url is given', () => { let img + let root beforeEach(fakeAsync(() => { component.thumbnailUrl = null fixture.detectChanges() img = de.query(By.css('img')) + root = de.query(By.css('div')) tick(10) })) @@ -51,14 +53,22 @@ describe('ThumbnailComponent', () => { it('sets object cover to scale-down', () => { expect(img.nativeElement.style.objectFit).toEqual('scale-down') }) + it('sets bg color to gray', () => { + expect( + root.nativeElement.classList.contains('bg-gray-100') + ).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-white')).toBeFalsy() + }) }) describe('When an url is given and no fit is set', () => { const url = 'http://test.com/img.png' let img + let root beforeEach(() => { component.thumbnailUrl = url fixture.detectChanges() img = de.query(By.css('img')) + root = de.query(By.css('div')) }) it('is displayed', () => { expect(img).toBeTruthy() @@ -72,15 +82,21 @@ describe('ThumbnailComponent', () => { it('sets img height to 100%', () => { expect(img.nativeElement.classList.contains('h-full')).toBeTruthy() }) + it('sets bg color to white', () => { + expect(root.nativeElement.classList.contains('bg-white')).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-gray-100')).toBeFalsy() + }) }) describe('When an url is given and fit is set to "contain"', () => { const url = 'http://test.com/img.png' let img + let root beforeEach(() => { component.thumbnailUrl = url component.fit = 'contain' fixture.detectChanges() img = de.query(By.css('img')) + root = de.query(By.css('div')) }) it('is displayed', () => { expect(img).toBeTruthy() @@ -94,6 +110,10 @@ describe('ThumbnailComponent', () => { it('sets img height to 80%', () => { expect(img.nativeElement.classList.contains('h-4/5')).toBeTruthy() }) + it('sets bg color to white', () => { + expect(root.nativeElement.classList.contains('bg-white')).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-gray-100')).toBeFalsy() + }) }) }) describe('When different size of img are provided', () => { @@ -143,11 +163,13 @@ describe('ThumbnailComponent', () => { describe('When no url is given and a custom placeholder is provided', () => { const placeholderUrl = 'http://localhost/assets/img/placeholder.svg' let img + let root beforeEach(() => { component.placeholderUrl = placeholderUrl component.thumbnailUrl = null fixture.detectChanges() img = de.query(By.css('img')) + root = de.query(By.css('div')) }) it('is displayed, with custom placeholder src', () => { expect(img.nativeElement.src).toEqual(placeholderUrl) @@ -155,16 +177,22 @@ describe('ThumbnailComponent', () => { it('sets object cover to scale-down', () => { expect(img.nativeElement.style.objectFit).toEqual('scale-down') }) + it('sets bg color to gray', () => { + expect(root.nativeElement.classList.contains('bg-gray-100')).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-white')).toBeFalsy() + }) }) describe('broken image url', () => { const url = 'http://test.com/img.png' const placeholderUrl = 'http://localhost/assets/img/placeholder.png' let img + let root beforeEach(() => { component.thumbnailUrl = url component.placeholderUrl = placeholderUrl fixture.detectChanges() img = de.query(By.css('img')) + root = de.query(By.css('div')) img.nativeElement.dispatchEvent(new Event('error')) fixture.detectChanges() }) @@ -174,6 +202,10 @@ describe('ThumbnailComponent', () => { it('sets object cover to scale-down', () => { expect(img.nativeElement.style.objectFit).toEqual('scale-down') }) + it('sets bg color to gray', () => { + expect(root.nativeElement.classList.contains('bg-gray-100')).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-white')).toBeFalsy() + }) }) describe('thumbnail image url returns 404 and organisation logo exists', () => { @@ -181,6 +213,7 @@ describe('ThumbnailComponent', () => { const orgLogoUrl = 'http://test.com/orgLogo.png' const placeholderUrl = 'http://localhost/assets/img/placeholder.png' let img + let root beforeEach(() => { component.thumbnailUrl = [url, orgLogoUrl] component.fit = ['cover', 'contain'] @@ -188,12 +221,17 @@ describe('ThumbnailComponent', () => { fixture.detectChanges() img = de.query(By.css('img')) img.nativeElement.dispatchEvent(new Event('error')) + root = de.query(By.css('div')) fixture.detectChanges() }) it('displays organisation logo', () => { expect(img.nativeElement.src).toEqual(orgLogoUrl) expect(img.nativeElement.style.objectFit).toEqual('contain') }) + it('sets bg color to white', () => { + expect(root.nativeElement.classList.contains('bg-white')).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-gray-100')).toBeFalsy() + }) describe('if organisation logo also returns 404', () => { beforeEach(() => { @@ -204,17 +242,25 @@ describe('ThumbnailComponent', () => { expect(img.nativeElement.src).toEqual(placeholderUrl) expect(img.nativeElement.style.objectFit).toEqual('scale-down') }) + it('sets bg color to gray', () => { + expect( + root.nativeElement.classList.contains('bg-gray-100') + ).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-white')).toBeFalsy() + }) }) }) describe('thumbnail image url returns 404 and no organisation logo', () => { const url = 'http://test.com/img.png' const placeholderUrl = 'http://localhost/assets/img/placeholder.png' let img + let root beforeEach(() => { component.thumbnailUrl = url component.placeholderUrl = placeholderUrl fixture.detectChanges() img = de.query(By.css('img')) + root = de.query(By.css('div')) img.nativeElement.dispatchEvent(new Event('error')) fixture.detectChanges() }) @@ -222,6 +268,10 @@ describe('ThumbnailComponent', () => { it('displays placeholder', () => { expect(img.nativeElement.src).toEqual(placeholderUrl) }) + it('sets bg color to gray', () => { + expect(root.nativeElement.classList.contains('bg-gray-100')).toBeTruthy() + expect(root.nativeElement.classList.contains('bg-white')).toBeFalsy() + }) }) describe('several thumbnails urls', () => {