Commit71deafa

committed

setup: useText hook refactor

1 parentb557f1f commit71deafaCopy full SHA for 71deafa

File tree

+38

-1

lines changed

src
- components/MessageForm
  - index.js
- tests/components
  - MessageForm.test.js

+38

-1

lines changed

Lines changed: 9 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,15 @@ import { Card } from "../Card";`
`6`	`6`	`import{MAX_MESSAGE_TEXT_LENGTH}from"../../config";`
`7`	`7`	`import"./styles.css";`
`8`	`8`
	`9`	`+exportconstuseText=initialText=>{`
	`10`	`+// TODO: extract useState logic out of MessageForm`
	`11`	`+`
	`12`	`+return{`
	`13`	`+ text,`
	`14`	`+ handleChange`
	`15`	`+};`
	`16`	`+};`
	`17`	`+`
`9`	`18`	`exportconstMessageForm=({ user})=>{`
`10`	`19`	`const[text,setText]=React.useState("");`
`11`	`20`

Lines changed: 29 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`importReactfrom"react";`
`2`	`2`	`import{render,fireEvent}from"@testing-library/react";`
`3`		`-import{MessageForm}from"../../components/MessageForm";`
	`3`	`+import{renderHook,act}from"@testing-library/react-hooks";`
	`4`	`+import{MessageForm,useText}from"../../components/MessageForm";`
`4`	`5`	`import{USER,MAX_MESSAGE_TEXT_LENGTH}from"../../config";`
`5`	`6`
`6`	`7`	`describe("MessageForm",()=>{`
`@@ -50,3 +51,30 @@ describe("MessageForm", () => {`
`50`	`51`	`expect(button.disabled).toBe(false);`
`51`	`52`	`});`
`52`	`53`	`});`
	`54`	`+`
	`55`	`+describe("useText",()=>{`
	`56`	`+test("useText hook should initiate text to empty string",()=>{`
	`57`	`+const{ result}=renderHook(useText);`
	`58`	`+expect(result.current.text).toBe("");`
	`59`	`+});`
	`60`	`+`
	`61`	`+test("useText hook should return a handleChange function",()=>{`
	`62`	`+const{ result}=renderHook(useText);`
	`63`	`+expect(result.current.handleChange).toBeDefined();`
	`64`	`+});`
	`65`	`+`
	`66`	`+test("useText hook allow updates of text",()=>{`
	`67`	`+const{ result}=renderHook(useText);`
	`68`	`+`
	`69`	`+act(()=>{`
	`70`	`+constevent={`
	`71`	`+preventDefault(){},`
	`72`	`+target:{`
	`73`	`+value:"10 letters"`
	`74`	`+}`
	`75`	`+};`
	`76`	`+result.current.handleChange(event);`
	`77`	`+});`
	`78`	`+expect(result.current.text).toBe("10 letters");`
	`79`	`+});`
	`80`	`+});`

Comments

(0)