@map-colonies/react-components 3.10.5 → 3.12.2

package/src/lib/smart-table/stories/SmartTable.stories.tsx

@@ -1,114 +1,114 @@
-import React, { useState } from 'react';
-import { button } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-import { SmartTable, CellMetadata } from '..';
-import { CSFStory } from '../../utils/story';
-
-export default {
-  title: 'Smart Table',
-  component: SmartTable,
-};
-
-interface Person {
-  firstName: string;
-  lastName: string;
-  age: number;
-  birthday: string;
-}
-
-const metadata: CellMetadata<Person>[] = [
-  {
-    id: 'firstName',
-    label: 'First Name',
-    disablePadding: false,
-    numeric: false,
-  },
-  {
-    id: 'lastName',
-    label: 'Last Name',
-    disablePadding: false,
-    numeric: false,
-  },
-  {
-    id: 'age',
-    label: 'Age',
-    disablePadding: false,
-    numeric: true,
-  },
-  {
-    id: 'birthday',
-    label: 'Birthday',
-    disablePadding: false,
-    numeric: false,
-  },
-];
-
-const persons: Person[] = [
-  {
-    firstName: 'Dan',
-    lastName: 'Walker',
-    age: 24,
-    birthday: '8-3-1996',
-  },
-  {
-    firstName: 'Emily',
-    lastName: 'Jhonson',
-    age: 45,
-    birthday: '13-5-1975',
-  },
-  {
-    firstName: 'Ron',
-    lastName: 'Elen',
-    age: 13,
-    birthday: '7-7-2007',
-  },
-  {
-    firstName: 'Michael',
-    lastName: 'Wall',
-    age: 60,
-    birthday: '28-9-1960',
-  },
-];
-
-const getRandomPerson = (): Person =>
-  persons[Math.floor(Math.random() * persons.length)];
-
-interface TableStroyProps {
-  numberOfItems: number;
-}
-
-const TableStory: React.FC<TableStroyProps> = (props) => {
-  const [rowsPerPage, setRowsPerPage] = useState(5);
-  const [page, setPage] = useState(0);
-  const [items, setItems] = useState(
-    [...new Array<undefined>(props.numberOfItems)].map(getRandomPerson)
-  );
-
-  button('ADD ITEM', () => setItems([...items, getRandomPerson()]));
-  button('REMOVE ITEM', () => setItems(items.slice(0, -1))); //remove last
-  button('CLEAR TABLE', () => setItems([]));
-
-  return (
-    <SmartTable
-      rowsPerPage={rowsPerPage as 5 | 10}
-      handleChangePage={(e, newPage): void => setPage(newPage)}
-      handleChangeRowsPerPage={(e): void => setRowsPerPage(+e.target.value)}
-      page={page}
-      count={items.length}
-      items={items}
-      isCollapseable={true}
-      onRequestSort={action('sort requested')}
-      cellsMetadata={metadata}
-      onRowSelected={action('row selected')}
-      isDense={true}
-    />
-  );
-};
-
-export const Small: CSFStory<JSX.Element> = () => (
-  <TableStory numberOfItems={4} />
-);
-export const Large: CSFStory<JSX.Element> = () => (
-  <TableStory numberOfItems={60} />
-);
+import React, { useState } from 'react';
+import { button } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import { SmartTable, CellMetadata } from '..';
+import { CSFStory } from '../../utils/story';
+
+export default {
+  title: 'Smart Table',
+  component: SmartTable,
+};
+
+interface Person {
+  firstName: string;
+  lastName: string;
+  age: number;
+  birthday: string;
+}
+
+const metadata: CellMetadata<Person>[] = [
+  {
+    id: 'firstName',
+    label: 'First Name',
+    disablePadding: false,
+    numeric: false,
+  },
+  {
+    id: 'lastName',
+    label: 'Last Name',
+    disablePadding: false,
+    numeric: false,
+  },
+  {
+    id: 'age',
+    label: 'Age',
+    disablePadding: false,
+    numeric: true,
+  },
+  {
+    id: 'birthday',
+    label: 'Birthday',
+    disablePadding: false,
+    numeric: false,
+  },
+];
+
+const persons: Person[] = [
+  {
+    firstName: 'Dan',
+    lastName: 'Walker',
+    age: 24,
+    birthday: '8-3-1996',
+  },
+  {
+    firstName: 'Emily',
+    lastName: 'Jhonson',
+    age: 45,
+    birthday: '13-5-1975',
+  },
+  {
+    firstName: 'Ron',
+    lastName: 'Elen',
+    age: 13,
+    birthday: '7-7-2007',
+  },
+  {
+    firstName: 'Michael',
+    lastName: 'Wall',
+    age: 60,
+    birthday: '28-9-1960',
+  },
+];
+
+const getRandomPerson = (): Person =>
+  persons[Math.floor(Math.random() * persons.length)];
+
+interface TableStroyProps {
+  numberOfItems: number;
+}
+
+const TableStory: React.FC<TableStroyProps> = (props) => {
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [page, setPage] = useState(0);
+  const [items, setItems] = useState(
+    [...new Array<undefined>(props.numberOfItems)].map(getRandomPerson)
+  );
+
+  button('ADD ITEM', () => setItems([...items, getRandomPerson()]));
+  button('REMOVE ITEM', () => setItems(items.slice(0, -1))); //remove last
+  button('CLEAR TABLE', () => setItems([]));
+
+  return (
+    <SmartTable
+      rowsPerPage={rowsPerPage as 5 | 10}
+      handleChangePage={(e, newPage): void => setPage(newPage)}
+      handleChangeRowsPerPage={(e): void => setRowsPerPage(+e.target.value)}
+      page={page}
+      count={items.length}
+      items={items}
+      isCollapseable={true}
+      onRequestSort={action('sort requested')}
+      cellsMetadata={metadata}
+      onRowSelected={action('row selected')}
+      isDense={true}
+    />
+  );
+};
+
+export const Small: CSFStory<JSX.Element> = () => (
+  <TableStory numberOfItems={4} />
+);
+export const Large: CSFStory<JSX.Element> = () => (
+  <TableStory numberOfItems={60} />
+);

package/src/lib/theme/index.ts

@@ -1 +1 @@
-export * from './theme';
+export * from './theme';

package/src/lib/theme/theme.ts

@@ -1,123 +1,123 @@
-import React from 'react';
-import { createMuiTheme } from '@material-ui/core';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-
-const useMappedMuiTheme = (theme: { [key: string]: string }) => {
-  const prefersDarkMode = theme.type === 'dark';
-
-  return React.useMemo(() => mapMcToMuiTheme(theme, prefersDarkMode), [
-    prefersDarkMode,
-    theme,
-  ]);
-};
-
-const mapMcToMuiTheme = (
-  mcTheme: { [key: string]: string },
-  prefersDarkMode = false
-) => {
-  return createMuiTheme({
-    palette: {
-      type: prefersDarkMode ? 'dark' : 'light',
-      primary: {
-        main: mcTheme.primary,
-      },
-      secondary: {
-        main: mcTheme.secondary,
-      },
-      error: {
-        main: mcTheme.error,
-      },
-      background: {
-        default: mcTheme.surface,
-        paper: mcTheme.background,
-      },
-      text: {
-        primary: prefersDarkMode
-          ? mcTheme.textPrimaryOnDark
-          : mcTheme.textPrimaryOnLight,
-        secondary: prefersDarkMode
-          ? mcTheme.textSecondaryOnDark
-          : mcTheme.textSecondaryOnLight,
-      },
-    },
-  });
-};
-
-export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme };
-/* primary: '#24aee9',
-secondary: '#e539ff',
-error: '#b00020',
-background: '#212121',
-surface: '#37474F',
-onPrimary: 'rgba(255,255,255,.87)',
-onSecondary: 'rgba(0,0,0,0.87)',
-onSurface: 'rgba(255,255,255,.87)',
-onError: '#fff',
-textPrimaryOnBackground: 'rgba(255, 255, 255, 1)',
-textSecondaryOnBackground: 'rgba(255, 255, 255, 0.7)',
-textHintOnBackground: 'rgba(255, 255, 255, 0.5)',
-textDisabledOnBackground: 'rgba(255, 255, 255, 0.5)',
-textIconOnBackground: 'rgba(255, 255, 255, 0.5)',
-textPrimaryOnLight: 'rgba(0, 0, 0, 0.87)',
-textSecondaryOnLight: 'rgba(0, 0, 0, 0.54)',
-textHintOnLight: 'rgba(0, 0, 0, 0.38)',
-textDisabledOnLight: 'rgba(0, 0, 0, 0.38)',
-textIconOnLight: 'rgba(0, 0, 0, 0.38)',
-textPrimaryOnDark: 'white',
-textSecondaryOnDark: 'rgba(255, 255, 255, 0.7)',
-textHintOnDark: 'rgba(255, 255, 255, 0.5)',
-textDisabledOnDark: 'rgba(255, 255, 255, 0.5)',
-textIconOnDark: 'rgba(255, 255, 255, 0.5)', */
-
-/* --mdc-theme-primary: #3f51b5;
---mdc-theme-primary-light: #a4addf;
---mdc-theme-primary-dark: #6f7dcd;
---mdc-theme-secondary: #ff4081;
---mdc-theme-secondary-light: #ff87b0;
---mdc-theme-secondary-dark: #f80054;
---mdc-theme-background: #fff;
---mdc-theme-text-primary-on-primary: white;
---mdc-theme-text-secondary-on-primary: rgba(255, 255, 255, 0.7);
---mdc-theme-text-hint-on-primary: rgba(255, 255, 255, 0.5);
---mdc-theme-text-disabled-on-primary: rgba(255, 255, 255, 0.5);
---mdc-theme-text-icon-on-primary: rgba(255, 255, 255, 0.5);
---mdc-theme-text-primary-on-primary-light: rgba(0, 0, 0, 0.87);
---mdc-theme-text-secondary-on-primary-light: rgba(0, 0, 0, 0.54);
---mdc-theme-text-hint-on-primary-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-disabled-on-primary-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-icon-on-primary-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-primary-on-primary-dark: white;
---mdc-theme-text-secondary-on-primary-dark: rgba(255, 255, 255, 0.7);
---mdc-theme-text-hint-on-primary-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-disabled-on-primary-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-icon-on-primary-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-primary-on-secondary: white;
---mdc-theme-text-secondary-on-secondary: rgba(255, 255, 255, 0.7);
---mdc-theme-text-hint-on-secondary: rgba(255, 255, 255, 0.5);
---mdc-theme-text-disabled-on-secondary: rgba(255, 255, 255, 0.5);
---mdc-theme-text-icon-on-secondary: rgba(255, 255, 255, 0.5);
---mdc-theme-text-primary-on-secondary-light: rgba(0, 0, 0, 0.87);
---mdc-theme-text-secondary-on-secondary-light: rgba(0, 0, 0, 0.54);
---mdc-theme-text-hint-on-secondary-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-disabled-on-secondary-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-icon-on-secondary-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-primary-on-secondary-dark: white;
---mdc-theme-text-secondary-on-secondary-dark: rgba(255, 255, 255, 0.7);
---mdc-theme-text-hint-on-secondary-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-disabled-on-secondary-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-icon-on-secondary-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
---mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
---mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
---mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
---mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
---mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
---mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
---mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
---mdc-theme-text-primary-on-dark: white;
---mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
---mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
---mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); */
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+const useMappedMuiTheme = (theme: { [key: string]: string }) => {
+  const prefersDarkMode = theme.type === 'dark';
+
+  return React.useMemo(() => mapMcToMuiTheme(theme, prefersDarkMode), [
+    prefersDarkMode,
+    theme,
+  ]);
+};
+
+const mapMcToMuiTheme = (
+  mcTheme: { [key: string]: string },
+  prefersDarkMode = false
+) => {
+  return createMuiTheme({
+    palette: {
+      type: prefersDarkMode ? 'dark' : 'light',
+      primary: {
+        main: mcTheme.primary,
+      },
+      secondary: {
+        main: mcTheme.secondary,
+      },
+      error: {
+        main: mcTheme.error,
+      },
+      background: {
+        default: mcTheme.surface,
+        paper: mcTheme.background,
+      },
+      text: {
+        primary: prefersDarkMode
+          ? mcTheme.textPrimaryOnDark
+          : mcTheme.textPrimaryOnLight,
+        secondary: prefersDarkMode
+          ? mcTheme.textSecondaryOnDark
+          : mcTheme.textSecondaryOnLight,
+      },
+    },
+  });
+};
+
+export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme };
+/* primary: '#24aee9',
+secondary: '#e539ff',
+error: '#b00020',
+background: '#212121',
+surface: '#37474F',
+onPrimary: 'rgba(255,255,255,.87)',
+onSecondary: 'rgba(0,0,0,0.87)',
+onSurface: 'rgba(255,255,255,.87)',
+onError: '#fff',
+textPrimaryOnBackground: 'rgba(255, 255, 255, 1)',
+textSecondaryOnBackground: 'rgba(255, 255, 255, 0.7)',
+textHintOnBackground: 'rgba(255, 255, 255, 0.5)',
+textDisabledOnBackground: 'rgba(255, 255, 255, 0.5)',
+textIconOnBackground: 'rgba(255, 255, 255, 0.5)',
+textPrimaryOnLight: 'rgba(0, 0, 0, 0.87)',
+textSecondaryOnLight: 'rgba(0, 0, 0, 0.54)',
+textHintOnLight: 'rgba(0, 0, 0, 0.38)',
+textDisabledOnLight: 'rgba(0, 0, 0, 0.38)',
+textIconOnLight: 'rgba(0, 0, 0, 0.38)',
+textPrimaryOnDark: 'white',
+textSecondaryOnDark: 'rgba(255, 255, 255, 0.7)',
+textHintOnDark: 'rgba(255, 255, 255, 0.5)',
+textDisabledOnDark: 'rgba(255, 255, 255, 0.5)',
+textIconOnDark: 'rgba(255, 255, 255, 0.5)', */
+
+/* --mdc-theme-primary: #3f51b5;
+--mdc-theme-primary-light: #a4addf;
+--mdc-theme-primary-dark: #6f7dcd;
+--mdc-theme-secondary: #ff4081;
+--mdc-theme-secondary-light: #ff87b0;
+--mdc-theme-secondary-dark: #f80054;
+--mdc-theme-background: #fff;
+--mdc-theme-text-primary-on-primary: white;
+--mdc-theme-text-secondary-on-primary: rgba(255, 255, 255, 0.7);
+--mdc-theme-text-hint-on-primary: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-disabled-on-primary: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-icon-on-primary: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-primary-on-primary-light: rgba(0, 0, 0, 0.87);
+--mdc-theme-text-secondary-on-primary-light: rgba(0, 0, 0, 0.54);
+--mdc-theme-text-hint-on-primary-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-disabled-on-primary-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-icon-on-primary-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-primary-on-primary-dark: white;
+--mdc-theme-text-secondary-on-primary-dark: rgba(255, 255, 255, 0.7);
+--mdc-theme-text-hint-on-primary-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-disabled-on-primary-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-icon-on-primary-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-primary-on-secondary: white;
+--mdc-theme-text-secondary-on-secondary: rgba(255, 255, 255, 0.7);
+--mdc-theme-text-hint-on-secondary: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-disabled-on-secondary: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-icon-on-secondary: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-primary-on-secondary-light: rgba(0, 0, 0, 0.87);
+--mdc-theme-text-secondary-on-secondary-light: rgba(0, 0, 0, 0.54);
+--mdc-theme-text-hint-on-secondary-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-disabled-on-secondary-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-icon-on-secondary-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-primary-on-secondary-dark: white;
+--mdc-theme-text-secondary-on-secondary-dark: rgba(255, 255, 255, 0.7);
+--mdc-theme-text-hint-on-secondary-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-disabled-on-secondary-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-icon-on-secondary-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
+--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
+--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
+--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
+--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
+--mdc-theme-text-primary-on-dark: white;
+--mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
+--mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
+--mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); */

package/src/lib/utils/map.ts

@@ -1,19 +1,19 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-
-export const toRadian = (num: number): number => {
-  return (num * Math.PI) / 180;
-};
-
-export const toDegrees = (num: number): number => {
-  return num * (180 / Math.PI);
-};
-
-export const getAltitude = (mapzoom: number): number => {
-  //this equation is a transformation of the angular size equation solving for D. See: http://en.wikipedia.org/wiki/Forced_perspective
-  const firstPartOfEq = 0.05 * (591657550.5 / Math.pow(2, mapzoom - 1) / 2); //amount displayed is .05 meters and map scale =591657550.5/(Math.pow(2,(mapzoom-1))))
-  //this bit ^ essentially gets the h value in the angular size eq then divides it by 2
-  const googleearthaltitude =
-    firstPartOfEq *
-    (Math.cos(toRadian(85.362 / 2)) / Math.sin(toRadian(85.362 / 2))); //85.362 is angle which google maps displays on a 5cm wide screen
-  return googleearthaltitude;
-};
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+export const toRadian = (num: number): number => {
+  return (num * Math.PI) / 180;
+};
+
+export const toDegrees = (num: number): number => {
+  return num * (180 / Math.PI);
+};
+
+export const getAltitude = (mapzoom: number): number => {
+  //this equation is a transformation of the angular size equation solving for D. See: http://en.wikipedia.org/wiki/Forced_perspective
+  const firstPartOfEq = 0.05 * (591657550.5 / Math.pow(2, mapzoom - 1) / 2); //amount displayed is .05 meters and map scale =591657550.5/(Math.pow(2,(mapzoom-1))))
+  //this bit ^ essentially gets the h value in the angular size eq then divides it by 2
+  const googleearthaltitude =
+    firstPartOfEq *
+    (Math.cos(toRadian(85.362 / 2)) / Math.sin(toRadian(85.362 / 2))); //85.362 is angle which google maps displays on a 5cm wide screen
+  return googleearthaltitude;
+};

package/src/lib/utils/projections.ts

@@ -1,7 +1,7 @@
-export enum Proj {
-  WGS84 = 'EPSG:4326',
-  WEB_MERCATOR = 'EPSG:3857',
-}
-
-export const COORDINATES_WGS_FRACTION_DIGITS = 5;
-export const COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
+export enum Proj {
+  WGS84 = 'EPSG:4326',
+  WEB_MERCATOR = 'EPSG:3857',
+}
+
+export const COORDINATES_WGS_FRACTION_DIGITS = 5;
+export const COORDINATES_MERCATOR_FRACTION_DIGITS = 2;

package/src/lib/utils/story.ts

@@ -1,11 +1,11 @@
-import { DecoratorFunction, ArgTypes } from '@storybook/addons';
-
-export interface CSFStory<StoryFnReturnType = unknown> {
-  story?: {
-    name?: string;
-    decorators?: DecoratorFunction<StoryFnReturnType>[];
-    parameters?: { [name: string]: unknown };
-  };
-  argTypes?: ArgTypes;
-  (): StoryFnReturnType;
-}
+import { DecoratorFunction, ArgTypes } from '@storybook/addons';
+
+export interface CSFStory<StoryFnReturnType = unknown> {
+  story?: {
+    name?: string;
+    decorators?: DecoratorFunction<StoryFnReturnType>[];
+    parameters?: { [name: string]: unknown };
+  };
+  argTypes?: ArgTypes;
+  (): StoryFnReturnType;
+}

package/src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -1,14 +1,14 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
-
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-// Mocked as those are used by openlayers
-global.URL.createObjectURL = jest.fn();
-HTMLCanvasElement.prototype.getContext = jest.fn();
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// Mocked as those are used by openlayers
+global.URL.createObjectURL = jest.fn();
+HTMLCanvasElement.prototype.getContext = jest.fn();

package/tsbuildconfig.json

@@ -1,37 +1,37 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react",
-    "outDir": "dist",
-    "sourceMap": false,
-    "declaration": true,
-    "declarationMap": false,
-    "rootDir": "src/lib"
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "src/index.tsx",
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "src/setupTests.ts",
-    "src/**/stories/*.tsx",
-    "src/**/*.stories.tsx"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "outDir": "dist",
+    "sourceMap": false,
+    "declaration": true,
+    "declarationMap": false,
+    "rootDir": "src/lib"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "src/index.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "src/setupTests.ts",
+    "src/**/stories/*.tsx",
+    "src/**/*.stories.tsx"
+  ]
+}