Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/molvqingtai/testing-library-extra

Add bySelector and byAttribute to @testing-library/dom
https://github.com/molvqingtai/testing-library-extra

happy-dom jest jsdom playwright puppeteer testing-library testing-library-dom vitest

Last synced: 9 days ago
JSON representation

Add bySelector and byAttribute to @testing-library/dom

Host: GitHub
URL: https://github.com/molvqingtai/testing-library-extra
Owner: molvqingtai
License: mit
Created: 2024-03-10T16:58:41.000Z (8 months ago)
Default Branch: master
Last Pushed: 2024-04-22T15:13:12.000Z (7 months ago)
Last Synced: 2024-04-23T02:30:30.316Z (7 months ago)
Topics: happy-dom, jest, jsdom, playwright, puppeteer, testing-library, testing-library-dom, vitest
Language: TypeScript
Homepage: https://www.npmjs.com/package/testing-library-extra
Size: 445 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # testing-library-extra

[![version](https://img.shields.io/github/v/release/molvqingtai/testing-library-extra)](https://www.npmjs.com/package/testing-library-extra) [![workflow](https://github.com/molvqingtai/testing-library-extra/actions/workflows/ci.yml/badge.svg)](https://github.com/molvqingtai/testing-library-extra/actions) [![download](https://img.shields.io/npm/dt/testing-library-extra)](https://www.npmjs.com/package/testing-library-extra) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Add `bySelector` and `byAttribute` to [@testing-library/dom](https://github.com/testing-library/dom-testing-library)

## Why?

The manager of [@testing-library/dom](https://github.com/testing-library/dom-testing-library) believes that using the `querySelector` API as an escape hatch in test code is a bad practice.

However, for some specific purposes, such as automation in browser extensions, not having CSS selectors would become extremely challenging.

See: [PR (267)](https://github.com/testing-library/dom-testing-library/pull/267)  [issues (512)](https://github.com/testing-library/dom-testing-library/issues/512)

## Install

```shell

npm install testing-library-extra

```

## Usage

**Use BySelector**

Example DOM

```html

open dialog



  

    

    

    

  



```

Use the css selector to simulate user login.

```typescript

import { getBySelector, findBySelector } from 'testing-library-extra'

import userEvent from '@testing-library/user-event'

const dialogButton = getBySelector(document.body, '.open-dialog')

// Click the button to pop up the user form.

userEvent.click(dialogButton)

const dialog = await findBySelector(document.body, '.dialog', { timeout: 1000 })

const usernameInput = getBySelector(dialog, 'form input[name="username"]')

const passwordInput = getBySelector(dialog, 'form input[name="password"]')

const loginButton = getBySelector(dialog, 'form button[type="submit"]')

userEvent.type(usernameInput, 'admin')

userEvent.type(passwordInput, 'abc123')

userEvent.click(loginButton)

```

**Use ByAttribute**

Example DOM

```html

open dialog



  

    

    

    

  



```

Use the attribute selector to match any dom.

```typescript

import { getByAttribute, findByAttribute } from 'testing-library-extra'

import userEvent from '@testing-library/user-event'

const dialogButton = getByAttribute(document.body, 'data-action', /^open/)

userEvent.click(dialogButton)

const dialog = await findByAttribute(document.body, 'data-id', 'dialog', { timeout: 1000 })

const usernameInput = getByAttribute(dialog, 'data-name', 'username')

const passwordInput = getByAttribute(dialog, 'data-name', 'password')

const loginButton = getByAttribute(dialog, 'data-action', /^login/)

userEvent.type(usernameInput, 'admin')

userEvent.type(passwordInput, 'abc123')

userEvent.click(loginButton)

```

## Expose API

This project exposes the following api, and the usage is consistent with the original project [types-of-queries](https://testing-library.com/docs/queries/about/#types-of-queries).

* **BySelector**

  + getBySelector

  * getAllBySelector

  * queryBySelector

  * queryAllBySelector

  * findBySelector

  * findAllBySelector

* **ByAttribute**

  * getByAttribute

  * getAllByAttribute

  * queryByAttribute

  * queryAllByAttribute

  * findByAttribute

  * findAllByAttribute

## LICENSE

This project is licensed under the MIT License - see the [LICENSE](https://github.com/molvqingtai/testing-library-extra/blob/master/LICENSE) file for details.