Update jest, svelte-jest, ts-jest. Install svelte2tsx for better it's…

… type defintions. Moves types from component module to ts files. Reasoning: Unit tests fail when types are imported in a ts file from a component directly. See sveltejs/svelte#5817.
mathesar-foundation · Apr 27, 2022 · 4f33b92 · 4f33b92
1 parent 0bfd6eb
commit 4f33b92
Show file tree

Hide file tree

Showing 25 changed files with 3,228 additions and 1,150 deletions.
diff --git a/mathesar_ui/jest.config.cjs b/mathesar_ui/jest.config.cjs
@@ -11,6 +11,7 @@ function getAlias() {
 }
 
 module.exports = {
+  testEnvironment: 'jsdom',
   transform: {
     '^.+\\.svelte$': [
       'svelte-jester',

diff --git a/mathesar_ui/package-lock.json b/mathesar_ui/package-lock.json
diff --git a/mathesar_ui/package.json b/mathesar_ui/package.json
@@ -51,19 +51,20 @@
     "eslint-plugin-jest": "^24.7.0",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-svelte3": "^3.4.0",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
     "prettier": "^2.5.0",
     "prettier-plugin-svelte": "^2.5.0",
     "sass": "^1.35.1",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
     "svelte": "^3.42.4",
     "svelte-check": "^2.2.5",
-    "svelte-jester": "^1.7.0",
+    "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.2",
     "svelte-preprocess": "^4.8.0",
+    "svelte2tsx": "^0.5.9",
     "tinro": "^0.6.4",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.1.4",
     "tslib": "^2.3.0",
     "typescript": "^4.4.4",
     "vite": "^2.5.3"

diff --git a/mathesar_ui/src/component-library/button/Button.svelte b/mathesar_ui/src/component-library/button/Button.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-  import type { Appearance, Size } from '@mathesar-component-library-dir/types';
+  import type {
+    Appearance,
+    Size,
+  } from '@mathesar-component-library-dir/commonTypes';
 
   /**
    * Button appearance. One of: 'default', 'primary', 'secondary', 'plain', 'ghost'.

diff --git a/mathesar_ui/src/component-library/common/base-components/BaseInput.svelte b/mathesar_ui/src/component-library/common/base-components/BaseInput.svelte
@@ -1,17 +1,8 @@
-<script context="module" lang="ts">
-  export interface BaseInputProps {
-    id?: string;
-    labelController?: LabelController;
-    disabled?: boolean;
-    focusOnMount?: boolean;
-  }
-</script>
-
 <script lang="ts">
   import { tick, afterUpdate } from 'svelte';
-  import type { LabelController } from '@mathesar-component-library-dir/label/LabelController';
   import { getLabelControllerFromContainingLabel } from '@mathesar-component-library-dir/label/LabelController';
   import { getGloballyUniqueId } from '@mathesar-component-library-dir/common/utils/domUtils';
+  import type { BaseInputProps } from './BaseInputTypes';
 
   type $$Props = BaseInputProps;
 

diff --git a/mathesar_ui/src/component-library/common/base-components/BaseInputTypes.ts b/mathesar_ui/src/component-library/common/base-components/BaseInputTypes.ts
@@ -0,0 +1,8 @@
+import type { LabelController } from '@mathesar-component-library-dir/label/LabelController';
+
+export interface BaseInputProps {
+  id?: string;
+  labelController?: LabelController;
+  disabled?: boolean;
+  focusOnMount?: boolean;
+}
diff --git a/mathesar_ui/src/component-library/commonTypes.ts b/mathesar_ui/src/component-library/commonTypes.ts
@@ -0,0 +1,14 @@
+export type Appearance =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'plain'
+  | 'ghost';
+
+export type Size = 'small' | 'medium' | 'large';
+
+type InputProps = svelte.JSX.HTMLAttributes<HTMLInputElement>;
+export type SimplifiedInputProps = Omit<
+  InputProps,
+  'disabled' | 'id' | 'class'
+>;
diff --git a/mathesar_ui/src/component-library/dropdown/Dropdown.svelte b/mathesar_ui/src/component-library/dropdown/Dropdown.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
   import type { Placement } from '@popperjs/core/lib/enums';
-  import type { Appearance, Size } from '@mathesar-component-library-dir/types';
+  import type {
+    Appearance,
+    Size,
+  } from '@mathesar-component-library-dir/commonTypes';
   import Button from '@mathesar-component-library-dir/button/Button.svelte';
   import Icon from '@mathesar-component-library-dir/icon/Icon.svelte';
 

diff --git a/mathesar_ui/src/component-library/formatted-input/FormattedInput.svelte b/mathesar_ui/src/component-library/formatted-input/FormattedInput.svelte
@@ -1,20 +1,8 @@
-<script context="module" lang="ts">
-  type SimplifiedTextInputProps = Omit<TextInputProps, 'value'>;
-  type ParseErrorCallback = (p: { userInput: string; error: unknown }) => void;
-
-  export interface FormattedInputProps<T> extends SimplifiedTextInputProps {
-    formatter: InputFormatter<T>;
-    value?: T | null;
-    onParseError?: ParseErrorCallback;
-  }
-</script>
-
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte';
-  import type { TextInputProps } from '@mathesar-component-library-dir/text-input/TextInput.svelte';
   import TextInput from '@mathesar-component-library-dir/text-input/TextInput.svelte';
   import { getOutcomeOfBeforeInputEvent } from '@mathesar-component-library-dir/common/utils';
-  import type { ParseResult, InputFormatter } from './InputFormatter';
+  import type { ParseResult, FormattedInputProps } from './FormattedInputTypes';
   import { getCursorPositionAfterReformat } from './formattedInputUtils';
 
   type T = $$Generic;

diff --git a/...library/formatted-input/InputFormatter.ts → ...ry/formatted-input/FormattedInputTypes.ts b/...library/formatted-input/InputFormatter.ts → ...ry/formatted-input/FormattedInputTypes.ts
@@ -1,3 +1,5 @@
+import type { TextInputProps } from '@mathesar-component-library-dir/text-input/TextInputTypes';
+
 export interface ParseResult<T> {
   /**
    * See docs within `FormattedInput` for an explanation of how we're using
@@ -21,3 +23,12 @@ export interface InputFormatter<T> {
    */
   parse(input: string): ParseResult<T>;
 }
+
+type SimplifiedTextInputProps = Omit<TextInputProps, 'value'>;
+type ParseErrorCallback = (p: { userInput: string; error: unknown }) => void;
+
+export interface FormattedInputProps<T> extends SimplifiedTextInputProps {
+  formatter: InputFormatter<T>;
+  value?: T | null;
+  onParseError?: ParseErrorCallback;
+}
diff --git a/mathesar_ui/src/component-library/number-input/NumberInput.svelte b/mathesar_ui/src/component-library/number-input/NumberInput.svelte
@@ -23,18 +23,11 @@
     high-precision numbers by binding to a `string` instead of a `number`.
 
 -->
-<script context="module" lang="ts">
-  export interface NumberInputProps extends Partial<NumberFormatterOptions> {
-    value?: number;
-    element?: HTMLInputElement;
-  }
-</script>
-
 <script lang="ts">
   import FormattedInput from '../formatted-input/FormattedInput.svelte';
-  import type { NumberFormatterOptions } from './number-formatter/types';
   import { NumberFormatter } from './number-formatter';
   import { getInputMode } from './numberInputUtils';
+  import type { NumberInputProps } from './NumberInputTypes';
 
   type $$Props = NumberInputProps;
 

diff --git a/mathesar_ui/src/component-library/number-input/NumberInputTypes.ts b/mathesar_ui/src/component-library/number-input/NumberInputTypes.ts
@@ -0,0 +1,14 @@
+import type { FormattedInputProps } from '@mathesar-component-library-dir/formatted-input/FormattedInputTypes';
+import type { NumberFormatterOptions } from './number-formatter/types';
+
+export interface NumberInputProps extends Partial<NumberFormatterOptions> {
+  value?: number;
+  element?: HTMLInputElement;
+}
+
+export interface StringifiedNumberInputProps
+  extends Partial<NumberFormatterOptions>,
+    Omit<FormattedInputProps<string>, 'formatter'> {
+  value?: string | null;
+  element?: HTMLInputElement;
+}
diff --git a/mathesar_ui/src/component-library/number-input/StringifiedNumberInput.svelte b/mathesar_ui/src/component-library/number-input/StringifiedNumberInput.svelte
@@ -28,21 +28,11 @@
     numerical operations on the user input. See `NumberInput.svelte` for a
     component that will bind to a `number` instead of a `string`.
 -->
-<script context="module" lang="ts">
-  export interface StringifiedNumberInputProps
-    extends Partial<NumberFormatterOptions>,
-      Omit<FormattedInputProps<string>, 'formatter'> {
-    value?: string | null;
-    element?: HTMLInputElement;
-  }
-</script>
-
 <script lang="ts">
-  import type { FormattedInputProps } from '../formatted-input/FormattedInput.svelte';
-  import FormattedInput from '../formatted-input/FormattedInput.svelte';
-  import type { NumberFormatterOptions } from './number-formatter/types';
+  import FormattedInput from '@mathesar-component-library-dir/formatted-input/FormattedInput.svelte';
   import { StringifiedNumberFormatter } from './number-formatter';
   import { getInputMode } from './numberInputUtils';
+  import type { StringifiedNumberInputProps } from './NumberInputTypes';
 
   type $$Props = StringifiedNumberInputProps;
 

diff --git a/mathesar_ui/src/component-library/number-input/number-formatter/AbstractNumberFormatter.ts b/mathesar_ui/src/component-library/number-input/number-formatter/AbstractNumberFormatter.ts
@@ -1,7 +1,7 @@
 import type {
   InputFormatter,
   ParseResult,
-} from '@mathesar-component-library-dir/formatted-input/InputFormatter';
+} from '@mathesar-component-library-dir/formatted-input/FormattedInputTypes';
 import type { DerivedOptions, Options } from './options';
 import { defaultOptions, getDerivedOptions } from './options';
 

diff --git a/mathesar_ui/src/component-library/number-input/number-formatter/NumberFormatter.ts b/mathesar_ui/src/component-library/number-input/number-formatter/NumberFormatter.ts
@@ -1,4 +1,4 @@
-import type { ParseResult } from '@mathesar-component-library-dir/formatted-input/InputFormatter';
+import type { ParseResult } from '@mathesar-component-library-dir/formatted-input/FormattedInputTypes';
 import AbstractNumberFormatter from './AbstractNumberFormatter';
 import { makeFormatter } from './formatter';
 import { makeUniversalNumberParser } from './parsers';

diff --git a/...esar_ui/src/component-library/number-input/number-formatter/StringifiedNumberFormatter.ts b/...esar_ui/src/component-library/number-input/number-formatter/StringifiedNumberFormatter.ts
@@ -1,4 +1,4 @@
-import type { ParseResult } from '@mathesar-component-library-dir/formatted-input/InputFormatter';
+import type { ParseResult } from '@mathesar-component-library-dir/formatted-input/FormattedInputTypes';
 import AbstractNumberFormatter from './AbstractNumberFormatter';
 import { makeFormatter } from './formatter';
 import { makeUniversalNumberParser } from './parsers';

diff --git a/mathesar_ui/src/component-library/number-input/number-formatter/parsers.ts b/mathesar_ui/src/component-library/number-input/number-formatter/parsers.ts
@@ -1,4 +1,4 @@
-import type { ParseResult } from '@mathesar-component-library-dir/formatted-input/InputFormatter';
+import type { ParseResult } from '@mathesar-component-library-dir/formatted-input/FormattedInputTypes';
 import { factoryToNormalize, factoryToSimplify } from './cleaners';
 import {
   formatToNormalizedForm,

diff --git a/mathesar_ui/src/component-library/select/Select.svelte b/mathesar_ui/src/component-library/select/Select.svelte
@@ -1,24 +1,3 @@
-<script context="module" lang="ts">
-  import type { BaseInputProps } from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
-  import type {
-    Appearance,
-    ListBoxProps,
-  } from '@mathesar-component-library-dir/types';
-
-  export interface SelectProps<Option> extends BaseInputProps {
-    options: Option[];
-    value?: Option;
-    labelKey?: string;
-    getLabel?: LabelGetter<Option | undefined>;
-    prependBlank?: boolean;
-    contentClass?: string;
-    triggerClass?: string;
-    triggerAppearance?: Appearance;
-    ariaLabel?: string;
-    valuesAreEqual?: ListBoxProps<Option | undefined>['checkEquality'];
-  }
-</script>
-
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import BaseInput from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
@@ -27,10 +6,10 @@
     ListBoxOptions,
   } from '@mathesar-component-library-dir/list-box';
   import { Dropdown } from '@mathesar-component-library-dir/dropdown';
-  import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import { getLabel as defaultGetLabel } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import { getGloballyUniqueId } from '@mathesar-component-library-dir/common/utils/domUtils';
   import StringOrComponent from '../string-or-component/StringOrComponent.svelte';
+  import type { SelectProps } from './SelectTypes';
 
   type Option = $$Generic;
   type $$Props = SelectProps<Option>;

diff --git a/mathesar_ui/src/component-library/select/SelectTypes.ts b/mathesar_ui/src/component-library/select/SelectTypes.ts
@@ -0,0 +1,17 @@
+import type { BaseInputProps } from '@mathesar-component-library-dir/common/base-components/BaseInputTypes';
+import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
+import type { Appearance } from '@mathesar-component-library-dir/commonTypes';
+import type { ListBoxProps } from '@mathesar-component-library-dir/list-box/ListBoxTypes';
+
+export interface SelectProps<Option> extends BaseInputProps {
+  options: Option[];
+  value?: Option;
+  labelKey?: string;
+  getLabel?: LabelGetter<Option | undefined>;
+  prependBlank?: boolean;
+  contentClass?: string;
+  triggerClass?: string;
+  triggerAppearance?: Appearance;
+  ariaLabel?: string;
+  valuesAreEqual?: ListBoxProps<Option | undefined>['checkEquality'];
+}
diff --git a/mathesar_ui/src/component-library/text-area/TextArea.svelte b/mathesar_ui/src/component-library/text-area/TextArea.svelte
@@ -1,19 +1,6 @@
-<script context="module" lang="ts">
-  import type { BaseInputProps } from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
-
-  // eslint-disable-next-line no-undef
-  type InputProps = svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['input']>;
-  type SimplifiedInputProps = Omit<InputProps, 'disabled' | 'id' | 'class'>;
-
-  export interface TextAreaProps extends SimplifiedInputProps, BaseInputProps {
-    value?: string | null;
-    class?: string;
-    element?: HTMLTextAreaElement;
-  }
-</script>
-
 <script lang="ts">
   import BaseInput from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
+  import type { TextAreaProps } from '@mathesar-component-library-dir/text-area/TextAreaTypes';
 
   type $$Props = TextAreaProps;
 

diff --git a/mathesar_ui/src/component-library/text-area/TextAreaTypes.ts b/mathesar_ui/src/component-library/text-area/TextAreaTypes.ts
@@ -0,0 +1,8 @@
+import type { BaseInputProps } from '@mathesar-component-library-dir/common/base-components/BaseInputTypes';
+import type { SimplifiedInputProps } from '@mathesar-component-library-dir/commonTypes';
+
+export interface TextAreaProps extends SimplifiedInputProps, BaseInputProps {
+  value?: string | null;
+  class?: string;
+  element?: HTMLTextAreaElement;
+}
diff --git a/mathesar_ui/src/component-library/text-input/TextInput.svelte b/mathesar_ui/src/component-library/text-input/TextInput.svelte
@@ -1,20 +1,6 @@
-<script context="module" lang="ts">
-  import type { BaseInputProps } from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
-
-  // eslint-disable-next-line no-undef
-  type InputProps = svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['input']>;
-  type SimplifiedInputProps = Omit<InputProps, 'disabled' | 'id' | 'class'>;
-
-  export interface TextInputProps extends SimplifiedInputProps, BaseInputProps {
-    value?: string | null;
-    class?: string;
-    element?: HTMLInputElement;
-    hasError?: boolean;
-  }
-</script>
-
 <script lang="ts">
   import BaseInput from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
+  import type { TextInputProps } from './TextInputTypes';
 
   type $$Props = TextInputProps;
 

diff --git a/mathesar_ui/src/component-library/text-input/TextInputTypes.ts b/mathesar_ui/src/component-library/text-input/TextInputTypes.ts
@@ -0,0 +1,9 @@
+import type { BaseInputProps } from '@mathesar-component-library-dir/common/base-components/BaseInputTypes';
+import type { SimplifiedInputProps } from '@mathesar-component-library-dir/commonTypes';
+
+export interface TextInputProps extends SimplifiedInputProps, BaseInputProps {
+  value?: string | null;
+  class?: string;
+  element?: HTMLInputElement;
+  hasError?: boolean;
+}
diff --git a/mathesar_ui/src/component-library/types.ts b/mathesar_ui/src/component-library/types.ts
@@ -1,12 +1,5 @@
 export * from './common/utils';
-
-export type Appearance =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'plain'
-  | 'ghost';
-export type Size = 'small' | 'medium' | 'large';
+export * from './commonTypes';
 
 export type { Tab } from './tabs/TabContainerTypes';
 export type { TreeItem } from './tree/TreeTypes';
@@ -17,7 +10,7 @@ export * from './dynamic-input/types';
 export * from './form-builder/types';
 export * from './cancel-or-proceed-button-pair/CancelOrProceedButtonPairTypes';
 export * from './list-box/ListBoxTypes';
-export type { TextInputProps } from './text-input/TextInput.svelte';
-export type { TextAreaProps } from './text-area/TextArea.svelte';
-export type { StringifiedNumberInputProps } from './number-input/StringifiedNumberInput.svelte';
-export type { SelectProps } from './select/Select.svelte';
+export * from './text-input/TextInputTypes';
+export * from './text-area/TextAreaTypes';
+export * from './select/SelectTypes';
+export * from './number-input/NumberInputTypes';
diff --git a/mathesar_ui/tsconfig.json b/mathesar_ui/tsconfig.json
@@ -4,7 +4,13 @@
     "moduleResolution": "node",
     "target": "esnext",
     "module": "esnext",
-    "types": ["svelte", "jest", "@testing-library/jest-dom", "js-cookie"],
+    "types": [
+      "svelte",
+      "jest",
+      "@testing-library/jest-dom",
+      "js-cookie",
+      "svelte2tsx/svelte-jsx"
+    ],
     "importsNotUsedAsValues": "error",
     "strict": true,
     "isolatedModules": true,