[{"data":1,"prerenderedAt":2388},["ShallowReactive",2],{"blog-article-/blog/building-and-testing-select-input":3,"blog-surround-/blog/building-and-testing-select-input":2379},{"id":4,"title":5,"body":6,"canonical":2364,"date":2365,"description":2366,"extension":2367,"featured":2368,"image":2369,"meta":2370,"navigation":762,"ogImage":2364,"path":2371,"provider":2372,"published":762,"seo":2373,"stem":2374,"tags":2375,"url":2364,"__hash__":2378},"blog/blog/building-and-testing-select-input.md","Building and Testing a Select Component",{"type":7,"value":8,"toc":2340},"minimark",[9,42,47,53,58,61,129,133,148,264,268,275,326,330,347,429,433,462,476,650,654,667,706,710,713,1101,1104,1108,1111,1133,1148,1160,1170,1387,1390,1392,1396,1399,1403,1414,1466,1470,1473,1541,1545,1548,1553,1634,1638,1645,1744,1748,1763,1883,1887,1899,2028,2032,2056,2211,2213,2217,2220,2226,2229,2233,2241,2287,2291,2336],[10,11,12,13,20,21,26,27,35,36,41],"p",{},"I have created a component that is actually made up of 2 smaller components, a ",[14,15,19],"a",{"href":16,"rel":17},"https://bit.dev/learn-bit-react/base-ui/ui/forms/select",[18],"nofollow","Select"," element and a ",[14,22,25],{"href":23,"rel":24},"https://bit.dev/learn-bit-react/base-ui/ui/forms/label",[18],"Label",". Together these two components make up a component I have named ",[14,28,31],{"href":29,"rel":30},"https://bit.dev/learn-bit-react/ecommerce/ui/product/select-size",[18],[32,33,34],"code",{},"select-size"," and is the component used in the ",[14,37,40],{"href":38,"rel":39},"https://bit-shoe-store.netlify.app/",[18],"demo e-commerce project"," I have created in order for users to select the size of the product.",[43,44,46],"h2",{"id":45},"building-the-select-component","Building the Select Component",[10,48,49],{},[50,51],"img",{"alt":34,"src":52},"https://res.cloudinary.com/debsobrien/image/upload/v1641812664/debbie.codes/blog/2022/select_2x_g2mbjj",[54,55,57],"h3",{"id":56},"importing-react-testing-library-and-components","Importing React, Testing Library and Components",[10,59,60],{},"The component is built in React and TypeScript and imports React, useState and the two components needed to build this component as well as the styles.",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-jsx shiki shiki-themes github-light github-dark","import React, { useState } from 'react'\nimport { Select } from '@learn-bit-react/base-ui.ui.forms.select'\nimport { Label } from '@learn-bit-react/base-ui.ui.forms.label'\nimport styles from './select-size.module.scss'\n","jsx","",[32,69,70,90,103,116],{"__ignoreMap":67},[71,72,75,79,83,86],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"szBVR","import",[71,80,82],{"class":81},"sVt8B"," React, { useState } ",[71,84,85],{"class":77},"from",[71,87,89],{"class":88},"sZZnC"," 'react'\n",[71,91,93,95,98,100],{"class":73,"line":92},2,[71,94,78],{"class":77},[71,96,97],{"class":81}," { Select } ",[71,99,85],{"class":77},[71,101,102],{"class":88}," '@learn-bit-react/base-ui.ui.forms.select'\n",[71,104,106,108,111,113],{"class":73,"line":105},3,[71,107,78],{"class":77},[71,109,110],{"class":81}," { Label } ",[71,112,85],{"class":77},[71,114,115],{"class":88}," '@learn-bit-react/base-ui.ui.forms.label'\n",[71,117,119,121,124,126],{"class":73,"line":118},4,[71,120,78],{"class":77},[71,122,123],{"class":81}," styles ",[71,125,85],{"class":77},[71,127,128],{"class":88}," './select-size.module.scss'\n",[54,130,132],{"id":131},"prop-types","Prop Types",[10,134,135,136,139,140,143,144,147],{},"The props being passed down are the ",[32,137,138],{},"availableSizes"," which is an array of numbers and the ",[32,141,142],{},"sizeSelected"," which is a function that passes in the ",[32,145,146],{},"size"," of the product. As we are using Typescript we first export our types, this ensures our user can only use the types specified such as the array of available sizes can only be a number and not a string.",[62,149,151],{"className":64,"code":150,"language":66,"meta":67,"style":67},"export type SelectSizeProps = {\n  /**\n   * sizes as an array of numbers\n   */\n  availableSizes: number[],\n  /**\n   * a function that registers the selected size.\n   */\n  sizeSelected: size => void\n} & React.SelectHTMLAttributes\u003CHTMLSelectElement>\n",[32,152,153,171,177,182,187,204,209,215,220,237],{"__ignoreMap":67},[71,154,155,158,161,165,168],{"class":73,"line":74},[71,156,157],{"class":77},"export",[71,159,160],{"class":77}," type",[71,162,164],{"class":163},"sScJk"," SelectSizeProps",[71,166,167],{"class":77}," =",[71,169,170],{"class":81}," {\n",[71,172,173],{"class":73,"line":92},[71,174,176],{"class":175},"sJ8bj","  /**\n",[71,178,179],{"class":73,"line":105},[71,180,181],{"class":175},"   * sizes as an array of numbers\n",[71,183,184],{"class":73,"line":118},[71,185,186],{"class":175},"   */\n",[71,188,190,194,197,201],{"class":73,"line":189},5,[71,191,193],{"class":192},"s4XuR","  availableSizes",[71,195,196],{"class":77},":",[71,198,200],{"class":199},"sj4cs"," number",[71,202,203],{"class":81},"[],\n",[71,205,207],{"class":73,"line":206},6,[71,208,176],{"class":175},[71,210,212],{"class":73,"line":211},7,[71,213,214],{"class":175},"   * a function that registers the selected size.\n",[71,216,218],{"class":73,"line":217},8,[71,219,186],{"class":175},[71,221,223,226,228,231,234],{"class":73,"line":222},9,[71,224,225],{"class":192},"  sizeSelected",[71,227,196],{"class":77},[71,229,230],{"class":163}," size",[71,232,233],{"class":77}," =>",[71,235,236],{"class":199}," void\n",[71,238,240,243,246,249,252,255,258,261],{"class":73,"line":239},10,[71,241,242],{"class":81},"} ",[71,244,245],{"class":77},"&",[71,247,248],{"class":163}," React",[71,250,251],{"class":81},".",[71,253,254],{"class":163},"SelectHTMLAttributes",[71,256,257],{"class":81},"\u003C",[71,259,260],{"class":163},"HTMLSelectElement",[71,262,263],{"class":81},">\n",[54,265,267],{"id":266},"passing-down-props","Passing down Props",[10,269,270,271,274],{},"We then pass down the props into our SelectSize component as well as ",[32,272,273],{},"...rest"," which gives access to all other props that a html select element can have.",[62,276,278],{"className":64,"code":277,"language":66,"meta":67,"style":67},"export function SelectSize({\n  availableSizes,\n  sizeSelected,\n  ...rest\n}: SelectSizeProps) {}\n",[32,279,280,293,300,306,314],{"__ignoreMap":67},[71,281,282,284,287,290],{"class":73,"line":74},[71,283,157],{"class":77},[71,285,286],{"class":77}," function",[71,288,289],{"class":163}," SelectSize",[71,291,292],{"class":81},"({\n",[71,294,295,297],{"class":73,"line":92},[71,296,193],{"class":192},[71,298,299],{"class":81},",\n",[71,301,302,304],{"class":73,"line":105},[71,303,225],{"class":192},[71,305,299],{"class":81},[71,307,308,311],{"class":73,"line":118},[71,309,310],{"class":77},"  ...",[71,312,313],{"class":192},"rest\n",[71,315,316,319,321,323],{"class":73,"line":189},[71,317,318],{"class":81},"}",[71,320,196],{"class":77},[71,322,164],{"class":163},[71,324,325],{"class":81},") {}\n",[54,327,329],{"id":328},"adding-state","Adding State",[10,331,332,333,336,337,339,340,343,344,346],{},"Our component uses the ",[32,334,335],{},"useState"," hook to set the size of the product. ",[32,338,146],{}," is the value of the select element and ",[32,341,342],{},"setSize"," is the function that allows us to set a new value. The default state will be the first number of the ",[32,345,138],{}," array.",[62,348,350],{"className":64,"code":349,"language":66,"meta":67,"style":67},"export function SelectSize({\n  availableSizes,\n  sizeSelected,\n  ...rest\n}: SelectSizeProps) {\n  const [size, setSize] = useState(availableSizes[0])\n}\n",[32,351,352,362,368,374,380,391,424],{"__ignoreMap":67},[71,353,354,356,358,360],{"class":73,"line":74},[71,355,157],{"class":77},[71,357,286],{"class":77},[71,359,289],{"class":163},[71,361,292],{"class":81},[71,363,364,366],{"class":73,"line":92},[71,365,193],{"class":192},[71,367,299],{"class":81},[71,369,370,372],{"class":73,"line":105},[71,371,225],{"class":192},[71,373,299],{"class":81},[71,375,376,378],{"class":73,"line":118},[71,377,310],{"class":77},[71,379,313],{"class":192},[71,381,382,384,386,388],{"class":73,"line":189},[71,383,318],{"class":81},[71,385,196],{"class":77},[71,387,164],{"class":163},[71,389,390],{"class":81},") {\n",[71,392,393,396,399,401,404,406,409,412,415,418,421],{"class":73,"line":206},[71,394,395],{"class":77},"  const",[71,397,398],{"class":81}," [",[71,400,146],{"class":199},[71,402,403],{"class":81},", ",[71,405,342],{"class":199},[71,407,408],{"class":81},"] ",[71,410,411],{"class":77},"=",[71,413,414],{"class":163}," useState",[71,416,417],{"class":81},"(availableSizes[",[71,419,420],{"class":199},"0",[71,422,423],{"class":81},"])\n",[71,425,426],{"class":73,"line":211},[71,427,428],{"class":81},"}\n",[54,430,432],{"id":431},"using-the-select-and-label-components","Using the Select and Label Components",[10,434,435,436,440,441,444,445,447,448,452,453,456,457,459,460,346],{},"We can now add the return statement to our component and return the Select and Label components that we have imported. The ",[14,437,439],{"href":23,"rel":438},[18],"Label component"," is pretty straight forward and just adds some styles and the ",[32,442,443],{},"htmlFor"," attribute with the value of ",[32,446,146],{},". For the ",[14,449,451],{"href":16,"rel":450},[18],"Select component"," we need to add the ",[32,454,455],{},"id"," of ",[32,458,146],{},", the className for the styles, and the options for the select component which is equal to the value of the ",[32,461,138],{},[10,463,464,465,468,469,472,473,475],{},"The Select component takes in a prop of options and will map over the array to give us an ",[32,466,467],{},"\u003Coption>"," for each number in the array. We then need an ",[32,470,471],{},"onChange"," function to handle the change for every time the user changes the size. And of course we pass in the ",[32,474,273],{}," of the props that a html select element can take.",[62,477,479],{"className":64,"code":478,"language":66,"meta":67,"style":67},"const [size, setSize] = useState(availableSizes[0])\nreturn (\n  \u003Cdiv className={styles.selectSize}>\n    \u003CLabel className={styles.label} htmlFor=\"size\">\n      Choose a size:\n    \u003C/Label>\n    \u003CSelect\n      id=\"size\"\n      className={styles.select}\n      options={availableSizes}\n      onChange={handleChange}\n      {...rest}\n    />\n  \u003C/div>\n)\n",[32,480,481,506,514,531,554,559,568,575,585,595,605,616,628,634,644],{"__ignoreMap":67},[71,482,483,486,488,490,492,494,496,498,500,502,504],{"class":73,"line":74},[71,484,485],{"class":77},"const",[71,487,398],{"class":81},[71,489,146],{"class":199},[71,491,403],{"class":81},[71,493,342],{"class":199},[71,495,408],{"class":81},[71,497,411],{"class":77},[71,499,414],{"class":163},[71,501,417],{"class":81},[71,503,420],{"class":199},[71,505,423],{"class":81},[71,507,508,511],{"class":73,"line":92},[71,509,510],{"class":77},"return",[71,512,513],{"class":81}," (\n",[71,515,516,519,523,526,528],{"class":73,"line":105},[71,517,518],{"class":81},"  \u003C",[71,520,522],{"class":521},"s9eBZ","div",[71,524,525],{"class":163}," className",[71,527,411],{"class":77},[71,529,530],{"class":81},"{styles.selectSize}>\n",[71,532,533,536,538,540,542,545,547,549,552],{"class":73,"line":118},[71,534,535],{"class":81},"    \u003C",[71,537,25],{"class":199},[71,539,525],{"class":163},[71,541,411],{"class":77},[71,543,544],{"class":81},"{styles.label} ",[71,546,443],{"class":163},[71,548,411],{"class":77},[71,550,551],{"class":88},"\"size\"",[71,553,263],{"class":81},[71,555,556],{"class":73,"line":189},[71,557,558],{"class":81},"      Choose a size:\n",[71,560,561,564,566],{"class":73,"line":206},[71,562,563],{"class":81},"    \u003C/",[71,565,25],{"class":199},[71,567,263],{"class":81},[71,569,570,572],{"class":73,"line":211},[71,571,535],{"class":81},[71,573,574],{"class":199},"Select\n",[71,576,577,580,582],{"class":73,"line":217},[71,578,579],{"class":163},"      id",[71,581,411],{"class":77},[71,583,584],{"class":88},"\"size\"\n",[71,586,587,590,592],{"class":73,"line":222},[71,588,589],{"class":163},"      className",[71,591,411],{"class":77},[71,593,594],{"class":81},"{styles.select}\n",[71,596,597,600,602],{"class":73,"line":239},[71,598,599],{"class":163},"      options",[71,601,411],{"class":77},[71,603,604],{"class":81},"{availableSizes}\n",[71,606,608,611,613],{"class":73,"line":607},11,[71,609,610],{"class":163},"      onChange",[71,612,411],{"class":77},[71,614,615],{"class":81},"{handleChange}\n",[71,617,619,622,625],{"class":73,"line":618},12,[71,620,621],{"class":81},"      {",[71,623,624],{"class":77},"...",[71,626,627],{"class":81},"rest}\n",[71,629,631],{"class":73,"line":630},13,[71,632,633],{"class":81},"    />\n",[71,635,637,640,642],{"class":73,"line":636},14,[71,638,639],{"class":81},"  \u003C/",[71,641,522],{"class":521},[71,643,263],{"class":81},[71,645,647],{"class":73,"line":646},15,[71,648,649],{"class":81},")\n",[54,651,653],{"id":652},"creating-the-handlechange-function","Creating the handleChange function",[10,655,656,657,660,661,663,664,666],{},"We can now create our ",[32,658,659],{},"handleChange"," function which will set the state of ",[32,662,146],{}," to be the value of the select element as well as call the ",[32,665,142],{}," function with the value of the select element.",[62,668,670],{"className":64,"code":669,"language":66,"meta":67,"style":67},"function handleChange(e) {\n  setSize(e.target.value)\n  sizeSelected(e.target.value)\n}\n",[32,671,672,688,696,702],{"__ignoreMap":67},[71,673,674,677,680,683,686],{"class":73,"line":74},[71,675,676],{"class":77},"function",[71,678,679],{"class":163}," handleChange",[71,681,682],{"class":81},"(",[71,684,685],{"class":192},"e",[71,687,390],{"class":81},[71,689,690,693],{"class":73,"line":92},[71,691,692],{"class":163},"  setSize",[71,694,695],{"class":81},"(e.target.value)\n",[71,697,698,700],{"class":73,"line":105},[71,699,225],{"class":163},[71,701,695],{"class":81},[71,703,704],{"class":73,"line":118},[71,705,428],{"class":81},[54,707,709],{"id":708},"final-code","Final Code",[10,711,712],{},"The full code for our component will look like this:",[62,714,716],{"className":64,"code":715,"language":66,"meta":67,"style":67},"import React, { useState } from 'react'\nimport { Select } from '@learn-bit-react/base-ui.ui.forms.select'\nimport { Label } from '@learn-bit-react/base-ui.ui.forms.label'\nimport styles from './select-size.module.scss'\n\nexport type SelectSizeProps = {\n  /**\n   * sizes as an array of numbers\n   */\n  availableSizes: number[],\n  /**\n   * a function that registers the selected size.\n   */\n  sizeSelected: size => void\n} & React.SelectHTMLAttributes\u003CHTMLSelectElement>\n\nexport function SelectSize({\n  availableSizes,\n  sizeSelected,\n  ...rest\n}: SelectSizeProps) {\n  const [size, setSize] = useState(availableSizes[0])\n\n  function handleChange(e) {\n    setSize(e.target.value)\n    sizeSelected(e.target.value)\n  }\n\n  return (\n    \u003Cdiv className={styles.selectSize}>\n      \u003CLabel className={styles.label} htmlFor=\"size\">\n        Choose a size:\n      \u003C/Label>\n      \u003CSelect\n        id=\"size\"\n        className={styles.select}\n        options={availableSizes}\n        onChange={handleChange}\n        {...rest}\n      />\n    \u003C/div>\n  )\n}\n",[32,717,718,728,738,748,758,764,776,780,784,788,798,802,806,810,822,840,845,856,863,870,877,888,913,918,932,940,948,954,959,967,980,1002,1008,1018,1025,1035,1045,1055,1065,1075,1081,1090,1096],{"__ignoreMap":67},[71,719,720,722,724,726],{"class":73,"line":74},[71,721,78],{"class":77},[71,723,82],{"class":81},[71,725,85],{"class":77},[71,727,89],{"class":88},[71,729,730,732,734,736],{"class":73,"line":92},[71,731,78],{"class":77},[71,733,97],{"class":81},[71,735,85],{"class":77},[71,737,102],{"class":88},[71,739,740,742,744,746],{"class":73,"line":105},[71,741,78],{"class":77},[71,743,110],{"class":81},[71,745,85],{"class":77},[71,747,115],{"class":88},[71,749,750,752,754,756],{"class":73,"line":118},[71,751,78],{"class":77},[71,753,123],{"class":81},[71,755,85],{"class":77},[71,757,128],{"class":88},[71,759,760],{"class":73,"line":189},[71,761,763],{"emptyLinePlaceholder":762},true,"\n",[71,765,766,768,770,772,774],{"class":73,"line":206},[71,767,157],{"class":77},[71,769,160],{"class":77},[71,771,164],{"class":163},[71,773,167],{"class":77},[71,775,170],{"class":81},[71,777,778],{"class":73,"line":211},[71,779,176],{"class":175},[71,781,782],{"class":73,"line":217},[71,783,181],{"class":175},[71,785,786],{"class":73,"line":222},[71,787,186],{"class":175},[71,789,790,792,794,796],{"class":73,"line":239},[71,791,193],{"class":192},[71,793,196],{"class":77},[71,795,200],{"class":199},[71,797,203],{"class":81},[71,799,800],{"class":73,"line":607},[71,801,176],{"class":175},[71,803,804],{"class":73,"line":618},[71,805,214],{"class":175},[71,807,808],{"class":73,"line":630},[71,809,186],{"class":175},[71,811,812,814,816,818,820],{"class":73,"line":636},[71,813,225],{"class":192},[71,815,196],{"class":77},[71,817,230],{"class":163},[71,819,233],{"class":77},[71,821,236],{"class":199},[71,823,824,826,828,830,832,834,836,838],{"class":73,"line":646},[71,825,242],{"class":81},[71,827,245],{"class":77},[71,829,248],{"class":163},[71,831,251],{"class":81},[71,833,254],{"class":163},[71,835,257],{"class":81},[71,837,260],{"class":163},[71,839,263],{"class":81},[71,841,843],{"class":73,"line":842},16,[71,844,763],{"emptyLinePlaceholder":762},[71,846,848,850,852,854],{"class":73,"line":847},17,[71,849,157],{"class":77},[71,851,286],{"class":77},[71,853,289],{"class":163},[71,855,292],{"class":81},[71,857,859,861],{"class":73,"line":858},18,[71,860,193],{"class":192},[71,862,299],{"class":81},[71,864,866,868],{"class":73,"line":865},19,[71,867,225],{"class":192},[71,869,299],{"class":81},[71,871,873,875],{"class":73,"line":872},20,[71,874,310],{"class":77},[71,876,313],{"class":192},[71,878,880,882,884,886],{"class":73,"line":879},21,[71,881,318],{"class":81},[71,883,196],{"class":77},[71,885,164],{"class":163},[71,887,390],{"class":81},[71,889,891,893,895,897,899,901,903,905,907,909,911],{"class":73,"line":890},22,[71,892,395],{"class":77},[71,894,398],{"class":81},[71,896,146],{"class":199},[71,898,403],{"class":81},[71,900,342],{"class":199},[71,902,408],{"class":81},[71,904,411],{"class":77},[71,906,414],{"class":163},[71,908,417],{"class":81},[71,910,420],{"class":199},[71,912,423],{"class":81},[71,914,916],{"class":73,"line":915},23,[71,917,763],{"emptyLinePlaceholder":762},[71,919,921,924,926,928,930],{"class":73,"line":920},24,[71,922,923],{"class":77},"  function",[71,925,679],{"class":163},[71,927,682],{"class":81},[71,929,685],{"class":192},[71,931,390],{"class":81},[71,933,935,938],{"class":73,"line":934},25,[71,936,937],{"class":163},"    setSize",[71,939,695],{"class":81},[71,941,943,946],{"class":73,"line":942},26,[71,944,945],{"class":163},"    sizeSelected",[71,947,695],{"class":81},[71,949,951],{"class":73,"line":950},27,[71,952,953],{"class":81},"  }\n",[71,955,957],{"class":73,"line":956},28,[71,958,763],{"emptyLinePlaceholder":762},[71,960,962,965],{"class":73,"line":961},29,[71,963,964],{"class":77},"  return",[71,966,513],{"class":81},[71,968,970,972,974,976,978],{"class":73,"line":969},30,[71,971,535],{"class":81},[71,973,522],{"class":521},[71,975,525],{"class":163},[71,977,411],{"class":77},[71,979,530],{"class":81},[71,981,983,986,988,990,992,994,996,998,1000],{"class":73,"line":982},31,[71,984,985],{"class":81},"      \u003C",[71,987,25],{"class":199},[71,989,525],{"class":163},[71,991,411],{"class":77},[71,993,544],{"class":81},[71,995,443],{"class":163},[71,997,411],{"class":77},[71,999,551],{"class":88},[71,1001,263],{"class":81},[71,1003,1005],{"class":73,"line":1004},32,[71,1006,1007],{"class":81},"        Choose a size:\n",[71,1009,1011,1014,1016],{"class":73,"line":1010},33,[71,1012,1013],{"class":81},"      \u003C/",[71,1015,25],{"class":199},[71,1017,263],{"class":81},[71,1019,1021,1023],{"class":73,"line":1020},34,[71,1022,985],{"class":81},[71,1024,574],{"class":199},[71,1026,1028,1031,1033],{"class":73,"line":1027},35,[71,1029,1030],{"class":163},"        id",[71,1032,411],{"class":77},[71,1034,584],{"class":88},[71,1036,1038,1041,1043],{"class":73,"line":1037},36,[71,1039,1040],{"class":163},"        className",[71,1042,411],{"class":77},[71,1044,594],{"class":81},[71,1046,1048,1051,1053],{"class":73,"line":1047},37,[71,1049,1050],{"class":163},"        options",[71,1052,411],{"class":77},[71,1054,604],{"class":81},[71,1056,1058,1061,1063],{"class":73,"line":1057},38,[71,1059,1060],{"class":163},"        onChange",[71,1062,411],{"class":77},[71,1064,615],{"class":81},[71,1066,1068,1071,1073],{"class":73,"line":1067},39,[71,1069,1070],{"class":81},"        {",[71,1072,624],{"class":77},[71,1074,627],{"class":81},[71,1076,1078],{"class":73,"line":1077},40,[71,1079,1080],{"class":81},"      />\n",[71,1082,1084,1086,1088],{"class":73,"line":1083},41,[71,1085,563],{"class":81},[71,1087,522],{"class":521},[71,1089,263],{"class":81},[71,1091,1093],{"class":73,"line":1092},42,[71,1094,1095],{"class":81},"  )\n",[71,1097,1099],{"class":73,"line":1098},43,[71,1100,428],{"class":81},[1102,1103],"hr",{},[43,1105,1107],{"id":1106},"creating-compositions","Creating Compositions",[10,1109,1110],{},"We now need to make compositions for our component to see the component in action. Compositions are a feature of Bit that allows you to see your component in isolation. If not using Bit then you can create mocks to test your component.",[10,1112,1113,1114,1117,1118,1121,1122,1125,1126,1128,1129,1132],{},"My compositions imports React and useState as well as the component we just created. We then create a ",[32,1115,1116],{},"SelectSizeAndShowSelectedSize"," component that will render the ",[32,1119,1120],{},"SelectSize"," component. We first create a const of ",[32,1123,1124],{},"sizes"," equal to an array of numbers, the sizes the want to show. We then use the ",[32,1127,335],{}," hook to set the state of the ",[32,1130,1131],{},"selectedSize"," giving it the default of the first value from our sizes array.",[10,1134,1135,1136,1138,1139,1141,1142,1144,1145,1147],{},"Then in our component we make the prop of ",[32,1137,142],{}," equal to a function that passes in the argument of ",[32,1140,146],{}," and sets the state of ",[32,1143,1131],{}," to be the value of ",[32,1146,146],{},". This give us access to the value of the size selected so as we can use it in another component.",[10,1149,1150,1151,1153,1154,1156,1157,1159],{},"We also add the value of our ",[32,1152,1124],{}," array to the ",[32,1155,138],{}," prop of the ",[32,1158,1120],{}," component.",[10,1161,1162,1163,1166,1167,1169],{},"And finally we add a ",[32,1164,1165],{},"\u003Cp>"," tag with the value of the ",[32,1168,1131],{}," so we can see the size of the product updated in the UI as we change it.",[62,1171,1173],{"className":64,"code":1172,"language":66,"meta":67,"style":67},"import React, { useState } from 'react'\nimport { SelectSize } from './select-size'\n\nexport function SelectSizeAndShowSelectedSize() {\n  const sizes = [36, 37, 38, 39, 40, 45, 46, 47]\n  const [selectedSize, setSelectedSize] = useState(sizes[0])\n\n  return (\n    \u003C>\n      \u003CSelectSize\n        sizeSelected={size => {\n          setSelectedSize(parseInt(size))\n        }}\n        availableSizes={sizes}\n      />\n      \u003Cp>You're selected size is: {selectedSize}\u003C/p>\n    \u003C/>\n  )\n}\n",[32,1174,1175,1185,1197,1201,1213,1265,1291,1295,1301,1306,1313,1329,1342,1347,1357,1361,1374,1379,1383],{"__ignoreMap":67},[71,1176,1177,1179,1181,1183],{"class":73,"line":74},[71,1178,78],{"class":77},[71,1180,82],{"class":81},[71,1182,85],{"class":77},[71,1184,89],{"class":88},[71,1186,1187,1189,1192,1194],{"class":73,"line":92},[71,1188,78],{"class":77},[71,1190,1191],{"class":81}," { SelectSize } ",[71,1193,85],{"class":77},[71,1195,1196],{"class":88}," './select-size'\n",[71,1198,1199],{"class":73,"line":105},[71,1200,763],{"emptyLinePlaceholder":762},[71,1202,1203,1205,1207,1210],{"class":73,"line":118},[71,1204,157],{"class":77},[71,1206,286],{"class":77},[71,1208,1209],{"class":163}," SelectSizeAndShowSelectedSize",[71,1211,1212],{"class":81},"() {\n",[71,1214,1215,1217,1220,1222,1224,1227,1229,1232,1234,1237,1239,1242,1244,1247,1249,1252,1254,1257,1259,1262],{"class":73,"line":189},[71,1216,395],{"class":77},[71,1218,1219],{"class":199}," sizes",[71,1221,167],{"class":77},[71,1223,398],{"class":81},[71,1225,1226],{"class":199},"36",[71,1228,403],{"class":81},[71,1230,1231],{"class":199},"37",[71,1233,403],{"class":81},[71,1235,1236],{"class":199},"38",[71,1238,403],{"class":81},[71,1240,1241],{"class":199},"39",[71,1243,403],{"class":81},[71,1245,1246],{"class":199},"40",[71,1248,403],{"class":81},[71,1250,1251],{"class":199},"45",[71,1253,403],{"class":81},[71,1255,1256],{"class":199},"46",[71,1258,403],{"class":81},[71,1260,1261],{"class":199},"47",[71,1263,1264],{"class":81},"]\n",[71,1266,1267,1269,1271,1273,1275,1278,1280,1282,1284,1287,1289],{"class":73,"line":206},[71,1268,395],{"class":77},[71,1270,398],{"class":81},[71,1272,1131],{"class":199},[71,1274,403],{"class":81},[71,1276,1277],{"class":199},"setSelectedSize",[71,1279,408],{"class":81},[71,1281,411],{"class":77},[71,1283,414],{"class":163},[71,1285,1286],{"class":81},"(sizes[",[71,1288,420],{"class":199},[71,1290,423],{"class":81},[71,1292,1293],{"class":73,"line":211},[71,1294,763],{"emptyLinePlaceholder":762},[71,1296,1297,1299],{"class":73,"line":217},[71,1298,964],{"class":77},[71,1300,513],{"class":81},[71,1302,1303],{"class":73,"line":222},[71,1304,1305],{"class":81},"    \u003C>\n",[71,1307,1308,1310],{"class":73,"line":239},[71,1309,985],{"class":81},[71,1311,1312],{"class":199},"SelectSize\n",[71,1314,1315,1318,1320,1323,1325,1327],{"class":73,"line":607},[71,1316,1317],{"class":163},"        sizeSelected",[71,1319,411],{"class":77},[71,1321,1322],{"class":81},"{",[71,1324,146],{"class":192},[71,1326,233],{"class":77},[71,1328,170],{"class":81},[71,1330,1331,1334,1336,1339],{"class":73,"line":618},[71,1332,1333],{"class":163},"          setSelectedSize",[71,1335,682],{"class":81},[71,1337,1338],{"class":163},"parseInt",[71,1340,1341],{"class":81},"(size))\n",[71,1343,1344],{"class":73,"line":630},[71,1345,1346],{"class":81},"        }}\n",[71,1348,1349,1352,1354],{"class":73,"line":636},[71,1350,1351],{"class":163},"        availableSizes",[71,1353,411],{"class":77},[71,1355,1356],{"class":81},"{sizes}\n",[71,1358,1359],{"class":73,"line":646},[71,1360,1080],{"class":81},[71,1362,1363,1365,1367,1370,1372],{"class":73,"line":842},[71,1364,985],{"class":81},[71,1366,10],{"class":521},[71,1368,1369],{"class":81},">You're selected size is: {selectedSize}\u003C/",[71,1371,10],{"class":521},[71,1373,263],{"class":81},[71,1375,1376],{"class":73,"line":847},[71,1377,1378],{"class":81},"    \u003C/>\n",[71,1380,1381],{"class":73,"line":858},[71,1382,1095],{"class":81},[71,1384,1385],{"class":73,"line":865},[71,1386,428],{"class":81},[10,1388,1389],{},"We can now see our component works as we would expect it to. As we are building this component using Bit I have a dev server that shows me the component running in isolation. If you are not using Bit then you will need to import it into another component to see it working.",[1102,1391],{},[54,1393,1395],{"id":1394},"writing-tests","Writing Tests",[10,1397,1398],{},"We can therefore move on to write the tests for this component and use the composition created in order to test it.",[54,1400,1402],{"id":1401},"importing-what-we-need","Importing what we need",[10,1404,1405,1406,1409,1410,1413],{},"We are using Testing Library to test our component so we need to import ",[32,1407,1408],{},"render, screen, userEvent"," from ",[32,1411,1412],{},"@testing-library/react"," as well as React from 'react'. We also need to import our composition component as our tests are based on the composition we created earlier.",[62,1415,1417],{"className":64,"code":1416,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n",[32,1418,1419,1430,1442,1454],{"__ignoreMap":67},[71,1420,1421,1423,1426,1428],{"class":73,"line":74},[71,1422,78],{"class":77},[71,1424,1425],{"class":81}," React ",[71,1427,85],{"class":77},[71,1429,89],{"class":88},[71,1431,1432,1434,1437,1439],{"class":73,"line":92},[71,1433,78],{"class":77},[71,1435,1436],{"class":81}," { render, screen } ",[71,1438,85],{"class":77},[71,1440,1441],{"class":88}," '@testing-library/react'\n",[71,1443,1444,1446,1449,1451],{"class":73,"line":105},[71,1445,78],{"class":77},[71,1447,1448],{"class":81}," userEvent ",[71,1450,85],{"class":77},[71,1452,1453],{"class":88}," '@testing-library/user-event'\n",[71,1455,1456,1458,1461,1463],{"class":73,"line":118},[71,1457,78],{"class":77},[71,1459,1460],{"class":81}," { SelectSizeAndShowSelectedSize } ",[71,1462,85],{"class":77},[71,1464,1465],{"class":88}," './select-size.composition'\n",[54,1467,1469],{"id":1468},"describing-our-test","Describing our Test",[10,1471,1472],{},"Our test should check that the value changes when the user chooses a new size so we can start with that as a description.",[62,1474,1476],{"className":64,"code":1475,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n\nit('checks value changes when user chooses a new size', () => {})\n",[32,1477,1478,1488,1498,1508,1518,1522],{"__ignoreMap":67},[71,1479,1480,1482,1484,1486],{"class":73,"line":74},[71,1481,78],{"class":77},[71,1483,1425],{"class":81},[71,1485,85],{"class":77},[71,1487,89],{"class":88},[71,1489,1490,1492,1494,1496],{"class":73,"line":92},[71,1491,78],{"class":77},[71,1493,1436],{"class":81},[71,1495,85],{"class":77},[71,1497,1441],{"class":88},[71,1499,1500,1502,1504,1506],{"class":73,"line":105},[71,1501,78],{"class":77},[71,1503,1448],{"class":81},[71,1505,85],{"class":77},[71,1507,1453],{"class":88},[71,1509,1510,1512,1514,1516],{"class":73,"line":118},[71,1511,78],{"class":77},[71,1513,1460],{"class":81},[71,1515,85],{"class":77},[71,1517,1465],{"class":88},[71,1519,1520],{"class":73,"line":189},[71,1521,763],{"emptyLinePlaceholder":762},[71,1523,1524,1527,1529,1532,1535,1538],{"class":73,"line":206},[71,1525,1526],{"class":163},"it",[71,1528,682],{"class":81},[71,1530,1531],{"class":88},"'checks value changes when user chooses a new size'",[71,1533,1534],{"class":81},", () ",[71,1536,1537],{"class":77},"=>",[71,1539,1540],{"class":81}," {})\n",[54,1542,1544],{"id":1543},"rendering-our-composition-component","Rendering our Composition Component",[10,1546,1547],{},"We then render the component we want to test which is the component we created in our composition file which uses our select size component and also adds in a ",[10,1549,1166,1550,1552],{},[32,1551,1131],{}," so we can see the size of the product selected as we change it.",[62,1554,1556],{"className":64,"code":1555,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n\nit('checks value changes when user chooses a new size', () => {\n  render(\u003CSelectSizeAndShowSelectedSize />)\n})\n",[32,1557,1558,1568,1578,1588,1598,1602,1616,1629],{"__ignoreMap":67},[71,1559,1560,1562,1564,1566],{"class":73,"line":74},[71,1561,78],{"class":77},[71,1563,1425],{"class":81},[71,1565,85],{"class":77},[71,1567,89],{"class":88},[71,1569,1570,1572,1574,1576],{"class":73,"line":92},[71,1571,78],{"class":77},[71,1573,1436],{"class":81},[71,1575,85],{"class":77},[71,1577,1441],{"class":88},[71,1579,1580,1582,1584,1586],{"class":73,"line":105},[71,1581,78],{"class":77},[71,1583,1448],{"class":81},[71,1585,85],{"class":77},[71,1587,1453],{"class":88},[71,1589,1590,1592,1594,1596],{"class":73,"line":118},[71,1591,78],{"class":77},[71,1593,1460],{"class":81},[71,1595,85],{"class":77},[71,1597,1465],{"class":88},[71,1599,1600],{"class":73,"line":189},[71,1601,763],{"emptyLinePlaceholder":762},[71,1603,1604,1606,1608,1610,1612,1614],{"class":73,"line":206},[71,1605,1526],{"class":163},[71,1607,682],{"class":81},[71,1609,1531],{"class":88},[71,1611,1534],{"class":81},[71,1613,1537],{"class":77},[71,1615,170],{"class":81},[71,1617,1618,1621,1624,1626],{"class":73,"line":211},[71,1619,1620],{"class":163},"  render",[71,1622,1623],{"class":81},"(\u003C",[71,1625,1116],{"class":199},[71,1627,1628],{"class":81}," />)\n",[71,1630,1631],{"class":73,"line":217},[71,1632,1633],{"class":81},"})\n",[54,1635,1637],{"id":1636},"checking-what-role-exists","Checking what Role Exists",[10,1639,1640,1641,1644],{},"In order to see what role is available can use the ",[32,1642,1643],{},"screen.getByRole"," function and pass in any string. This will tell us that the role we are looking for doesn't exist but will show us what roles do exist on our component.",[62,1646,1648],{"className":64,"code":1647,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n\nit('checks value changes when user chooses a new size', () => {\n  render(\u003CSelectSizeAndShowSelectedSize />)\n  const selectSizeAndShowSelectedSize = screen.getByRole('blah')\n",[32,1649,1650,1660,1670,1684,1694,1698,1712,1722],{"__ignoreMap":67},[71,1651,1652,1654,1656,1658],{"class":73,"line":74},[71,1653,78],{"class":77},[71,1655,1425],{"class":81},[71,1657,85],{"class":77},[71,1659,89],{"class":88},[71,1661,1662,1664,1666,1668],{"class":73,"line":92},[71,1663,78],{"class":77},[71,1665,1436],{"class":81},[71,1667,85],{"class":77},[71,1669,1441],{"class":88},[71,1671,1672,1674,1676,1678,1681],{"class":73,"line":105},[71,1673,78],{"class":77},[71,1675,1448],{"class":81},[71,1677,85],{"class":77},[71,1679,1680],{"class":88}," '@testing-library/user-event'",[71,1682,1683],{"class":81},";\n",[71,1685,1686,1688,1690,1692],{"class":73,"line":118},[71,1687,78],{"class":77},[71,1689,1460],{"class":81},[71,1691,85],{"class":77},[71,1693,1465],{"class":88},[71,1695,1696],{"class":73,"line":189},[71,1697,763],{"emptyLinePlaceholder":762},[71,1699,1700,1702,1704,1706,1708,1710],{"class":73,"line":206},[71,1701,1526],{"class":163},[71,1703,682],{"class":81},[71,1705,1531],{"class":88},[71,1707,1534],{"class":81},[71,1709,1537],{"class":77},[71,1711,170],{"class":81},[71,1713,1714,1716,1718,1720],{"class":73,"line":211},[71,1715,1620],{"class":163},[71,1717,1623],{"class":81},[71,1719,1116],{"class":199},[71,1721,1628],{"class":81},[71,1723,1724,1726,1729,1731,1734,1737,1739,1742],{"class":73,"line":217},[71,1725,395],{"class":77},[71,1727,1728],{"class":199}," selectSizeAndShowSelectedSize",[71,1730,167],{"class":77},[71,1732,1733],{"class":81}," screen.",[71,1735,1736],{"class":163},"getByRole",[71,1738,682],{"class":81},[71,1740,1741],{"class":88},"'blah'",[71,1743,649],{"class":81},[54,1745,1747],{"id":1746},"getting-by-correct-role","Getting by Correct Role",[10,1749,1750,1751,1754,1755,1758,1759,1762],{},"As we are running our tests in watch mode we can see that the role ",[32,1752,1753],{},"blah"," does not exist but it tells us that ",[32,1756,1757],{},"combobox"," does exist meaning we can use this for our role. We can also pass in the name with the value of the label. This also makes sure we have the correct label. Adding in a regex with ",[32,1760,1761],{},"i"," at the end means we won't have to worry about case sensitivity.",[62,1764,1766],{"className":64,"code":1765,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n\nit('checks value changes when user chooses a new size', () => {\n  render(\u003CSelectSizeAndShowSelectedSize />)\n  const selectSizeAndShowSelectedSize = screen.getByRole('combobox', {\n    name: /choose a size/i\n  })\n})\n",[32,1767,1768,1778,1788,1798,1808,1812,1826,1836,1856,1874,1879],{"__ignoreMap":67},[71,1769,1770,1772,1774,1776],{"class":73,"line":74},[71,1771,78],{"class":77},[71,1773,1425],{"class":81},[71,1775,85],{"class":77},[71,1777,89],{"class":88},[71,1779,1780,1782,1784,1786],{"class":73,"line":92},[71,1781,78],{"class":77},[71,1783,1436],{"class":81},[71,1785,85],{"class":77},[71,1787,1441],{"class":88},[71,1789,1790,1792,1794,1796],{"class":73,"line":105},[71,1791,78],{"class":77},[71,1793,1448],{"class":81},[71,1795,85],{"class":77},[71,1797,1453],{"class":88},[71,1799,1800,1802,1804,1806],{"class":73,"line":118},[71,1801,78],{"class":77},[71,1803,1460],{"class":81},[71,1805,85],{"class":77},[71,1807,1465],{"class":88},[71,1809,1810],{"class":73,"line":189},[71,1811,763],{"emptyLinePlaceholder":762},[71,1813,1814,1816,1818,1820,1822,1824],{"class":73,"line":206},[71,1815,1526],{"class":163},[71,1817,682],{"class":81},[71,1819,1531],{"class":88},[71,1821,1534],{"class":81},[71,1823,1537],{"class":77},[71,1825,170],{"class":81},[71,1827,1828,1830,1832,1834],{"class":73,"line":211},[71,1829,1620],{"class":163},[71,1831,1623],{"class":81},[71,1833,1116],{"class":199},[71,1835,1628],{"class":81},[71,1837,1838,1840,1842,1844,1846,1848,1850,1853],{"class":73,"line":217},[71,1839,395],{"class":77},[71,1841,1728],{"class":199},[71,1843,167],{"class":77},[71,1845,1733],{"class":81},[71,1847,1736],{"class":163},[71,1849,682],{"class":81},[71,1851,1852],{"class":88},"'combobox'",[71,1854,1855],{"class":81},", {\n",[71,1857,1858,1861,1864,1868,1871],{"class":73,"line":222},[71,1859,1860],{"class":81},"    name:",[71,1862,1863],{"class":88}," /",[71,1865,1867],{"class":1866},"sA_wV","choose a size",[71,1869,1870],{"class":88},"/",[71,1872,1873],{"class":77},"i\n",[71,1875,1876],{"class":73,"line":239},[71,1877,1878],{"class":81},"  })\n",[71,1880,1881],{"class":73,"line":607},[71,1882,1633],{"class":81},[54,1884,1886],{"id":1885},"expecting-our-component-to-have-correct-value","Expecting our Component to Have Correct Value",[10,1888,1889,1890,1893,1894,1896,1897,251],{},"We now use ",[32,1891,1892],{},"expect"," to make sure our component has the correct value which will be the default value we set it to. We can see what value this is by first adding in any value such as ",[32,1895,420],{}," and seeing our test fail. The failing test will tell us what value it is expecting which should be the first value in our array that we created in the composition file, ",[32,1898,1226],{},[62,1900,1902],{"className":64,"code":1901,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n\nit('checks value changes when user chooses a new size', () => {\n  render(\u003CSelectSizeAndShowSelectedSize />)\n  const selectSizeAndShowSelectedSize = screen.getByRole('combobox', {\n    name: /choose a size/i\n  })\n  expect(selectSizeAndShowSelectedSize).toHaveValue('36')\n})\n",[32,1903,1904,1914,1924,1934,1944,1948,1962,1972,1990,2002,2006,2024],{"__ignoreMap":67},[71,1905,1906,1908,1910,1912],{"class":73,"line":74},[71,1907,78],{"class":77},[71,1909,1425],{"class":81},[71,1911,85],{"class":77},[71,1913,89],{"class":88},[71,1915,1916,1918,1920,1922],{"class":73,"line":92},[71,1917,78],{"class":77},[71,1919,1436],{"class":81},[71,1921,85],{"class":77},[71,1923,1441],{"class":88},[71,1925,1926,1928,1930,1932],{"class":73,"line":105},[71,1927,78],{"class":77},[71,1929,1448],{"class":81},[71,1931,85],{"class":77},[71,1933,1453],{"class":88},[71,1935,1936,1938,1940,1942],{"class":73,"line":118},[71,1937,78],{"class":77},[71,1939,1460],{"class":81},[71,1941,85],{"class":77},[71,1943,1465],{"class":88},[71,1945,1946],{"class":73,"line":189},[71,1947,763],{"emptyLinePlaceholder":762},[71,1949,1950,1952,1954,1956,1958,1960],{"class":73,"line":206},[71,1951,1526],{"class":163},[71,1953,682],{"class":81},[71,1955,1531],{"class":88},[71,1957,1534],{"class":81},[71,1959,1537],{"class":77},[71,1961,170],{"class":81},[71,1963,1964,1966,1968,1970],{"class":73,"line":211},[71,1965,1620],{"class":163},[71,1967,1623],{"class":81},[71,1969,1116],{"class":199},[71,1971,1628],{"class":81},[71,1973,1974,1976,1978,1980,1982,1984,1986,1988],{"class":73,"line":217},[71,1975,395],{"class":77},[71,1977,1728],{"class":199},[71,1979,167],{"class":77},[71,1981,1733],{"class":81},[71,1983,1736],{"class":163},[71,1985,682],{"class":81},[71,1987,1852],{"class":88},[71,1989,1855],{"class":81},[71,1991,1992,1994,1996,1998,2000],{"class":73,"line":222},[71,1993,1860],{"class":81},[71,1995,1863],{"class":88},[71,1997,1867],{"class":1866},[71,1999,1870],{"class":88},[71,2001,1873],{"class":77},[71,2003,2004],{"class":73,"line":239},[71,2005,1878],{"class":81},[71,2007,2008,2011,2014,2017,2019,2022],{"class":73,"line":607},[71,2009,2010],{"class":163},"  expect",[71,2012,2013],{"class":81},"(selectSizeAndShowSelectedSize).",[71,2015,2016],{"class":163},"toHaveValue",[71,2018,682],{"class":81},[71,2020,2021],{"class":88},"'36'",[71,2023,649],{"class":81},[71,2025,2026],{"class":73,"line":618},[71,2027,1633],{"class":81},[54,2029,2031],{"id":2030},"firing-an-event-and-expecting-the-value-to-change","Firing an Event and Expecting the Value to Change",[10,2033,2034,2035,2038,2039,2042,2043,2046,2047,2050,2051,2053,2054,251],{},"As we want to make sure the value is updated when the user chooses a new size we can use the ",[32,2036,2037],{},"userEvent"," method with the ",[32,2040,2041],{},"change"," function passing in what we want to change and what the target is. In our case it is the const of ",[32,2044,2045],{},"selectSizeAndShowSelectedSize"," and the target is the ",[32,2048,2049],{},"value"," and we can add in what value we want to change it to. We then use the ",[32,2052,1892],{}," method to make sure the value has been updated correctly to the new value of the ",[32,2055,2037],{},[62,2057,2059],{"className":64,"code":2058,"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 { SelectSizeAndShowSelectedSize } from './select-size.composition'\n\nit('checks value changes when user chooses a new size', () => {\n  render(\u003CSelectSizeAndShowSelectedSize />)\n  const selectSizeAndShowSelectedSize = screen.getByRole('combobox', {\n    name: /choose a size/i\n  })\n  expect(selectSizeAndShowSelectedSize).toHaveValue('36')\n  userEvent.selectOptions(selectSizeAndShowSelectedSize, '45')\n  expect(selectSizeAndShowSelectedSize).toHaveValue('45')\n})\n",[32,2060,2061,2071,2081,2091,2101,2105,2119,2129,2147,2159,2163,2177,2193,2207],{"__ignoreMap":67},[71,2062,2063,2065,2067,2069],{"class":73,"line":74},[71,2064,78],{"class":77},[71,2066,1425],{"class":81},[71,2068,85],{"class":77},[71,2070,89],{"class":88},[71,2072,2073,2075,2077,2079],{"class":73,"line":92},[71,2074,78],{"class":77},[71,2076,1436],{"class":81},[71,2078,85],{"class":77},[71,2080,1441],{"class":88},[71,2082,2083,2085,2087,2089],{"class":73,"line":105},[71,2084,78],{"class":77},[71,2086,1448],{"class":81},[71,2088,85],{"class":77},[71,2090,1453],{"class":88},[71,2092,2093,2095,2097,2099],{"class":73,"line":118},[71,2094,78],{"class":77},[71,2096,1460],{"class":81},[71,2098,85],{"class":77},[71,2100,1465],{"class":88},[71,2102,2103],{"class":73,"line":189},[71,2104,763],{"emptyLinePlaceholder":762},[71,2106,2107,2109,2111,2113,2115,2117],{"class":73,"line":206},[71,2108,1526],{"class":163},[71,2110,682],{"class":81},[71,2112,1531],{"class":88},[71,2114,1534],{"class":81},[71,2116,1537],{"class":77},[71,2118,170],{"class":81},[71,2120,2121,2123,2125,2127],{"class":73,"line":211},[71,2122,1620],{"class":163},[71,2124,1623],{"class":81},[71,2126,1116],{"class":199},[71,2128,1628],{"class":81},[71,2130,2131,2133,2135,2137,2139,2141,2143,2145],{"class":73,"line":217},[71,2132,395],{"class":77},[71,2134,1728],{"class":199},[71,2136,167],{"class":77},[71,2138,1733],{"class":81},[71,2140,1736],{"class":163},[71,2142,682],{"class":81},[71,2144,1852],{"class":88},[71,2146,1855],{"class":81},[71,2148,2149,2151,2153,2155,2157],{"class":73,"line":222},[71,2150,1860],{"class":81},[71,2152,1863],{"class":88},[71,2154,1867],{"class":1866},[71,2156,1870],{"class":88},[71,2158,1873],{"class":77},[71,2160,2161],{"class":73,"line":239},[71,2162,1878],{"class":81},[71,2164,2165,2167,2169,2171,2173,2175],{"class":73,"line":607},[71,2166,2010],{"class":163},[71,2168,2013],{"class":81},[71,2170,2016],{"class":163},[71,2172,682],{"class":81},[71,2174,2021],{"class":88},[71,2176,649],{"class":81},[71,2178,2179,2182,2185,2188,2191],{"class":73,"line":618},[71,2180,2181],{"class":81},"  userEvent.",[71,2183,2184],{"class":163},"selectOptions",[71,2186,2187],{"class":81},"(selectSizeAndShowSelectedSize, ",[71,2189,2190],{"class":88},"'45'",[71,2192,649],{"class":81},[71,2194,2195,2197,2199,2201,2203,2205],{"class":73,"line":630},[71,2196,2010],{"class":163},[71,2198,2013],{"class":81},[71,2200,2016],{"class":163},[71,2202,682],{"class":81},[71,2204,2190],{"class":88},[71,2206,649],{"class":81},[71,2208,2209],{"class":73,"line":636},[71,2210,1633],{"class":81},[1102,2212],{},[43,2214,2216],{"id":2215},"conclusion","Conclusion",[10,2218,2219],{},"And that's it. We now have a select 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,2221,2222],{},[50,2223],{"alt":2224,"src":2225},"select element changing size on click","https://res.cloudinary.com/debsobrien/video/upload/f_auto,q_auto/v1641812321/debbie.codes/blog/2022/select-on-change_bvkj1x.gif",[10,2227,2228],{},"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.",[43,2230,2232],{"id":2231},"using-the-component","Using the Component",[10,2234,2235,2236,2240],{},"The ",[14,2237,2239],{"href":29,"rel":2238},[18],"select size component can be found here"," and is fully open source meaning you can install it in your own project using bit, npm or yarn so feel free to take it for a test drive.",[62,2242,2246],{"className":2243,"code":2244,"language":2245,"meta":67,"style":67},"language-bash shiki shiki-themes github-light github-dark","bit install @learn-bit-react/ecommerce.ui.product.select-size\n\nnpm i @learn-bit-react/ecommerce.ui.product.select-size\n\nyarn add @learn-bit-react/ecommerce.ui.product.select-size\n","bash",[32,2247,2248,2259,2263,2273,2277],{"__ignoreMap":67},[71,2249,2250,2253,2256],{"class":73,"line":74},[71,2251,2252],{"class":163},"bit",[71,2254,2255],{"class":88}," install",[71,2257,2258],{"class":88}," @learn-bit-react/ecommerce.ui.product.select-size\n",[71,2260,2261],{"class":73,"line":92},[71,2262,763],{"emptyLinePlaceholder":762},[71,2264,2265,2268,2271],{"class":73,"line":105},[71,2266,2267],{"class":163},"npm",[71,2269,2270],{"class":88}," i",[71,2272,2258],{"class":88},[71,2274,2275],{"class":73,"line":118},[71,2276,763],{"emptyLinePlaceholder":762},[71,2278,2279,2282,2285],{"class":73,"line":189},[71,2280,2281],{"class":163},"yarn",[71,2283,2284],{"class":88}," add",[71,2286,2258],{"class":88},[43,2288,2290],{"id":2289},"useful-links","Useful Links",[2292,2293,2294,2301,2308,2315,2322,2329],"ul",{},[2295,2296,2297],"li",{},[14,2298,2300],{"href":29,"rel":2299},[18],"Select Size Component",[2295,2302,2303],{},[14,2304,2307],{"href":2305,"rel":2306},"https://bit.dev/learn-bit-react/ecommerce/ui/product/select-size/~code/select-size.tsx",[18],"Select Size Component Code",[2295,2309,2310],{},[14,2311,2314],{"href":2312,"rel":2313},"https://bit.dev/learn-bit-react/ecommerce/ui/product/select-size/~code/select-size.composition.tsx",[18],"Select Size Component composition",[2295,2316,2317],{},[14,2318,2321],{"href":2319,"rel":2320},"https://bit.dev/learn-bit-react/ecommerce/ui/product/select-size/~code/select-size.spec.tsx",[18],"Select Size Test File",[2295,2323,2324],{},[14,2325,2328],{"href":2326,"rel":2327},"https://testing-library.com/docs/ecosystem-user-event/#selectoptionselement-values-options",[18],"Testing Library Docs",[2295,2330,2331],{},[14,2332,2335],{"href":2333,"rel":2334},"https://beta.reactjs.org/reference/usestate",[18],"docs for useState()",[2337,2338,2339],"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}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":67,"searchDepth":92,"depth":92,"links":2341},[2342,2351,2361,2362,2363],{"id":45,"depth":92,"text":46,"children":2343},[2344,2345,2346,2347,2348,2349,2350],{"id":56,"depth":105,"text":57},{"id":131,"depth":105,"text":132},{"id":266,"depth":105,"text":267},{"id":328,"depth":105,"text":329},{"id":431,"depth":105,"text":432},{"id":652,"depth":105,"text":653},{"id":708,"depth":105,"text":709},{"id":1106,"depth":92,"text":1107,"children":2352},[2353,2354,2355,2356,2357,2358,2359,2360],{"id":1394,"depth":105,"text":1395},{"id":1401,"depth":105,"text":1402},{"id":1468,"depth":105,"text":1469},{"id":1543,"depth":105,"text":1544},{"id":1636,"depth":105,"text":1637},{"id":1746,"depth":105,"text":1747},{"id":1885,"depth":105,"text":1886},{"id":2030,"depth":105,"text":2031},{"id":2215,"depth":92,"text":2216},{"id":2231,"depth":92,"text":2232},{"id":2289,"depth":92,"text":2290},null,"2022-01-10","Building a Select component with a Composition to see the component render in isolation as well as Tests using React Testing Library to test the select works on change and shows a new value.","md",false,"v1641812664/debbie.codes/blog/2022/select_2x_g2mbjj",{},"/blog/building-and-testing-select-input","cloudinary",{"title":5,"description":2366},"blog/building-and-testing-select-input",[2376,2377],"react","testing","OWQe7QqyolFDZIE8ka3b2gp3z3goIW_IVzDNZh9lyV8",[2380,2384],{"title":2381,"path":2382,"stem":2383,"children":-1},"TypeScript and Children","/blog/typescript-and-children","blog/typescript-and-children",{"title":2385,"path":2386,"stem":2387,"children":-1},"Testing a Button Component","/blog/testing-button-component","blog/testing-button-component",1790839747426]