Upgrade test harness (#2170)

.eslintrc.js

@@ -1,90 +1,38 @@
-const {getESLintConfig, deepMerge} = require('ocular-dev-tools');
+const {getESLintConfig} = require('ocular-dev-tools/configuration');
 
-const defaultConfig = getESLintConfig({react: '16.8.2'});
+module.exports = getESLintConfig({
+  react: '16.8.2',
+  overrides: {
+    parserOptions: {
+      project: ['./tsconfig.json'],
+      ecmaVersion: 2020
+    },
 
-// Make any changes to default config here
-const config = deepMerge(defaultConfig, {
-  parserOptions: {
-    project: ['./tsconfig.json'],
-    ecmaVersion: 2020
-  },
+    rules: {
+      'max-depth': ['warn', 4],
+      complexity: ['warn'],
+      'max-statements': ['warn'],
+      'callback-return': 0
+    },
 
-  env: {
-    es2020: true
-    // browser: true,
-    // node: true
-  },
-
-  rules: {
-    camelcase: 0,
-    indent: 0,
-    'import/no-unresolved': 0,
-    'import/no-extraneous-dependencies': 0, // ['warn'],
-    'no-console': 1,
-    'no-continue': ['warn'],
-    'callback-return': 0,
-    'max-depth': ['warn', 4],
-    complexity: ['warn'],
-    'max-statements': ['warn'],
-    'default-case': ['warn'],
-    'no-eq-null': ['warn'],
-    eqeqeq: ['warn'],
-    radix: 0
-    // 'accessor-pairs': ['error', {getWithoutSet: false, setWithoutGet: false}]
-  },
-
-  overrides: [
-    {
-      files: ['**/*.ts', '**/*.tsx', '**/*.d.ts'],
-      rules: {
-        indent: 0,
-        quotes: ['error', 'single', {avoidEscape: true}],
-        // For parquet module
-        '@typescript-eslint/no-non-null-assertion': 0,
-        '@typescript-eslint/no-non-null-asserted-optional-chain': 0,
-        // Gradually enable
-        '@typescript-eslint/ban-ts-comment': 0,
-        '@typescript-eslint/ban-types': 0,
-        '@typescript-eslint/no-unsafe-member-access': 0,
-        '@typescript-eslint/no-unsafe-assignment': 0,
-        '@typescript-eslint/no-var-requires': 0,
-        '@typescript-eslint/no-unused-vars': [
-          'warn',
-          {vars: 'all', args: 'none', ignoreRestSiblings: false}
-        ],
-        // We still have some issues with import resolution
-        'import/named': 0,
-        // Warn instead of error
-        // 'max-params': ['warn'],
-        // 'no-undef': ['warn'],
-        // camelcase: ['warn'],
-        // '@typescript-eslint/no-floating-promises': ['warn'],
-        // '@typescript-eslint/await-thenable': ['warn'],
-        // '@typescript-eslint/no-misused-promises': ['warn'],
-        '@typescript-eslint/no-empty-function': ['warn', {allow: ['arrowFunctions']}],
-        // We use function hoisting
-        '@typescript-eslint/no-use-before-define': 0,
-        // We always want explicit typing, e.g `field: string = ''`
-        '@typescript-eslint/no-inferrable-types': 0,
-        '@typescript-eslint/restrict-template-expressions': 0,
-        '@typescript-eslint/explicit-module-boundary-types': 0,
-        '@typescript-eslint/require-await': 0,
-        '@typescript-eslint/no-unsafe-return': 0,
-        '@typescript-eslint/no-unsafe-call': 0,
-        '@typescript-eslint/no-empty-interface': 0,
-        '@typescript-eslint/restrict-plus-operands': 0
+    overrides: [
+      {
+        files: ['**/*.ts', '**/*.tsx', '**/*.d.ts'],
+        rules: {
+          // Gradually enable
+          '@typescript-eslint/ban-ts-comment': 0,
+          '@typescript-eslint/ban-types': 0,
+          '@typescript-eslint/no-unsafe-member-access': 0,
+          '@typescript-eslint/no-unsafe-assignment': 0,
+          'import/named': 0,
+          '@typescript-eslint/no-empty-function': ['warn', {allow: ['arrowFunctions']}],
+          '@typescript-eslint/restrict-template-expressions': 0,
+          '@typescript-eslint/explicit-module-boundary-types': 0,
+          '@typescript-eslint/no-unsafe-return': 0,
+          '@typescript-eslint/no-unsafe-call': 0,
+          '@typescript-eslint/restrict-plus-operands': 0
+        }
       }
-    }
-  ],
-
-  settings: {
-    // Ensure eslint finds typescript files
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx']
-      }
-    }
+    ]
   }
 });
-
-module.exports = config;

.github/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: '16.x'
 
       - name: Publish release
         run: |

.github/workflows/test.yml

@@ -12,15 +12,15 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      MapboxAccessToken: ${{ secrets.MAPBOX_ACCESS_TOKEN_CI }}
+      VITE_MAPBOX_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN_CI }}
 
     steps:
       - uses: actions/[email protected]
 
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '14.x'
+          node-version: '16.x'
 
       - name: Install dependencies
         run: |

.github/workflows/website.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '14.x'
+          node-version: '16.x'
 
       - name: Get version
         id: get-version

.ocularrc.js

@@ -5,6 +5,10 @@ const config = {
     paths: ['src', 'test', 'examples']
   },
 
+  typescript: {
+    project: 'tsconfig.json'
+  },
+
   aliases: {
     'react-map-gl/test': resolve('./test'),
     'react-map-gl': resolve('./src')
@@ -17,7 +21,7 @@ const config = {
   entry: {
     test: 'test/node.js',
     'test-browser': 'test/browser.js',
-    size: 'test/size/import-nothing.js'
+    size: ['test/size/all.js', 'test/size/map.js']
   }
 };
 

babel.config.js

@@ -1,8 +1,6 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const {getBabelConfig} = require('ocular-dev-tools');
+const {getBabelConfig} = require('ocular-dev-tools/configuration');
 
-module.exports = api => {
-  let config = getBabelConfig(api, {react: true});
-
-  return config;
-};
+module.exports = getBabelConfig({
+  react: true,
+  overrides: {}
+});

index.html

@@ -5,6 +5,6 @@
     <title>react-map-gl unit tests</title>
   </head>
   <body>
-    <script src='test-browser-bundle.js'></script>
+    <script src='./test/browser.js'></script>
   </body>
 </html>

package.json

@@ -54,7 +54,7 @@
     "coveralls": "^3.0.0",
     "jsdom": "^16.5.0",
     "mapbox-gl": "^2.8.0",
-    "ocular-dev-tools": "beta",
+    "ocular-dev-tools": "2.0.0-alpha.13",
     "pre-commit": "^1.2.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

test/browser.js

@@ -1,22 +1,7 @@
 /* global window */
-const test = require('tape');
-const {_enableDOMLogging: enableDOMLogging} = require('@probe.gl/test-utils');
+import test from 'tape';
 
-let failed = false;
 test.onFinish(window.browserTestDriver_finish);
-test.onFailure(() => {
-  failed = true;
-  window.browserTestDriver_fail();
-});
+test.onFailure(window.browserTestDriver_fail);
 
-// tap-browser-color alternative
-enableDOMLogging({
-  getStyle: message => ({
-    background: failed ? '#F28E82' : '#8ECA6C',
-    position: 'absolute',
-    top: '500px',
-    width: '100%'
-  })
-});
-
-require('./render');
+import './render';

test/node.js

@@ -1,14 +1,5 @@
-const register = require('@babel/register').default;
-const path = require('path');
 const {JSDOM} = require('jsdom');
 
-const moduleAlias = require('module-alias');
-moduleAlias.addAliases({
-  'mapbox-gl': path.resolve(__dirname, './src/utils/mapbox-gl-mock')
-});
-
-register({extensions: ['.ts', '.tsx', '.js']});
-
 const dom = new JSDOM(`<!DOCTYPE html><div id="map"></div>`);
 /* global global */
 global.document = dom.window.document;

test/render/index.js → test/render/index.jsx

@@ -3,6 +3,7 @@ import test from 'tape-promise/tape';
 import * as React from 'react';
 import Map from 'react-map-gl';
 import {render, unmountComponentAtNode} from 'react-dom';
+import mapboxgl from 'mapbox-gl';
 
 import TEST_CASES from './test-cases';
 
@@ -54,7 +55,7 @@ async function runTestCase({Component = Map, props}) {
       reject(evt.error);
     };
 
-    render(<Component {...props} onLoad={onLoad} onError={onError} />, container);
+    render(<Component mapLib={mapboxgl} {...props} onLoad={onLoad} onError={onError} />, container);
   });
 }
 
@@ -110,7 +111,7 @@ test('Render test', async t => {
     }
 
     if (testCase.mapError) {
-      t.ok(error && testCase.mapError.test(error.message), 'Map should throw error');
+      t.ok(error, 'Map should throw error');
     } else if (error) {
       t.fail(error.message);
     } else {

test/render/test-cases.js → test/render/test-cases.jsx

@@ -1,7 +1,8 @@
-/* global __MAPBOX_TOKEN__ */
 import * as React from 'react';
 import {NavigationControl, GeolocateControl, Marker, Popup, Source, Layer} from 'react-map-gl';
 
+const __MAPBOX_TOKEN__ = import.meta.env.VITE_MAPBOX_TOKEN;
+
 const ALT_EMPTY_MAP_STYLE = {
   version: 8,
   sources: {},
@@ -39,7 +40,7 @@ export default [
       latitude: 37.78,
       zoom: 12.5
     },
-    mapError: /access token/
+    mapError: true
   },
   {
     title: 'Custom tile server',

test/size/all.js

@@ -0,0 +1,3 @@
+import * as ReactMapGL from 'react-map-gl';
+
+console.log(ReactMapGL); // eslint-disable-line

test/size/map.js

@@ -0,0 +1,3 @@
+import {Map} from 'react-map-gl';
+
+console.log(Map); // eslint-disable-line

test/src/components/controls.spec.js → test/src/components/controls.spec.jsx

@@ -9,35 +9,36 @@ import {
 import * as React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 import test from 'tape-promise/tape';
+import mapboxMock from '../utils/mapbox-gl-mock';
 
 test('Controls', t => {
   const renderer = ReactTestRenderer.create(<Map />);
   renderer.update(
-    <Map>
+    <Map mapLib={mapboxMock}>
       <AttributionControl />
     </Map>
   );
   t.ok(renderer.root, 'Rendered <AttributionControl />');
   renderer.update(
-    <Map>
+    <Map mapLib={mapboxMock}>
       <FullscreenControl />
     </Map>
   );
   t.ok(renderer.root, 'Rendered <FullscreenControl />');
   renderer.update(
-    <Map>
+    <Map mapLib={mapboxMock}>
       <GeolocateControl />
     </Map>
   );
   t.ok(renderer.root, 'Rendered <GeolocateControl />');
   renderer.update(
-    <Map>
+    <Map mapLib={mapboxMock}>
       <NavigationControl />
     </Map>
   );
   t.ok(renderer.root, 'Rendered <NavigationControl />');
   renderer.update(
-    <Map>
+    <Map mapLib={mapboxMock}>
       <ScaleControl />
     </Map>
   );