Merge pull request #18 from 2gis/TILES-5179-tests-for-new-gltf-plugin

TILES-5179 tests for public methods
2gis · Jul 8, 2023 · 4842ea9 · 4842ea9
2 parents 70f6090 + b271945
commit 4842ea9
Show file tree

Hide file tree

Showing 17 changed files with 212 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -44,9 +44,15 @@ plugin.addModels([{
 1. Make sure the release target is the «master» branch
 1. Paste the release tag into the «Release title» field, for example v1.2.3
 1. Add a release description
-1. Click the «Publish release» button 
+1. Click the «Publish release» button
 1. Go to https://github.com/2gis/mapgl-gltf/actions and wait for completing the release workflow
 
+## Testing
+
+If you write screenshot tests, you will need run `npm run docker:test` after coding.
+This command runs your tests on the docker image that is used in pipeline build.
+This guarantees the authenticity of the screenshots used.
+
 ## Documentation
 
 You can find the more information in the official [documentation](https://docs.2gis.ru/ru/mapgl/examples/gltf-plugin).
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "test:unit": "jest --colors",
     "test:integration": "webpack --env type=test && TEST_SUITE=integration jest --colors",
     "test:screenshots": "webpack --env type=test && TEST_SUITE=screenshots jest --colors",
+    "test:screenshots:watch": "webpack --env type=test && TEST_SUITE=screenshots jest --colors --watchAll",
     "test:screenshots:update": "webpack --env type=test && TEST_SUITE=screenshots jest -u",
     "test:typings": "tsc -p tsconfig.typings.validation.json",
     "demo": "webpack --env type=demo",

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -121,7 +121,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
      * adding them to the map
      *
      * @param modelOptions An array of models' options
-     * @param ids An array of idenifiers of the models that must be added to the scene
+     * @param ids An array of identifiers of the models that must be added to the scene
      */
     public async addModelsPartially(modelOptions: ModelOptions[], ids: Id[]) {
         await this.waitForPluginInit;
@@ -227,7 +227,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
             this.models,
             this.options,
         );
-        this.realtyScene.addRealtyScene(scene, state);
+        return this.realtyScene.addRealtyScene(scene, state);
     }
 
     private invalidateViewport() {

diff --git a/src/realtyScene/realtyScene.ts b/src/realtyScene/realtyScene.ts
@@ -130,7 +130,7 @@ export class RealtyScene {
             }
         });
 
-        this.plugin.addModelsPartially(models, modelIds).then(() => {
+        return this.plugin.addModelsPartially(models, modelIds).then(() => {
             // set options after adding models
             if (state?.floorId !== undefined) {
                 const floors = this.activeBuilding?.floors ?? [];

diff --git a/test/index.ts b/test/index.ts
@@ -1,3 +1,7 @@
 import { GltfPlugin } from '../src';
+import { OBJECTS_FOR_TESTS } from './utils';
+import { realtyScene } from '../demo/realtySceneData';
 
 window.GltfPlugin = GltfPlugin;
+window.OBJECTS_FOR_TESTS = OBJECTS_FOR_TESTS; // storage for any data for tests
+window.OBJECTS_FOR_TESTS.mapRealtyScene = realtyScene;
diff --git a/test/puppeteer/index.ts b/test/puppeteer/index.ts
@@ -49,7 +49,6 @@ export async function pageSetUp(): Promise<puppeteer.Page> {
 
     page.on('console', async (msg) => {
         const args = await Promise.all(msg.args().map((arg) => describeLog(arg)));
-        console.log(`PAGE LOG: ${msg.text()} ${args.join(' ')}`);
     });
 
     await page.goto(REFERENCE_DEMO);

diff --git a/test/screenshots/__screenshots__/plugin/_constructor-snap.png b/test/screenshots/__screenshots__/plugin/_constructor-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/add_model-snap.png b/test/screenshots/__screenshots__/plugin/add_model-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/add_models-snap.png b/test/screenshots/__screenshots__/plugin/add_models-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/add_models_partially-snap.png b/test/screenshots/__screenshots__/plugin/add_models_partially-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/add_poi_group-snap.png b/test/screenshots/__screenshots__/plugin/add_poi_group-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/add_realty_scene-snap.png b/test/screenshots/__screenshots__/plugin/add_realty_scene-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/remove_model-snap.png b/test/screenshots/__screenshots__/plugin/remove_model-snap.png
diff --git a/test/screenshots/__screenshots__/plugin/remove_poi_group-snap.png b/test/screenshots/__screenshots__/plugin/remove_poi_group-snap.png
diff --git a/test/screenshots/plugin.screen.ts b/test/screenshots/plugin.screen.ts
@@ -9,8 +9,14 @@ import {
     defaultFontsPath,
 } from '../puppeteer/utils';
 
+/**
+ * Tests for public methods new Gltf Plugin.
+ * Only happy-path
+ *
+ **/
 describe('plugin', () => {
     let page: Page;
+
     const dirPath = makeScreenshotsPath('plugin');
 
     beforeEach(async () => {
@@ -24,7 +30,7 @@ describe('plugin', () => {
             copyright: false,
             zoomControl: false,
             key: API_KEY,
-            zoom: 16.5,
+            zoom: 17.5,
             center: [82.88688745100029, 54.98064452796862],
             rotation: -111,
             pitch: 45,
@@ -44,28 +50,134 @@ describe('plugin', () => {
         await page.close();
     });
 
+    // Case for verify another ambient light at the scene
+    it('_constructor', async () => {
+        await page.close();
+        page = await pageSetUp();
+        await initMapWithOptions(page, {
+            style: blankStyle,
+            styleOptions: {
+                fontsPath: defaultFontsPath,
+            },
+            // @ts-ignore
+            copyright: false,
+            zoomControl: false,
+            key: API_KEY,
+            zoom: 17.5,
+            center: [82.88688745100029, 54.98064452796862],
+            rotation: -111,
+            pitch: 45,
+        });
+        await page.evaluate(() => {
+            window.gltfPlugin = new window.GltfPlugin(window.map, {
+                modelsLoadStrategy: 'dontWaitAll',
+                dracoScriptsUrl: 'libs/draco/',
+                ambientLight: { color: '#ff0000', intencity: 2.5 },
+            });
+            return window.gltfPlugin.addModel(window.OBJECTS_FOR_TESTS.models.cubeBig);
+        });
+
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, '_constructor');
+    });
+
     it('addModel', async () => {
+        await page.evaluate(() => {
+            return window.gltfPlugin.addModel(window.OBJECTS_FOR_TESTS.models.cubeBig);
+        });
+
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, 'add_model');
+    });
+
+    it('addModels', async () => {
         await page.evaluate(() => {
             return window.gltfPlugin.addModels([
-                {
-                    modelId: 1,
-                    coordinates: [82.886554, 54.980988],
-                    modelUrl: 'models/cube_draco.glb',
-                    rotateX: 90,
-                    scale: 1000,
-                },
-                {
-                    modelId: 2,
-                    coordinates: [82.886454, 54.980388],
-                    modelUrl: 'models/cube_draco.glb',
-                    rotateX: 90,
-                    rotateY: 31,
-                    scale: 700,
-                },
+                window.OBJECTS_FOR_TESTS.models.cubeBig,
+                window.OBJECTS_FOR_TESTS.models.cubeSmall,
             ]);
         });
 
         await waitForReadiness(page);
         await makeSnapshot(page, dirPath, 'add_models');
     });
+
+    it('addPoiGroup', async () => {
+        await page.evaluate(() => {
+            window.gltfPlugin.addPoiGroup(window.OBJECTS_FOR_TESTS.poi.asciiLetters);
+            window.gltfPlugin.addPoiGroup(window.OBJECTS_FOR_TESTS.poi.engRusLetters);
+        });
+
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, 'add_poi_group');
+    });
+
+    it('removeModel', async () => {
+        await page.evaluate(() => {
+            return window.gltfPlugin.addModel(window.OBJECTS_FOR_TESTS.models.cubeBig);
+        });
+        await page.evaluate(() => {
+            window.gltfPlugin.removeModel(window.OBJECTS_FOR_TESTS.models.cubeBig.modelId);
+        });
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, 'remove_model');
+    });
+
+    it('removePoiGroup', async () => {
+        await page.evaluate(() => {
+            window.gltfPlugin.addPoiGroup(window.OBJECTS_FOR_TESTS.poi.asciiLetters);
+        });
+        await page.evaluate(() => {
+            window.gltfPlugin.removePoiGroup(window.OBJECTS_FOR_TESTS.poi.asciiLetters.id);
+        });
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, 'remove_poi_group');
+    });
+
+    it('addRealtyScene', async () => {
+        page = await pageSetUp();
+        await initMapWithOptions(page, {
+            style: blankStyle,
+            styleOptions: {
+                fontsPath: defaultFontsPath,
+            },
+            // @ts-ignore
+            copyright: false,
+            zoomControl: false,
+            key: API_KEY,
+            zoom: 17.5,
+            center: [47.245286302641034, 56.134743473834099],
+            rotation: 330,
+            pitch: 45,
+        });
+
+        await page.evaluate(() => {
+            window.gltfPlugin = new window.GltfPlugin(window.map, {
+                modelsLoadStrategy: 'dontWaitAll',
+                dracoScriptsUrl: 'libs/draco/',
+                modelsBaseUrl:
+                    'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
+            });
+        });
+        await waitForReadiness(page);
+        await page.evaluate(() => {
+            return window.gltfPlugin.addRealtyScene(window.OBJECTS_FOR_TESTS.mapRealtyScene);
+        });
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, 'add_realty_scene');
+    });
+
+    it('addModelsPartially', async () => {
+        await page.evaluate(() => {
+            return window.gltfPlugin.addModelsPartially(
+                [
+                    window.OBJECTS_FOR_TESTS.models.cubeBig,
+                    window.OBJECTS_FOR_TESTS.models.cubeSmall,
+                ],
+                [window.OBJECTS_FOR_TESTS.models.cubeBig.modelId],
+            );
+        });
+        await waitForReadiness(page);
+        await makeSnapshot(page, dirPath, 'add_models_partially');
+    });
 });
diff --git a/test/test.d.ts b/test/test.d.ts
@@ -1,11 +1,13 @@
 import type { Map } from '@2gis/mapgl/types';
 import { GltfPlugin } from '../src';
+import { OBJECTS_FOR_TESTS } from './utils';
 
 declare global {
     interface Window {
         map: Map;
         gltfPlugin: GltfPlugin;
         GltfPlugin: typeof GltfPlugin;
         ready: boolean;
+        OBJECTS_FOR_TESTS: OBJECTS_FOR_TESTS;
     }
 }
diff --git a/test/utils.ts b/test/utils.ts
@@ -0,0 +1,67 @@
+/**
+ * @param ms
+ * Pause script exec of milliseconds
+ * */
+export function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+ * Models and poi's for create objects at the scene
+ * */
+export const OBJECTS_FOR_TESTS = {
+    models: {
+        cubeBig: {
+            modelId: 1,
+            coordinates: [82.886554, 54.98085],
+            modelUrl: 'models/cube_draco.glb',
+            rotateX: 90,
+            scale: 500,
+        },
+        cubeSmall: {
+            modelId: 2,
+            coordinates: [82.886454, 54.980588],
+            modelUrl: 'models/cube_draco.glb',
+            rotateX: 90,
+            rotateY: 31,
+            scale: 250,
+        },
+    },
+    poi: {
+        asciiLetters: {
+            id: 1,
+            type: 'primary',
+            minZoom: 12,
+            elevation: 40,
+            fontSize: 10,
+            fontColor: '#aa3a3a',
+            data: [
+                {
+                    coordinates: [82.886454, 54.98075],
+                    elevation: 30,
+                    label: '@<>?|!@#$%\n^&*()_+-=\n3к\n78.4 м²',
+                    userData: {
+                        url: 'https://example.com/',
+                    },
+                },
+            ],
+        },
+        engRusLetters: {
+            id: 2,
+            type: 'secondary',
+            minZoom: 12,
+            elevation: 20,
+            fontSize: 10,
+            fontColor: '#3a3a3a',
+            data: [
+                {
+                    coordinates: [82.886104, 54.98075],
+                    elevation: 30,
+                    label: 'qwe RTY пои ГРУП',
+                    userData: {
+                        url: 'https://example.com/',
+                    },
+                },
+            ],
+        },
+    },
+};