I have created a component that is actually made up of 2 smaller components, aSelect element and aLabel. Together these two components make up a component I have namedselect-size and is the component used in thedemo e-commerce project I have created in order for users to select the size of the product.

Building the Select Component

Importing React, Testing Library and Components

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.

importReact,{useState}from'react'import{Select}from'@learn-bit-react/base-ui.ui.forms.select'import{Label}from'@learn-bit-react/base-ui.ui.forms.label'importstylesfrom'./select-size.module.scss'

Prop Types

The props being passed down are theavailableSizes which is an array of numbers and thesizeSelected which is a function that passes in thesize 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.

exporttypeSelectSizeProps={/**   * sizes as an array of numbers   */availableSizes:number[],/**   * a function that registers the selected size.   */sizeSelected:size=>void}&React.SelectHTMLAttributes<HTMLSelectElement>

Passing down Props

We then pass down the props into our SelectSize component as well as...rest which gives access to all other props that a html select element can have.

exportfunctionSelectSize({availableSizes,sizeSelected,...rest}:SelectSizeProps){}

Adding State

Our component uses theuseState hook to set the size of the product.size is the value of the select element andsetSize is the function that allows us to set a new value. The default state will be the first number of theavailableSizes array.

exportfunctionSelectSize({availableSizes,sizeSelected,...rest}:SelectSizeProps){const[size,setSize]=useState(availableSizes[0])}

Using the Select and Label Components

We can now add the return statement to our component and return the Select and Label components that we have imported. TheLabel component is pretty straight forward and just adds some styles and thehtmlFor attribute with the value ofsize. For theSelect component we need to add theid ofsize, the className for the styles, and the options for the select component which is equal to the value of theavailableSizes array.

The Select component takes in a prop of options and will map over the array to give us an<option> for each number in the array. We then need anonChange function to handle the change for every time the user changes the size. And of course we pass in the...rest of the props that a html select element can take.

const[size,setSize]=useState(availableSizes[0])return(<divclassName={styles.selectSize}><LabelclassName={styles.label}htmlFor="size">      Choose a size:</Label><Selectid="size"className={styles.select}options={availableSizes}onChange={handleChange}{...rest}/></div>)

Creating the handleChange function

We can now create ourhandleChange function which will set the state ofsize to be the value of the select element as well as call thesizeSelected function with the value of the select element.

functionhandleChange(e){setSize(e.target.value)sizeSelected(e.target.value)}

Final Code

The full code for our component will look like this:

importReact,{useState}from'react'import{Select}from'@learn-bit-react/base-ui.ui.forms.select'import{Label}from'@learn-bit-react/base-ui.ui.forms.label'importstylesfrom'./select-size.module.scss'exporttypeSelectSizeProps={/**   * sizes as an array of numbers   */availableSizes:number[],/**   * a function that registers the selected size.   */sizeSelected:size=>void}&React.SelectHTMLAttributes<HTMLSelectElement>exportfunctionSelectSize({availableSizes,sizeSelected,...rest}:SelectSizeProps){const[size,setSize]=useState(availableSizes[0])functionhandleChange(e){setSize(e.target.value)sizeSelected(e.target.value)}return(<divclassName={styles.selectSize}><LabelclassName={styles.label}htmlFor="size">        Choose a size:</Label><Selectid="size"className={styles.select}options={availableSizes}onChange={handleChange}{...rest}/></div>)}

Creating Compositions

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.

My compositions imports React and useState as well as the component we just created. We then create aSelectSizeAndShowSelectedSize component that will render theSelectSize component. We first create a const ofsizes equal to an array of numbers, the sizes the want to show. We then use theuseState hook to set the state of theselectedSize giving it the default of the first value from our sizes array.

Then in our component we make the prop ofsizeSelected equal to a function that passes in the argument ofsize and sets the state ofselectedSize to be the value ofsize. This give us access to the value of the size selected so as we can use it in another component.

We also add the value of oursizes array to theavailableSizes prop of theSelectSize component.

And finally we add a<p> tag with the value of theselectedSize so we can see the size of the product updated in the UI as we change it.

importReact,{useState}from'react'import{SelectSize}from'./select-size'exportfunctionSelectSizeAndShowSelectedSize(){constsizes=[36,37,38,39,40,45,46,47]const[selectedSize,setSelectedSize]=useState(sizes[0])return(<><SelectSizesizeSelected={size=>{setSelectedSize(parseInt(size))}}availableSizes={sizes}/><p>You're selected size is:{selectedSize}</p></>)}

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.

Writing Tests

We can therefore move on to write the tests for this component and use the composition created in order to test it.

Importing what we need

We are using Testing Library to test our component so we need to importrender, screen, userEvent from@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.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import{SelectSizeAndShowSelectedSize}from'./select-size.composition'

Describing our Test

Our test should check that the value changes when the user chooses a new size so we can start with that as a description.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import{SelectSizeAndShowSelectedSize}from'./select-size.composition'it('checks value changes when user chooses a new size',()=>{})

Rendering our Composition Component

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

tag with the value of theselectedSize so we can see the size of the product selected as we change it.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import{SelectSizeAndShowSelectedSize}from'./select-size.composition'it('checks value changes when user chooses a new size',()=>{render(<SelectSizeAndShowSelectedSize/>)})

Checking what Role Exists

In order to see what role is available can use thescreen.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.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event';import{SelectSizeAndShowSelectedSize}from'./select-size.composition'it('checks value changes when user chooses a new size',()=>{render(<SelectSizeAndShowSelectedSize/>)constselectSizeAndShowSelectedSize=screen.getByRole('blah')

Getting by Correct Role

As we are running our tests in watch mode we can see that the roleblah does not exist but it tells us thatcombobox 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 withi at the end means we won't have to worry about case sensitivity.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import{SelectSizeAndShowSelectedSize}from'./select-size.composition'it('checks value changes when user chooses a new size',()=>{render(<SelectSizeAndShowSelectedSize/>)constselectSizeAndShowSelectedSize=screen.getByRole('combobox',{name:/choose a size/i})})

Expecting our Component to Have Correct Value

We now useexpect 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 as0 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,36.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import{SelectSizeAndShowSelectedSize}from'./select-size.composition'it('checks value changes when user chooses a new size',()=>{render(<SelectSizeAndShowSelectedSize/>)constselectSizeAndShowSelectedSize=screen.getByRole('combobox',{name:/choose a size/i})expect(selectSizeAndShowSelectedSize).toHaveValue('36')})

Firing an Event and Expecting the Value to Change

As we want to make sure the value is updated when the user chooses a new size we can use theuserEvent method with thechange function passing in what we want to change and what the target is. In our case it is the const ofselectSizeAndShowSelectedSize and the target is thevalue and we can add in what value we want to change it to. We then use theexpect method to make sure the value has been updated correctly to the new value of theuserEvent.

importReactfrom'react'import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import{SelectSizeAndShowSelectedSize}from'./select-size.composition'it('checks value changes when user chooses a new size',()=>{render(<SelectSizeAndShowSelectedSize/>)constselectSizeAndShowSelectedSize=screen.getByRole('combobox',{name:/choose a size/i})expect(selectSizeAndShowSelectedSize).toHaveValue('36')userEvent.selectOptions(selectSizeAndShowSelectedSize,'45')expect(selectSizeAndShowSelectedSize).toHaveValue('45')})

Conclusion

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.

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.

Using the Component

Theselect 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.

bitinstall @learn-bit-react/ecommerce.ui.product.select-sizenpm i @learn-bit-react/ecommerce.ui.product.select-sizeyarn add @learn-bit-react/ecommerce.ui.product.select-size

Useful Links

• Select Size Component
• Select Size Component Code
• Select Size Component composition
• Select Size Test File
• Testing Library Docs
• docs for useState()