Fix: tests

package.json

@@ -22,6 +22,7 @@
     "test:renderer": "vitest run -r packages/renderer --passWithNoTests",
     "watch": "node scripts/watch.js",
     "lint": "eslint . --ext js,mjs,cjs,ts,mts,cts,tsx",
+    "lint:fix": "yarn lint --fix",
     "typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
     "typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
     "typecheck:renderer": "tsc --noEmit -p packages/renderer/tsconfig.json",
@@ -41,6 +42,7 @@
     "@types/lodash": "^4.17.4",
     "@types/node": "20.14.1",
     "@types/react": "^18.3.3",
+    "@types/react-bootstrap-table-next": "^4.0.26",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "7.12.0",
@@ -61,7 +63,8 @@
     "typescript": "5.4.5",
     "unplugin-auto-expose": "0.3.0",
     "vite": "5.2.14",
-    "vitest": "^2.0.5"
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1"
   },
   "dependencies": {
     "@puppeteer/browsers": "^2.2.3",
@@ -92,7 +95,8 @@
     "react-bootstrap-table2-editor": "^1.4.0",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.3.1",
-    "web-vitals": "^4.2.0",
+    "svelte": "^4.2.19",
+    "web-vitals": "^4.2.3",
     "ynab": "^1.19.0"
   }
 }

packages/preload/src/commonTypes.ts

@@ -66,7 +66,6 @@ export interface JsonConfig extends OutputVendorConfigBase {
 export interface GoogleSheetsConfig extends OutputVendorConfigBase {
   options: {
     credentials: Credentials;
-    // credentials: string;
     spreadsheetId: string;
   };
 }
@@ -82,7 +81,6 @@ export interface YnabConfig extends OutputVendorConfigBase {
 
 export interface AccountToScrapeConfig {
   id: string;
-  // key: CompanyTypes;
   key: string;
   name: string;
   loginFields: Record<string, string>;

packages/renderer/src/accountMetadata.tsx

@@ -52,7 +52,7 @@ const accountMetadata: Record<
   return {
     companyId: accountId,
     companyName: displayName,
-    logo: icons[accountId],
+    logo: icons[accountId as CompanyTypes | OutputVendorName],
   };
 });
 
@@ -111,7 +111,7 @@ export const importers: Account[] = Object.values(CompanyTypes).map(
 
     const importer: Account = {
       id: importerName,
-      companyId,
+      companyId: companyId as CompanyTypes | OutputVendorName,
       displayName: companyName,
       logo,
       type: AccountType.IMPORTER,

packages/renderer/src/components/App.test.tsx

@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react';
 import { expect, test } from 'vitest';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders discord link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  const linkElement = screen.getByText(/ערוץ הדיסקורד שלנו/i);
+  expect(linkElement).to.exist;
 });

packages/renderer/src/components/Body.tsx

@@ -7,9 +7,11 @@ import { useConfigStore } from '../store/ConfigStore';
 import {
   ModalStatus,
   OutputVendorName,
+  type YnabConfig,
   type Account,
   type Exporter,
   type Importer,
+  type GoogleSheetsConfig,
 } from '../types';
 import styles from './Body.module.css';
 import CheckForUpdates from './CheckForUpdates';
@@ -20,7 +22,7 @@ import AccountsContainer from './accounts/AccountsContainer';
 import CreateImporter from './accounts/CreateImporter';
 import EditImporter from './accounts/EditImporter';
 import Importers from './accounts/Importers';
-import EditExporter from './exporters/EditExporter';
+import EditExporter, { type EditExporterProps } from './exporters/EditExporter';
 import Exporters from './exporters/Exporters';
 
 const Body = () => {
@@ -56,8 +58,10 @@ const Body = () => {
     closeModal();
   };
 
-  const updateExporter = async (exporter: Exporter) => {
-    await configStore.updateExporter(exporter);
+  const updateExporter: EditExporterProps['handleSave'] = async (
+    exporter: Exporter | YnabConfig | GoogleSheetsConfig,
+  ) => {
+    await configStore.updateExporter(exporter as Exporter);
     closeModal();
   };
 
@@ -82,12 +86,7 @@ const Body = () => {
               </AccountsContainer>
             )}
             {configStore.config?.outputVendors && (
-              <AccountsContainer
-                title="תוכנות ניהול תקציב"
-                accounts={configStore.exporters}
-                isScraping={configStore.isScraping}
-                showModal={showModal}
-              >
+              <AccountsContainer title="תוכנות ניהול תקציב">
                 <Exporters
                   exporters={configStore.exporters}
                   isScraping={configStore.isScraping}
@@ -114,16 +113,15 @@ const Body = () => {
               currentAccount && (
                 <EditImporter
                   handleSave={updateImporter}
-                  importer={currentAccount}
+                  importer={currentAccount as Importer}
                   handleDelete={deleteImporter}
                 />
               )}
             {modalStatus === ModalStatus.EXPORTER_SETTINGS &&
               currentAccount && (
                 <EditExporter
                   handleSave={updateExporter}
-                  exporter={currentAccount}
-                  handleDelete={deleteImporter}
+                  exporter={currentAccount as Exporter}
                 />
               )}
             {modalStatus === ModalStatus.NEW_SCRAPER && (
@@ -147,7 +145,7 @@ const Body = () => {
         </Button>
         <Image
           src={settingsIcon}
-          onClick={() => showModal(null, ModalStatus.GENERAL_SETTINGS)}
+          onClick={() => showModal({} as Account, ModalStatus.GENERAL_SETTINGS)}
           className={styles.pointer}
         />
         <CheckForUpdates />

packages/renderer/src/components/GeneralSettings.tsx

@@ -34,7 +34,7 @@ function GeneralSettings() {
                 className={styles.input}
                 defaultValue={configStore.config?.scraping.numDaysBack}
                 onBlur={(event) =>
-                  configStore.setNumDaysBack(event.target.value)
+                  configStore.setNumDaysBack(Number(event.target.value))
                 }
                 autoFocus
               />
@@ -45,7 +45,7 @@ function GeneralSettings() {
                 className={styles.input}
                 defaultValue={configStore.config?.scraping.maxConcurrency}
                 onBlur={(event) =>
-                  configStore.setMaxConcurrency(event.target.value)
+                  configStore.setMaxConcurrency(Number(event.target.value))
                 }
               />
             </Form.Group>
@@ -60,7 +60,7 @@ function GeneralSettings() {
               />
             </Form.Group>
             <Form.Group>
-              <Form.Label>כמה זמן לחכות לשליפה? (millisec)</Form.Label>
+              <Form.Label>כמה זמן לחכות לשליפה? (milliseconds)</Form.Label>
               <Form.Control
                 className={styles.input}
                 defaultValue={configStore.config?.scraping.timeout}

packages/renderer/src/components/accounts/CreateImporter.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { importers } from '../../accountMetadata';
-import { type Importer } from '../../types';
+import { type Importer, type Account as AccountType } from '../../types';
 import Account from './Account';
 import styles from './CreateImporter.module.css';
 import EditImporter from './EditImporter';
@@ -16,8 +16,8 @@ export default function CreateImporter({
   cancel,
 }: CreateImporterProps) {
   const [importerToCreate, setImporterToCreate] = useState<Importer>();
-  const handleChooseImporter = (importer: Importer) =>
-    setImporterToCreate({ ...importer, id: uuidv4() });
+  const handleChooseImporter = (importer: AccountType) =>
+    setImporterToCreate({ ...importer, id: uuidv4(), loginFields: {} });
   return (
     <div className={styles.container}>
       {importerToCreate ? (

packages/renderer/src/components/accounts/EditImporter.tsx

@@ -32,19 +32,25 @@ export default function EditImporter({
     });
   };
 
-  const checkFieldValidity = (loginFieldName: string, value): boolean => {
+  const checkFieldValidity = (
+    loginFieldName: keyof typeof LOGIN_FIELD_MIN_LENGTH,
+    value: string,
+  ): boolean => {
     return value.length >= LOGIN_FIELD_MIN_LENGTH[loginFieldName];
   };
 
-  const checkFieldsValidity = (fieldsToCheck) => {
+  const checkFieldsValidity = (fieldsToCheck: Record<string, string>) => {
     setValidated(
       Object.entries(fieldsToCheck).every(([key, value]) =>
-        checkFieldValidity(key, value),
+        checkFieldValidity(key as keyof typeof LOGIN_FIELD_MIN_LENGTH, value),
       ),
     );
   };
 
-  const onLoginFieldChanged = (loginFieldName: string, loginFieldValue) => {
+  const onLoginFieldChanged = (
+    loginFieldName: string,
+    loginFieldValue: string,
+  ) => {
     setLoginFields((prevLoginFields) => {
       const nextLoginFields = {
         ...prevLoginFields,
@@ -74,25 +80,29 @@ export default function EditImporter({
         />
         <Card.Body className={styles.cardBody}>
           <Form>
-            {IMPORTERS_LOGIN_FIELDS[importer.companyId].map(
-              (loginField, index) => (
-                <Form.Group
-                  key={loginField}
-                  className={styles.formGroup}
-                  controlId={loginField}
-                >
-                  <Form.Control
-                    placeholder={LOGIN_FIELD_DISPLAY_NAMES[loginField]}
-                    type={loginField === 'password' ? 'password' : ''}
-                    value={loginFields[loginField]}
-                    onChange={(event) =>
-                      onLoginFieldChanged(loginField, event.target.value)
-                    }
-                    autoFocus={index === 0}
-                  />
-                </Form.Group>
-              ),
-            )}
+            {IMPORTERS_LOGIN_FIELDS[
+              importer.companyId as keyof typeof IMPORTERS_LOGIN_FIELDS
+            ].map((loginField: string, index: number) => (
+              <Form.Group
+                key={loginField}
+                className={styles.formGroup}
+                controlId={loginField}
+              >
+                <Form.Control
+                  placeholder={
+                    LOGIN_FIELD_DISPLAY_NAMES[
+                      loginField as keyof typeof LOGIN_FIELD_DISPLAY_NAMES
+                    ]
+                  }
+                  type={loginField === 'password' ? 'password' : ''}
+                  value={loginFields[loginField]}
+                  onChange={(event) =>
+                    onLoginFieldChanged(loginField, event.target.value)
+                  }
+                  autoFocus={index === 0}
+                />
+              </Form.Group>
+            ))}
             <Form.Check
               type="switch"
               onChange={onActiveChanged}

packages/renderer/src/components/accounts/Importers.tsx

@@ -4,12 +4,13 @@ import resultsIcon from '../../assets/results.svg';
 import {
   AccountStatus,
   ModalStatus,
+  type OutputVendorName,
   AccountType as TypeOfAccount,
   type Account as AccountType,
 } from '../../types';
 import Account, { type ActionButton } from './Account';
 import NewAccount from './NewAccount';
-import { useConfigStore } from '/@/store/ConfigStore';
+import { useConfigStore } from '../../store/ConfigStore';
 
 interface ImportersProps {
   accounts: AccountType[];
@@ -37,7 +38,7 @@ function Importers({
               account,
               isScraping,
               () => {
-                configStore.openResults(account.companyId);
+                configStore.openResults(account.companyId as OutputVendorName);
               },
             )}
           />

packages/renderer/src/components/exporters/EditExporter.tsx

@@ -1,10 +1,17 @@
-import { OutputVendorName, type Exporter, type YnabConfig } from '../../types';
+import {
+  OutputVendorName,
+  type Exporter,
+  type YnabConfig,
+  type GoogleSheetsConfig,
+} from '../../types';
 import EditFileExporter from './EditFileExporter';
 import EditYnabExporter from './EditYnabExporter';
 import EditSheetsExporter from './google-sheets/EditSheetsExporter';
 
-interface EditExporterProps {
-  handleSave: (exporterConfig: Exporter | YnabConfig) => Promise<void>;
+export interface EditExporterProps {
+  handleSave: (
+    exporterConfig: Exporter | YnabConfig | GoogleSheetsConfig,
+  ) => Promise<void>;
   exporter: Exporter;
 }
 
@@ -23,11 +30,17 @@ export default function EditExporter({
   );
   exporterTypeToEditComponent.set(
     OutputVendorName.YNAB,
-    <EditYnabExporter exporterConfig={exporter} handleSave={handleSave} />,
+    <EditYnabExporter
+      exporterConfig={exporter as YnabConfig}
+      handleSave={handleSave}
+    />,
   );
   exporterTypeToEditComponent.set(
     OutputVendorName.GOOGLE_SHEETS,
-    <EditSheetsExporter exporterConfig={exporter} handleSave={handleSave} />,
+    <EditSheetsExporter
+      exporterConfig={exporter as GoogleSheetsConfig}
+      handleSave={handleSave}
+    />,
   );
   return <>{exporterTypeToEditComponent.get(exporter.companyId)}</>;
 }

packages/renderer/src/components/exporters/EditFileExporter.tsx

@@ -2,7 +2,7 @@ import { showSaveDialog } from '#preload';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 import { Button, Card, Form, Image } from 'react-bootstrap';
-import { type Exporter } from '../../types';
+import type { CsvConfig, Exporter, JsonConfig } from '/@/types';
 import styles from './EditFileExporter.module.css';
 
 interface EditFileExporterProps {
@@ -63,7 +63,13 @@ const EditFileExporter = ({ handleSave, exporter }: EditFileExporterProps) => {
               <Form.Label>לאיזה קובץ לכתוב את הטרנזאקציות?</Form.Label>
               <Form.Control
                 contentEditable={false}
-                value={exporterConfig.options.filePath}
+                value={
+                  (
+                    exporterConfig.options as
+                      | CsvConfig['options']
+                      | JsonConfig['options']
+                  ).filePath
+                }
                 onClick={selectFolderDialog}
                 onChange={handleChooseFile}
               />