Skip to content

Commit

Permalink
Add amount input test (#32)
Browse files Browse the repository at this point in the history
* Add test

* Add assert

* Add invalid input test

* Add test

* Fix async act with new react version

* act seems not necessary after upgrading react

* Rename file

* Remove testing on node 10

* Upgrade storybook

* Remove unused script
  • Loading branch information
jonaskello committed Jun 29, 2021
1 parent 29dd9c1 commit d547ea2
Show file tree
Hide file tree
Showing 10 changed files with 5,939 additions and 7,886 deletions.
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ cache:
notifications:
email: false
node_js:
- "14"
- "12"
- "10"
script:
- yarn verify
after_success:
Expand Down
25 changes: 16 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,19 @@
],
"devDependencies": {
"@babel/core": "^7.3.4",
"@storybook/react": "^5.0.1",
"@storybook/addon-actions": "^6.3.1",
"@storybook/addon-links": "^6.3.1",
"@storybook/react": "^6.3.1",
"@testing-library/dom": "^8.0.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.1.9",
"@types/assertion-error": "^1.0.30",
"@types/benchmark": "^1.0.31",
"@types/jest": "^26.0.15",
"@types/jest": "^26.0.23",
"@types/node": "^12.11.1",
"@types/pegjs": "0.0.28",
"@types/react-dom": "^17.0.8",
"@types/react-test-renderer": "^16.8.1",
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
Expand All @@ -25,7 +32,7 @@
"glob": "^7.1.3",
"http-server": "^0.9.0",
"husky": "^1.3.1",
"jest": "^26.6.0",
"jest": "^27.0.6",
"lerna": "^3.22.1",
"lint-staged": "^8.1.5",
"madge": "^3.0.1",
Expand All @@ -34,14 +41,13 @@
"npm-run-all": "^4.1.5",
"pegjs": "0.9.0",
"prettier": "^2.1.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "^2.1.8",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-test-renderer": "^16.6.1",
"shelljs": "^0.8.3",
"ts-jest": "^26.4.1",
"ts-jest": "^27.0.3",
"ts-node": "^4.1.0",
"typescript": "^4.0.3",
"typescript": "^4.3.4",
"uglify-js": "^3.4.9",
"webpack": "^4.29.6"
},
Expand All @@ -55,11 +61,12 @@
"clean": "tsc -b packages --clean && rm -rf packages/*/lib && rm -rf packages/*/test/lib && rm -rf packages/*/benchmark/lib && rm -rf packages/*/coverage",
"clean-node-modules": "rm -rf node_modules && rm -rf packages/*/node_modules",
"build": "tsc -b packages && yarn build:parser",
"rebuild": "yarn clean && tsc -b packages && yarn build:parser",
"build-prod": "run-s clean build",
"verify": "yarn lint && yarn build && yarn test-coverage-all",
"generate-parser": "pegjs packages/property/src/property-filter-ast/pegjs/parser.pegjs packages/property/src/property-filter-ast/pegjs/generated-parser.js",
"build:parser": "mkdirp packages/property/lib/property-filter-ast/pegjs/ && cp packages/property/src/property-filter-ast/pegjs/generated-parser.* packages/property/lib/property-filter-ast/pegjs/",
"storybook": "yarn build && run-p -l start storybook:start",
"storybook": "yarn build && yarn storybook:start",
"storybook:start": "start-storybook -p 6006 --ci",
"build-storybook": "build-storybook",
"benchmark": "yarn build && run-s benchmark:*",
Expand Down
14 changes: 5 additions & 9 deletions packages/_stories/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,17 @@
"@promaster-sdk/property-filter-pretty": "^5.0.2",
"@promaster-sdk/react-properties-selector": "^9.0.0",
"@promaster-sdk/react-property-selectors": "^9.1.0",
"@storybook/addon-actions": "^5.0.1",
"@storybook/addon-links": "^5.0.1",
"csjs": "1.0.6",
"insert-css": "^2.0.0",
"ramda": "^0.25.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^5.2.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"styled-components": "^5.3.0",
"react-is": "^16.8.0",
"uom": "^6.0.0"
},
"devDependencies": {
"@types/insert-css": "^2.0.0",
"@types/storybook__addon-actions": "^3.4.2",
"@types/storybook__addon-links": "^3.3.4",
"@types/storybook__react": "^4.0.1",
"@types/styled-components": "^5.1.4"
"@types/styled-components": "^5.1.10"
}
}
2 changes: 1 addition & 1 deletion packages/react-properties-selector/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@promaster-sdk/property": "^5.0.2",
"@promaster-sdk/property-filter-pretty": "^5.0.2",
"ramda": "^0.25.0",
"react": "^16.8.4",
"react": "^16.14.0",
"uom": "^6.0.0"
},
"devDependencies": {
Expand Down
2 changes: 2 additions & 0 deletions packages/react-property-selectors/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ module.exports = {
preset: "ts-jest",
testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
collectCoverageFrom: ["**/src/**/!(*.test).{ts,tsx}", "!(**/__tests__/**)"],
testEnvironment: "jsdom",
setupFilesAfterEnv: ["<rootDir>/src/__tests__/jest-setup.ts"],
};
4 changes: 2 additions & 2 deletions packages/react-property-selectors/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@
"uom": "^6.0.0"
},
"peerDependencies": {
"react": ">=16.8.0"
"react": ">=16.14.0"
},
"devDependencies": {
"@types/react": "^16.8.8",
"react": "^16.8.4"
"react": "^16.14.0"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, { useCallback, useState } from "react";
import { Amount, Unit } from "uom";
import { getDefaultAmountInputBoxStyle, useAmountInputBox } from "../../amount";

interface State {
readonly value: Amount.Amount<unknown>;
}

export function AmountInputBoxTestComponent({
onValueChange,
}: {
readonly onValueChange: (a: Amount.Amount<unknown>) => void;
}): React.ReactElement<{}> {
const value: Amount.Amount<unknown> | undefined = Amount.create(10, Unit.One);

const [state, setState] = useState<State>({
value,
});

const onValueChangeInternal = useCallback(
(v) => {
setState({
...state,
value: v,
});
onValueChange(v);
},
[state, setState]
);

const amountInputBox = useAmountInputBox({
value: state.value,
inputUnit: Unit.One,
inputDecimalCount: 2,
notNumericMessage: "notNumericMessage",
isRequiredMessage: "isRequiredMessage",
readOnly: false,
debounceTime: 100,
errorMessage: "",
onValueChange: onValueChangeInternal,
});

return (
<div>
<div>AmountInputBox:</div>
<div>Value: {Amount.toString(state.value)}</div>
<input
data-testid="input"
type="text"
{...amountInputBox.getInputProps()}
style={getDefaultAmountInputBoxStyle(amountInputBox)}
/>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
import { Amount, Unit } from "uom";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { AmountInputBoxTestComponent } from "./amount-input-box-test-component";

describe("Test <AmountInputBoxTestComponent />", () => {
it("should call onValueChange after typing a valid value", async () => {
const onValueChange = jest.fn();
render(<AmountInputBoxTestComponent onValueChange={onValueChange} />);
const input = screen.getByTestId("input");
userEvent.type(input, "1");
expect(input).toHaveValue("101");
const a = Amount.create(101, Unit.One);
expect(onValueChange).not.toHaveBeenCalled(); // It won't be called immediately
await waitFor(() => expect(onValueChange).toHaveBeenCalledWith(a), { timeout: 100 }); // But will get called within 100ms
});

it("should not call onValueChange after typing a invalid value", async () => {
const onValueChange = jest.fn();
render(<AmountInputBoxTestComponent onValueChange={onValueChange} />);
const input = screen.getByTestId("input");
userEvent.type(input, "A");
expect(input).toHaveValue("10A");
await waitFor(() => expect(onValueChange).not.toHaveBeenCalled(), { timeout: 100 });
});

it("should not call onValueChange after changing an invalid value back to valid", async () => {
const onValueChange = jest.fn();
render(<AmountInputBoxTestComponent onValueChange={onValueChange} />);
const input = screen.getByTestId("input");
userEvent.type(input, "A{backspace}1");
expect(input).toHaveValue("101");
const a = Amount.create(101, Unit.One);
expect(onValueChange).not.toHaveBeenCalled(); // It won't be called immediately
await waitFor(() => expect(onValueChange).toHaveBeenCalledWith(a), { timeout: 100 });
});
});
2 changes: 2 additions & 0 deletions packages/react-property-selectors/src/__tests__/jest-setup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/* eslint-disable */
import "@testing-library/jest-dom";
Loading

0 comments on commit d547ea2

Please sign in to comment.