From 6f7e55bf97216903b90faabfb5a117b8f2aa42ba Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Tue, 8 Aug 2023 22:52:02 -0700
Subject: [PATCH] Add tests of lazy loading

---
 .github/workflows/cypress.yml       |  3 ++
 cypress/component/NextVisual.cy.tsx | 43 +++++++++++++++++++++++++++++
 cypress/fixtures/example.json       |  5 ----
 cypress/support/cache.ts            | 12 ++++++++
 cypress/support/component.ts        | 19 ++-----------
 5 files changed, 60 insertions(+), 22 deletions(-)
 delete mode 100644 cypress/fixtures/example.json
 create mode 100644 cypress/support/cache.ts

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index 39acf25..9fa0fd8 100644
--- a/.github/workflows/cypress.yml
+++ b/.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
diff --git a/cypress/component/NextVisual.cy.tsx b/cypress/component/NextVisual.cy.tsx
index 012c04a..1d451ce 100644
--- a/cypress/component/NextVisual.cy.tsx
+++ b/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')
+  })
+
+})
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
deleted file mode 100644
index 02e4254..0000000
--- a/cypress/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
diff --git a/cypress/support/cache.ts b/cypress/support/cache.ts
new file mode 100644
index 0000000..879bb7f
--- /dev/null
+++ b/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 }
+  });
+}
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index 37f59ed..00ee872 100644
--- a/cypress/support/component.ts
+++ b/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 />)
\ No newline at end of file