chore: add lazy-loading.cy.ts

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: `
+                <tui-root>
+                    <img
+                        alt="picsum"
+                        loading="lazy"
+                        src="not-found.img"
+                        style="--tui-clear-hover: rgba(0, 0, 0, 0.16); width: 100px; height: 100px; display: block"
+                    />
+                </tui-root>
+            `,
+        })
+        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: `
+                <tui-root>
+                    <img
+                        id="image"
+                        alt="picsum"
+                        loading="lazy"
+                        src="${image}"
+                        style="--tui-clear-hover: rgba(0, 0, 0, 0.16); width: 100px; height: 100px; display: block"
+                    />
+                </tui-root>
+            `,
+        })
+        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('');
+            });
+        });
+    });
+});