From ed209147ba9e9f07f0353167bea51b53d9054d6e Mon Sep 17 00:00:00 2001
From: Eric Jansen <ericjansen@readyplayer.me>
Date: Thu, 1 Aug 2024 12:38:12 +0200
Subject: [PATCH] feat: wip visual test

---
 src/App/App.component.tsx                |  5 +++-
 test/functional/cypress.config.ts        | 11 +++-----
 test/functional/cypress/e2e/visual.cy.ts | 32 ++++++++++++++++++------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/App/App.component.tsx b/src/App/App.component.tsx
index 841abb97..2b252451 100644
--- a/src/App/App.component.tsx
+++ b/src/App/App.component.tsx
@@ -43,6 +43,9 @@ const AvatarTest: React.FC = () => {
   const modelUrl = urlParams.get('modelUrl')
     ? decodeURIComponent(urlParams.get('modelUrl') || '')
     : 'https://models.readyplayer.me/64d61e9e17883fd73ebe5eb7.glb?morphTargets=ARKit,Eyes Extra&textureAtlas=none&lod=0';
+  const zoomLevel = urlParams.get('zoomLevel')
+    ? parseFloat(urlParams.get('zoomLevel') || '1')
+    : CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE;
 
   return (
     <div className={styles.app}>
@@ -53,7 +56,7 @@ const AvatarTest: React.FC = () => {
             shadows
             style={{ background: 'rgb(9,20,26)' }}
             fov={45}
-            cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
+            cameraInitialDistance={zoomLevel}
             effects={{
               ambientOcclusion: true
             }}
diff --git a/test/functional/cypress.config.ts b/test/functional/cypress.config.ts
index b1b94f1d..4543e02e 100644
--- a/test/functional/cypress.config.ts
+++ b/test/functional/cypress.config.ts
@@ -6,15 +6,10 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       return getCompareSnapshotsPlugin(on, config);
     },
-    viewportWidth: 1280,
-    viewportHeight: 720,
+    viewportWidth: 576,
+    viewportHeight: 1024,
     chromeWebSecurity: false,
     experimentalModifyObstructiveThirdPartyCode: true,
     responseTimeout: 60000
-  },
-  env: {}
-  // retries: {
-  //   runMode: 3,
-  //   openMode: 2
-  // }
+  }
 });
diff --git a/test/functional/cypress/e2e/visual.cy.ts b/test/functional/cypress/e2e/visual.cy.ts
index dfb98966..080d3204 100644
--- a/test/functional/cypress/e2e/visual.cy.ts
+++ b/test/functional/cypress/e2e/visual.cy.ts
@@ -1,13 +1,29 @@
-describe('visual', () => {
-  it('open', () => {
-    const MODEL_URL = 'https://api.readyplayer.dev/v3/avatars/65f82db95462c113fe5c5bb6.glb';
+const VISUAL_TEST_CONFIG = Object.freeze({
+  zoomLevel: {
+    head: 0.5,
+    body: 3.0
+  },
+  testUrl: 'http://localhost:3000/test',
+  modelUrl: 'https://api.readyplayer.dev/v3/avatars/65f82db95462c113fe5c5bb6.glb'
+});
+
+function compareSnapshot(zoomLevel: number) {
+  cy.visit(
+    `${VISUAL_TEST_CONFIG.testUrl}/?modelUrl=${encodeURIComponent(VISUAL_TEST_CONFIG.modelUrl)}&zoomLevel=${zoomLevel}`
+  );
 
-    cy.visit(`http://localhost:3000/test/?modelUrl=${encodeURIComponent(MODEL_URL)}`);
+  cy.intercept(VISUAL_TEST_CONFIG.modelUrl).as('modelDownloading');
+  cy.wait('@modelDownloading');
 
-    cy.intercept(MODEL_URL).as('modelDownloading');
-    cy.wait('@modelDownloading');
+  cy.wait(2000);
+  cy.compareSnapshot(`avatar-zoom-${zoomLevel}`);
+}
 
-    cy.wait(2000);
-    cy.compareSnapshot('home-page');
+describe('visual', () => {
+  it('compares avatar body snapshot', () => {
+    compareSnapshot(VISUAL_TEST_CONFIG.zoomLevel.body);
+  });
+  it('compares avatar head snapshot', () => {
+    compareSnapshot(VISUAL_TEST_CONFIG.zoomLevel.head);
   });
 });