Utility API

Select, Deselect API

The syntax for selectOptions() and deselectOptions() looks like this.

selectOptions(
    element: Element,
    values: HTMLElement | HTMLElement[] | string[] | string,
): Promise<void>
deselectOptions(
    element: Element,
    values: HTMLElement | HTMLElement[] | string[] | string,
): Promise<void>

You can also try this code with Online Javascript Compiler

Run Code

These APIs are used to select or deselect the mentioned HTML element. Let us look at an example,

test('selectOptions', async () => {
  render(
    <select multiple>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>,
  )
  await userEvent.selectOptions(screen.getByRole('listbox'), ['2', 'Three'])
  expect(screen.getByRole('option', {name: 'One'}).selected).toBe(false)
  expect(screen.getByRole('option', {name: 'Two'}).selected).toBe(true)
  expect(screen.getByRole('option', {name: 'Three'}).selected).toBe(true)
})

You can also try this code with Online Javascript Compiler

Run Code

In the above example, we demonstrated the working of the selectOptions() API.

test('deselectOptions', async () => {
  render(
    <select multiple>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3"  selected>Three</option>
    </select>,
  )
  await userEvent.deselectOptions(screen.getByRole('listbox'), '3')
  expect(screen.getByText('C').selected).toBe(false)
})

You can also try this code with Online Javascript Compiler

Run Code

In the above example, we demonstrated the working of the deselectOptions() API.

type() API

The type() API is used to insert text to an input field conveniently at the time of testing. Let us look at the code for type() API,

test('type', async () => {
  render(<input defaultValue="Welcome"/>)
  const input = screen.getByRole('textarea')
  await userEvent.type(input, ' Ninja!')
  expect(input).toHaveValue('Hello, World!')
})

You can also try this code with Online Javascript Compiler

Run Code

In the above example, we have used the type() API to add text to the text area.

upload() API

The upload() API is used to change the input file uploaded by the user at the time of testing. Let us look at the code for the utility() API,

test('upload single file', async () => {
  render(
    <div>
      <label htmlFor="file-uploader">Upload file:</label>
      <input id="file-uploader" type="file" />
    </div>,
  )
  const uploadFile = new File(['firstFile'], 'firstFile.png', {type: 'image/png'})
  const input = screen.getByLabelText(/upload file/i)
  await userEvent.upload(input, uploadFile)
  expect(input.files[0]).toBe(uploadFile)
  expect(input.files.item(0)).toBe(uploadFile)
  expect(input.files).toHaveLength(1)
})

You can also try this code with Online Javascript Compiler

Run Code

In the above example, we have used the upload() API to update a file to firstFile. We then use the expect() function to run the test and return true if the file has been updated.

FAQs

1. What is user-event?
   User-event is one of the companion libraries for the Testing libraries used to simulate user interaction. These libraries dispatch the scheduled events if the interaction takes place on a browser.
    
2. What is Utility API?
   The Utility APIs don't have a one-to-one equivalent in the user interface. Therefore, they are just an interpretation of how the user interaction might be converted to the actual events on the DOM.
    
3. What are some Utility APIs?
   The five major Utility APIs are, clear(), selctOptions(), deselectOptions(), type(), upload().
    
4. What is API?
   API stands for an application programming interface. API can be defined as a connection between one or more computers.
    
5. What is upload() API?
   The upload() API is used to change the input file uploaded by the user at the time of testing. The developer can use the expect() function to check if the file has been updated successfully.

Key Takeaways

This blog covered all the necessary points about the Utility API. We discussed various Utility APIs and looked at the implementation of each.

Don’t stop here; check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.