Vitest: use browser mode #3222
Vitest: use browser mode #3222
Conversation
| const resizeHandle = frame.locator('[role="columnheader"][aria-colindex="2"] div'); | ||
| const { x, y } = (await resizeHandle.boundingBox())!; | ||
| await resizeHandle.hover({ | ||
| position: { x: 5, y: 5 } |
There was a problem hiding this comment.
Need to use a specific position otherwise the resized width is incorrect
| @@ -13,7 +28,8 @@ export default defineConfig({ | |||
| }, | |||
| resolve: { | |||
| alias: { | |||
| lodash: 'lodash-es' | |||
| lodash: isTest ? 'lodash' : 'lodash-es', | |||
There was a problem hiding this comment.
Is this needed?
There was a problem hiding this comment.
@testing-library/jest-dom installs lodash, can't hurt to keep it.
| expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230); | ||
| const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); | ||
| await userEvent.keyboard('{enter}'); | ||
| expect(spy).toHaveBeenCalled(); |
There was a problem hiding this comment.
Why did we remove these checks?
expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230);this checked that when typing on a cell, it opens the editor and the editor receives focus, and we continue typing in the editor
const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');
await userEvent.keyboard('{enter}');
expect(spy).toHaveBeenCalled();this checked that we scrolled back to the cell even if we had scrolled past it (see await scrollGrid({ scrollTop: 2000 }); above)
Maybe we need more comments.
There was a problem hiding this comment.
I think it is better to check the actual row in the view instead of spying on scrollIntoView
test/column/renderEditCell.test.tsx
Outdated
| expect(getCellsAtRowIndex(0)).toHaveLength(2); | ||
| expect(getRows()[1]).toHaveTextContent('11'); | ||
| const editor = screen.getByRole('spinbutton', { name: 'col1-editor' }); | ||
| expect(editor).toHaveValue(1230); |
There was a problem hiding this comment.
Not sure what the new checks are for
There was a problem hiding this comment.
Basically we select the first cell and then scroll to the bottom. When we enable the editor (userEvent.keyboard('123');) then the grid should scroll back to the top so I am checking
expect(getRows()[1]).toHaveTextContent('11');
There was a problem hiding this comment.
getRows()[1] gets the second rendered row, no? Not necessarily the true "second" row.
There was a problem hiding this comment.
Correct. Is it not enough to check the second rendered row? We just want to ensure the editor is visible
There was a problem hiding this comment.
May be we can use something like toBeVisible 🤔
There was a problem hiding this comment.
Maybe we can just check grid.scrollTop
Co-authored-by: Nicolas Stepien <[email protected]>
Co-authored-by: Nicolas Stepien <[email protected]>
| expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 327.703px' }); | ||
| }); | ||
|
|
||
| test('should use the maxWidth if specified on auto resize', async () => { |
There was a problem hiding this comment.
I will add it in the nest PR
#3547
Using the new browser mode to run test in a real browser
https://vitest.dev/guide/browser.html
https://vitest.dev/guide/browser/interactivity-api.html
I think we should check all the tests if we can improve them now that they are running in a real browser.