add browser chai test for street-geo component

3DStreet · May 18, 2024 · 2f1bbe7 · 2f1bbe7
1 parent 22f426e
commit 2f1bbe7
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 0 deletions.
diff --git a/test/street-geo-test-bdd.mjs b/test/street-geo-test-bdd.mjs
@@ -0,0 +1,98 @@
+let expect = chai.expect;
+
+describe('street-geo component', function() {
+  let el;
+
+  before((done) => {
+    const scene = document.createElement('a-scene');
+    document.body.appendChild(scene);
+    el = document.createElement('a-entity');
+    el.setAttribute('id', 'street-geo-test');
+    el.setAttribute('street-geo', {
+        longitude: 10,
+        latitude: 20,
+        elevation: 30,
+        maps: 'mapbox2d'
+    });
+    scene.appendChild(el);    
+
+    setTimeout(() => {
+      done();
+    }, 500);
+  });
+
+  it('should create a mapbox2d element', () => {
+    const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
+    expect(mapbox2dElement).to.exist;
+  });
+
+  it('should create a google3d element and delete mapbox2d element', (done) => {
+    const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
+    const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
+
+    expect(mapbox2dElement).to.exist;
+
+    el.setAttribute('street-geo', 'maps', 'google3d');
+
+    setTimeout(() => {
+      const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
+      const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
+
+      expect(updatedMapbox2dElement).to.not.exist;
+      expect(updatedGoogle3dElement).to.exist;
+
+      done();
+    }, 1000);
+  });
+
+  it('should create both mapbox2d and google3d elements', (done) => {
+    el.setAttribute('street-geo', 'maps', 'mapbox2d, google3d');
+
+    setTimeout(() => {
+      const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
+      const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
+      expect(mapbox2dElement).to.exist;
+      expect(google3dElement).to.exist;
+      done();
+    }, 1000);
+  });
+
+  it('should delete mapbox2d and google3d elements after setting maps attribute to empty', (done) => {
+    const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
+    const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
+
+    expect(mapbox2dElement).to.exist;
+    expect(google3dElement).to.exist;
+
+    el.setAttribute('street-geo', 'maps', '');
+
+    setTimeout(() => {
+      const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
+      const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
+
+      expect(updatedMapbox2dElement).to.not.exist;
+      expect(updatedGoogle3dElement).to.not.exist;
+
+      done();
+    }, 1000);
+  });
+
+  it('should update latitude, longitude, and elevation for google3d', (done) => {
+    el.setAttribute('street-geo', 'maps', 'google3d');
+    el.setAttribute('street-geo', 'longitude', 40);
+    el.setAttribute('street-geo', 'latitude', 50);
+    el.setAttribute('street-geo', 'elevation', 100);
+
+    setTimeout(() => {
+      const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
+      expect(google3dElement).to.exist;
+
+      const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles');
+      expect(loader3dtilesAttr.long).to.equal(40);
+      expect(loader3dtilesAttr.lat).to.equal(50);
+      expect(loader3dtilesAttr.height).to.equal(100 - 32.49158);
+
+      done();
+    }, 1000);
+  });
+});
diff --git a/test/street-geo-test.html b/test/street-geo-test.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mocha Tests</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.css">
+  </head>
+  <body>
+    <div id="mocha"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.js"></script>
+    <script src="https://www.chaijs.com/chai.js"></script>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+    <script src="/src/lib/aframe-loader-3dtiles-component.js"></script>
+    <script src="/src/lib/aframe-mapbox-component.min.js"></script>
+    <script src="/src/components/street-geo.js"></script>
+
+    <script type="module">
+      mocha.setup('bdd');
+      mocha.run();
+    </script>
+
+    <script type="module" src="/test/street-geo-test-bdd.mjs"></script>
+
+  </body>
+</html>