feat: wip visual test

readyplayerme · Aug 1, 2024 · ed20914 · ed20914
1 parent 1aaa6af
commit ed20914
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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);
   });
 });