[Proposal] E2E visual test environment

examples/README.md

@@ -65,6 +65,7 @@ Examples can also contain comments which allow you to define the default configu
 // @config NO_MINISTATS
 // @config WEBGPU_DISABLED
 // @config WEBGL_DISABLED
+// @config E2E_TEST
 import * as pc from 'playcanvas';
 ...
 ```

examples/eslint.config.mjs

@@ -9,6 +9,7 @@ export default [
             globals: {
                 ...globals.browser,
                 ...globals.node,
+                ...globals.mocha,
                 'ObjModelParser': 'readonly',
                 'OutlineEffect': 'readonly'
             }
@@ -17,6 +18,13 @@ export default [
             'import/no-unresolved': 'off'
         }
     },
+    {
+        files: ['test/**/*.mjs'],
+        rules: {
+            'no-unused-expressions': 'off',
+            'prefer-arrow-callback': 'off' // Mocha uses function callbacks
+        }
+    },
     {
         ignores: [
             'assets/scripts/utils/area-light-lut-bin-gen.js',

examples/scripts/build-metadata.mjs

@@ -13,6 +13,14 @@ import { parseConfig } from '../utils/utils.mjs';
  */
 const exampleMetaData = [];
 
+/**
+ * @type {{
+ *      categoryKebab: string,
+ *      exampleNameKebab: string
+ * }[]}
+ */
+const e2eTestMetaData = [];
+
 /**
  * @param {object} obj - The object.
  * @returns {string} - The stringified object
@@ -65,6 +73,13 @@ const main = () => {
                 categoryKebab,
                 exampleNameKebab
             });
+
+            if (config.E2E_TEST) {
+                e2eTestMetaData.push({
+                    categoryKebab,
+                    exampleNameKebab
+                });
+            }
         });
     });
 
@@ -73,5 +88,6 @@ const main = () => {
     }
 
     fs.writeFileSync('cache/metadata.mjs', `export const exampleMetaData = ${objStringify(exampleMetaData)};\n`);
+    fs.writeFileSync('cache/e2eTestMetaData.mjs', `export const e2eTestMetaData = ${objStringify(e2eTestMetaData)};\n`);
 };
 main();

examples/src/examples/gizmos/transform-rotate.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/gizmos/transform-scale.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/gizmos/transform-translate.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/ambient-occlusion.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/asset-viewer.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/depth-of-field.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/dithered-transparency.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/hdr.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/instancing-glb.example.mjs

@@ -1,4 +1,5 @@
 // @config DESCRIPTION This example demonstrates the functionality of the EXT_mesh_gpu_instancing extension, which enables GPU instancing of meshes stored in a glTF file.
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/graphics/light-physical-units.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/lights-baked-a-o.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/outlines-colored.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/graphics/shadow-catcher.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/graphics/shapes.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/graphics/sky.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/loaders/gltf-export.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/loaders/gsplat-sh.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/loaders/gsplat.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/anisotropy-disc.example.mjs

@@ -1,4 +1,5 @@
 // @config DESCRIPTION This example demonstrates anisotropy on a disc model. It showcases the rendering of anisotropic highlights and material properties.
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/anisotropy-lamp.example.mjs

@@ -1,4 +1,5 @@
 // @config DESCRIPTION This example demonstrates anisotropy effects on the lamp model. The anisotropic highlights on the lamp's surface showcase the material's directional properties.
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/anisotropy-rotation.example.mjs

@@ -1,4 +1,5 @@
 // @config DESCRIPTION This example demonstrates anisotropy rotation. Visually, the model showcases the effects of anisotropic highlights as the light interacts with the surface.
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/anisotropy-strength.example.mjs

@@ -1,4 +1,5 @@
 // @config DESCRIPTION This example demonstrates anisotropy strength. Visually, the model showcases the effect of anisotropic highlights based on material properties.
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/dispersion.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/lit-material.example.mjs

@@ -1,4 +1,5 @@
 // @config HIDDEN
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/material-anisotropic.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/material-physical.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/material-translucent-specular.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/materials/material-transparency.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/test/detail-map.example.mjs

@@ -1,4 +1,5 @@
 // @config HIDDEN
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/test/parallax-mapping.example.mjs

@@ -1,4 +1,5 @@
 // @config HIDDEN
+// @config E2E_TEST
 import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';

examples/src/examples/user-interface/button-basic.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/user-interface/button-sprite.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/user-interface/scroll-view.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/user-interface/text-emojis.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/user-interface/text.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 

examples/src/examples/user-interface/world-ui.example.mjs

@@ -1,3 +1,4 @@
+// @config E2E_TEST
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';