Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
clear() API
3.
Select, Deselect API
4.
type() API
5.
upload() API
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024
Easy

Utility API

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

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.

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. We will discuss four Utility APIs in this blog, namely.

  • clear()
  • selectoptions(), deselectOptions()
  • type()
  • upload()

clear() API

The syntax for the clear() API looks like this,

clear(element: Element): Promise<void>

The clear API is used to erase any item that can be edited. Let us look at an example,

test('clear', async () => {
  render(<textarea defaultValue="This is the Clear API" />)
  await userEvent.clear(screen.getByRole('textbox'))
  expect(screen.getByRole('textbox')).toHaveValue('')
})

In this example, we used the clear() API to erase the value of the textbox.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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>

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)
})

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)
})

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!')
})

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)
})

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.

Previous article
Keyboard And Clipboard Actions
Next article
User Event API Version 13
Live masterclass