[{"data":1,"prerenderedAt":2868},["ShallowReactive",2],{"blog-article-/blog/building-and-testing-counter-component":3,"blog-surround-/blog/building-and-testing-counter-component":2859},{"id":4,"title":5,"body":6,"canonical":2844,"date":2845,"description":2846,"extension":2847,"featured":2848,"image":2849,"meta":2850,"navigation":456,"ogImage":2844,"path":2851,"provider":2852,"published":2848,"seo":2853,"stem":2854,"tags":2855,"url":2844,"__hash__":2858},"blog/blog/building-and-testing-counter-component.md","Building and Testing a Counter Component",{"type":7,"value":8,"toc":2826},"minimark",[9,33,38,44,49,61,130,134,137,350,354,383,402,412,649,662,666,697,713,717,780,784,799,855,859,873,911,915,918,1541,1545,1548,1561,1751,1755,1758,1783,1835,1838,1909,1930,2005,2021,2140,2143,2180,2186,2249,2258,2326,2329,2388,2391,2395,2764,2768,2771,2777,2780,2784,2822],[10,11,12,13,20,21,26,27,32],"p",{},"We want to build and test a ",[14,15,19],"a",{"href":16,"rel":17},"https://bit.dev/learn-bit-react/ecommerce/ui/product/counter/~code/counter.tsx",[18],"nofollow","counter component"," built with React and TypeScript. So where do we start? First of all looking at the component I can see it is made up of 2 ",[14,22,25],{"href":23,"rel":24},"https://bit.dev/learn-bit-react/base-ui/ui/button",[18],"button components"," that increase and decrease the count and an ",[14,28,31],{"href":29,"rel":30},"https://bit.dev/learn-bit-react/base-ui/ui/forms/input",[18],"input component"," that shows the value of the count.",[34,35,37],"h2",{"id":36},"building-a-counter-component","Building a Counter Component",[10,39,40],{},[41,42],"img",{"alt":19,"src":43},"https://res.cloudinary.com/debsobrien/image/upload/v1642010879/debbie.codes/blog/2022/counter_2x_ma1ik6",[45,46,48],"h3",{"id":47},"importing-our-components","Importing our Components",[10,50,51,52,56,57,60],{},"As we already have a ",[14,53,55],{"href":23,"rel":54},[18],"button component"," and ",[14,58,31],{"href":29,"rel":59},[18]," already created I will just import them as well as import React and useState and the styles.",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-js shiki shiki-themes github-light github-dark","import React, { useState } from 'react'\nimport { Button } from '@learn-bit-react/base-ui.ui.button'\nimport { Input } from '@learn-bit-react/base-ui.ui.forms.input'\nimport styles from './counter.module.scss'\n","js","",[69,70,71,91,104,117],"code",{"__ignoreMap":67},[72,73,76,80,84,87],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"szBVR","import",[72,81,83],{"class":82},"sVt8B"," React, { useState } ",[72,85,86],{"class":78},"from",[72,88,90],{"class":89},"sZZnC"," 'react'\n",[72,92,94,96,99,101],{"class":74,"line":93},2,[72,95,79],{"class":78},[72,97,98],{"class":82}," { Button } ",[72,100,86],{"class":78},[72,102,103],{"class":89}," '@learn-bit-react/base-ui.ui.button'\n",[72,105,107,109,112,114],{"class":74,"line":106},3,[72,108,79],{"class":78},[72,110,111],{"class":82}," { Input } ",[72,113,86],{"class":78},[72,115,116],{"class":89}," '@learn-bit-react/base-ui.ui.forms.input'\n",[72,118,120,122,125,127],{"class":74,"line":119},4,[72,121,79],{"class":78},[72,123,124],{"class":82}," styles ",[72,126,86],{"class":78},[72,128,129],{"class":89}," './counter.module.scss'\n",[45,131,133],{"id":132},"creating-our-types","Creating our Types",[10,135,136],{},"The next thing we need to define is our types for our props. We want the consumer to be able to start the count at any number as well as end it at any number. It might be useful to have a count starting at zero for scoring or 1 for purchasing a product. We also want the consumer to be able to increment and decrement by a given amount such as 1 or 5. And finally we want to have a function that is called when the count is changed.",[62,138,142],{"className":139,"code":140,"language":141,"meta":67,"style":67},"language-jsx shiki shiki-themes github-light github-dark","export type CounterProps = {\n  /**\n   * min Value of counter\n   */\n  min?: number,\n  /**\n   * max Value\n   */\n  max?: number,\n  /**\n   * increment value\n   */\n  increment?: number,\n  /**\n   * decrement value\n   */\n  decrement?: number,\n  /**\n   * a function that registers the count when changed\n   */\n  onCountChange: (count: number) => void\n} & React.HTMLAttributes\u003CHTMLDivElement>\n","jsx",[69,143,144,162,168,173,178,195,200,206,211,223,228,234,239,251,256,262,267,279,284,290,295,323],{"__ignoreMap":67},[72,145,146,149,152,156,159],{"class":74,"line":75},[72,147,148],{"class":78},"export",[72,150,151],{"class":78}," type",[72,153,155],{"class":154},"sScJk"," CounterProps",[72,157,158],{"class":78}," =",[72,160,161],{"class":82}," {\n",[72,163,164],{"class":74,"line":93},[72,165,167],{"class":166},"sJ8bj","  /**\n",[72,169,170],{"class":74,"line":106},[72,171,172],{"class":166},"   * min Value of counter\n",[72,174,175],{"class":74,"line":119},[72,176,177],{"class":166},"   */\n",[72,179,181,185,188,192],{"class":74,"line":180},5,[72,182,184],{"class":183},"s4XuR","  min",[72,186,187],{"class":78},"?:",[72,189,191],{"class":190},"sj4cs"," number",[72,193,194],{"class":82},",\n",[72,196,198],{"class":74,"line":197},6,[72,199,167],{"class":166},[72,201,203],{"class":74,"line":202},7,[72,204,205],{"class":166},"   * max Value\n",[72,207,209],{"class":74,"line":208},8,[72,210,177],{"class":166},[72,212,214,217,219,221],{"class":74,"line":213},9,[72,215,216],{"class":183},"  max",[72,218,187],{"class":78},[72,220,191],{"class":190},[72,222,194],{"class":82},[72,224,226],{"class":74,"line":225},10,[72,227,167],{"class":166},[72,229,231],{"class":74,"line":230},11,[72,232,233],{"class":166},"   * increment value\n",[72,235,237],{"class":74,"line":236},12,[72,238,177],{"class":166},[72,240,242,245,247,249],{"class":74,"line":241},13,[72,243,244],{"class":183},"  increment",[72,246,187],{"class":78},[72,248,191],{"class":190},[72,250,194],{"class":82},[72,252,254],{"class":74,"line":253},14,[72,255,167],{"class":166},[72,257,259],{"class":74,"line":258},15,[72,260,261],{"class":166},"   * decrement value\n",[72,263,265],{"class":74,"line":264},16,[72,266,177],{"class":166},[72,268,270,273,275,277],{"class":74,"line":269},17,[72,271,272],{"class":183},"  decrement",[72,274,187],{"class":78},[72,276,191],{"class":190},[72,278,194],{"class":82},[72,280,282],{"class":74,"line":281},18,[72,283,167],{"class":166},[72,285,287],{"class":74,"line":286},19,[72,288,289],{"class":166},"   * a function that registers the count when changed\n",[72,291,293],{"class":74,"line":292},20,[72,294,177],{"class":166},[72,296,298,301,304,307,310,312,314,317,320],{"class":74,"line":297},21,[72,299,300],{"class":154},"  onCountChange",[72,302,303],{"class":78},":",[72,305,306],{"class":82}," (",[72,308,309],{"class":183},"count",[72,311,303],{"class":78},[72,313,191],{"class":190},[72,315,316],{"class":82},") ",[72,318,319],{"class":78},"=>",[72,321,322],{"class":190}," void\n",[72,324,326,329,332,335,338,341,344,347],{"class":74,"line":325},22,[72,327,328],{"class":82},"} ",[72,330,331],{"class":78},"&",[72,333,334],{"class":154}," React",[72,336,337],{"class":82},".",[72,339,340],{"class":154},"HTMLAttributes",[72,342,343],{"class":82},"\u003C",[72,345,346],{"class":154},"HTMLDivElement",[72,348,349],{"class":82},">\n",[45,351,353],{"id":352},"creating-our-component","Creating our Component",[10,355,356,357,360,361,360,364,56,367,370,371,374,375,378,379,382],{},"Next we need to create our component which we call Counter and pass in the props with some default values for the ",[69,358,359],{},"min",", ",[69,362,363],{},"max",[69,365,366],{},"increment",[69,368,369],{},"decrement",". We then add in the components we need. The Button component has a prop of ",[69,372,373],{},"counter"," which will give us the styling we need for a counter button. It also accepts a prop of ",[69,376,377],{},"onClick"," which will be called when the button is clicked. We can give this the value of ",[69,380,381],{},"handleClickSubtract"," and later we can write the function for it to decrease the count.",[10,384,385,386,56,388,390,391,393,394,397,398,401],{},"Next is our input component which will be of type Number and here we pass in the the ",[69,387,359],{},[69,389,363],{}," props as well as the value equal to ",[69,392,309],{}," and an ",[69,395,396],{},"onChange"," function that will be called when the value is changed. We will need to create the function for ",[69,399,400],{},"handleClick"," later.",[10,403,404,405,407,408,411],{},"And finally we add our next button component which will be responsible for decreasing the count. This accepts the prop of counter for styling and an ",[69,406,377],{}," with the value of ",[69,409,410],{},"handleClickAdd"," which we will create later.",[62,413,415],{"className":139,"code":414,"language":141,"meta":67,"style":67},"...\nexport function Counter({\n  ...\n}: CounterProps) {\n\n  return (\n    \u003Cdiv className={styles.counter}>\n      \u003CButton counter onClick={handleClickSubtract}>\n        -\n      \u003C/Button>\n      \u003CInput\n        className={styles.counterInput}\n        type=\"number\"\n        min={min}\n        max={max}\n        value={count}\n        width=\"80px\"\n        onChange={handleClick}\n      />\n      \u003CButton counter onClick={handleClickAdd}>\n        +\n      \u003C/Button>\n    \u003C/div>\n  )\n}\n",[69,416,417,422,435,440,452,458,466,484,503,508,517,524,534,544,554,564,574,584,594,599,614,619,627,637,643],{"__ignoreMap":67},[72,418,419],{"class":74,"line":75},[72,420,421],{"class":78},"...\n",[72,423,424,426,429,432],{"class":74,"line":93},[72,425,148],{"class":78},[72,427,428],{"class":78}," function",[72,430,431],{"class":154}," Counter",[72,433,434],{"class":82},"({\n",[72,436,437],{"class":74,"line":106},[72,438,439],{"class":82},"  ...\n",[72,441,442,445,447,449],{"class":74,"line":119},[72,443,444],{"class":82},"}",[72,446,303],{"class":78},[72,448,155],{"class":154},[72,450,451],{"class":82},") {\n",[72,453,454],{"class":74,"line":180},[72,455,457],{"emptyLinePlaceholder":456},true,"\n",[72,459,460,463],{"class":74,"line":197},[72,461,462],{"class":78},"  return",[72,464,465],{"class":82}," (\n",[72,467,468,471,475,478,481],{"class":74,"line":202},[72,469,470],{"class":82},"    \u003C",[72,472,474],{"class":473},"s9eBZ","div",[72,476,477],{"class":154}," className",[72,479,480],{"class":78},"=",[72,482,483],{"class":82},"{styles.counter}>\n",[72,485,486,489,492,495,498,500],{"class":74,"line":208},[72,487,488],{"class":82},"      \u003C",[72,490,491],{"class":190},"Button",[72,493,494],{"class":154}," counter",[72,496,497],{"class":154}," onClick",[72,499,480],{"class":78},[72,501,502],{"class":82},"{handleClickSubtract}>\n",[72,504,505],{"class":74,"line":213},[72,506,507],{"class":82},"        -\n",[72,509,510,513,515],{"class":74,"line":225},[72,511,512],{"class":82},"      \u003C/",[72,514,491],{"class":190},[72,516,349],{"class":82},[72,518,519,521],{"class":74,"line":230},[72,520,488],{"class":82},[72,522,523],{"class":190},"Input\n",[72,525,526,529,531],{"class":74,"line":236},[72,527,528],{"class":154},"        className",[72,530,480],{"class":78},[72,532,533],{"class":82},"{styles.counterInput}\n",[72,535,536,539,541],{"class":74,"line":241},[72,537,538],{"class":154},"        type",[72,540,480],{"class":78},[72,542,543],{"class":89},"\"number\"\n",[72,545,546,549,551],{"class":74,"line":253},[72,547,548],{"class":154},"        min",[72,550,480],{"class":78},[72,552,553],{"class":82},"{min}\n",[72,555,556,559,561],{"class":74,"line":258},[72,557,558],{"class":154},"        max",[72,560,480],{"class":78},[72,562,563],{"class":82},"{max}\n",[72,565,566,569,571],{"class":74,"line":264},[72,567,568],{"class":154},"        value",[72,570,480],{"class":78},[72,572,573],{"class":82},"{count}\n",[72,575,576,579,581],{"class":74,"line":269},[72,577,578],{"class":154},"        width",[72,580,480],{"class":78},[72,582,583],{"class":89},"\"80px\"\n",[72,585,586,589,591],{"class":74,"line":281},[72,587,588],{"class":154},"        onChange",[72,590,480],{"class":78},[72,592,593],{"class":82},"{handleClick}\n",[72,595,596],{"class":74,"line":286},[72,597,598],{"class":82},"      />\n",[72,600,601,603,605,607,609,611],{"class":74,"line":292},[72,602,488],{"class":82},[72,604,491],{"class":190},[72,606,494],{"class":154},[72,608,497],{"class":154},[72,610,480],{"class":78},[72,612,613],{"class":82},"{handleClickAdd}>\n",[72,615,616],{"class":74,"line":297},[72,617,618],{"class":82},"        +\n",[72,620,621,623,625],{"class":74,"line":325},[72,622,512],{"class":82},[72,624,491],{"class":190},[72,626,349],{"class":82},[72,628,630,633,635],{"class":74,"line":629},23,[72,631,632],{"class":82},"    \u003C/",[72,634,474],{"class":473},[72,636,349],{"class":82},[72,638,640],{"class":74,"line":639},24,[72,641,642],{"class":82},"  )\n",[72,644,646],{"class":74,"line":645},25,[72,647,648],{"class":82},"}\n",[10,650,651,652,655,656,658,659,661],{},"Now that we have our component setup visually we need to add functionality to it. We will use the ",[69,653,654],{},"useState"," hook to create a state variable called ",[69,657,309],{}," and set the default to be value of our ",[69,660,359],{}," prop.",[45,663,665],{"id":664},"using-state","Using State",[62,667,669],{"className":64,"code":668,"language":66,"meta":67,"style":67},"const [count, setCount] = useState(min)\n",[69,670,671],{"__ignoreMap":67},[72,672,673,676,679,681,683,686,689,691,694],{"class":74,"line":75},[72,674,675],{"class":78},"const",[72,677,678],{"class":82}," [",[72,680,309],{"class":190},[72,682,360],{"class":82},[72,684,685],{"class":190},"setCount",[72,687,688],{"class":82},"] ",[72,690,480],{"class":78},[72,692,693],{"class":154}," useState",[72,695,696],{"class":82},"(min)\n",[10,698,699,700,702,703,705,706,708,709,712],{},"We will also create a function called ",[69,701,410],{}," function that will check to see if the count value is less the the ",[69,704,363],{}," value and if it is then we will increase the count by the ",[69,707,366],{}," value. It will also call the ",[69,710,711],{},"onCountChange"," function and increment the count. This function is what will let us pass the count value to another component if needed.",[45,714,716],{"id":715},"add-function","Add Function",[62,718,720],{"className":64,"code":719,"language":66,"meta":67,"style":67},"function handleClickAdd() {\n  if (count \u003C max) {\n    setCount(count + increment)\n    onCountChange(count + increment)\n  }\n}\n",[69,721,722,733,746,760,771,776],{"__ignoreMap":67},[72,723,724,727,730],{"class":74,"line":75},[72,725,726],{"class":78},"function",[72,728,729],{"class":154}," handleClickAdd",[72,731,732],{"class":82},"() {\n",[72,734,735,738,741,743],{"class":74,"line":93},[72,736,737],{"class":78},"  if",[72,739,740],{"class":82}," (count ",[72,742,343],{"class":78},[72,744,745],{"class":82}," max) {\n",[72,747,748,751,754,757],{"class":74,"line":106},[72,749,750],{"class":154},"    setCount",[72,752,753],{"class":82},"(count ",[72,755,756],{"class":78},"+",[72,758,759],{"class":82}," increment)\n",[72,761,762,765,767,769],{"class":74,"line":119},[72,763,764],{"class":154},"    onCountChange",[72,766,753],{"class":82},[72,768,756],{"class":78},[72,770,759],{"class":82},[72,772,773],{"class":74,"line":180},[72,774,775],{"class":82},"  }\n",[72,777,778],{"class":74,"line":197},[72,779,648],{"class":82},[45,781,783],{"id":782},"subtract-function","Subtract Function",[10,785,786,787,789,790,792,793,795,796,798],{},"We then need to do the same for the ",[69,788,381],{}," function and if the count is greater than the ",[69,791,359],{}," value then we will decrease the count by the ",[69,794,369],{}," value as well as call the ",[69,797,711],{}," function.",[62,800,802],{"className":64,"code":801,"language":66,"meta":67,"style":67},"function handleClickSubtract() {\n  if (count > min) {\n    setCount(count - decrement)\n    onCountChange(count - decrement)\n  }\n}\n",[69,803,804,813,825,837,847,851],{"__ignoreMap":67},[72,805,806,808,811],{"class":74,"line":75},[72,807,726],{"class":78},[72,809,810],{"class":154}," handleClickSubtract",[72,812,732],{"class":82},[72,814,815,817,819,822],{"class":74,"line":93},[72,816,737],{"class":78},[72,818,740],{"class":82},[72,820,821],{"class":78},">",[72,823,824],{"class":82}," min) {\n",[72,826,827,829,831,834],{"class":74,"line":106},[72,828,750],{"class":154},[72,830,753],{"class":82},[72,832,833],{"class":78},"-",[72,835,836],{"class":82}," decrement)\n",[72,838,839,841,843,845],{"class":74,"line":119},[72,840,764],{"class":154},[72,842,753],{"class":82},[72,844,833],{"class":78},[72,846,836],{"class":82},[72,848,849],{"class":74,"line":180},[72,850,775],{"class":82},[72,852,853],{"class":74,"line":197},[72,854,648],{"class":82},[45,856,858],{"id":857},"handle-click-function","Handle Click Function",[10,860,861,862,864,865,867,868,870,871,798],{},"Next is our ",[69,863,400],{}," function which will be called when the input value is manually changed. We will check to see if the value is less than the ",[69,866,363],{}," value and if it is then we will set the ",[69,869,309],{}," to the value of the input as well as update the ",[69,872,711],{},[62,874,876],{"className":64,"code":875,"language":66,"meta":67,"style":67},"function handleClick(e) {\n  setCount(e.target.valueAsNumber)\n  onCountChange(e.target.valueAsNumber)\n}\n",[69,877,878,893,901,907],{"__ignoreMap":67},[72,879,880,882,885,888,891],{"class":74,"line":75},[72,881,726],{"class":78},[72,883,884],{"class":154}," handleClick",[72,886,887],{"class":82},"(",[72,889,890],{"class":183},"e",[72,892,451],{"class":82},[72,894,895,898],{"class":74,"line":93},[72,896,897],{"class":154},"  setCount",[72,899,900],{"class":82},"(e.target.valueAsNumber)\n",[72,902,903,905],{"class":74,"line":106},[72,904,300],{"class":154},[72,906,900],{"class":82},[72,908,909],{"class":74,"line":119},[72,910,648],{"class":82},[45,912,914],{"id":913},"full-code","Full Code",[10,916,917],{},"And now our counter component is ready to go.",[62,919,921],{"className":64,"code":920,"language":66,"meta":67,"style":67},"import React, { useState } from 'react'\nimport { Button } from '@learn-bit-react/base-ui.ui.button'\nimport { Input } from '@learn-bit-react/base-ui.ui.forms.input'\nimport styles from './counter.module.scss'\n\nexport type CounterProps = {\n  /**\n   * min Value of counter\n   */\n  min?: number\n  /**\n   * max Value\n   */\n  max?: number\n  /**\n   * increment value\n   */\n  increment?: number\n  /**\n   * decrement value\n   */\n  decrement?: number\n  /**\n   * a function that registers the count when changed\n   */\n  onCountChange: (count: number) => void\n} & React.HTMLAttributes\u003CHTMLDivElement>\n\nexport function Counter({\n  min = 1,\n  max = 20,\n  increment = 1,\n  decrement = 1,\n  onCountChange\n}: CounterProps) {\n  const [count, setCount] = useState(min)\n\n  function handleClickAdd() {\n    if (count \u003C max) {\n      setCount(count + increment)\n      onCountChange(count + increment)\n    }\n  }\n  function handleClickSubtract() {\n    if (count > min) {\n      setCount(count - decrement)\n      onCountChange(count - decrement)\n    }\n  }\n\n  function handleClick(e) {\n    setCount(e.target.valueAsNumber)\n    onCountChange(e.target.valueAsNumber)\n  }\n\n  return (\n    \u003Cdiv className={styles.counter}>\n      \u003CButton counter onClick={handleClickSubtract}>\n        -\n      \u003C/Button>\n      \u003CInput\n        className={styles.counterInput}\n        type=\"number\"\n        min={min}\n        max={max}\n        value={count}\n        width=\"80px\"\n        onChange={handleClick}\n      />\n      \u003CButton counter onClick={handleClickAdd}>\n        +\n      \u003C/Button>\n    \u003C/div>\n  )\n}\n",[69,922,923,933,943,953,963,967,979,983,987,991,1000,1004,1008,1012,1020,1024,1028,1032,1040,1044,1048,1052,1060,1064,1068,1072,1093,1112,1117,1128,1140,1152,1163,1174,1180,1191,1213,1218,1228,1240,1252,1264,1270,1275,1284,1295,1306,1317,1322,1327,1332,1345,1352,1359,1364,1369,1376,1389,1404,1409,1418,1425,1434,1443,1452,1461,1470,1479,1488,1493,1508,1513,1522,1531,1536],{"__ignoreMap":67},[72,924,925,927,929,931],{"class":74,"line":75},[72,926,79],{"class":78},[72,928,83],{"class":82},[72,930,86],{"class":78},[72,932,90],{"class":89},[72,934,935,937,939,941],{"class":74,"line":93},[72,936,79],{"class":78},[72,938,98],{"class":82},[72,940,86],{"class":78},[72,942,103],{"class":89},[72,944,945,947,949,951],{"class":74,"line":106},[72,946,79],{"class":78},[72,948,111],{"class":82},[72,950,86],{"class":78},[72,952,116],{"class":89},[72,954,955,957,959,961],{"class":74,"line":119},[72,956,79],{"class":78},[72,958,124],{"class":82},[72,960,86],{"class":78},[72,962,129],{"class":89},[72,964,965],{"class":74,"line":180},[72,966,457],{"emptyLinePlaceholder":456},[72,968,969,971,973,975,977],{"class":74,"line":197},[72,970,148],{"class":78},[72,972,151],{"class":78},[72,974,155],{"class":154},[72,976,158],{"class":78},[72,978,161],{"class":82},[72,980,981],{"class":74,"line":202},[72,982,167],{"class":166},[72,984,985],{"class":74,"line":208},[72,986,172],{"class":166},[72,988,989],{"class":74,"line":213},[72,990,177],{"class":166},[72,992,993,995,997],{"class":74,"line":225},[72,994,184],{"class":183},[72,996,187],{"class":78},[72,998,999],{"class":190}," number\n",[72,1001,1002],{"class":74,"line":230},[72,1003,167],{"class":166},[72,1005,1006],{"class":74,"line":236},[72,1007,205],{"class":166},[72,1009,1010],{"class":74,"line":241},[72,1011,177],{"class":166},[72,1013,1014,1016,1018],{"class":74,"line":253},[72,1015,216],{"class":183},[72,1017,187],{"class":78},[72,1019,999],{"class":190},[72,1021,1022],{"class":74,"line":258},[72,1023,167],{"class":166},[72,1025,1026],{"class":74,"line":264},[72,1027,233],{"class":166},[72,1029,1030],{"class":74,"line":269},[72,1031,177],{"class":166},[72,1033,1034,1036,1038],{"class":74,"line":281},[72,1035,244],{"class":183},[72,1037,187],{"class":78},[72,1039,999],{"class":190},[72,1041,1042],{"class":74,"line":286},[72,1043,167],{"class":166},[72,1045,1046],{"class":74,"line":292},[72,1047,261],{"class":166},[72,1049,1050],{"class":74,"line":297},[72,1051,177],{"class":166},[72,1053,1054,1056,1058],{"class":74,"line":325},[72,1055,272],{"class":183},[72,1057,187],{"class":78},[72,1059,999],{"class":190},[72,1061,1062],{"class":74,"line":629},[72,1063,167],{"class":166},[72,1065,1066],{"class":74,"line":639},[72,1067,289],{"class":166},[72,1069,1070],{"class":74,"line":645},[72,1071,177],{"class":166},[72,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091],{"class":74,"line":1074},26,[72,1076,300],{"class":154},[72,1078,303],{"class":78},[72,1080,306],{"class":82},[72,1082,309],{"class":183},[72,1084,303],{"class":78},[72,1086,191],{"class":190},[72,1088,316],{"class":82},[72,1090,319],{"class":78},[72,1092,322],{"class":190},[72,1094,1096,1098,1100,1102,1104,1106,1108,1110],{"class":74,"line":1095},27,[72,1097,328],{"class":82},[72,1099,331],{"class":78},[72,1101,334],{"class":154},[72,1103,337],{"class":82},[72,1105,340],{"class":154},[72,1107,343],{"class":82},[72,1109,346],{"class":154},[72,1111,349],{"class":82},[72,1113,1115],{"class":74,"line":1114},28,[72,1116,457],{"emptyLinePlaceholder":456},[72,1118,1120,1122,1124,1126],{"class":74,"line":1119},29,[72,1121,148],{"class":78},[72,1123,428],{"class":78},[72,1125,431],{"class":154},[72,1127,434],{"class":82},[72,1129,1131,1133,1135,1138],{"class":74,"line":1130},30,[72,1132,184],{"class":183},[72,1134,158],{"class":78},[72,1136,1137],{"class":190}," 1",[72,1139,194],{"class":82},[72,1141,1143,1145,1147,1150],{"class":74,"line":1142},31,[72,1144,216],{"class":183},[72,1146,158],{"class":78},[72,1148,1149],{"class":190}," 20",[72,1151,194],{"class":82},[72,1153,1155,1157,1159,1161],{"class":74,"line":1154},32,[72,1156,244],{"class":183},[72,1158,158],{"class":78},[72,1160,1137],{"class":190},[72,1162,194],{"class":82},[72,1164,1166,1168,1170,1172],{"class":74,"line":1165},33,[72,1167,272],{"class":183},[72,1169,158],{"class":78},[72,1171,1137],{"class":190},[72,1173,194],{"class":82},[72,1175,1177],{"class":74,"line":1176},34,[72,1178,1179],{"class":183},"  onCountChange\n",[72,1181,1183,1185,1187,1189],{"class":74,"line":1182},35,[72,1184,444],{"class":82},[72,1186,303],{"class":78},[72,1188,155],{"class":154},[72,1190,451],{"class":82},[72,1192,1194,1197,1199,1201,1203,1205,1207,1209,1211],{"class":74,"line":1193},36,[72,1195,1196],{"class":78},"  const",[72,1198,678],{"class":82},[72,1200,309],{"class":190},[72,1202,360],{"class":82},[72,1204,685],{"class":190},[72,1206,688],{"class":82},[72,1208,480],{"class":78},[72,1210,693],{"class":154},[72,1212,696],{"class":82},[72,1214,1216],{"class":74,"line":1215},37,[72,1217,457],{"emptyLinePlaceholder":456},[72,1219,1221,1224,1226],{"class":74,"line":1220},38,[72,1222,1223],{"class":78},"  function",[72,1225,729],{"class":154},[72,1227,732],{"class":82},[72,1229,1231,1234,1236,1238],{"class":74,"line":1230},39,[72,1232,1233],{"class":78},"    if",[72,1235,740],{"class":82},[72,1237,343],{"class":78},[72,1239,745],{"class":82},[72,1241,1243,1246,1248,1250],{"class":74,"line":1242},40,[72,1244,1245],{"class":154},"      setCount",[72,1247,753],{"class":82},[72,1249,756],{"class":78},[72,1251,759],{"class":82},[72,1253,1255,1258,1260,1262],{"class":74,"line":1254},41,[72,1256,1257],{"class":154},"      onCountChange",[72,1259,753],{"class":82},[72,1261,756],{"class":78},[72,1263,759],{"class":82},[72,1265,1267],{"class":74,"line":1266},42,[72,1268,1269],{"class":82},"    }\n",[72,1271,1273],{"class":74,"line":1272},43,[72,1274,775],{"class":82},[72,1276,1278,1280,1282],{"class":74,"line":1277},44,[72,1279,1223],{"class":78},[72,1281,810],{"class":154},[72,1283,732],{"class":82},[72,1285,1287,1289,1291,1293],{"class":74,"line":1286},45,[72,1288,1233],{"class":78},[72,1290,740],{"class":82},[72,1292,821],{"class":78},[72,1294,824],{"class":82},[72,1296,1298,1300,1302,1304],{"class":74,"line":1297},46,[72,1299,1245],{"class":154},[72,1301,753],{"class":82},[72,1303,833],{"class":78},[72,1305,836],{"class":82},[72,1307,1309,1311,1313,1315],{"class":74,"line":1308},47,[72,1310,1257],{"class":154},[72,1312,753],{"class":82},[72,1314,833],{"class":78},[72,1316,836],{"class":82},[72,1318,1320],{"class":74,"line":1319},48,[72,1321,1269],{"class":82},[72,1323,1325],{"class":74,"line":1324},49,[72,1326,775],{"class":82},[72,1328,1330],{"class":74,"line":1329},50,[72,1331,457],{"emptyLinePlaceholder":456},[72,1333,1335,1337,1339,1341,1343],{"class":74,"line":1334},51,[72,1336,1223],{"class":78},[72,1338,884],{"class":154},[72,1340,887],{"class":82},[72,1342,890],{"class":183},[72,1344,451],{"class":82},[72,1346,1348,1350],{"class":74,"line":1347},52,[72,1349,750],{"class":154},[72,1351,900],{"class":82},[72,1353,1355,1357],{"class":74,"line":1354},53,[72,1356,764],{"class":154},[72,1358,900],{"class":82},[72,1360,1362],{"class":74,"line":1361},54,[72,1363,775],{"class":82},[72,1365,1367],{"class":74,"line":1366},55,[72,1368,457],{"emptyLinePlaceholder":456},[72,1370,1372,1374],{"class":74,"line":1371},56,[72,1373,462],{"class":78},[72,1375,465],{"class":82},[72,1377,1379,1381,1383,1385,1387],{"class":74,"line":1378},57,[72,1380,470],{"class":82},[72,1382,474],{"class":473},[72,1384,477],{"class":154},[72,1386,480],{"class":78},[72,1388,483],{"class":82},[72,1390,1392,1394,1396,1398,1400,1402],{"class":74,"line":1391},58,[72,1393,488],{"class":82},[72,1395,491],{"class":190},[72,1397,494],{"class":154},[72,1399,497],{"class":154},[72,1401,480],{"class":78},[72,1403,502],{"class":82},[72,1405,1407],{"class":74,"line":1406},59,[72,1408,507],{"class":82},[72,1410,1412,1414,1416],{"class":74,"line":1411},60,[72,1413,512],{"class":82},[72,1415,491],{"class":190},[72,1417,349],{"class":82},[72,1419,1421,1423],{"class":74,"line":1420},61,[72,1422,488],{"class":82},[72,1424,523],{"class":190},[72,1426,1428,1430,1432],{"class":74,"line":1427},62,[72,1429,528],{"class":154},[72,1431,480],{"class":78},[72,1433,533],{"class":82},[72,1435,1437,1439,1441],{"class":74,"line":1436},63,[72,1438,538],{"class":154},[72,1440,480],{"class":78},[72,1442,543],{"class":89},[72,1444,1446,1448,1450],{"class":74,"line":1445},64,[72,1447,548],{"class":154},[72,1449,480],{"class":78},[72,1451,553],{"class":82},[72,1453,1455,1457,1459],{"class":74,"line":1454},65,[72,1456,558],{"class":154},[72,1458,480],{"class":78},[72,1460,563],{"class":82},[72,1462,1464,1466,1468],{"class":74,"line":1463},66,[72,1465,568],{"class":154},[72,1467,480],{"class":78},[72,1469,573],{"class":82},[72,1471,1473,1475,1477],{"class":74,"line":1472},67,[72,1474,578],{"class":154},[72,1476,480],{"class":78},[72,1478,583],{"class":89},[72,1480,1482,1484,1486],{"class":74,"line":1481},68,[72,1483,588],{"class":154},[72,1485,480],{"class":78},[72,1487,593],{"class":82},[72,1489,1491],{"class":74,"line":1490},69,[72,1492,598],{"class":82},[72,1494,1496,1498,1500,1502,1504,1506],{"class":74,"line":1495},70,[72,1497,488],{"class":82},[72,1499,491],{"class":190},[72,1501,494],{"class":154},[72,1503,497],{"class":154},[72,1505,480],{"class":78},[72,1507,613],{"class":82},[72,1509,1511],{"class":74,"line":1510},71,[72,1512,618],{"class":82},[72,1514,1516,1518,1520],{"class":74,"line":1515},72,[72,1517,512],{"class":82},[72,1519,491],{"class":190},[72,1521,349],{"class":82},[72,1523,1525,1527,1529],{"class":74,"line":1524},73,[72,1526,632],{"class":82},[72,1528,474],{"class":473},[72,1530,349],{"class":82},[72,1532,1534],{"class":74,"line":1533},74,[72,1535,642],{"class":82},[72,1537,1539],{"class":74,"line":1538},75,[72,1540,648],{"class":82},[34,1542,1544],{"id":1543},"creating-our-compositions","Creating our Compositions",[10,1546,1547],{},"When building our components we need to see what is going on and for this in Bit we use compositions so we can build our component as an independent component and see it in isolation using bits dev server. However if you are not using bit you can just import the component into another component or into your app and see it working there.",[10,1549,1550,1551,1554,1555,1557,1558,1560],{},"Our composition uses our previously created Counter component and also shows what the count value is in a ",[69,1552,1553],{},"\u003Cp>"," tag which of course could be another component. This shows us that our count value is being updated in the UI in real time. We are not passing in any ",[69,1556,359],{}," or ",[69,1559,363],{}," values here as we want to use the default values but we could create another composition that shows a different counter with different values.",[62,1562,1564],{"className":64,"code":1563,"language":66,"meta":67,"style":67},"import React, { useState } from 'react'\nimport { Counter } from './counter'\n\nexport const BasicCounter = () => \u003CCounter onCountChange={count => count} />\n\nexport function CounterWithSetCount() {\n  const [count, setCount] = useState(1)\n  return (\n    \u003C>\n      \u003CCounter\n        onCountChange={(count) => {\n          setCount(count)\n        }}\n      />\n      \u003Cp>Count is: {count}\u003C/p>\n    \u003C/>\n  )\n}\n",[69,1565,1566,1576,1588,1592,1631,1635,1646,1672,1678,1683,1690,1708,1716,1721,1725,1738,1743,1747],{"__ignoreMap":67},[72,1567,1568,1570,1572,1574],{"class":74,"line":75},[72,1569,79],{"class":78},[72,1571,83],{"class":82},[72,1573,86],{"class":78},[72,1575,90],{"class":89},[72,1577,1578,1580,1583,1585],{"class":74,"line":93},[72,1579,79],{"class":78},[72,1581,1582],{"class":82}," { Counter } ",[72,1584,86],{"class":78},[72,1586,1587],{"class":89}," './counter'\n",[72,1589,1590],{"class":74,"line":106},[72,1591,457],{"emptyLinePlaceholder":456},[72,1593,1594,1596,1599,1602,1604,1607,1609,1612,1615,1618,1620,1623,1625,1628],{"class":74,"line":119},[72,1595,148],{"class":78},[72,1597,1598],{"class":78}," const",[72,1600,1601],{"class":154}," BasicCounter",[72,1603,158],{"class":78},[72,1605,1606],{"class":82}," () ",[72,1608,319],{"class":78},[72,1610,1611],{"class":82}," \u003C",[72,1613,1614],{"class":190},"Counter",[72,1616,1617],{"class":154}," onCountChange",[72,1619,480],{"class":78},[72,1621,1622],{"class":82},"{",[72,1624,309],{"class":183},[72,1626,1627],{"class":78}," =>",[72,1629,1630],{"class":82}," count} />\n",[72,1632,1633],{"class":74,"line":180},[72,1634,457],{"emptyLinePlaceholder":456},[72,1636,1637,1639,1641,1644],{"class":74,"line":197},[72,1638,148],{"class":78},[72,1640,428],{"class":78},[72,1642,1643],{"class":154}," CounterWithSetCount",[72,1645,732],{"class":82},[72,1647,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1669],{"class":74,"line":202},[72,1649,1196],{"class":78},[72,1651,678],{"class":82},[72,1653,309],{"class":190},[72,1655,360],{"class":82},[72,1657,685],{"class":190},[72,1659,688],{"class":82},[72,1661,480],{"class":78},[72,1663,693],{"class":154},[72,1665,887],{"class":82},[72,1667,1668],{"class":190},"1",[72,1670,1671],{"class":82},")\n",[72,1673,1674,1676],{"class":74,"line":208},[72,1675,462],{"class":78},[72,1677,465],{"class":82},[72,1679,1680],{"class":74,"line":213},[72,1681,1682],{"class":82},"    \u003C>\n",[72,1684,1685,1687],{"class":74,"line":225},[72,1686,488],{"class":82},[72,1688,1689],{"class":190},"Counter\n",[72,1691,1692,1695,1697,1700,1702,1704,1706],{"class":74,"line":230},[72,1693,1694],{"class":154},"        onCountChange",[72,1696,480],{"class":78},[72,1698,1699],{"class":82},"{(",[72,1701,309],{"class":183},[72,1703,316],{"class":82},[72,1705,319],{"class":78},[72,1707,161],{"class":82},[72,1709,1710,1713],{"class":74,"line":236},[72,1711,1712],{"class":154},"          setCount",[72,1714,1715],{"class":82},"(count)\n",[72,1717,1718],{"class":74,"line":241},[72,1719,1720],{"class":82},"        }}\n",[72,1722,1723],{"class":74,"line":253},[72,1724,598],{"class":82},[72,1726,1727,1729,1731,1734,1736],{"class":74,"line":258},[72,1728,488],{"class":82},[72,1730,10],{"class":473},[72,1732,1733],{"class":82},">Count is: {count}\u003C/",[72,1735,10],{"class":473},[72,1737,349],{"class":82},[72,1739,1740],{"class":74,"line":264},[72,1741,1742],{"class":82},"    \u003C/>\n",[72,1744,1745],{"class":74,"line":269},[72,1746,642],{"class":82},[72,1748,1749],{"class":74,"line":281},[72,1750,648],{"class":82},[34,1752,1754],{"id":1753},"testing-our-counter","Testing Our Counter",[10,1756,1757],{},"The final step is to write some tests for our counter to make sure it works as it should. Of course some would say that you should create the tests first but that's up in which way you want to build things.",[10,1759,1760,1761,56,1764,1767,1768,1771,1772,1775,1776,1779,1780,337],{},"In our test file we need to import React, as well as the ",[69,1762,1763],{},"render",[69,1765,1766],{},"screen"," functions from ",[69,1769,1770],{},"@testing-library/react"," and our ",[69,1773,1774],{},"BasicCounter"," component. As we want to test the buttons we need to add the ",[69,1777,1778],{},"userEvent"," method from ",[69,1781,1782],{},"@testing-library/user-event",[62,1784,1786],{"className":64,"code":1785,"language":66,"meta":67,"style":67},"import React from 'react'\nimport { render, screen } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\nimport { BasicCounter } from './counter.composition'\n",[69,1787,1788,1799,1811,1823],{"__ignoreMap":67},[72,1789,1790,1792,1795,1797],{"class":74,"line":75},[72,1791,79],{"class":78},[72,1793,1794],{"class":82}," React ",[72,1796,86],{"class":78},[72,1798,90],{"class":89},[72,1800,1801,1803,1806,1808],{"class":74,"line":93},[72,1802,79],{"class":78},[72,1804,1805],{"class":82}," { render, screen } ",[72,1807,86],{"class":78},[72,1809,1810],{"class":89}," '@testing-library/react'\n",[72,1812,1813,1815,1818,1820],{"class":74,"line":106},[72,1814,79],{"class":78},[72,1816,1817],{"class":82}," userEvent ",[72,1819,86],{"class":78},[72,1821,1822],{"class":89}," '@testing-library/user-event'\n",[72,1824,1825,1827,1830,1832],{"class":74,"line":119},[72,1826,79],{"class":78},[72,1828,1829],{"class":82}," { BasicCounter } ",[72,1831,86],{"class":78},[72,1833,1834],{"class":89}," './counter.composition'\n",[10,1836,1837],{},"We can then think about what we want to test and write todos for each of them.",[62,1839,1841],{"className":64,"code":1840,"language":66,"meta":67,"style":67},"it.todo('should render a counter with value of 1')\n\nit.todo('should increase count when plus button is clicked')\n\nit.todo('should decrease count when minus button is clicked')\n\nit.todo('should not decrease to less than 1')\n",[69,1842,1843,1858,1862,1875,1879,1892,1896],{"__ignoreMap":67},[72,1844,1845,1848,1851,1853,1856],{"class":74,"line":75},[72,1846,1847],{"class":82},"it.",[72,1849,1850],{"class":154},"todo",[72,1852,887],{"class":82},[72,1854,1855],{"class":89},"'should render a counter with value of 1'",[72,1857,1671],{"class":82},[72,1859,1860],{"class":74,"line":93},[72,1861,457],{"emptyLinePlaceholder":456},[72,1863,1864,1866,1868,1870,1873],{"class":74,"line":106},[72,1865,1847],{"class":82},[72,1867,1850],{"class":154},[72,1869,887],{"class":82},[72,1871,1872],{"class":89},"'should increase count when plus button is clicked'",[72,1874,1671],{"class":82},[72,1876,1877],{"class":74,"line":119},[72,1878,457],{"emptyLinePlaceholder":456},[72,1880,1881,1883,1885,1887,1890],{"class":74,"line":180},[72,1882,1847],{"class":82},[72,1884,1850],{"class":154},[72,1886,887],{"class":82},[72,1888,1889],{"class":89},"'should decrease count when minus button is clicked'",[72,1891,1671],{"class":82},[72,1893,1894],{"class":74,"line":197},[72,1895,457],{"emptyLinePlaceholder":456},[72,1897,1898,1900,1902,1904,1907],{"class":74,"line":202},[72,1899,1847],{"class":82},[72,1901,1850],{"class":154},[72,1903,887],{"class":82},[72,1905,1906],{"class":89},"'should not decrease to less than 1'",[72,1908,1671],{"class":82},[10,1910,1911,1912,1914,1915,1917,1918,1921,1922,1925,1926,1929],{},"We then render our ",[69,1913,1774],{}," component and use the ",[69,1916,1766],{}," method with the function of ",[69,1919,1920],{},"getByRole",". As we don't know what role is available to us we can use ",[69,1923,1924],{},"screen.getByRole('blah')"," which shows us that blah doesn't exist but that ",[69,1927,1928],{},"spinbutton"," does which is the role for our input of type number. We then expect our counter to have the value of 1 which was the min default value.",[62,1931,1933],{"className":64,"code":1932,"language":66,"meta":67,"style":67},"it('should render a counter with value of 1', () => {\n  render(\u003CBasicCounter />)\n  basicCounter = screen.getByRole('spinbutton')\n  expect(basicCounter).toHaveValue(1)\n})\n",[69,1934,1935,1951,1964,1983,2000],{"__ignoreMap":67},[72,1936,1937,1940,1942,1944,1947,1949],{"class":74,"line":75},[72,1938,1939],{"class":154},"it",[72,1941,887],{"class":82},[72,1943,1855],{"class":89},[72,1945,1946],{"class":82},", () ",[72,1948,319],{"class":78},[72,1950,161],{"class":82},[72,1952,1953,1956,1959,1961],{"class":74,"line":93},[72,1954,1955],{"class":154},"  render",[72,1957,1958],{"class":82},"(\u003C",[72,1960,1774],{"class":190},[72,1962,1963],{"class":82}," />)\n",[72,1965,1966,1969,1971,1974,1976,1978,1981],{"class":74,"line":106},[72,1967,1968],{"class":82},"  basicCounter ",[72,1970,480],{"class":78},[72,1972,1973],{"class":82}," screen.",[72,1975,1920],{"class":154},[72,1977,887],{"class":82},[72,1979,1980],{"class":89},"'spinbutton'",[72,1982,1671],{"class":82},[72,1984,1985,1988,1991,1994,1996,1998],{"class":74,"line":119},[72,1986,1987],{"class":154},"  expect",[72,1989,1990],{"class":82},"(basicCounter).",[72,1992,1993],{"class":154},"toHaveValue",[72,1995,887],{"class":82},[72,1997,1668],{"class":190},[72,1999,1671],{"class":82},[72,2001,2002],{"class":74,"line":180},[72,2003,2004],{"class":82},"})\n",[10,2006,2007,2008,2010,2011,2013,2014,2016,2017,2020],{},"Our next test also needs to render the ",[69,2009,1774],{}," component as well as the the Button component with the name ",[69,2012,756],{}," and we know that we will also have to render the Button component with the name ",[69,2015,833],{}," in the last tests so we can go ahead and create a ",[69,2018,2019],{},"beforeEach"," function which will render these before each test is called.",[62,2022,2024],{"className":64,"code":2023,"language":66,"meta":67,"style":67},"let basicCounter\nlet increaseCount\nlet decreaseCount\n\nbeforeEach(() => {\n  render(\u003CBasicCounter />)\n  basicCounter = screen.getByRole('spinbutton')\n  increaseCount = screen.getByRole('button', { name: '+' })\n  decreaseCount = screen.getByRole('button', { name: '-' })\n})\n",[69,2025,2026,2034,2041,2048,2052,2063,2073,2089,2114,2136],{"__ignoreMap":67},[72,2027,2028,2031],{"class":74,"line":75},[72,2029,2030],{"class":78},"let",[72,2032,2033],{"class":82}," basicCounter\n",[72,2035,2036,2038],{"class":74,"line":93},[72,2037,2030],{"class":78},[72,2039,2040],{"class":82}," increaseCount\n",[72,2042,2043,2045],{"class":74,"line":106},[72,2044,2030],{"class":78},[72,2046,2047],{"class":82}," decreaseCount\n",[72,2049,2050],{"class":74,"line":119},[72,2051,457],{"emptyLinePlaceholder":456},[72,2053,2054,2056,2059,2061],{"class":74,"line":180},[72,2055,2019],{"class":154},[72,2057,2058],{"class":82},"(() ",[72,2060,319],{"class":78},[72,2062,161],{"class":82},[72,2064,2065,2067,2069,2071],{"class":74,"line":197},[72,2066,1955],{"class":154},[72,2068,1958],{"class":82},[72,2070,1774],{"class":190},[72,2072,1963],{"class":82},[72,2074,2075,2077,2079,2081,2083,2085,2087],{"class":74,"line":202},[72,2076,1968],{"class":82},[72,2078,480],{"class":78},[72,2080,1973],{"class":82},[72,2082,1920],{"class":154},[72,2084,887],{"class":82},[72,2086,1980],{"class":89},[72,2088,1671],{"class":82},[72,2090,2091,2094,2096,2098,2100,2102,2105,2108,2111],{"class":74,"line":208},[72,2092,2093],{"class":82},"  increaseCount ",[72,2095,480],{"class":78},[72,2097,1973],{"class":82},[72,2099,1920],{"class":154},[72,2101,887],{"class":82},[72,2103,2104],{"class":89},"'button'",[72,2106,2107],{"class":82},", { name: ",[72,2109,2110],{"class":89},"'+'",[72,2112,2113],{"class":82}," })\n",[72,2115,2116,2119,2121,2123,2125,2127,2129,2131,2134],{"class":74,"line":213},[72,2117,2118],{"class":82},"  decreaseCount ",[72,2120,480],{"class":78},[72,2122,1973],{"class":82},[72,2124,1920],{"class":154},[72,2126,887],{"class":82},[72,2128,2104],{"class":89},[72,2130,2107],{"class":82},[72,2132,2133],{"class":89},"'-'",[72,2135,2113],{"class":82},[72,2137,2138],{"class":74,"line":225},[72,2139,2004],{"class":82},[10,2141,2142],{},"Our first test will now look like this:",[62,2144,2146],{"className":64,"code":2145,"language":66,"meta":67,"style":67},"it('should render a counter with value of 1', () => {\n  expect(basicCounter).toHaveValue(1)\n})\n",[69,2147,2148,2162,2176],{"__ignoreMap":67},[72,2149,2150,2152,2154,2156,2158,2160],{"class":74,"line":75},[72,2151,1939],{"class":154},[72,2153,887],{"class":82},[72,2155,1855],{"class":89},[72,2157,1946],{"class":82},[72,2159,319],{"class":78},[72,2161,161],{"class":82},[72,2163,2164,2166,2168,2170,2172,2174],{"class":74,"line":93},[72,2165,1987],{"class":154},[72,2167,1990],{"class":82},[72,2169,1993],{"class":154},[72,2171,887],{"class":82},[72,2173,1668],{"class":190},[72,2175,1671],{"class":82},[72,2177,2178],{"class":74,"line":106},[72,2179,2004],{"class":82},[10,2181,2182,2183,2185],{},"Our second test will make sure sure the value starts at 1 and when the button is clicked it will update to 2 using the ",[69,2184,1778],{}," method.",[62,2187,2189],{"className":64,"code":2188,"language":66,"meta":67,"style":67},"it('should increase count when plus button is clicked', () => {\n  expect(basicCounter).toHaveValue(1)\n  userEvent.click(increaseCount)\n  expect(basicCounter).toHaveValue(2)\n})\n",[69,2190,2191,2205,2219,2230,2245],{"__ignoreMap":67},[72,2192,2193,2195,2197,2199,2201,2203],{"class":74,"line":75},[72,2194,1939],{"class":154},[72,2196,887],{"class":82},[72,2198,1872],{"class":89},[72,2200,1946],{"class":82},[72,2202,319],{"class":78},[72,2204,161],{"class":82},[72,2206,2207,2209,2211,2213,2215,2217],{"class":74,"line":93},[72,2208,1987],{"class":154},[72,2210,1990],{"class":82},[72,2212,1993],{"class":154},[72,2214,887],{"class":82},[72,2216,1668],{"class":190},[72,2218,1671],{"class":82},[72,2220,2221,2224,2227],{"class":74,"line":106},[72,2222,2223],{"class":82},"  userEvent.",[72,2225,2226],{"class":154},"click",[72,2228,2229],{"class":82},"(increaseCount)\n",[72,2231,2232,2234,2236,2238,2240,2243],{"class":74,"line":119},[72,2233,1987],{"class":154},[72,2235,1990],{"class":82},[72,2237,1993],{"class":154},[72,2239,887],{"class":82},[72,2241,2242],{"class":190},"2",[72,2244,1671],{"class":82},[72,2246,2247],{"class":74,"line":180},[72,2248,2004],{"class":82},[10,2250,2251,2252,2254,2255,2257],{},"Our next test will start by calling the ",[69,2253,1778],{}," method to click the ",[69,2256,756],{}," button and then make sure that the value is 2. Now we can test the decrease button by clicking that and making sure the value is back to 1.",[62,2259,2261],{"className":64,"code":2260,"language":66,"meta":67,"style":67},"it('should decrease count when minus button is clicked', () => {\n  userEvent.click(increaseCount)\n  expect(basicCounter).toHaveValue(2)\n  userEvent.click(decreaseCount)\n  expect(basicCounter).toHaveValue(1)\n})\n",[69,2262,2263,2277,2285,2299,2308,2322],{"__ignoreMap":67},[72,2264,2265,2267,2269,2271,2273,2275],{"class":74,"line":75},[72,2266,1939],{"class":154},[72,2268,887],{"class":82},[72,2270,1889],{"class":89},[72,2272,1946],{"class":82},[72,2274,319],{"class":78},[72,2276,161],{"class":82},[72,2278,2279,2281,2283],{"class":74,"line":93},[72,2280,2223],{"class":82},[72,2282,2226],{"class":154},[72,2284,2229],{"class":82},[72,2286,2287,2289,2291,2293,2295,2297],{"class":74,"line":106},[72,2288,1987],{"class":154},[72,2290,1990],{"class":82},[72,2292,1993],{"class":154},[72,2294,887],{"class":82},[72,2296,2242],{"class":190},[72,2298,1671],{"class":82},[72,2300,2301,2303,2305],{"class":74,"line":119},[72,2302,2223],{"class":82},[72,2304,2226],{"class":154},[72,2306,2307],{"class":82},"(decreaseCount)\n",[72,2309,2310,2312,2314,2316,2318,2320],{"class":74,"line":180},[72,2311,1987],{"class":154},[72,2313,1990],{"class":82},[72,2315,1993],{"class":154},[72,2317,887],{"class":82},[72,2319,1668],{"class":190},[72,2321,1671],{"class":82},[72,2323,2324],{"class":74,"line":197},[72,2325,2004],{"class":82},[10,2327,2328],{},"Our last test will make sure that the value is not less than 1 and when the minus button is clicked it will still have the value of 1 as that is the min value allowed.",[62,2330,2332],{"className":64,"code":2331,"language":66,"meta":67,"style":67},"it('should not decrease to less than 1', () => {\n  expect(basicCounter).toHaveValue(1)\n  userEvent.click(decreaseCount)\n  expect(basicCounter).toHaveValue(1)\n})\n",[69,2333,2334,2348,2362,2370,2384],{"__ignoreMap":67},[72,2335,2336,2338,2340,2342,2344,2346],{"class":74,"line":75},[72,2337,1939],{"class":154},[72,2339,887],{"class":82},[72,2341,1906],{"class":89},[72,2343,1946],{"class":82},[72,2345,319],{"class":78},[72,2347,161],{"class":82},[72,2349,2350,2352,2354,2356,2358,2360],{"class":74,"line":93},[72,2351,1987],{"class":154},[72,2353,1990],{"class":82},[72,2355,1993],{"class":154},[72,2357,887],{"class":82},[72,2359,1668],{"class":190},[72,2361,1671],{"class":82},[72,2363,2364,2366,2368],{"class":74,"line":106},[72,2365,2223],{"class":82},[72,2367,2226],{"class":154},[72,2369,2307],{"class":82},[72,2371,2372,2374,2376,2378,2380,2382],{"class":74,"line":119},[72,2373,1987],{"class":154},[72,2375,1990],{"class":82},[72,2377,1993],{"class":154},[72,2379,887],{"class":82},[72,2381,1668],{"class":190},[72,2383,1671],{"class":82},[72,2385,2386],{"class":74,"line":180},[72,2387,2004],{"class":82},[10,2389,2390],{},"All our tests are passing and if we break anything in our component our tests will break as well.",[45,2392,2394],{"id":2393},"full-code-example","Full Code Example",[62,2396,2398],{"className":64,"code":2397,"language":66,"meta":67,"style":67},"import React from 'react'\nimport { render, screen } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\nimport { BasicCounter } from './counter.composition'\n\nlet basicCounter\nlet increaseCount\nlet decreaseCount\n\nbeforeEach(() => {\n  render(\u003CBasicCounter />)\n  basicCounter = screen.getByRole('spinbutton')\n  increaseCount = screen.getByRole('button', { name: '+' })\n  decreaseCount = screen.getByRole('button', { name: '-' })\n})\n\nit('should render a counter with value of 1', () => {\n  expect(basicCounter).toHaveValue(1)\n})\n\nit('should increase count when plus button is clicked', () => {\n  expect(basicCounter).toHaveValue(1)\n  userEvent.click(increaseCount)\n  expect(basicCounter).toHaveValue(2)\n})\n\nit('should decrease count when minus button is clicked', () => {\n  userEvent.click(increaseCount)\n  expect(basicCounter).toHaveValue(2)\n  userEvent.click(decreaseCount)\n  expect(basicCounter).toHaveValue(1)\n})\n\nit('should not decrease to less than 1', () => {\n  expect(basicCounter).toHaveValue(1)\n  userEvent.click(decreaseCount)\n  expect(basicCounter).toHaveValue(1)\n})\n",[69,2399,2400,2410,2420,2430,2440,2444,2450,2456,2462,2466,2476,2486,2502,2522,2542,2546,2550,2564,2578,2582,2586,2600,2614,2622,2636,2640,2644,2658,2666,2680,2688,2702,2706,2710,2724,2738,2746,2760],{"__ignoreMap":67},[72,2401,2402,2404,2406,2408],{"class":74,"line":75},[72,2403,79],{"class":78},[72,2405,1794],{"class":82},[72,2407,86],{"class":78},[72,2409,90],{"class":89},[72,2411,2412,2414,2416,2418],{"class":74,"line":93},[72,2413,79],{"class":78},[72,2415,1805],{"class":82},[72,2417,86],{"class":78},[72,2419,1810],{"class":89},[72,2421,2422,2424,2426,2428],{"class":74,"line":106},[72,2423,79],{"class":78},[72,2425,1817],{"class":82},[72,2427,86],{"class":78},[72,2429,1822],{"class":89},[72,2431,2432,2434,2436,2438],{"class":74,"line":119},[72,2433,79],{"class":78},[72,2435,1829],{"class":82},[72,2437,86],{"class":78},[72,2439,1834],{"class":89},[72,2441,2442],{"class":74,"line":180},[72,2443,457],{"emptyLinePlaceholder":456},[72,2445,2446,2448],{"class":74,"line":197},[72,2447,2030],{"class":78},[72,2449,2033],{"class":82},[72,2451,2452,2454],{"class":74,"line":202},[72,2453,2030],{"class":78},[72,2455,2040],{"class":82},[72,2457,2458,2460],{"class":74,"line":208},[72,2459,2030],{"class":78},[72,2461,2047],{"class":82},[72,2463,2464],{"class":74,"line":213},[72,2465,457],{"emptyLinePlaceholder":456},[72,2467,2468,2470,2472,2474],{"class":74,"line":225},[72,2469,2019],{"class":154},[72,2471,2058],{"class":82},[72,2473,319],{"class":78},[72,2475,161],{"class":82},[72,2477,2478,2480,2482,2484],{"class":74,"line":230},[72,2479,1955],{"class":154},[72,2481,1958],{"class":82},[72,2483,1774],{"class":190},[72,2485,1963],{"class":82},[72,2487,2488,2490,2492,2494,2496,2498,2500],{"class":74,"line":236},[72,2489,1968],{"class":82},[72,2491,480],{"class":78},[72,2493,1973],{"class":82},[72,2495,1920],{"class":154},[72,2497,887],{"class":82},[72,2499,1980],{"class":89},[72,2501,1671],{"class":82},[72,2503,2504,2506,2508,2510,2512,2514,2516,2518,2520],{"class":74,"line":241},[72,2505,2093],{"class":82},[72,2507,480],{"class":78},[72,2509,1973],{"class":82},[72,2511,1920],{"class":154},[72,2513,887],{"class":82},[72,2515,2104],{"class":89},[72,2517,2107],{"class":82},[72,2519,2110],{"class":89},[72,2521,2113],{"class":82},[72,2523,2524,2526,2528,2530,2532,2534,2536,2538,2540],{"class":74,"line":253},[72,2525,2118],{"class":82},[72,2527,480],{"class":78},[72,2529,1973],{"class":82},[72,2531,1920],{"class":154},[72,2533,887],{"class":82},[72,2535,2104],{"class":89},[72,2537,2107],{"class":82},[72,2539,2133],{"class":89},[72,2541,2113],{"class":82},[72,2543,2544],{"class":74,"line":258},[72,2545,2004],{"class":82},[72,2547,2548],{"class":74,"line":264},[72,2549,457],{"emptyLinePlaceholder":456},[72,2551,2552,2554,2556,2558,2560,2562],{"class":74,"line":269},[72,2553,1939],{"class":154},[72,2555,887],{"class":82},[72,2557,1855],{"class":89},[72,2559,1946],{"class":82},[72,2561,319],{"class":78},[72,2563,161],{"class":82},[72,2565,2566,2568,2570,2572,2574,2576],{"class":74,"line":281},[72,2567,1987],{"class":154},[72,2569,1990],{"class":82},[72,2571,1993],{"class":154},[72,2573,887],{"class":82},[72,2575,1668],{"class":190},[72,2577,1671],{"class":82},[72,2579,2580],{"class":74,"line":286},[72,2581,2004],{"class":82},[72,2583,2584],{"class":74,"line":292},[72,2585,457],{"emptyLinePlaceholder":456},[72,2587,2588,2590,2592,2594,2596,2598],{"class":74,"line":297},[72,2589,1939],{"class":154},[72,2591,887],{"class":82},[72,2593,1872],{"class":89},[72,2595,1946],{"class":82},[72,2597,319],{"class":78},[72,2599,161],{"class":82},[72,2601,2602,2604,2606,2608,2610,2612],{"class":74,"line":325},[72,2603,1987],{"class":154},[72,2605,1990],{"class":82},[72,2607,1993],{"class":154},[72,2609,887],{"class":82},[72,2611,1668],{"class":190},[72,2613,1671],{"class":82},[72,2615,2616,2618,2620],{"class":74,"line":629},[72,2617,2223],{"class":82},[72,2619,2226],{"class":154},[72,2621,2229],{"class":82},[72,2623,2624,2626,2628,2630,2632,2634],{"class":74,"line":639},[72,2625,1987],{"class":154},[72,2627,1990],{"class":82},[72,2629,1993],{"class":154},[72,2631,887],{"class":82},[72,2633,2242],{"class":190},[72,2635,1671],{"class":82},[72,2637,2638],{"class":74,"line":645},[72,2639,2004],{"class":82},[72,2641,2642],{"class":74,"line":1074},[72,2643,457],{"emptyLinePlaceholder":456},[72,2645,2646,2648,2650,2652,2654,2656],{"class":74,"line":1095},[72,2647,1939],{"class":154},[72,2649,887],{"class":82},[72,2651,1889],{"class":89},[72,2653,1946],{"class":82},[72,2655,319],{"class":78},[72,2657,161],{"class":82},[72,2659,2660,2662,2664],{"class":74,"line":1114},[72,2661,2223],{"class":82},[72,2663,2226],{"class":154},[72,2665,2229],{"class":82},[72,2667,2668,2670,2672,2674,2676,2678],{"class":74,"line":1119},[72,2669,1987],{"class":154},[72,2671,1990],{"class":82},[72,2673,1993],{"class":154},[72,2675,887],{"class":82},[72,2677,2242],{"class":190},[72,2679,1671],{"class":82},[72,2681,2682,2684,2686],{"class":74,"line":1130},[72,2683,2223],{"class":82},[72,2685,2226],{"class":154},[72,2687,2307],{"class":82},[72,2689,2690,2692,2694,2696,2698,2700],{"class":74,"line":1142},[72,2691,1987],{"class":154},[72,2693,1990],{"class":82},[72,2695,1993],{"class":154},[72,2697,887],{"class":82},[72,2699,1668],{"class":190},[72,2701,1671],{"class":82},[72,2703,2704],{"class":74,"line":1154},[72,2705,2004],{"class":82},[72,2707,2708],{"class":74,"line":1165},[72,2709,457],{"emptyLinePlaceholder":456},[72,2711,2712,2714,2716,2718,2720,2722],{"class":74,"line":1176},[72,2713,1939],{"class":154},[72,2715,887],{"class":82},[72,2717,1906],{"class":89},[72,2719,1946],{"class":82},[72,2721,319],{"class":78},[72,2723,161],{"class":82},[72,2725,2726,2728,2730,2732,2734,2736],{"class":74,"line":1182},[72,2727,1987],{"class":154},[72,2729,1990],{"class":82},[72,2731,1993],{"class":154},[72,2733,887],{"class":82},[72,2735,1668],{"class":190},[72,2737,1671],{"class":82},[72,2739,2740,2742,2744],{"class":74,"line":1193},[72,2741,2223],{"class":82},[72,2743,2226],{"class":154},[72,2745,2307],{"class":82},[72,2747,2748,2750,2752,2754,2756,2758],{"class":74,"line":1215},[72,2749,1987],{"class":154},[72,2751,1990],{"class":82},[72,2753,1993],{"class":154},[72,2755,887],{"class":82},[72,2757,1668],{"class":190},[72,2759,1671],{"class":82},[72,2761,2762],{"class":74,"line":1220},[72,2763,2004],{"class":82},[34,2765,2767],{"id":2766},"conclusion","Conclusion",[10,2769,2770],{},"And that's it. We now have a counter component that works as we would expect and can now be used in the component where it should be used knowing that it will work correctly. Compositions are a great way of seeing the different states of our components and we can then use the composition file to understand what we need to do to make our component work when using it in our next component/app.",[10,2772,2773],{},[41,2774],{"alt":2775,"src":2776},"counter component changing on click","https://res.cloudinary.com/debsobrien/image/upload/v1642011045/debbie.codes/blog/2022/counter-couting_zn9mcw.gif",[10,2778,2779],{},"We should also document our component so that it contains clear instructions and examples which makes it even easier for our consumer to understand what the component does and how to use it. And of course tests make sure our component not only works as expected but also that if we do make any changes to it our tests ensure that it can not be exported if our tests are broken meaning if we do have any breaking changes we can fix our tests and release a new major version of our component.",[34,2781,2783],{"id":2782},"useful-links","Useful Links",[2785,2786,2787,2795,2801,2808,2815],"ul",{},[2788,2789,2790],"li",{},[14,2791,2794],{"href":2792,"rel":2793},"https://bit.dev/learn-bit-react/ecommerce/ui/product/counter",[18],"Counter Component",[2788,2796,2797],{},[14,2798,2800],{"href":16,"rel":2799},[18],"Counter Component Code",[2788,2802,2803],{},[14,2804,2807],{"href":2805,"rel":2806},"https://bit.dev/learn-bit-react/ecommerce/ui/product/counter/~code/counter.composition.tsx",[18],"Counter Component Composition",[2788,2809,2810],{},[14,2811,2814],{"href":2812,"rel":2813},"https://bit.dev/learn-bit-react/ecommerce/ui/product/counter/~code/counter.spec.tsx",[18],"Counter Component Tests",[2788,2816,2817],{},[14,2818,2821],{"href":2819,"rel":2820},"https://testing-library.com/docs/react-testing-library/intro",[18],"React Testing Library",[2823,2824,2825],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":67,"searchDepth":93,"depth":93,"links":2827},[2828,2838,2839,2842,2843],{"id":36,"depth":93,"text":37,"children":2829},[2830,2831,2832,2833,2834,2835,2836,2837],{"id":47,"depth":106,"text":48},{"id":132,"depth":106,"text":133},{"id":352,"depth":106,"text":353},{"id":664,"depth":106,"text":665},{"id":715,"depth":106,"text":716},{"id":782,"depth":106,"text":783},{"id":857,"depth":106,"text":858},{"id":913,"depth":106,"text":914},{"id":1543,"depth":93,"text":1544},{"id":1753,"depth":93,"text":1754,"children":2840},[2841],{"id":2393,"depth":106,"text":2394},{"id":2766,"depth":93,"text":2767},{"id":2782,"depth":93,"text":2783},null,"2022-01-12","We want to build and test a counter component built with React and TypeScript. So where do we start? Which components do we need to build to create this component and what do we test?","md",false,"v1642010879/debbie.codes/blog/2022/counter_2x_ma1ik6",{},"/blog/building-and-testing-counter-component","cloudinary",{"title":5,"description":2846},"blog/building-and-testing-counter-component",[2856,2857],"react","testing","gkuANc8MYcLFT39bGM8Vkv2DAe9sRl8766hS5EZJJOU",[2860,2864],{"title":2861,"path":2862,"stem":2863,"children":-1},"Building a Cart Context Component","/blog/building-cart-context-component","blog/building-cart-context-component",{"title":2865,"path":2866,"stem":2867,"children":-1},"TypeScript and Children","/blog/typescript-and-children","blog/typescript-and-children",1790839747412]