From 1bb759fc1ee83f23f4746d1d0f9e93edf1a94d66 Mon Sep 17 00:00:00 2001 From: splincode Date: Fri, 2 Feb 2024 12:39:53 +0300 Subject: [PATCH] chore: add `lazy-loading.cy.ts` --- .../demo-cypress/src/tests/lazy-loading.cy.ts | 80 +++++++++++++++++++ .../test/lazy-loading.directive.spec.ts | 63 --------------- 2 files changed, 80 insertions(+), 63 deletions(-) create mode 100644 projects/demo-cypress/src/tests/lazy-loading.cy.ts delete mode 100644 projects/kit/directives/lazy-loading/test/lazy-loading.directive.spec.ts diff --git a/projects/demo-cypress/src/tests/lazy-loading.cy.ts b/projects/demo-cypress/src/tests/lazy-loading.cy.ts new file mode 100644 index 000000000000..278ebb768f1a --- /dev/null +++ b/projects/demo-cypress/src/tests/lazy-loading.cy.ts @@ -0,0 +1,80 @@ +import {Component} from '@angular/core'; +import {TuiRootModule} from '@taiga-ui/core'; +import {TuiLazyLoadingModule} from '@taiga-ui/kit'; + +describe('Tabs', () => { + describe('has not found image', () => { + @Component({ + template: ` + + picsum + + `, + }) + class TestComponent {} + + beforeEach(() => + cy.mount(TestComponent, { + imports: [TuiRootModule, TuiLazyLoadingModule], + }), + ); + + it('image has background color', () => { + cy.get('img').then(query => { + const img = query.get(0); + + expect(img.style.background).to.equal('var(--tui-clear-hover)'); + expect(img.style.getPropertyValue('--tui-clear-hover').trim()).to.equal( + 'rgba(0, 0, 0, 0.16)', + ); + }); + }); + + it('loading animation is shown', () => { + cy.get('img').then(query => { + const img = query.get(0); + + expect(img.style.animationName).to.equal('tuiSkeletonVibe'); + }); + }); + }); + + describe('image exist', () => { + const image = + 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDeRXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABwAAkAcABAAAADAyMTABkQcABAAAAAECAwCGkgcAFgAAAMAAAAAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAEAAAADoAQAAQAAAAEAAAAAAAAAQVNDSUkAAABQaWNzdW0gSUQ6IDY3Nf/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/CABEIAAEAAQMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGOE//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAQUCf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEABj8Cf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8hf//aAAwDAQACAAMAAAAQC//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Qf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Qf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8Qf//Z'; + + @Component({ + template: ` + + picsum + + `, + }) + class TestComponent {} + + beforeEach(() => + cy.mount(TestComponent, { + imports: [TuiRootModule, TuiLazyLoadingModule], + }), + ); + + it('image has background color', () => { + cy.get('img').then(query => { + const img = query.get(0); + + expect(img.style.animationName).to.equal(''); + }); + }); + }); +}); diff --git a/projects/kit/directives/lazy-loading/test/lazy-loading.directive.spec.ts b/projects/kit/directives/lazy-loading/test/lazy-loading.directive.spec.ts deleted file mode 100644 index c31027a7c466..000000000000 --- a/projects/kit/directives/lazy-loading/test/lazy-loading.directive.spec.ts +++ /dev/null @@ -1,63 +0,0 @@ -import {Component} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {TuiLazyLoadingModule} from '@taiga-ui/kit/directives'; -import {fromEvent} from 'rxjs'; - -// TODO: migrate to cypress, jest doesn't support img load event -// Move to cypress component testing -xdescribe('TuiLazyLoading directive', () => { - // converted https://picsum.photos/1/1 to base64 - // for exclude network troubles when testing - const image = - 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDeRXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABwAAkAcABAAAADAyMTABkQcABAAAAAECAwCGkgcAFgAAAMAAAAAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAEAAAADoAQAAQAAAAEAAAAAAAAAQVNDSUkAAABQaWNzdW0gSUQ6IDY3Nf/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/CABEIAAEAAQMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGOE//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAQUCf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEABj8Cf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8hf//aAAwDAQACAAMAAAAQC//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Qf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Qf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8Qf//Z'; - - @Component({ - template: ` - picsum - `, - }) - class TestComponent {} - - let fixture: ComponentFixture; - - beforeEach(async () => { - TestBed.configureTestingModule({ - imports: [TuiLazyLoadingModule], - declarations: [TestComponent], - }); - await TestBed.compileComponents(); - - fixture = TestBed.createComponent(TestComponent); - - fixture.detectChanges(); - }); - - it('Image has background color', () => { - expect(getHtmlImage()?.style.background).toBe('var(--tui-clear-hover)'); - expect(getHtmlImage()?.style.getPropertyValue('--tui-clear-hover').trim()).toBe( - 'rgba(0, 0, 0, 0.16)', - ); - }); - - it('Loading animation is shown', () => { - expect(getHtmlImage()?.style.animationName).toContain('tuiSkeletonVibe'); - }); - - it('Loading animation is cancelled after image load', done => { - fromEvent(getHtmlImage() as unknown as HTMLImageElement, 'load').subscribe(() => { - fixture.detectChanges(); - expect(getHtmlImage()?.style.animationName).toBe(''); - done(); - }); - }); -}); - -function getHtmlImage(): HTMLImageElement | null { - return document.querySelector('#image'); -}