6

How I generate my UI tests

 1 year ago
source link: https://dev.to/chrisczopp/how-i-generate-my-ui-tests-2bak
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How I generate my UI tests

This article is intended for Solidjs but it should be also useful for React or Preact developers too.

Imagine you're developing dev.to and it has been written in one of the frameworks above. Go to your Chrome DevTools console. Type these two commands:

$str.describe = 'dev.to'
$str.it = 'should render logo'

Then, select Devto's logo with the element inspector. You'll be prompted with:

can be selected by:
screen.getByAltText("DEV Community \uD83D\uDC69\u200D\uD83D\uDCBB\uD83D\uDC68\u200D\uD83D\uDCBB")

Now type:

$str.expect.toBeInTheDocument = true
$str.seeResult

A code editor will show up with this:

import { describe, expect, test as it, vi } from 'vitest'
import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
import { getRequestSpy } from 'rootPath/setupVitest'
import { SomeComponent } from './some-component'

describe('dev.to', () => {
  const waitForInitialRequests = async () => {}

  it('should render logo', async () => {
    const initialProps = {}
    const { unmount } = render(() => <SomeComponent {...initialProps} />)

    await waitForInitialRequests()
    expect(
      screen.getByAltText('DEV Community \uD83D\uDC69\u200D\uD83D\uDCBB\uD83D\uDC68\u200D\uD83D\uDCBB')
    ).toBeInTheDocument()
    unmount()
  })
})

Copy-paste the test to your IDE and job done!

OK... It isn't a complete story as Chrome DevTools doesn't magically generate tests. However, with this open source extension: Solid Test Recorder this and more is possible!

In a nutshell, this bad boy extension:

  • Generates UI tests which relay on vitest and msw which follow solidjs guidelines.
  • Uses a combination of Chrome DevTools element inspector and console which gives great recording control e.g. terminal-like auto-completion.
  • Auto-generates the most specific selector for inspected element.
  • Records network requests and generates mocks and spies for them.

And here is a list of available commands:

Configuration:
$str.config.codeTemplates allows to edit the code template used when generation test file
$str.config.excludedRequests allows to specify list of URLs to ignore when capturing requests
Testing:
$str.describe creates a new test file with a given description
$str.it creates a new test case with a given description
$str.expect.* adds a new asser on a currently selected element
$str.capture.* starts event capturing i.e. auto-generation user events and subsequent requests
$str.stopCapturing stops event capturing
$str.seeResult opens editor with a generated test file and request mock
$str.editTest allows to reposition or remove test cases and test steps and setting their active cursors
Changing current test file/case:
$str.use.file allows to switch to a given test file
$str.use.case allows to switch to a given test case
Controlling editor:
$str.applyChanges saves changes and closes editor(s)
$str.closeEditor discards any changes and closes editor(s)
Data collections:
$str.$requests captured HTTP requests
$str.$files test files
$str.$cases test cases

Dangerous: $str.clear - removes all the test data

More info in the repo

Enjoy not writing but rather generating your test!

Github stars are much appreciated. 😃


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK