Merge pull request #69 from UgnisSoftware/UGN-265

Feature UGN-265 improve validation tests

Author: masiulis

.storybook/main.js .storybook/main.ts.storybook/main.js renamed to .storybook/main.ts

@@ -1,30 +1,27 @@
-const path = require("path")
-
-const toPath = (_path) => path.join(process.cwd(), _path)
-
-module.exports = {
-  stories: ["../src/**/stories/*.stories.tsx"],
-  babel: async (options) => ({
-    ...options,
-  }),
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: "javascript/auto",
-    })
-    return {
-      ...config,
-      devtool: "inline-source-map",
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve.alias,
-          "@emotion/core": toPath("node_modules/@emotion/react"),
-          "emotion-theming": toPath("node_modules/@emotion/react"),
-        },
-      },
-    }
-  },
-  staticDirs: ["../src/stories/static"],
-}
+const path = require("path")
+
+const toPath = (_path: string) => path.join(process.cwd(), _path)
+
+module.exports = {
+  stories: ["../src/**/stories/*.stories.tsx"],
+  webpackFinal: async (config: any) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    })
+    return {
+      ...config,
+      devtool: "inline-source-map",
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+        },
+      },
+    }
+  },
+  staticDirs: ["../src/stories/static"],
+}

package.json

@@ -105,6 +105,9 @@
     "transformIgnorePatterns": [
       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
     ],
+    "setupFiles": [
+      "./src/tests/setup.ts"
+    ],
     "setupFilesAfterEnv": [
       "@testing-library/jest-dom/extend-expect"
     ],

src/steps/ValidationStep/ValidationStep.tsx

@@ -101,7 +101,7 @@ export const ValidationStep = <T extends string>({ initialData }: Props<T>) => {
             <Button variant="outline" size="sm" onClick={deleteSelectedRows}>
               {translations.validationStep.discardButtonTitle}
             </Button>
-            <Switch isChecked={filterByErrors} onChange={() => setFilterByErrors(!filterByErrors)}>
+            <Switch display="flex" isChecked={filterByErrors} onChange={() => setFilterByErrors(!filterByErrors)}>
               {translations.validationStep.filterSwitchTitle}
             </Switch>
           </Box>

src/steps/ValidationStep/components/columns.tsx

@@ -8,6 +8,11 @@ import { TableSelect } from "../../../components/Selects/TableSelect"
 
 const SELECT_COLUMN_KEY = "select-row"
 
+function autoFocusAndSelect(input: HTMLInputElement | null) {
+  input?.focus()
+  input?.select()
+}
+
 export const generateColumns = <T extends string>(fields: Fields<T>): Column<Data<T> & Meta>[] => [
   {
     key: SELECT_COLUMN_KEY,
@@ -74,6 +79,7 @@ export const generateColumns = <T extends string>(fields: Fields<T>): Column<Dat
             component = (
               <Box pl="0.5rem">
                 <Input
+                  ref={autoFocusAndSelect}
                   variant="unstyled"
                   autoFocus
                   size="small"