feat: wip visual test

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

Hide file tree

Showing 7 changed files with 668 additions and 214 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,8 +39,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "if [ -z $NO_HUSKY ]; then husky install; fi",
-    "cy:open": "cypress open",
-    "test:functional": "cypress install && cypress run --config video=false --browser electron --project test/functional"
+    "cy:open:functional": "cypress open --project ./test/functional",
+    "test:functional": "cypress install && cypress run --config video=false --browser electron --project ./test/functional"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -109,6 +109,7 @@
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "cypress": "^13.13.1",
+    "cypress-image-diff-js": "^2.2.1",
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -126,6 +127,7 @@
     "r3f-perf": "^7.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.0.0",
@@ -153,7 +155,6 @@
     "npm": "8.6.0"
   },
   "dependencies": {
-    "cypress-image-diff-js": "^2.2.1",
     "gltfpack": "^0.21.0",
     "jest-canvas-mock": "^2.5.2",
     "jotai": "^2.2.2"

diff --git a/src/App/App.component.tsx b/src/App/App.component.tsx
@@ -1,42 +1,82 @@
 import React from 'react';
-import { Sparkles, StatsGl } from '@react-three/drei';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import { Avatar } from 'src/components/Avatar';
-import { EnvironmentModel } from 'src/components/Models';
+import { Avatar, CAMERA } from 'src/components/Avatar';
 
+import { Sparkles, StatsGl } from '@react-three/drei';
+import { EnvironmentModel } from 'src/library';
 import styles from './App.module.scss';
 
-function App() {
-  return (
-    <div className={styles.app}>
-      <div className={styles.settings}>
-        <div className={styles.wrapper}>
-          <h3 className={styles.title}>localhost playground</h3>
-          <div className={styles.content}>
-            Drop your content in there to test the avatar props without shrinking the canvas
-          </div>
+const AvatarDevelop: React.FC = () => (
+  <div className={styles.app}>
+    <div className={styles.settings}>
+      <div className={styles.wrapper}>
+        <h3 className={styles.title}>localhost playground</h3>
+        <div className={styles.content}>
+          Drop your content in there to test the avatar props without shrinking the canvas
         </div>
       </div>
+    </div>
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <Avatar
+          modelSrc="https://models.readyplayer.me/64d61e9e17883fd73ebe5eb7.glb?morphTargets=ARKit,Eyes Extra&textureAtlas=none&lod=0"
+          shadows
+          animationSrc="/male-idle-2.fbx"
+          style={{ background: 'rgb(9,20,26)' }}
+          fov={45}
+          effects={{
+            ambientOcclusion: true
+          }}
+        >
+          <StatsGl />
+          <EnvironmentModel environment="spaceStation" scale={1} />
+          <Sparkles count={70} scale={3} size={3} speed={1} opacity={0.04} color="#ccff00" />
+        </Avatar>
+      </div>
+    </div>
+  </div>
+);
+
+const AvatarTest: React.FC = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const modelUrl = urlParams.get('modelUrl')
+    ? decodeURIComponent(urlParams.get('modelUrl') || '')
+    : 'https://models.readyplayer.me/64d61e9e17883fd73ebe5eb7.glb?morphTargets=ARKit,Eyes Extra&textureAtlas=none&lod=0';
+
+  return (
+    <div className={styles.app}>
       <div className={styles.container}>
         <div className={styles.card}>
           <Avatar
-            modelSrc="https://models.readyplayer.me/64d61e9e17883fd73ebe5eb7.glb?morphTargets=ARKit,Eyes Extra&textureAtlas=none&lod=0"
+            modelSrc={modelUrl}
             shadows
-            animationSrc="/male-idle-2.fbx"
             style={{ background: 'rgb(9,20,26)' }}
             fov={45}
+            cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
             effects={{
               ambientOcclusion: true
             }}
           >
-            <StatsGl />
-            <EnvironmentModel environment="spaceStation" scale={1} />
-            <Sparkles count={70} scale={3} size={3} speed={1} opacity={0.04} color="#ccff00" />
+            {/* <StatsGl /> */}
           </Avatar>
         </div>
       </div>
     </div>
   );
-}
+};
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <AvatarDevelop />
+  },
+  {
+    path: '/test',
+    element: <AvatarTest />
+  }
+]);
+
+const App: React.FC = () => <RouterProvider router={router} />;
 
 export default App;
diff --git a/test/functional/cypress.config.ts b/test/functional/cypress.config.ts
@@ -1,5 +1,4 @@
 import { defineConfig } from 'cypress';
-// @ts-ignore
 import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';
 
 module.exports = defineConfig({
@@ -13,9 +12,9 @@ module.exports = defineConfig({
     experimentalModifyObstructiveThirdPartyCode: true,
     responseTimeout: 60000
   },
-  env: {},
-  retries: {
-    runMode: 3,
-    openMode: 2
-  }
+  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,5 +1,13 @@
 describe('visual', () => {
   it('open', () => {
-    cy.visit('http://localhost:3000/');
+    const MODEL_URL = 'https://api.readyplayer.dev/v3/avatars/65f82db95462c113fe5c5bb6.glb';
+
+    cy.visit(`http://localhost:3000/test/?modelUrl=${encodeURIComponent(MODEL_URL)}`);
+
+    cy.intercept(MODEL_URL).as('modelDownloading');
+    cy.wait('@modelDownloading');
+
+    cy.wait(2000);
+    cy.compareSnapshot('home-page');
   });
 });
diff --git a/test/functional/cypress/support/commands.ts b/test/functional/cypress/support/commands.ts
@@ -1,37 +1,3 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+import compareSnapshotCommand from 'cypress-image-diff-js/command';
+
+compareSnapshotCommand();
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,6 +18,7 @@
     "declarationDir": "src",
     "sourceMap": false,
     "outDir": "dist",
+    "noEmit": false,
     "emitDeclarationOnly": true,
     "plugins": [{ "name": "typescript-plugin-css-modules", "options": { "customMatcher": "\\.(c|sc)ss$" } }],
     "baseUrl": "."