feat(browser): run test files in isolated iframes by sheremet-va · Pull Request #5036 · vitest-dev/vitest

sheremet-va · 2024-01-23T15:10:24Z

Description

This PR changes how Vitest runs browser tests internally. This is a successor to #3584, but without any visuals.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
Ideally, include a test that fails without this PR but passes with it.
Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

Run the tests with pnpm test:ci.

Documentation

If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

netlify · 2024-01-23T15:10:29Z

✅ Deploy Preview for fastidious-cascaron-4ded94 ready!

Name	Link
🔨 Latest commit	`dedaea8`
🔍 Latest deploy log	https://app.netlify.com/sites/fastidious-cascaron-4ded94/deploys/65c22c1d3371e300080a716b
😎 Deploy Preview	https://deploy-preview-5036--fastidious-cascaron-4ded94.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

packages/browser/src/node/index.ts

sheremet-va · 2024-02-01T12:40:27Z

@userquin @Aslemammad I don't really like that we run all tests in parallel - this makes it impossible to use keyboard events for example. Should we default to running tests one after another?

userquin · 2024-02-01T14:49:32Z

@userquin @Aslemammad I don't really like that we run all tests in parallel - this makes it impossible to use keyboard events for example. Should we default to running tests one after another?

What do you mean about using keyboard events? related to this issue #4918?

IIRC you cannot simulateTab key since we cannot override isTrusted (set to true by the browser when the user press the tab key), we should add some helper.

sheremet-va · 2024-02-01T14:51:30Z

What do you mean about using keyboard events? related to this issue #4918?

Yes, look into the open PR. (I didn't test it yet, it's just a drafter POC). But the idea is that we need to have an element with a focus but if we run tests in parallel the focus can shift between iframes and elements at any time.

userquin · 2024-02-01T15:01:21Z

What do you mean about using keyboard events? related to this issue #4918?

Yes, look into the open PR. (I didn't test it yet, it's just a drafter POC). But the idea is that we need to have an element with a focus but if we run tests in parallel the focus can shift between iframes and elements at any time.

I think there is no need, using none provider I have 2 tests files using focus and working: ofc if we have multiple focus tests in the same file the problem will be there.

Add "test-ui": "PROVIDER=none vitest" (or run it from your terminal, I'm using Windows...) to test/browser/package.json and add the following test to test/browser/test/another.test.ts and test/browser/test/basic.test.ts:

it('test focus', async () => {
  const host2 = document.createElement('div')
  host2.setAttribute('id', 'host2')
  document.body.appendChild(host2)
  const btn1 = document.createElement('button')
  btn1.innerHTML = 'Click me 1'
  btn1.addEventListener('keydown', (e) => {
    console.log(e)
  })
  btn1.addEventListener('keyup', (e) => {
    console.log(e)
  })
  host2.appendChild(btn1)
  const btn2 = document.createElement('button')
  btn2.innerHTML = 'Click me 2'
  host2.appendChild(btn2)
  expect(document.activeElement).toBe(document.body)
  btn1.focus()
  expect(document.activeElement).toBe(btn1)
  btn2.focus()
  expect(document.activeElement).toBe(btn2)
  btn1.focus()
  expect(document.activeElement).toBe(btn1)
  await new Promise(resolve => setTimeout(resolve, 100))
  btn1.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }))
  btn1.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }))
  /* btn1.dispatchEvent(new KeyboardEvent('keypress', {
    key: 'Tab',
    view: window,
    bubbles: true,
    cancelable: true,
    /!* code: 'Tab',
    isComposing: true,
    charCode: 0,
    keyCode: 9,
    which: 9,
    composed: true,
    location: 0,
    view: window,
    bubbles: true,
    cancelable: true,
    shiftKey: false,
    ctrlKey: false,
    altKey: false,
    metaKey: false, *!/
  })) */
  await new Promise(resolve => setTimeout(resolve, 100))
  console.log(document.activeElement)
  // THIS WILL FAIL
  // expect(document.activeElement).toBe(btn2)
})

sheremet-va · 2024-02-01T15:06:32Z

I think there is no need, using none provider I have 2 tests files using focus and working: ofc if we have multiple focus tests in the same file the problem will be there.

There is a great need for that. Dispatching keyboard event doesn't work the same way as the user would do it. In the real world, the keyboard triggers multiple events and it is not possible to emulate the order of it down to the microtask in the browser (just like the click), so we need to do it through a webdriver API or google devtools API.

Add "test-ui": "PROVIDER=none vitest" (or run it from your terminal, I'm using Windows...) to test/browser/package.json and add the following test to test/browser/test/another.test.ts and test/browser/test/basic.test.ts:

none provider is outside of this PR's responsibility and doesn't support the same set of APIs - if users want to "emulate" clicks and keyboard events they can just use jsdom (or libraries like fire-event) - all of them don't actually test what is happening in the real scenario.

userquin · 2024-02-01T15:06:56Z

Once the tests finish, the focus will be on the last focus test (when opening/focusing the browser).

userquin reviewed Jan 23, 2024

View reviewed changes

packages/browser/src/node/index.ts Outdated Show resolved Hide resolved

sheremet-va mentioned this pull request Jan 30, 2024

fix: add proxyHijackESM for better spyOn in browser #4701

Closed

6 tasks

sheremet-va force-pushed the feat/browser-iframe branch from 8d06522 to 701b365 Compare January 31, 2024 10:15

sheremet-va marked this pull request as draft January 31, 2024 17:30

sheremet-va force-pushed the feat/browser-iframe branch from 60baafc to 4189f1a Compare February 1, 2024 08:45

sheremet-va marked this pull request as ready for review February 1, 2024 08:59

sheremet-va added 5 commits February 6, 2024 13:27

feat(browser): run test files in isolated iframes

87b2421

feat(browser): run test files in isolated iframes

7af5bfb

chore: remove globals

14a3445

chore; bigger timeout

0918021

chore: add support for snapshot serializers

eac0817

sheremet-va force-pushed the feat/browser-iframe branch from 86713a0 to eac0817 Compare February 6, 2024 12:29

feat: add browser.fileParallelism command

dedaea8

sheremet-va merged commit 4f40177 into vitest-dev:main Feb 7, 2024

sheremet-va deleted the feat/browser-iframe branch February 7, 2024 11:18

sheremet-va added this to the 1.3.0 milestone Feb 9, 2024

DanWebb mentioned this pull request Feb 17, 2024

feat(browser): isolate browser tests #3584

Closed

renovate bot referenced this pull request in JoshuaKGoldberg/eslint-plugin-expect-type Feb 27, 2024

chore(deps): update dependency vitest to v1.3.1 (#185

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

feat(browser): run test files in isolated iframes#5036

feat(browser): run test files in isolated iframes#5036
sheremet-va merged 6 commits intovitest-dev:mainfrom
sheremet-va:feat/browser-iframe

sheremet-va commented Jan 23, 2024

Uh oh!

netlify bot commented Jan 23, 2024 •

edited

Loading

Uh oh!

Uh oh!

sheremet-va commented Feb 1, 2024

Uh oh!

userquin commented Feb 1, 2024

Uh oh!

sheremet-va commented Feb 1, 2024

Uh oh!

userquin commented Feb 1, 2024 •

edited

Loading

Uh oh!

sheremet-va commented Feb 1, 2024 •

edited

Loading

Uh oh!

userquin commented Feb 1, 2024 •

edited

Loading

Uh oh!

Uh oh!

Comments

Conversation

sheremet-va commented Jan 23, 2024

Description

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Documentation

Changesets

Uh oh!

netlify bot commented Jan 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fastidious-cascaron-4ded94 ready!

Uh oh!

Uh oh!

sheremet-va commented Feb 1, 2024

Uh oh!

userquin commented Feb 1, 2024

Uh oh!

sheremet-va commented Feb 1, 2024

Uh oh!

userquin commented Feb 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sheremet-va commented Feb 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

userquin commented Feb 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Jan 23, 2024 •

edited

Loading

userquin commented Feb 1, 2024 •

edited

Loading

sheremet-va commented Feb 1, 2024 •

edited

Loading

userquin commented Feb 1, 2024 •

edited

Loading