Add tests of lazy loading

.github/workflows/cypress.yml

@@ -30,6 +30,9 @@ jobs:
           # https://github.com/marketplace/actions/cypress-io#component-testing
           component: true
 
+          # Use Chrome because by cache disabling code is Chrome specific
+          browser: chrome
+
           # Records to Cypress Cloud
           # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
           record: true

cypress/component/NextVisual.cy.tsx

@@ -151,3 +151,46 @@ describe('complex layouts', () => {
 
 })
 
+describe('loading', () => {
+
+  it('images lazy load', () => {
+
+    cy.intercept('https://placehold.co/200x200', cy.spy().as('load'))
+
+    cy.mount(<NextVisual
+      image='https://placehold.co/200x200'
+      width={200}
+      height={200}
+      alt=''
+      data-cy='next-visual'
+      style={{marginTop: VH + 1}} />)
+
+    cy.wait(100)
+    cy.get('@load').should('not.have.been.called')
+
+    cy.get('[data-cy=next-visual').scrollIntoView()
+
+    cy.get('@load').should('have.been.called')
+  })
+
+  it('videos lazy load', () => {
+
+    cy.intercept('https://placehold.co/200x200.mp4', cy.spy().as('load'))
+
+    cy.mount(<NextVisual
+      video='https://placehold.co/200x200.mp4'
+      width={200}
+      height={200}
+      alt=''
+      data-cy='next-visual'
+      style={{marginTop: VH + 1}} />)
+
+      cy.wait(100)
+      cy.get('@load').should('not.have.been.called')
+
+      cy.get('[data-cy=next-visual').scrollIntoView()
+
+      cy.get('@load').should('have.been.called')
+  })
+
+})

cypress/support/cache.ts

@@ -0,0 +1,12 @@
+// Disable caching of images
+// https://github.com/cypress-io/cypress/issues/14459#issuecomment-768616195
+if (Cypress.browser.family === 'chromium') {
+  Cypress.automation('remote:debugger:protocol', {
+    command: 'Network.enable',
+    params: {}
+  });
+  Cypress.automation('remote:debugger:protocol', {
+    command: 'Network.setCacheDisabled',
+    params: { cacheDisabled: true }
+  });
+}

cypress/support/component.ts

@@ -1,17 +1,5 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
+// Configuration
+import './cache'
 
 // Import commands.js using ES2015 syntax:
 import './commands'
@@ -34,6 +22,3 @@ declare global {
 }
 
 Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(<MyComponent />)