diff --git a/package-lock.json b/package-lock.json
index 45c49ab..3107522 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1122,15 +1122,6 @@
"@babel/plugin-transform-react-pure-annotations": "^7.12.1"
}
},
- "@babel/preset-typescript": {
- "version": "7.12.1",
- "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz",
- "integrity": "sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==",
- "requires": {
- "@babel/helper-plugin-utils": "^7.10.4",
- "@babel/plugin-transform-typescript": "^7.12.1"
- }
- },
"@babel/runtime": {
"version": "7.13.10",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
@@ -3263,6 +3254,15 @@
"@babel/plugin-transform-react-pure-annotations": "^7.12.1"
}
},
+ "@babel/preset-typescript": {
+ "version": "7.12.1",
+ "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz",
+ "integrity": "sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==",
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.10.4",
+ "@babel/plugin-transform-typescript": "^7.12.1"
+ }
+ },
"@babel/runtime": {
"version": "7.12.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
@@ -7823,38 +7823,6 @@
"istanbul-lib-report": "^3.0.0"
}
},
- "jest": {
- "version": "26.6.0",
- "resolved": "https://registry.npmjs.org/jest/-/jest-26.6.0.tgz",
- "integrity": "sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==",
- "requires": {
- "@jest/core": "^26.6.0",
- "import-local": "^3.0.2",
- "jest-cli": "^26.6.0"
- },
- "dependencies": {
- "jest-cli": {
- "version": "26.6.3",
- "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
- "integrity": "sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==",
- "requires": {
- "@jest/core": "^26.6.3",
- "@jest/test-result": "^26.6.2",
- "@jest/types": "^26.6.2",
- "chalk": "^4.0.0",
- "exit": "^0.1.2",
- "graceful-fs": "^4.2.4",
- "import-local": "^3.0.2",
- "is-ci": "^2.0.0",
- "jest-config": "^26.6.3",
- "jest-util": "^26.6.2",
- "jest-validate": "^26.6.2",
- "prompts": "^2.0.1",
- "yargs": "^15.4.1"
- }
- }
- }
- },
"jest-changed-files": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz",
@@ -11697,6 +11665,40 @@
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
+ },
+ "dependencies": {
+ "jest": {
+ "version": "26.6.0",
+ "resolved": "https://registry.npmjs.org/jest/-/jest-26.6.0.tgz",
+ "integrity": "sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==",
+ "requires": {
+ "@jest/core": "^26.6.0",
+ "import-local": "^3.0.2",
+ "jest-cli": "^26.6.0"
+ },
+ "dependencies": {
+ "jest-cli": {
+ "version": "26.6.3",
+ "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
+ "integrity": "sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==",
+ "requires": {
+ "@jest/core": "^26.6.3",
+ "@jest/test-result": "^26.6.2",
+ "@jest/types": "^26.6.2",
+ "chalk": "^4.0.0",
+ "exit": "^0.1.2",
+ "graceful-fs": "^4.2.4",
+ "import-local": "^3.0.2",
+ "is-ci": "^2.0.0",
+ "jest-config": "^26.6.3",
+ "jest-util": "^26.6.2",
+ "jest-validate": "^26.6.2",
+ "prompts": "^2.0.1",
+ "yargs": "^15.4.1"
+ }
+ }
+ }
+ }
}
},
"react-transition-group": {
@@ -13961,8 +13963,7 @@
"typescript": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
- "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
- "dev": true
+ "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw=="
},
"unbox-primitive": {
"version": "1.0.1",
diff --git a/package.json b/package.json
index cf7feba..d829200 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,20 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
+ "typescript": "^4.2.3",
"web-vitals": "^1.0.1"
},
+ "jest": {
+ "transform": {
+ "^.+\\.(js|jsx)$": "babel-jest"
+ }
+ },
"scripts": {
"start": "react-scripts start",
"build": "tsc",
"test": "react-scripts test",
- "eject": "react-scripts eject"
+ "eject": "react-scripts eject",
+ "test:watch": "jest --watch"
},
"eslintConfig": {
"extends": [
@@ -42,7 +49,6 @@
"@types/lodash": "^4.14.168",
"@types/lodash.debounce": "^4.0.6",
"@types/react": "^17.0.3",
- "@types/react-dom": "^17.0.3",
- "typescript": "^4.2.3"
+ "@types/react-dom": "^17.0.3"
}
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 0000000..ea6713f
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import App from "./App";
+
+describe("components", () => {
+ test("renders UserInput", () => {
+ const { getByText } = render();
+ const userInputHeadingText = getByText(/User realtime input/i);
+ expect(userInputHeadingText).toBeInTheDocument();
+ });
+ test("renders DbLike", async () => {
+ const { getByText } = render();
+ const userInputHeadingText = getByText(/DB like saved output/i);
+ expect(userInputHeadingText).toBeInTheDocument();
+ });
+});
diff --git a/src/App.tsx b/src/App.tsx
index 4878d37..2856812 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,7 @@ function App() {
-
+
diff --git a/src/DbLike.tsx b/src/DbLike.tsx
index c8580b1..b5e5aba 100644
--- a/src/DbLike.tsx
+++ b/src/DbLike.tsx
@@ -11,7 +11,9 @@ const DbLike = (props: { debouncedValue: string }) => {
height="100%"
>
DB like saved output
- {props.debouncedValue}
+
+ {props.debouncedValue}
+
);
};
diff --git a/src/UserInput.tsx b/src/UserInput.tsx
index 92aaf9a..f5255ab 100644
--- a/src/UserInput.tsx
+++ b/src/UserInput.tsx
@@ -1,8 +1,8 @@
import { useCallback } from "react";
import debounce from "lodash.debounce";
-import { TextField, Box } from "@material-ui/core";
+import { TextField, Box, FormControl } from "@material-ui/core";
-const UserInput = (props: { setSavedValue: Function }) => {
+const UserInput = (props: { setSavedValue: Function; value: any }) => {
const debouncedSave = useCallback(
debounce((newValue: any) => props.setSavedValue(newValue), 1000),
[]
@@ -16,14 +16,18 @@ const UserInput = (props: { setSavedValue: Function }) => {
return (
User realtime input
- saveMessage(e)}
- />
+
+ saveMessage(e)}
+ data-testid="user-input"
+ defaultValue={props.value}
+ />
+
);
};
diff --git a/src/tests/DbLike.test.tsx b/src/tests/DbLike.test.tsx
new file mode 100644
index 0000000..4670415
--- /dev/null
+++ b/src/tests/DbLike.test.tsx
@@ -0,0 +1,41 @@
+import {
+ render,
+ fireEvent,
+ screen,
+ waitFor,
+ getByText,
+} from "@testing-library/react";
+
+import UserInput from "../UserInput";
+import DbLike from "../DbLike";
+
+const userInputDefaultProps = {
+ setSavedValue: jest.fn(),
+ value: "test",
+};
+
+const dbLikeDefaultProps = {
+ debouncedValue: "",
+};
+
+beforeEach(() => render());
+
+describe("DB like output", () => {
+ test("renders do like heading", () => {
+ const dbLikeHeading = screen.getByText(/DB like saved output/i);
+ expect(dbLikeHeading).toBeInTheDocument();
+ });
+
+ test("should change one second after user typed", async () => {
+ const { getByRole } = render();
+ const textArea = getByRole("textbox") as HTMLInputElement;
+ fireEvent.change(textArea, { target: { value: "hello" } });
+ const { container } = render();
+ await waitFor(
+ () => expect(getByText(container, "hello")).toBeInTheDocument(),
+ {
+ timeout: 2000,
+ }
+ );
+ });
+});
diff --git a/src/tests/UserInput.test.tsx b/src/tests/UserInput.test.tsx
new file mode 100644
index 0000000..4e6cc49
--- /dev/null
+++ b/src/tests/UserInput.test.tsx
@@ -0,0 +1,23 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+
+import UserInput from "../UserInput";
+
+const defaultProps = {
+ setSavedValue: jest.fn(),
+ value: "test",
+};
+
+beforeEach(() => render());
+
+describe("user input", () => {
+ test("renders user input heading", () => {
+ const userInputHeading = screen.getByText(/User realtime input/i);
+ expect(userInputHeading).toBeInTheDocument();
+ });
+
+ test("should be able to type", async () => {
+ const textArea = screen.getByRole("textbox") as HTMLInputElement;
+ fireEvent.change(textArea, { target: { value: "hello" } });
+ expect(textArea.value).toBe("hello");
+ });
+});
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
deleted file mode 100644
index d65604a..0000000
--- a/src/types/images.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare module '*.jpg';
-declare module '*.jpeg';
\ No newline at end of file