11import React from "react" ;
22import { render , fireEvent } from "@testing-library/react" ;
33import { MessageForm } from "../../components/MessageForm" ;
4- import { USER } from "../../config" ;
4+ import { USER , MAX_MESSAGE_TEXT_LENGTH } from "../../config" ;
55
66describe ( "MessageForm" , ( ) => {
77test ( "initiates text as empty" , ( ) => {
@@ -17,4 +17,21 @@ describe("MessageForm", () => {
1717fireEvent . change ( input , { target :{ value :text } } ) ;
1818expect ( input . value ) . toBe ( text ) ;
1919} ) ;
20+
21+ test ( "initiates text count as 0" , ( ) => {
22+ const utils = render ( < MessageForm user = { USER } /> ) ;
23+ const textCount = utils . getByTitle ( "text-count" ) ;
24+ expect ( textCount . textContent . trim ( ) ) . toBe ( `0 /${ MAX_MESSAGE_TEXT_LENGTH } ) ;
25+ } ) ;
26+
27+ test ( "updates text count with user typing" , ( ) => {
28+ const text = "55555" ;
29+ const utils = render ( < MessageForm user = { USER } /> ) ;
30+ const input = utils . getByLabelText ( "message-form" ) ;
31+ fireEvent . change ( input , { target :{ value :text } } ) ;
32+ const textCount = utils . getByTitle ( "text-count" ) ;
33+ expect ( textCount . textContent . trim ( ) ) . toBe (
34+ `${ text . length } ${ MAX_MESSAGE_TEXT_LENGTH }
35+ ) ;
36+ } ) ;
2037} ) ;