test： 测试用例支持 new scene 对象 (#1291)

* chore: lint unuse

* chore: pre commit command

* chore: pre-commit 去除build 命令

* fix: 修复unuse import

* test: 增加gl 模拟能力

* fix: lint error

* chore: 提取测试utils 为单独包

* chore: 调整测试覆盖率值

jest.config.js

@@ -48,10 +48,10 @@ module.exports = {
   coverageReporters: ["html"],
   coverageThreshold: {
     global: {
-      branches: 6,
-      functions: 7,
-      lines: 9,
-      statements: 9,
+      branches: 9,
+      functions: 11.5,
+      lines: 15,
+      statements: 15,
     },
   },
 };

jest/setupTests.ts

@@ -2,6 +2,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import 'jest-styled-components';
 import 'jest-canvas-mock';
+
 // @ts-igore
 window.URL.createObjectURL = function() {};
 Enzyme.configure({ adapter: new Adapter() });

packages/component/package.json

@@ -34,6 +34,9 @@
     "reflect-metadata": "^0.1.13",
     "supercluster": "^7.0.0"
   },
+  "devDependencies": {
+    "@antv/l7-test-utils": "2.9.23"
+  },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {
     "access": "public"

packages/component/src/control/__tests__/BaseControl.spec.ts

@@ -0,0 +1,23 @@
+describe('BaseControl', () => {
+    // const el = document.createElement('div');
+    // el.id = 'test-div-id';
+    // el.style.width = '500px';
+    // el.style.height = '500px';
+    // el.style.position = 'absolute';
+    // document.querySelector('body')?.appendChild(el);
+    // const scene = new Scene({
+    //   id: 'test-div-id',
+    //   map: new Map({
+    //     style: 'dark',
+    //     center: [110.19382669582967, 30.258134],
+    //     pitch: 0,
+    //     zoom: 3,
+    //   }),
+    // });
+    it('control', () => {
+        expect(1).toEqual(1)
+      });
+      
+    
+  });
+  

packages/component/src/control/__tests__/zoom.spec.ts

@@ -0,0 +1,17 @@
+import Zoom from '../zoom';
+import { TestScene } from '@antv/l7-test-utils'
+
+
+describe('zoom', () => {
+   const zoom = new Zoom()
+    it('zoom getDefault', () => {
+         expect(zoom.getDefault().name).toEqual('zoom');
+         const scene = TestScene();
+         scene.addControl(zoom);
+         zoom.disable();
+    
+      });
+      
+    
+  });
+  

packages/core/src/services/config/IConfigService.ts

@@ -6,6 +6,7 @@ import { IRenderConfig } from '../renderer/IRendererService';
 export interface ISceneConfig extends IRenderConfig {
   id: string | HTMLDivElement;
   canvas?: HTMLCanvasElement;
+  gl?: any,
   hasBaseMap?: boolean;
   map: IMapWrapper;
   logoPosition?: PositionName;

packages/core/src/services/renderer/IRendererService.ts

@@ -48,7 +48,7 @@ export interface IExtensions {
 
 export interface IRendererService {
   extensionObject: IExtensions;
-  init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
+  init(canvas: HTMLCanvasElement, cfg: IRenderConfig,gl: any): Promise<void>;
   testExtension(name: string): boolean;
   clear(options: IClearOptions): void;
   createModel(options: IModelInitializationOptions): IModel;

packages/core/src/services/scene/SceneService.ts

@@ -200,7 +200,9 @@ export default class Scene extends EventEmitter implements ISceneService {
           // @ts-ignore
           this.canvas,
           this.configService.getSceneConfig(this.id) as IRenderConfig,
+          sceneConfig.gl
         );
+        this.initContainer()
 
         elementResizeEvent(
           this.$container as HTMLDivElement,
@@ -284,6 +286,7 @@ export default class Scene extends EventEmitter implements ISceneService {
           // @ts-ignore
           sceneConfig.canvas,
           this.configService.getSceneConfig(this.id) as IRenderConfig,
+          undefined,
         );
       } else {
         console.error('容器 id 不存在');

packages/map/src/index.ts

@@ -1,2 +1,3 @@
 export * from './map';
 export * from './earthmap';
+export * from './interface';

packages/map/src/map.ts

@@ -119,10 +119,7 @@ export class Map extends Camera {
   }
 
   public resize(eventData?: any) {
-    const dimensions = this.containerDimensions();
-    const width = dimensions[0];
-    const height = dimensions[1];
-
+    const [width, height] = this.containerDimensions();
     this.transform.resize(width, height);
     // TODO: 小程序环境不需要执行后续动作
     if (isMini) {
@@ -372,6 +369,9 @@ export class Map extends Camera {
       } else {
         width = this.container.clientWidth;
         height = this.container.clientHeight;
+        width = width == 0 ? 400 : width;
+        height = height === 0 ? 300 : height;
+       
       }
     }
     return [width, height];

packages/maps/src/map/map.ts

@@ -103,6 +103,7 @@ export default class L7MapService implements IMapService<Map> {
       return this.simpleMapCoord.getSize();
     }
     const size = this.map.transform;
+
     return [size.width, size.height];
   }
   // get mapStatus method

packages/maps/src/utils.ts

@@ -42,8 +42,5 @@ export function toPaddingOptions(padding: IPadding = {}) {
     }
   }
 
-  return {
-    ...defaultPadding,
-    ...padding,
-  };
+  return Object.assign({},defaultPadding,padding)
 }

packages/renderer/package.json

@@ -25,7 +25,8 @@
   "author": "xiaoiver",
   "license": "ISC",
   "devDependencies": {
-    "gl": "^5.0.3"
+    "gl": "^5.0.3",
+    "@antv/l7-test-utils": "2.9.23"
   },
   "dependencies": {
     "@antv/l7-core": "2.9.23",
@@ -36,6 +37,7 @@
     "lodash": "^4.17.15",
     "reflect-metadata": "^0.1.13"
   },
+  
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {
     "access": "public"

packages/renderer/src/regl/__tests__/attribute.spec.ts

@@ -6,7 +6,7 @@ import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';
 import ReglModel from '../ReglModel';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglAttribute', () => {
   let context;

packages/renderer/src/regl/__tests__/elements.spec.ts

@@ -7,7 +7,7 @@ import ReglBuffer from '../ReglBuffer';
 import ReglElements from '../ReglElements';
 import ReglModel from '../ReglModel';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglElements', () => {
   let context;

packages/renderer/src/regl/__tests__/framebuffer.spec.ts

@@ -10,7 +10,7 @@ import ReglModel from '../ReglModel';
 import ReglRenderbuffer from '../ReglRenderbuffer';
 import ReglTexture2D from '../ReglTexture2D';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglFramebuffer', () => {
   let context;

packages/renderer/src/regl/__tests__/model.draw.spec.ts

@@ -6,7 +6,7 @@ import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';
 import ReglModel from '../ReglModel';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 import globalDefaultprecision from './utils/default-precision';
 
 describe('Initialization for ReglModel', () => {

packages/renderer/src/regl/__tests__/model.spec.ts

@@ -1,7 +1,7 @@
 import regl from 'l7regl';
 import 'reflect-metadata';
 import ReglModel from '../ReglModel';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglModel', () => {
   let context;

packages/renderer/src/regl/__tests__/model.uniform.spec.ts

@@ -3,7 +3,7 @@ import 'reflect-metadata';
 import ReglFramebuffer from '../ReglFramebuffer';
 import ReglModel from '../ReglModel';
 import ReglTexture2D from '../ReglTexture2D';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('uniforms in ReglModel', () => {
   let gl;

packages/renderer/src/regl/__tests__/renderer.spec.ts

@@ -7,7 +7,7 @@ import { ReglRendererService } from '../../index';
 import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 import globalDefaultprecision from './utils/default-precision';
 
 describe('ReglRendererService', () => {

packages/renderer/src/regl/__tests__/texture.spec.ts

@@ -8,7 +8,7 @@ import ReglBuffer from '../ReglBuffer';
 import ReglModel from '../ReglModel';
 import ReglTexture2D from '../ReglTexture2D';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 import globalDefaultprecision from './utils/default-precision';
 
 describe('ReglTexture', () => {

packages/renderer/src/regl/index.ts

@@ -48,9 +48,13 @@ export default class ReglRendererService implements IRendererService {
   public async init(
     canvas: HTMLCanvasElement,
     cfg: IRenderConfig,
+    gl?: regl.Regl,
   ): Promise<void> {
     // this.$container = $container;
     this.canvas = canvas;
+    if (gl) {
+      this.gl = gl;
+    } else {
       // tslint:disable-next-line:typedef
       this.gl = await new Promise((resolve, reject) => {
         regl({
@@ -88,6 +92,7 @@ export default class ReglRendererService implements IRendererService {
           },
         });
       });
+    }
 
     this.extensionObject = {
       OES_texture_float: this.testExtension('OES_texture_float'),

packages/scene/__tests__/index.spec.ts

@@ -1,37 +1,24 @@
 // @ts-ignore
-import { Map } from '@antv/l7-maps';
-import { Scene } from '../src/';
-describe('template', () => {
-  // const el = document.createElement('div');
-  // el.id = 'test-div-id';
-  // el.style.width = '500px';
-  // el.style.height = '500px';
-  // el.style.position = 'absolute';
-  // document.querySelector('body')?.appendChild(el);
-  // const scene = new Scene({
-  //   id: 'test-div-id',
-  //   map: new Map({
-  //     style: 'dark',
-  //     center: [110.19382669582967, 30.258134],
-  //     pitch: 0,
-  //     zoom: 3,
-  //   }),
-  // });
+import { TestScene } from '@antv/l7-test-utils'
 
-  it('scene map method', () => {
-    // expect(scene.getZoom()).toEqual(3);
-    // expect(scene.getPitch()).toEqual(0);
-    // const center = scene.getCenter();
-    // expect(center.lng).toEqual(110.19382669582967);
-    // expect(center.lat).toEqual(30.258134);
-    // expect(scene.getRotation()).toEqual(-0);
-    // // expect(scene.getBounds()[0].map((v) => v.toFixed(5))).toEqual(
-    // //   [88.22117044582802, 9.751305353647084].map((v) => v.toFixed(5)),
-    // // ); // TODO  校验不通过
-    // scene.setZoom(5);
-    // expect(scene.getZoom()).toEqual(5);
-    // scene.setPitch(5);
-    // expect(scene.getPitch()).toEqual(5);
-    expect(3).toEqual(3);
+
+describe('template', () => {
+
+  const el = document.createElement('div');
+  el.id = 'test-div-id';
+  const body = document.querySelector('body') as HTMLBodyElement;
+  body.appendChild(el);
+  const scene = TestScene({});
+  
+
+  it('scene map status', async () => {
+    expect( scene.getZoom()).toEqual(3)
+    expect(scene.getMinZoom()).toEqual(-2)
+    expect(scene.getMaxZoom()).toEqual(22)
+    expect(scene.getType()).toEqual('default');
+    expect(scene.getBounds()).toEqual([[92.61570169583138, 18.27006017947646], [127.7719516958324, 40.94589761553888]])
   });
+
+ 
+
 });

packages/scene/package.json

@@ -34,6 +34,9 @@
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
+  "devDependencies": {
+    "@antv/l7-test-utils": "2.9.23"
+  },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {
     "access": "public"

packages/scene/src/index.ts

@@ -64,7 +64,7 @@ class Scene
   private container: Container;
 
   public constructor(config: ISceneConfig) {
-    const { id, map, canvas, hasBaseMap } = config;
+    const { id, map, canvas, hasBaseMap, } = config;
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;

packages/test-utils/.fatherrc.ts

@@ -0,0 +1,30 @@
+export default {
+  // more father 4 config: https://github.com/umijs/father-next/blob/master/docs/config.md
+  esm: {
+    output:'es'
+  },
+  cjs: {
+    output:'lib'
+  },
+  autoprefixer: {
+    browsers: ['IE 11', 'last 2 versions'],
+  },
+  extraBabelPresets: [
+    '@babel/preset-typescript'
+  ],
+  extraBabelPlugins: [
+    // 开发模式下以原始文本引入，便于调试
+    [
+      // import glsl as raw text
+      'babel-plugin-inline-import',
+      {
+        extensions: [
+          '.glsl'
+        ]
+      }
+    ],
+    [
+      'transform-import-css-l7'
+    ],
+  ],
+};

packages/test-utils/.gitignore

@@ -0,0 +1,3 @@
+lib
+es
+dist

packages/test-utils/README.md

@@ -0,0 +1,11 @@
+# `test-utils`
+
+> TODO: description
+
+## Usage
+
+```
+const testUtils = require('test-utils');
+
+// TODO: DEMONSTRATE API
+```

packages/test-utils/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@antv/l7-test-utils",
+  "version": "2.9.23",
+  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
+  "keywords": [],
+  "author": "lzxue <lzx199065@gmail.com>",
+  "license": "ISC",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "sideEffects": true,
+  "files": [
+    "lib",
+    "es",
+    "dist",
+    "README.md"
+  ],
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npm.alibaba-inc.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antvis/L7.git"
+  },
+  "scripts": {
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
+    "build": "father build",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "sync": "tnpm sync"
+  },
+  "bugs": {
+    "url": "https://github.com/antvis/L7/issues"
+  },
+ "devDependencies": {
+   "@antv/l7-map": "2.9.23",
+   "@antv/l7-maps": "2.9.23",
+   "@antv/l7-scene": "2.9.23",
+   "l7regl": "^0.0.20",
+   "gl": "^5.0.3"
+ },
+  "homepage": "https://github.com/antvis/L7#readme"
+}

packages/test-utils/src/check-pixels.ts

@@ -0,0 +1,15 @@
+import regl from 'l7regl';
+
+// borrow from https://github.com/regl-project/regl/blob/gh-pages/test/attributes.js#L303-L311
+export default function checkPixels(
+  reGL: regl.Regl,
+  expected: number[],
+): boolean {
+  const actual = reGL.read();
+  for (let i = 0; i < 1 * 1; ++i) {
+    if (actual[4 * i] !== expected[i]) {
+      return false;
+    }
+  }
+  return true;
+}

packages/test-utils/src/create-context.ts

@@ -0,0 +1,23 @@
+import gl from 'gl';
+
+// borrow from regl
+// @see https://github.com/regl-project/regl/blob/gh-pages/test/util/create-context.js#L28
+const CONTEXT = gl(1, 1, { preserveDrawingBuffer: true });
+// @ts-ignore
+const RESIZE = CONTEXT.getExtension('STACKGL_resize_drawingbuffer');
+
+// @ts-ignore
+export default function(width: number, height: number) {
+  resize(width, height);
+  return CONTEXT;
+}
+
+export function resize(width: number, height: number) {
+  if (RESIZE) {
+    RESIZE.resize(width, height);
+  }
+}
+
+export function destroy() {
+  //
+}

packages/test-utils/src/default-precision.ts

@@ -0,0 +1,3 @@
+const globalDefaultprecision =
+  '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
+export default globalDefaultprecision;

packages/test-utils/src/index.ts

@@ -0,0 +1,2 @@
+export * from './test-scene'
+export { default as createContext } from './create-context'

packages/test-utils/src/test-scene.ts

@@ -0,0 +1,28 @@
+import createContext from './create-context';
+import { Scene } from '@antv/l7-scene';
+import regl from 'l7regl';
+import { IMapOptions } from '@antv/l7-map';
+import { Map } from '@antv/l7-maps';
+
+export function TestScene(options?: Partial<IMapOptions>) {
+  const el = document.createElement('div');
+  el.id = 'test-div-id';
+  const body = document.querySelector('body') as HTMLBodyElement;
+  body.appendChild(el);
+
+  const context = createContext(400, 300);
+  const reGL = regl(context);
+  const scene = new Scene({
+    id: el,
+    gl: reGL,
+    map: new Map({
+      style: 'dark',
+      center: [110.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 3,
+      ...options,
+    }),
+  });
+
+  return scene;
+}

packages/test-utils/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "declarationDir": "./es",
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "paths": {
+      "*": ["node_modules", "typings/*"]
+    }
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -29,6 +29,7 @@
       "@antv/l7-source": ["packages/source/src"],
       "@antv/l7-mini": ["packages/mini/src"],
       "@antv/l7-utils": ["packages/utils/src"],
+      "@antv/l7-test-utils":["packages/test-utils/src"],
       "@antv/l7": ["packages/l7/src"],
       "*": ["packages", "typings/*"]
     }

typings.d.ts

@@ -4,6 +4,9 @@ declare module '@antv/l7-layers';
 declare module '@antv/l7-maps';
 declare module '@antv/l7-utils';
 declare module '@antv/l7-scene';
+declare module '@antv/l7-test-utils';
+declare module '@antv/l7-test-utils';
+declare module '@antv/l7-component';
 declare module 'l7regl';
 declare module 'l7hammerjs';
 declare module 'l7-tiny-sdf';