leaflet-environmental-layers icon indicating copy to clipboard operation
leaflet-environmental-layers copied to clipboard

Creating tests for one liner implementation

Open nstjean opened this issue 5 years ago • 3 comments

When I tried to include tests for the one-liner implementation I got the error message

TypeError: undefined is not a function (evaluating 'L.LayerGroup.EnvironmentalLayers

I realized I needed to add files to the list in babel to account for the ES6 code.

  • AllLayers.js for L.LayerGroup.EnvironmentalLayers
  • PLpeopleLayer.js for L.LayerGroup.PLpeopleLayer

Here's the errors now: natalie@natalie-ubuntu: ~-Dev-Ruby-public-lab-leaflet-environmental-layers_046

In order to fix Symbol I've looked at grunt-polyfill but it is depreciated. All instructions say to use core-js now. @babel/preset-env is supposed to have a built in option for this, however it is not working. Here's the Babel Preset entries showing how Options are used: https://babeljs.io/docs/en/options#plugin-preset-entries https://babeljs.io/docs/en/presets And here is the code showing what it's looking for: https://github.com/babel/babel/blob/04354d155689405ba688d4b400702710f9cccc97/packages/babel-preset-env/src/options.js

Here's my code in Gruntfile.js:

        babel: {
          options: {
            sourceMap: true,
            "presets": ['@babel/env', { 
              useBuiltIns: "entry"
            }],
            "plugins": [
              "transform-object-rest-spread",
              "transform-remove-strict-mode",
            ],
          },
          dist: {
            files: {
              "dist/util/layersBrowser_babel.js": "src/util/layersBrowser.js",
              'dist/fracTrackerMobileLayer_babel.js': 'src/fracTrackerMobileLayer.js',
              'dist/AllLayers_babel.js': 'src/AllLayers.js',
              'dist/PLpeopleLayer_babel.js': 'src/PLpeopleLayer.js',
            }
          }
        },

Which gives me this error:

Warning: [BABEL] /home/natalie/Dev/Ruby/public-lab/leaflet-environmental-layers/src/util/layersBrowser.js: Unknown option: .useBuiltIns.

At this point I'm going to see how else to get core-js into the Jasmine runtime.

nstjean avatar Feb 05 '20 16:02 nstjean

In Gruntfile.js under jasmine I think this worked!

            polyfills: [
              'node_modules/jquery/dist/jquery.js',
              'node_modules/core-js/client/core.js',
            ],

At least for the Symbol error!

nstjean avatar Feb 05 '20 16:02 nstjean

Instead of loading Leaflet in the Jasmine options the way I want to, I had to do it in a fixture in order to declare the window variable first for it to use.

  <script>
    var window;   // create window namespace for headless test
  </script>

  <script src="../../../node_modules/leaflet/dist/leaflet.js"></script>

nstjean avatar Feb 06 '20 14:02 nstjean

So that is not working, because it is not loading leaflet.js when using the script tag. If I add it to Gruntfile under jasmine vendors leaflet.js loads, but doesn't have a window object so our LEL objects throw an error trying to access things.

nstjean avatar Feb 07 '20 14:02 nstjean