fix: clean up tests, fix some bugs

jest.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
-const { jsWithTs: tsjPreset } = require('ts-jest/presets');
-const { jsWithBabel: jsWithBabelPreset } = require('ts-jest/presets');
+// const { jsWithTs: tsjPreset } = require('ts-jest/presets');
+// const { jsWithBabel: jsWithBabelPreset } = require('ts-jest/presets');
 
 module.exports = {
   globals: {
@@ -11,11 +11,7 @@ module.exports = {
   clearMocks: true,
   collectCoverage: true,
   coverageDirectory: 'coverage/jest',
-  setupFiles: [path.join(__dirname, '/resources/test.config.js')],
-  testMatch: [
-    '<rootDir>/packages/*/src/**/*-test.{js,ts}',
-    '<rootDir>/packages/*/src/**/*.spec.{js,ts}',
-  ],
+  setupFilesAfterEnv: [path.join(__dirname, '/resources/test.config.js')],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       'identity-obj-proxy',
@@ -25,12 +21,13 @@ module.exports = {
       '<rootDir>/packages/codemirror-graphql/src/$1',
     '^example-([^/]+)': '<rootDir>/examples/$1/src',
   },
-  transform: {
-    '^.+\\.jsx?$': require.resolve('./resources/jestBabelTransform'),
-    ...tsjPreset.transform,
-    ...jsWithBabelPreset.transform,
-  },
-  testEnvironment: require.resolve('jest-environment-jsdom-global'),
+  testMatch: [
+    '**/?(*.)+(spec|test).[jt]s?(x)',
+    '!**/cypress/**',
+    '**/?(*)-test.[jt]s?(x)',
+    '!**/cypress/**',
+  ],
+  testEnvironment: require.resolve('jest-environment-jsdom'),
   testPathIgnorePatterns: ['node_modules', 'dist', 'codemirror-graphql'],
   collectCoverageFrom: [
     '**/src/**/*.{js,jsx,ts,tsx}',
@@ -44,5 +41,7 @@ module.exports = {
     '!**/examples/**',
     '!**/codemirror-graphql/**',
     '!**/graphql-language-service-types/**',
+    '!**/*.d.ts',
+    '!**/types.ts',
   ],
 };

package.json

@@ -72,13 +72,15 @@
     "@commitlint/config-conventional": "^8.1.0",
     "@commitlint/config-lerna-scopes": "^8.1.0",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.2.1",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@types/codemirror": "^0.0.84",
     "@types/fetch-mock": "^7.3.2",
     "@types/jest": "^25.1.1",
-    "@typescript-eslint/parser": "^2.18.0",
-    "@types/codemirror": "^0.0.84",
     "@types/node": "^13.7.1",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
+    "@typescript-eslint/parser": "^2.18.0",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^25.1.0",
     "chai": "4.2.0",
     "codecov": "^3.6.4",
     "conventional-changelog-conventionalcommits": "^4.1.0",
@@ -107,7 +109,7 @@
     "mocha": "7.0.1",
     "prettier": "^1.18.2",
     "rimraf": "^3.0.1",
-    "ts-jest": "^25.1.0",
+    "ts-jest": "^25.2.0",
     "typedoc": "^0.15.6",
     "typescript": "^3.6.3"
   }

packages/graphiql/package.json

@@ -66,6 +66,7 @@
     "@types/codemirror": "0.0.82",
     "@types/markdown-it": "^0.0.9",
     "@types/node": "^13.7.1",
+    "@types/testing-library__jest-dom": "^5.0.1",
     "babel-plugin-macros": "^2.8.0",
     "cross-env": "^7.0.0",
     "css-loader": "3.4.2",

packages/graphiql/src/components/DocExplorer.tsx

@@ -28,7 +28,7 @@ const initialNav: NavStackItem = {
 };
 
 type DocExplorerProps = {
-  schema?: GraphQLSchema;
+  schema?: GraphQLSchema | null;
 };
 
 type DocExplorerState = {

packages/graphiql/src/components/DocExplorer/DefaultValue.tsx

@@ -21,7 +21,8 @@ type DefaultValueProps = {
 };
 
 export default function DefaultValue({ field }: DefaultValueProps) {
-  if ('defaultValue' in field) {
+  // field.defaultValue could be null or false, so be careful here!
+  if ('defaultValue' in field && field.defaultValue !== undefined) {
     return (
       <span>
         {' = '}

packages/graphiql/src/components/DocExplorer/MarkdownContent.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import MD from 'markdown-it';
-import Maybe from 'graphql/tsutils/Maybe';
+import { Maybe } from '../../types';
 
 const md = new MD();
 

packages/graphiql/src/components/DocExplorer/TypeDoc.tsx

@@ -109,7 +109,7 @@ export default class TypeDoc extends React.Component<
       );
 
       const deprecatedFields = fields.filter(field =>
-        'isDeprecated' in field ? !field.isDeprecated : true,
+        'isDeprecated' in field ? field.isDeprecated : true,
       );
       if (deprecatedFields.length > 0) {
         deprecatedFieldsDef = (

packages/graphiql/src/components/DocExplorer/TypeLink.tsx

@@ -12,22 +12,18 @@ import {
   GraphQLType,
   GraphQLNamedType,
 } from 'graphql';
-import Maybe from 'graphql/tsutils/Maybe';
 import { OnClickTypeFunction } from './types';
 
+import { Maybe } from '../../types';
+
 type TypeLinkProps = {
   type?: Maybe<GraphQLType>;
-  onClick: OnClickTypeFunction;
+  onClick?: OnClickTypeFunction;
 };
 
-export default class TypeLink extends React.Component<TypeLinkProps> {
-  shouldComponentUpdate(nextProps: TypeLinkProps) {
-    return this.props.type !== nextProps.type;
-  }
-
-  render() {
-    return renderType(this.props.type, this.props.onClick);
-  }
+export default function TypeLink(props: TypeLinkProps) {
+  const onClick = props.onClick ? props.onClick : () => null;
+  return renderType(props.type, onClick);
 }
 
 function renderType(type: Maybe<GraphQLType>, onClick: OnClickTypeFunction) {

packages/graphiql/src/components/DocExplorer/__tests__/FieldDoc.spec.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import FieldDoc from '../FieldDoc';
 

packages/graphiql/src/components/DocExplorer/__tests__/TypeDoc.spec.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import { GraphQLString } from 'graphql';
 
@@ -23,6 +22,7 @@ import {
 describe('TypeDoc', () => {
   it('renders a top-level query object type', () => {
     const { container } = render(
+      // @ts-ignore
       <TypeDoc
         schema={ExampleSchema}
         type={ExampleQuery}
@@ -61,6 +61,7 @@ describe('TypeDoc', () => {
 
   it('renders deprecated fields when you click to see them', () => {
     const { container } = render(
+      // @ts-ignore
       <TypeDoc
         schema={ExampleSchema}
         type={ExampleQuery}
@@ -84,6 +85,7 @@ describe('TypeDoc', () => {
 
   it('renders a Union type', () => {
     const { container } = render(
+      // @ts-ignore
       <TypeDoc schema={ExampleSchema} type={ExampleUnion} />,
     );
     expect(container.querySelector('.doc-category-title')).toHaveTextContent(
@@ -93,6 +95,7 @@ describe('TypeDoc', () => {
 
   it('renders an Enum type', () => {
     const { container } = render(
+      // @ts-ignore
       <TypeDoc schema={ExampleSchema} type={ExampleEnum} />,
     );
     expect(container.querySelector('.doc-category-title')).toHaveTextContent(
@@ -105,6 +108,7 @@ describe('TypeDoc', () => {
 
   it('shows deprecated enum values on click', () => {
     const { getByText, container } = render(
+      // @ts-ignore
       <TypeDoc schema={ExampleSchema} type={ExampleEnum} />,
     );
     const showBtn = getByText('Show deprecated values...');

packages/graphiql/src/components/DocExplorer/__tests__/TypeLink.spec.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import TypeLink from '../TypeLink';
 

packages/graphiql/src/components/GraphiQL.tsx

@@ -41,7 +41,7 @@ import debounce from '../utility/debounce';
 import find from '../utility/find';
 import { GetDefaultFieldNamesFn, fillLeafs } from '../utility/fillLeafs';
 import { getLeft, getTop } from '../utility/elementPosition';
-import { mergeAST } from '../utility/mergeAst';
+import mergeAST from '../utility/mergeAst';
 import {
   introspectionQuery,
   introspectionQueryName,
@@ -180,7 +180,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     const query =
       props.query !== undefined
         ? props.query
-        : this._storage.get('query') !== undefined
+        : this._storage.get('query')
         ? (this._storage.get('query') as string)
         : props.defaultQuery !== undefined
         ? props.defaultQuery
@@ -201,7 +201,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
         ? props.operationName
         : getSelectedOperationName(
             undefined,
-            this._storage.get('operationName'),
+            this._storage.get('operationName') as string,
             queryFacts && queryFacts.operations,
           );
 
@@ -223,7 +223,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     this.state = {
       schema: props.schema,
       query,
-      variables,
+      variables: variables as string,
       operationName,
       docExplorerOpen,
       response: props.response,
@@ -1113,14 +1113,14 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     }
   };
 
-  private handleResizeStart: MouseEventHandler<HTMLDivElement> = downEvent => {
+  private handleResizeStart = (downEvent: React.MouseEvent) => {
     if (!this._didClickDragBar(downEvent)) {
       return;
     }
 
     downEvent.preventDefault();
 
-    const offset = downEvent.clientX - getLeft(downEvent.currentTarget);
+    const offset = downEvent.clientX - getLeft(downEvent.target as HTMLElement);
 
     let onMouseMove: OnMouseMoveFn = moveEvent => {
       if (moveEvent.buttons === 0) {
@@ -1153,7 +1153,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     if (event.button !== 0 || event.ctrlKey) {
       return false;
     }
-    let target = event.currentTarget || (event.target as Element);
+    let target = event.target as Element;
     // We use codemirror's gutter as the drag bar.
     if (target.className.indexOf('CodeMirror-gutter') !== 0) {
       return false;

packages/graphiql/src/components/__tests__/DocExplorer.spec.tsx

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import { DocExplorer } from '../DocExplorer';
 
 import { ExampleSchema } from './ExampleSchema';

packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx

@@ -8,8 +8,6 @@
  */
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
 import { GraphiQL, Fetcher } from '../GraphiQL';
 import { getMockStorage } from './helpers/storage';
 import { codeMirrorModules } from './helpers/codeMirror';

packages/graphiql/src/types.ts

@@ -8,3 +8,5 @@ export namespace GraphiQL {
 export namespace CodeMirror {
   export type ShowHintOptions = HintOptions & { container: HTMLElement | null };
 }
+
+export type Maybe<T> = T | null | undefined;

packages/graphiql/src/utility/CodeMirrorSizer.ts

@@ -1,5 +1,5 @@
 import CodeMirror from 'codemirror';
-import Maybe from 'graphql/tsutils/Maybe';
+import { Maybe } from '../types';
 
 export interface SizerComponent {
   getClientHeight: () => number | null;

packages/graphiql/src/utility/StorageAPI.ts

@@ -37,19 +37,20 @@ export default class StorageAPI {
       storage || (typeof window !== 'undefined' ? window.localStorage : null);
   }
 
-  get(name: string) {
+  get(name: string): string | null {
     if (this.storage) {
       const value = this.storage.getItem('graphiql:' + name);
       // Clean up any inadvertently saved null/undefined values.
       if (value === 'null' || value === 'undefined') {
         this.storage.removeItem('graphiql:' + name);
-        return;
+        return null;
       }
 
       if (value) {
         return value;
       }
     }
+    return null;
   }
 
   set(name: string, value: string) {