fmaclen / canutin-desktop-react Goto Github PK

Acceptance criteria

• As a user I want to edit the details of my asset such as it’s type and name so I can later reference it.
• As a user I want to edit it’s value so my net worth calculations are updated.
• As a user I want to remove an asset and so it’s value no longer impacts my net worth calculations.
• As a user I’d like to be asked to type the name of the asset in case I accidentally click the Remove button.
• As a user I’d like to be returned to the balance sheet after my edits have been saved.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=2140%3A29311

• Move <Select /> to src/app/components/common/Form
• Rename <FormAlert /> to <FieldNotice /> and move to src/app/components/common/Form

// src/database/repositories/account.repository.ts:9

export class AccountRepository {
  static async createAccount(account: NewAccountType): Promise<Account> {
    const accountType = await AccountTypeRepository.createOrGetAccountType({
      name: account.accountType.toLowerCase(),
    });
    // ...

[1] query: SELECT "Account"."id" AS "Account_id", "Account"."createdAt" AS "Account_createdAt", "Account"."updatedAt" AS "Account_updatedAt", "Account"."name" AS "Account_name", "Account"."officialName" AS "Account_officialName", "Account"."institution" AS "Account_institution", "Account"."closed" AS "Account_closed", "Account"."balanceGroup" AS "Account_balanceGroup", "Account"."accountTypeId" AS "Account_accountTypeId" FROM "account" "Account" WHERE "Account"."name" = ? LIMIT 1 -- PARAMETERS: [null]
[1] (node:53396) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'toLowerCase' of undefined
[1]     at Function.<anonymous> (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:53:55)
[1]     at step (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:33:23)
[1]     at Object.next (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:14:53)
[1]     at /Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:8:71
[1]     at new Promise (<anonymous>)
[1]     at __awaiter (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:4:12)
[1]     at Function.AccountRepository.createAccount (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:48:16)
[1]     at Function.<anonymous> (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:124:69)
[1]     at step (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:33:23)
[1]     at Object.next (/Users/odyssey/projects/canutin/desktop/build/database/repositories/account.repository.js:14:53)

Steps to reproduce:

1- Create an account by hand and name it: Test account
2- Navigate to Import Wizard and choose Other CSV
3- Select the CSV exported from Chase
4- Match the columns: Date, MM/DD/YYY, Description, Amount and Category (leave Account blank).
5- Select Test account from the Import to account field.
6- Click Continue and look at the backend logs.

REF #3

Acceptance criteria

• As a user I’d like to know what is the current format for dates and numbers so I can better understand my data.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1058%3A214

• When a valid CSV is found we only display the message Found # accounts, let's update that to: Found # accounts and # transactions.
• Display the number of accounts and transactions detected for uploaded CanutinFile's or any types of CSVs
• Fix typo: Couldn’t interpret the chosen file should be Couldn’t interprete the chosen file

REF #3

Acceptance criteria

• As a user I want to turn on “auto-budget” so Canutin can manage my monthly budget automatically using my 6-month average income as my target income and the 50/30/20 method to handle my expenses and savings.
• As a user I want to disable the “auto-budget” functionality so I can create my own budgets.
• As a user I’d like to edit my target income so I can fine tune my budget goals.
• As a user I’d like to create or edit budget groups so I can set my own spending targets.
• As a user I’d like to be asked to assign categories to my newly created budget groups that don’t have any categories assigned so I can budget new transactions as they are imported.

Visual design

• View 1: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1692%3A5088
• View 2: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1867%3A1657

Acceptance criteria

• As a user I want to visualize the balance at the end of each month within the last year on a graph so I can easily see if I had a surplus or I overspent.
• As a user I want to hover on any of these periods to get additional information on the total income and expenses to get a better sense of how the surplus was calculated.
• As a user I want to click on a period to see all of the transactions so I can see all of the transactions that were part of that calculation.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1007%3A0

Acceptance criteria

• As a user I want to see my net worth so I can see the balance between my assets (what I have) and liabilities (what I owe).
• As a user I want to see my accounts and assets broken down in 4 main groups so I can a more detailed summary of:
  • My liquid assets (Cash)
  • Money I owe (Debt)
  • Money that’s working for me (Investments)
  • Aggregate value of the rest of the assets I own (Other assets)

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1007%3A0

• Add tests for the import wizard view — REF #3
• Add tests for add account/asset by hand — REF #2

Acceptance criteria

• As a user I want to see the income, expenses and surplus for the current month as a percentage of my monthly income target so I can see whether or not I’m on track to achieving this goal.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1692%3A3460

Acceptance criteria

• As a user I want to add a new transaction and assign it to an account to keep it organized.
• As a user I want to manually set a description, date, category and amount so my calculations are updated and I can reference the transaction in the future.
• As a user I’d like to exclude certain transactions so they are not calculated in my totals.
• As a user I’d like to be able to specify a budget group when the transaction is marked as an expense and it’s not excluded from totals.
• As a user I’d like to be notified if my transaction was created successfully.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1689%3A1230

Acceptance criteria

On all tabs

• As a user I want to click on any of the available time periods to see a detail of that period’s week, difference with previous period and balance at the time.
• As a user I want to filter my graphs by changing the date range.
• As a user I want to know why and what to do in case there isn’t enough information to display the graph.

Net worth

• As a user I want to see the history of the aggregate values/balances from all of my accounts and assets so I can visualize its performance over time.

Investments

• As a user I want to see the history of the aggregate values/balances from all of my accounts and assets that belong to the investment group so I can visualize its performance over time.

Other assets

• As a user I want to see the history of the aggregate values from all of my assets that belong to the other assets group so I can visualize its performance over time.

Cash

• As a user I want to see the history of the aggregate values/balances from all of my accounts and assets that belong to the cash group so I can visualize its performance over time.

Debt

• As a user I want to see the history of the aggregate balances from all of my accounts that belong to the debt group so I can visualize its performance over time.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1664%3A258

Acceptance Criteria

• As a user I want to upload a CSV from sites like Mint.com, Personal Capital and YNAB so I can import one or more of my accounts and their transaction history.
• As a user that uploaded a CSV that supports multiple accounts I’d like the detected accounts in such a file to be automatically created or updated if an account with the same name exists to avoid duplication.
• As a user I want to upload an unsupported CSV file and choose the required columns so I can import one or more accounts and their transaction history.
• As a user I’d like to fix categories unsupported by Canutin so when I import my transactions they are properly categorized.
• As a user I’d like to see what kind of content I can import based on the file formats available.
• As a user I’d like to know how many columns and rows were detected in my CSV file to make sure I uploaded the correct one.
• As a user I’d like to know if the uploaded file is not properly formatted/recognized so I can fix it or choose another one.
• As a user who uploaded a file that only supports transactions I’d like to choose which account to import them to.
• As a user who specified an account to import transactions to, I'd like to manually override it’s balance as the associated transactions might not reflect the right balance.
• As a user I’d like Canutin to check if the imported transactions are duplicated and skip them if so.
• As a user I want to see the progress status of my import to determine how long it will take.
• As a user I want to be notified when my import is complete so I can review the imported data.
• As a user, when importing transactions to a single account, I want to be redirected to that account after I begin importing the transactions so I can see what transactions are being imported.
• As a user, when importing multiple accounts, I want to be redirected to the Balance Sheet so I can see all of the accounts and balances as they are being created.

Visual Design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1828%3A32

Acceptance criteria

• As a user I want to see averages of my income, expenses and surplus in the last 6 months to get a proper sense of my short term financial trend.
• As a user I’d like to switch my averages to a 12-month period to see a medium term financial trend.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1007%3A0

• Importing the same CSV twice creates duplicate accounts and transactions.
• Whenever the CSV has an account column we need to check if there is already an account with the same name in the user's vault.
• Importing transactions that match an exisiting transaction with the same account, date, description and amount should be skipped.

REF #3

When importing accounts or transactions via CSVs or CanutinFiles set default values if the following fields are not present:

AccountType: checking 
balanceGroup: Cash
excludeFromTotals: false
category: uncategorized

REF #3

Acceptance criteria

• As a user I want to see a high-level breakdown of my current budget so I can stay on track with my monthly spending and saving goals.
• As a user I’d like to be reminded of the current date so I can plan my spending for the rest of the month.
• As a user I’d like a shortcut to the budget section so I can see a full-break down of the current month’s budget.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1007%3A0

Proposed solution: add a step attribute to <InputField>:

// src/app/components/common/Form/InputText/index.tsx:37

  <InputElement
    name={name}
    ref={setRef ? setRef : register ? register({ required }) : null}
    type={type}
    id={name}
    value={value}
    disabled={disabled}
    readOnly={disabled}
    step={type === 'number' ? 'any' : undefined}
  />

Acceptance criteria

• As a user I want to see a total for all of the other expense transactions that don’t belong to any budget group.
• As a user I’d like to click on “out of budget” so I can review the transactions that are accounted for this total.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1692%3A3460

• Add a new column in the transaction table called imported_at.
• Every time the user imports a CanutinFile/CSV set the same current date to all of the transactions imported during that session.
• This will allow developers (or power users) to easily undo an import.

Acceptance criteria

• As a user I want to see the path where the current database file is located so I can potentially share it or back it up.
• As a user I’d like to change the current database or create a new one by clicking the Switch vault button.

Switching databases

• When the user creates a new database or chooses an existing one that doesn't have any data:
  • The user should be redirected to the Add accounts or assets view.
  • Only the Settings and Add new accounts or assets sidebar menus should be clickable. All of the other ones should be disabled.
• When the user chooses an existing database that doesn't have the exact structure/tables the app uses the we should display an error in the status bar: The chosen file is not a valid Canutin database.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1058%3A214

Acceptance criteria

• As a user I want to select a transaction category and assign it to a budget group so the next time a transaction is assigned to that category, it will also automatically assign it to a default budget group.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1867%3A2014

Address fmaclen/canutin-desktop#89 first, then add all of the newly created components in src/app/components/common/Form to Storybook.

• Find and replace NewAssetTType with NewAssetType
• Find and replace NewAccountTType with NewAccountType

Acceptance criteria

• As a user I’d like to see the current path of the page I’m in so I can easily navigate to a different page within the same context.
• As a user I’d like to collapse or expand the app’s sidebar so I have more room to display the main content of the pages if I’m using a small screen resolution.
• As a user I’d like to click a button (arrow) so that I can easily return to the page I was in before.

Visual design

• Example with breadcrumbs: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1763%3A111
• Expanded sidebar: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1854%3A26838

Improve the category mappings by introducing additional strings from known sources (Mint, Personal Capital, banking institutions, etc) to src/database/helpers/importResources/mapCategories.ts.

Acceptance criteria

• As a user I want to edit any of the details of a transaction so I can recategorize it.
• As a user I’d like to remove a transaction so it no longer impacts my calculations.
• As a user I’d like to be notified if my transaction was edited successfully.
• As a user I’d like to be notified if my transaction was removed successfully.
• As a user I’d like to be returned to the list of transactions after my edits have been saved.

Visual design

• View 1: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1692%3A1160
• View 2: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1867%3A77

Acceptance criteria

• As a user I'd like to see the list of Accounts and Assets balances grouped by type (BalanceGroup) so I can get a better understanding of how my money is allocated.
• As a user I'd like to toggle a switch so I can only see the balances of my Accounts.
• As a user I'd like to toggle a switch so I can only see the balances of my Assets.
• As a user I'd like to know if I don't have any Accounts or Assets present in any of the BalanceGroups.
• All of the currency values shown in this view should be rounded to the nearest integer i.e. $250.49 > $250 / $250.50 > $251

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1759%3A0

Old requirements, ignore.

• As a user I'd like the default view of my Balance Sheet to only show all of my Accounts and Assets, except for those Accounts that have associated Assets so I don't see duplicated balances.
  For example...
  • An Account of type brokerage with a balance of $500 has multiple associated Assets:
    • Asset 1 of type security with a value of $200
    • Asset 2 of type security with a value of $200
    • Asset 3 of type cash with a value of $100.
  • When the Balance sheet has the All toggle switch turned "on" only the 3 Assets should appear in the list of balances and the Account shouldn't appear at all.
  • The Investments BalanceGroup should show a total of $400.
  • The Cash BalanceGroup should show a total of $100.

This is the default view, there is no Overview tab.

Acceptance criteria

• As a user I want to see a list of my transactions in the last 3 months so I can my cashflow in detail.
• As a user I want to change the date range so I can see older transactions.
• As a user I want to type a partial or full name, category, account, date or amount so I can narrow down the list of transactions below and find exactly the one I’m looking for.
• As a user I’d like to click on a Category or Account value so I can see transactions filtered by either of those criteria.
• As a user I’d like to filter transactions by whether it’s amount is debit (negative value) or credit (positive value).
• As a user I’d like to see the number of transactions and the sum of their amounts which updates as I filter down the transactions below.
• As a user I’d like to change the order of each column so I can easily find a specific transaction.
• As a user I’d like to know if there are no transactions available.

Visual design

• View 1: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1686%3A9116
• View 2: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1693%3A22794

• Importing a CSV from Personal Capital doesn't create any accounts or transactions.

REF #3

Acceptance criteria

• As a user I want to edit the details of my account such as it’s type, name and institution name so I can later reference it.
• As a user I want to mark an account as closed so that it no longer shows up in my balance sheet but I can still review it’s historical data.
• As a user I can manually update the account’s balance or let Canutin get it’s balance by the sum of all it’s associated transactions.
• As a user I want to remove an account and all of it’s associated transactions so it’s balance no longer impacts my net worth calculations.
• As a user I’d like to be asked to type the name of the account in case I accidentally click the “Remove” button.
• As a user I’d like to be returned to the balance sheet after my edits have been saved.

Visual design

• View 1: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1688%3A1018
• View 2: https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1763%3A111

When a JSON file is chosen which has a different format than expected this error throws:

• Let's display an error inline with the file chooser: Couldn't detect a CanutinFile

REF #3

Currency fields need to format the number as the user types:

• For positive values: $123,456.23
• For negative values: -$123,456.23
• These fields should be styled with monospaceRegular.
• Set a max of 2 decimal points when formatting currency numbers.

This behavior needs to be applied to the following fields:

• Add by hand (#2):
  • Accounts: Balance
  • Assets: Cost and Value
• Import wizard (#3):
  • Other CSV: Account balance
• Transactions:
  • Add new (#13): Amount
  • Edit (#14): Amount
• Accounts:
  • Edit (#9): Balance
• Assets:
  • Edit (#11): Cost and Value

• When importing an Other CSV and there is an error in one of the fields after clicking Continue, we should scroll the user back to where the first error occurred so they can see it.

EDIT: useForm has a shouldFocusError rule that I think achieves the desired behavior.

Another alternative:

• Maybe we can render an anchor <a name="error"> and then point the browser to <path>/#error
• We can also add this CSS to smooth the scrolling:

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

• Date column, Description column, Amount column select fields should have a blank value by default.
• Account column and Category column select fields should be clearable.
• I chose the example Mint CSV (Export_from_Mint.com.csv) using the Other CSV flow, I then manually matched all of the columns and clicked Continue, only the accounts were imported but no transactions.
• The Match categories list should have a blank default value but with an Uncategorized placeholder value so the user knows what category will be auto-assigned.
• The fields below Choose source file should be reset every time the user chooses a new CSV file.
• Choosing a large CSV file freezes the app while it's reading it, we might need to revert back the Analyzing file... message, but only display it after the user selects a file and not when the input field is focused.
• [ ]
  REF #3

Acceptance criteria

• As a user I want to choose creating an account or an asset so I can properly organize my financials.

When creating an asset:

• As a user I want to specify a name so I can later reference it in my balance sheet.
• As a user I want to specify a type to keep my assets organized.
• As a user I want to specify a value so it’s reflected in my net worth and other calculations.
• As a user I want to be notified when the asset has been successfully created so I can confirm my changes were saved.
• As a user I want to be redirected to the Balance sheet so I can see the new total worth of my assets and accounts together.

When creating an account:

• As a user I want to specify a name and (optionally) an institution so I can later reference it in my balance sheet.
• As a user I want to specify a type to keep my accounts organized.
• As a user I want to have the option to specify the current balance so it’s reflected in my net worth and other calculations, or to let the associated transactions determine the current balance.
• As a user I want to be notified when the account has been successfully created so I can confirm my changes were saved.
• As a user I want to be redirected to the Import Wizard so I can immediately add transactions to the account I just created.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1692%3A1387

• Check the file uploaded by the user has at least the following shape:

{
  "accounts": [
    {
      "name": "Example",
      "balanceGroup": "cash",
      "accountType": "checking"
    }
  ]
}

• If the file doesn't match that basic structure, then show an error on the Choose file field:
  Couldn't interpret the chosen file

Description of the problem

If the vault file is moved, renamed or deleted during an active session and the user performs an action (i.e creating a new account or adding a transaction) the app fails silently in the background and the user has no idea that the action didn't take place.

Expected behavior

The user should be shown the Canutin setup view prompting them to create a new vault or re-locate an existing one.

Steps to reproduce (in development environment):

1. Run the app create new vault
2. Rename the vault file
3. Refresh the app CMD+R
4. App switches back to Canutin setup, from there create New vault
5. App switches to The big picture but the new vault is never created.
6. Refresh the app again CMD+R
7. App switches back to Canutin setup, from there locate the previously renamed Existing vault
8. Go to Add accounts or assets, create a new account and this warning appears in the Main process logs:

query: INSERT INTO "account_type"("id", "createdAt", "updatedAt", "name") VALUES (NULL, datetime('now'), datetime('now'), ?) -- PARAMETERS: ["checking"]
query failed: INSERT INTO "account_type"("id", "createdAt", "updatedAt", "name") VALUES (NULL, datetime('now'), datetime('now'), ?) -- PARAMETERS: ["checking"]
error: [Error: SQLITE_READONLY: attempt to write a readonly database] {
  errno: 8,
  code: 'SQLITE_READONLY'
}

• Add a way to match categories from CSVs and CanutinFiles with the categories created in the user's vault.
• Please provide a few examples with the mapped categories and add a TODO comment so I can add the rest.

REF #3

Acceptance criteria

• As a user I want to create and save a new vault in a folder of my choosing so I can begin using the app.
• As a user I don’t need to access any of the features of the app until I create an account or an asset so I don’t get confused on what needs to be done first.
• As a user I’d like to choose an existing vault so I can recover all of my data from a previous installation.
• As a user I’d like to be notified when my vault file can’t be accessed so that I can create a new vault or re-locate an existing one.
• As a user I’d like to immediately add accounts or assets after creating a new vault so I can unlock the rest of the app’s functionality.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1703%3A0

• transaction_category to transaction_category_group
• transaction_sub_category to transaction_category
  REF #3

Acceptance criteria

• As a user I want to see a breakdown of my expenses in two groups: needs and wants, so I can monitor my expenses during the month and make sure I don’t go over my targeted totals.
• As a user I want to see how much of my income was saved as a percentage of my monthly savings target so I can make sure I save enough and don’t overspend during the month.
• As a user I’d like to click on any of the budget targets so I can review the transactions that are accounted for on each target.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=1692%3A3460

Acceptance criteria

• As a user I want to see a history of the asset’s values so I can see it’s performance over time.
• As a user I want to select any period in the available history of values so I can see details like which week it was, the difference with the previous week and the value that week.
• As a user I’d like to see it’s associated transactions for this account so I can see what was the most recent activity.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=994%3A355

Acceptance criteria

• As a user I want to see a history of my balances so I can see my account’s performance over time.
• As a user I want to select any period in the available balance history so I can see details like which week it was, the difference with the previous week and the balance that week.
• As a user I’d like to see it’s associated transactions for this account so I can see what was the most recent activity.

Visual design

https://www.figma.com/file/ZnScVTFJFcQfKZDDbi35gTfn/Canutin?node-id=994%3A355

Examples of the problem:

• When adding a new asset of type Cryptocurrency, the balanceGroup should be 2, but it's stored as 0.
• When adding a new asset of type Vehicle, the balanceGroup should be 3, but it's stored as 0.

• When a large CSV is imported the app looks frozen to the user, to address this situation 2 things should happen:
  1. The app should display the progress bar Importing transactions from CSV in the status bar (for reference, look at the Figma file). We can detect the number of transactions, split them in 10 groups and add 10% to the progress bar every time a group of transactions is processed.
  2. While the import process is in effect the Continue button should become disabled, otherwise the user might be tempted to clicking the Continue button again assuming the first time it didn't work.

Large demo files

• Mint (5 accounts - 9k transactions).csv
• Personal Capital Mint (5 accounts - 9k transactions).csv
• CanutinFile (5 accounts - 9k transactions) TBD

REF #3

REF

• Update CANUTIN_FILE_DATE_FORMAT so it matches the same date format as the DB (yyyy-MM-dd).
• Update transaction dates in example.json
• Add new transactions with dates where the day/month values are between 01 and 12 to make sure that they are parsed correctly.
• Update and add new transactions (with the new dates as described above) on src/__tests__/data/canutinFile.json and test them.