profile
viewpoint

ph-fritsche/react-gapi 4

Google API per React hook

ph-fritsche/react-idb-cache 3

IDB cache for react

ph-fritsche/composer 0

Dependency Manager for PHP

ph-fritsche/dev-php-node 0

Default dev container for PHP+Node

ph-fritsche/doctrine-orm 0

Doctrine Object Relational Mapper (ORM)

ph-fritsche/dom-testing-library 0

🐙 Simple and complete DOM testing utilities that encourage good testing practices.

issue closedtesting-library/user-event

When I run the tests together they break, but when I run them one by one they work normally

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • @testing-library/user-event version: 12.8.3 <!-- If your version doesn't match this project's current release found at https://github.com/testing-library/user-event/releases, please try upgrading to see if that solves your issue. This especially may be the case if you are using Create React App, which currently provides an older version of user-event. -->

  • Testing Framework and version: Jest 26.6.0 <!-- are you using jest, mocha, puppeteer, ava? And what version? -->

  • DOM Environment: JSDOM 16.7.0 <!-- If you're using jsdom (the default with jest), what version? Otherwise, what browser and version are you running tests in? -->

<!-- Keep in mind that if you're using a version of node we don't support that could also be an issue. Check our package.json "engines" file for the supported version. -->

Relevant code or config

import PokemonList from '../'
import { render, screen, waitFor } from '@test-utils'
import { setupServer } from 'msw/node'
import userEvent from '@testing-library/user-event'
import listPokemonHandler from '@mocks/handlers/listPokemons'
import pokemonsMock from '@mocks/objects/pokemons.json'

describe('PokemonList', () => {
  const server = setupServer(listPokemonHandler)

  beforeAll(() => {
    server.listen()
  })

  afterEach(() => server.resetHandlers())
  afterAll(() => server.close())

  it('should change items when search', async () => {
    render(<PokemonList />)

    const input = screen.getByRole('textbox')

    userEvent.type(input, 'per') // This event is being fired in the test below

    await waitFor(() => {
      expect(screen.queryByText('Peraxoq')).toBeInTheDocument()
      expect(screen.queryByText('Peris')).toBeInTheDocument()
      expect(screen.queryByText('Pikalu')).not.toBeInTheDocument()
    })
  })

  it('should render the list of pokemons', async () => { // The two tests when I run them separately using `it.only` it works
    render(<PokemonList />) // Here I should have a list of 6 items, but I'm getting the result of a search with the text 'per'

    const lastPokemonOnFirstPage = pokemonsMock.results[5]

    await waitFor(() => {
      expect(screen.queryByText(lastPokemonOnFirstPage.name)).toBeInTheDocument()
    })
  })
})

What you did: react-app-rewired test PokemonList What happened: <details> <summary>The tests are breaking, bringing the following feedback:</summary>

FAIL  src/containers/PokemonList/__tests__/PokemonList.test.tsx (8.03 s)
PokemonList
  √ should change items when search (741 ms)
  × should render the list of pokemons (1041 ms)

● PokemonList › should render the list of pokemons

  expect(received).toBeInTheDocument()

  received value must be an HTMLElement or an SVGElement.
  Received has value: null

  <html>
    <head>
      <style
        data-styled="active"
        data-styled-version="5.3.3"
      >
        .ipWPMS{width:180px;height:180px;}
        .dlaHxw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:NaNpx;}
        .hEsfMK{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:780px;}
        .kDlkLX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;overflow-y:scroll;}
        .jwizbY{border-radius:10px;border:none;height:28px;outline:none;padding:0 10px;box-shadow:0 0 5px 0.5px rgba(0,0,0,0.1);}
        .fVjEJA.MuiListItem-root{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#FFFFFF;margin:10px;border-radius:20px;width:240px;height:240px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-shadow:0 0 5px 0.5px rgba(0,0,0,0.1);}
        .hCWYbA{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:'Flexo-Medium';}
        .duoVeC{width:400px;margin-bottom:20px;background-color:#FFFFFF;}
        @media (max-width:700px){.duoVeC{width:100%;}}
        .eMgrpW{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:-webkit-min-content;height:-moz-min-content;height:min-content;}
        .dTHjxC{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:'Pokemon';color:white;font-size:40px;}
      </style>
      <style
        data-jss=""
        data-meta="MuiList"
      >

  .MuiList-root {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
  }
  .MuiList-padding {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .MuiList-subheader {
    padding-top: 0;
  }

      </style>
      <style
        data-jss=""
        data-meta="MuiListItem"
      >

  .MuiListItem-root {
    width: 100%;
    display: flex;
    position: relative;
    box-sizing: border-box;
    text-align: left;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: flex-start;
    text-decoration: none;
  }
  .MuiListItem-root.Mui-focusVisible {
    background-color: rgba(0, 0, 0, 0.08);
  }
  .MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
  .MuiListItem-root.Mui-disabled {
    opacity: 0.5;
  }
  .MuiListItem-container {
    position: relative;
  }
  .MuiListItem-dense {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .MuiListItem-alignItemsFlexStart {
    align-items: flex-start;
  }
  .MuiListItem-divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background-clip: padding-box;
  }
  .MuiListItem-gutters {
    padding-left: 16px;
    padding-right: 16px;
  }
  .MuiListItem-button {
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }
  .MuiListItem-button:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.04);
  }
  @media (hover: none) {
    .MuiListItem-button:hover {
      background-color: transparent;
    }
  }
  .MuiListItem-secondaryAction {
    padding-right: 48px;
  }

      </style>
    </head>
    <body>
      <div>
        <section
          class="sc-dkPtRN kDlkLX"
          role="feed"
        >
          <ul
            class="MuiList-root sc-gsDKAQ hEsfMK MuiList-padding"
          >
            <div
              class="sc-kDTinF eMgrpW"
            >
              <h1
                class="sc-iqseJM dTHjxC"
              >
                VR Pokedex
              </h1>
              <input
                class="sc-hKwDye sc-pVTFL jwizbY duoVeC"
              />
            </div>
            <li
              class="MuiListItem-root sc-iCfMLu fVjEJA MuiListItem-gutters"
            >
              <img
                alt="Peris"
                class="sc-bdvvtL ipWPMS"
                height="180px"
                src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5011.png"
                width="180px"
              />
              <h2
                class="sc-furwcr hCWYbA"
              >
                Peris
              </h2>
            </li>
            <li
              class="MuiListItem-root sc-iCfMLu fVjEJA MuiListItem-gutters"
            >
              <img
                alt="Peraxoq"
                class="sc-bdvvtL ipWPMS"
                height="180px"
                src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5012.png"
                width="180px"
              />
              <h2
                class="sc-furwcr hCWYbA"
              >
                Peraxoq
              </h2>
            </li>
          </ul>
        </section>
      </div>
    </body>
  </html>

    36 |
    37 |     await waitFor(() => {
  > 38 |       expect(screen.queryByText(lastPokemonOnFirstPage.name)).toBeInTheDocument()
       |                                                               ^
    39 |     })
    40 |   })
    41 | })

    at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:342:30)
    at Object.toBeInTheDocument (node_modules/expect/build/index.js:343:15)
    at src/containers/PokemonList/__tests__/PokemonList.test.tsx:38:63
    at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/dom/dist/config.js:51:12)
    at checkCallback (node_modules/@testing-library/dom/dist/wait-for.js:127:77)
    at checkRealTimersCallback (node_modules/@testing-library/dom/dist/wait-for.js:119:16)
    at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)  

</details>

Reproduction repository: https://github.com/marcosapj2/vrpokedex

Problem description: When I run the tests together they break, but when I run them one by one they work normally. What is happening is that the "userEvent.type(input, 'per')" shown above is somehow affecting the other test, causing the request return wrong

Suggested solution: I don't know yet, I thought the cleanup would help but it already happens automatically

closed time in an hour

marcosapj2

issue commenttesting-library/user-event

When I run the tests together they break, but when I run them one by one they work normally

You're global state change per react-redux is bleeding into the other test. This is either because you don't reset it properly or because your debounced state changes happen during the next test.

marcosapj2

comment created time in an hour

pull request commenttesting-library/user-event

fix(tab): skip elements with `visibility:hidden`

Thanks a lot for your contribution :heart:

I'm not sure yet if it's worth the merge conflict with v14.0.0-beta. We'll drop support for v13 as soon as v14 is considered stable. What do you think about targeting beta with this change?

Dennis273

comment created time in an hour

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha f07f7eca04c1f5784ef8f5919e08ee8adab8c8ed

content: why-userevent

view details

push time in 3 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha 29d298c5d1a0635cc07a12d899a608f9cfcca77a

content: why-userevent

view details

push time in 3 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha cee3352ee405524bfbea3f8289df1da1bca6eb80

content: why-userevent

view details

push time in 3 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha a0ac8e2d16d803885aef2cb900e00bba9f562a9b

content: why-userevent

view details

push time in 3 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha a882d43881f410b05f4519bdf855e3e153641bc7

content: why-userevent

view details

push time in 3 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha abd86cd943a1e3d6057d4ea8e53ec8b4b0d4e4c3

content: why-userevent

view details

push time in 3 days

issue closedtesting-library/user-event

How to test debounced hover states?

Problem description:

I saw the original issue which resulted in the addition of the userEvent.hover() function. We make frequent use of this userEvent in our codebase and are quite happy with how it works, so thank you for adding it! :-)

We have certain DOM elements which, after the user hovers over them for N # of ms, show a tooltip. We'd like to test both the happy path (i.e. the tooltip shows up when the user hovers for the prescribed # of ms) and the alternate path (ie no tooltip appears when the user hovers for less than the # of ms). The cleanest way I could think of to do this was via something like:

const domElement = getByText('My DOM element');
userEvent.hover(domElement, { timeDuration: 999 })
expect(queryByText('Tooltip Text')).not.toExist();

userEvent.hover(domElement, { timeDuration: 1000 })
expect(getByText('Tooltip Text')).toExist();

The specific name timeDuration is just contrived to illustrate the example. However, after parsing the code for the hover action, there doesn't appear to be any API equivalent to the above.

closed time in 4 days

richiethomas

issue commenttesting-library/user-event

How to test debounced hover states?

This is the hover action in user-event@14.0.0-beta: https://github.com/testing-library/user-event/blob/4adb909a64bfad6d78173d460f0fe80be6ed04d1/src/convenience/hover.ts#L4-L12

There is no magic and no intention to add any. If you want to wait for a specific duration just do so outside of the hover action:

await userEvent.hover(element)

await new Promise(r => setTimeout(r, 500)) // wait for (at least) 500ms
expect(screen.queryByText('Tooltip Text')).not.toBeInTheDocument()

await new Promise(r => setTimeout(r, 200)) // wait another (at least) 200ms
expect(screen.getByText('Tooltip Text')).toBeInTheDocument()

(Note that waiting for something to not have happened might be brittle if the waited duration is too close to the actual threshold as the asynchronous approach per specs gives up control over the order of execution even though it might be predictable.)

richiethomas

comment created time in 4 days

issue commenttesting-library/user-event

userEvent.type with empty string causes a warning about an unhandled promise rejection

How did you solve validating your input field for falsey values like an empty string? You mentioned something about userEvent.click?

He initially expected userEvent.type(element, '') to click the element and then do nothing. Which throws an error because the empty string does not translate to a keyboard input. Which could just be performed per userEvent.click(element) in this case.

InExtremaRes

comment created time in 6 days

issue commenttypescript-eslint/typescript-eslint

Docs: rules in `recommended`

I stand corrected. Sorry about the false report. I just got confused scrolling up and down that page and when I found the complete list much faster in the code, I somehow got the impression there was something wrong with the docs. :(

ph-fritsche

comment created time in 6 days

issue closedtesting-library/user-event

userEvent.type not entering spaces into inputs with type password

Based on this issue, there appears to be a sanitation algorithm that may be removing (not entering) space characters into password fields. There is a work-around using fireEvent.change() to get my test to pass instead

Hi, I think that the same problem is present when the input control is of type url: https://github.com/jsdom/jsdom/blob/5279cfda5fe4d52f04b2eb6a801c98d81f9b55da/lib/jsdom/living/helpers/form-controls.js#L266 Originally posted by @BentMylund in https://github.com/testing-library/user-event/issues/479#issuecomment-773395242

closed time in 6 days

rreevesforage

issue commenttesting-library/user-event

userEvent.type not entering spaces into inputs with type password

password is not sanitized in jsdom: https://github.com/jsdom/jsdom/blob/a61fdb886a30fce6a3aa68002e1af6e5bcb4c372/lib/jsdom/living/helpers/form-controls.js#L180-L186

Using fireEvent.change is not a workaround here. It's a Volkswagen.

rreevesforage

comment created time in 6 days

issue closedtesting-library/user-event

userEvent types into textarea text that is jumbled than what it is told to type

  • @testing-library/user-event version: 13.5.0

  • Testing Framework and version: jest@24.9.0

  • DOM Environment: jsdom

Note: this code follows the Test Drive the API Call of a React Form with React Testing Library video from Testing JavaScript course (it is modified to use userEvent and screen, as the video in the course is out of date).

Test

import React from 'react';
import userEvent from '@testing-library/user-event';
import {render, screen} from '@testing-library/react';

import {savePost as mockSavePost} from '../api';
import {Editor} from '../post-editor-01-markup';

jest.mock('../api');

test('renders a form with title, content, tags, and a submit button', () => {
    mockSavePost.mockResolvedValueOnce()
    render(<Editor />);

    const fakePost = {
        title: 'Test Title',
        content: 'Test Content',
        tags: ['tag1', 'tag2']
    };

    const titleInput = screen.getByLabelText(/title/i, {});
    userEvent.type(titleInput, fakePost.title);

    const contentInput = screen.getByLabelText(/content/i, {});
    userEvent.type(contentInput, fakePost.content); // Here is the issue.

    const tagsInput = screen.getByLabelText(/tags/i, {});
    userEvent.type(tagsInput, fakePost.tags.join(','))

    const submitButton = screen.getByText(/submit/i, {});

    userEvent.click(submitButton);

    expect(submitButton).toBeDisabled();
    expect(mockSavePost).toHaveBeenCalledWith(fakePost)
    expect(mockSavePost).toHaveBeenCalledTimes(1);
})

Component

import React from 'react';
import {savePost} from './api';

function Editor() {
    const [isSaving, setIsSaving] = React.useState(false);

    function handleSubmit(e) {
        e.preventDefault();
        const {title, content, tags} = e.target.elements;
        setIsSaving(true);
        savePost({
            title: title.value,
            content: content.value,
            tags: tags.value.split(',').map(t => t.trim())
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="title-input">Title</label>
            <input id="title-input" name="title" />

            <label htmlFor="content-input">Content</label>
            <textarea id="content-input" name="content" />

            <label htmlFor="tags-input">Tags</label>
            <input id="tags-input" name="tags" />

            <button type="submit" disabled={isSaving}>Submit</button>
        </form>
    );
}

export {Editor}

What you did: I used userEvent to type into a text area the text: 'Test Content' in line: userEvent.type(contentInput, fakePost.content);

What happened: Instead of userEvent typing in: 'Test Content', it typed in: "est ContentT"

Error Message:

- Expected
+ Received

@@ -1,7 +1,7 @@
  Object {
-   "content": "Test Content",
+   "content": "est ContentT",
    "tags": Array [
      "tag1",
      "tag2",
    ],
    "title": "Test Title",,

Problem description: It should type into the text area the correct value (i.e. 'Test Content'). As far as I am concerned, this only happened to the textarea input, and not the other inputs.

closed time in 6 days

sikandarali94

issue commenttesting-library/user-event

userEvent types into textarea text that is jumbled than what it is told to type

Could not reproduce: https://codesandbox.io/s/userevent-pr-template-forked-8pjet?file=/src/App.js

sikandarali94

comment created time in 6 days

issue commenttesting-library/user-event

TypeError: userEvent.click is not a function

The exported modules look correct and work in other setups. In 13.5.0 the exports of dist/index.js is: https://unpkg.com/browse/@testing-library/user-event@13.5.0/dist/index.js

{
  __esModule: true,
  specialChars: { /* ... */ },
  default: {
   click: require("./click").click,
   /* ... */
  }
}

The screenshot above shows the following log which might be the result of an incorrect reexport/import. Could it be that you ran a transpiler on the package in node_modules?

{
  __esModule: true,
  default: {
    specialChars: { /* ... */ },
    default: {
       click: require("./click").click,
       /* ... */
    }
  }
}
bamthomas

comment created time in 6 days

issue commenttypescript-eslint/typescript-eslint

Docs: rules in `recommended`

recommended without type information:

@typescript-eslint/adjacent-overload-signatures
@typescript-eslint/ban-ts-comment
@typescript-eslint/ban-types
+ @typescript-eslint/no-array-constructor
+ @typescript-eslint/no-empty-function
@typescript-eslint/no-empty-interface
@typescript-eslint/no-explicit-any
@typescript-eslint/no-extra-non-null-assertion
+ @typescript-eslint/no-extra-semi
@typescript-eslint/no-inferrable-types
+ @typescript-eslint/no-loss-of-precision
@typescript-eslint/no-misused-new
@typescript-eslint/no-namespace
@typescript-eslint/no-non-null-asserted-optional-chain
@typescript-eslint/no-non-null-assertion
@typescript-eslint/no-this-alias
@typescript-eslint/no-unnecessary-type-constraint
+ @typescript-eslint/no-unused-vars
@typescript-eslint/no-var-requires
@typescript-eslint/prefer-as-const
@typescript-eslint/prefer-namespace-keyword
@typescript-eslint/triple-slash-reference

recommended-requiring-type-checking:

@typescript-eslint/await-thenable
@typescript-eslint/no-floating-promises
@typescript-eslint/no-for-in-array
+ @typescript-eslint/no-implied-eval
+ @typescript-eslint/no-misused-promise
@typescript-eslint/no-unnecessary-type-assertion
@typescript-eslint/no-unsafe-argument
@typescript-eslint/no-unsafe-assignment
@typescript-eslint/no-unsafe-call
@typescript-eslint/no-unsafe-member-access
@typescript-eslint/no-unsafe-return
+ @typescript-eslint/require-await
@typescript-eslint/restrict-plus-operands
@typescript-eslint/restrict-template-expressions
+ @typescript-eslint/unbound-method

Sidenote: In light mode the requires-type-information icon lacks contrast: image

ph-fritsche

comment created time in 6 days

create barnchtesting-library/user-event

branch : beta

created branch time in 8 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha 242779ce8fee5d762c2b4ad1487af2475b741191

content: userevent-14-beta

view details

push time in 8 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha 9600eb3925a9cdc1adc7bdde3cfc00654d41e900

content: userevent-14-beta

view details

push time in 8 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha bb37edf71380997dc1d1186cd6dbfa528a0e5a88

content: userevent-14-beta

view details

push time in 8 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha 89df87e5cb4e6ae1c52a2e618467a38cd43364ab

content: userevent-14-beta

view details

push time in 8 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha 67cf181b50ee25b05bb3ecc31fcf57d53ecb385d

content: userevent-14-beta

view details

push time in 8 days

push eventph-fritsche/ph-fritsche.github.io

Philipp Fritsche

commit sha b35ae7bc38773c4547ce60ea399c41c63c20d7ee

content: await userEvent APIs

view details

Philipp Fritsche

commit sha cc13e97d373773eb39a84e4b3ad87a5f36f8ce06

content: userevent-14-beta

view details

push time in 8 days

push eventtesting-library/user-event

Philipp Fritsche

commit sha 4adb909a64bfad6d78173d460f0fe80be6ed04d1

fix: use relative imports (#795)

view details

push time in 8 days

delete branch testing-library/user-event

delete branch : feat-uploadinit

delete time in 8 days

PR merged testing-library/user-event

fix: use relative imports

What:

Fix broken import. Fix config.

Why:

The previous configuration allowed to import per path alias which also was suggested by IDE. But the build script does not support paths from tsconfig.json. This resulted in a broken export without any complains in CI.

How:

Split the config for src and tests. Add paths to the latter to keep the more readable imports. For src overwrite the baseUrl setting from shared config and remove paths so that only features supported by build script are suggested by IDE and accepted by typecheck script.

Rename the remaining .js tests because somehow this tsconfig does not work per eslint. :shrug:

Checklist:

  • [x] Tests
  • [x] Ready to be merged
+28 -13

2 comments

8 changed files

ph-fritsche

pr closed time in 8 days

more