Feat: prototype unit testing #712
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import * as React from 'react'; | ||
|
|
||
| import { TryItHeader } from '../header'; | ||
|
|
||
| test('Try It header renders correctly', () => { | ||
| render(<TryItHeader />); | ||
| const elem = screen.getByTestId('try-it-header'); | ||
| expect(elem.textContent).toBe(' Try It Out'); | ||
| expect(elem.innerHTML).toContain('data-icon="magic"'); | ||
| expect(elem.innerHTML).toContain('data-icon="question-circle"'); | ||
|
There was a problem hiding this comment. This is implementation-dependent and unimportant |
||
| }); | ||
|
|
||
| test('When hovered over question circle icon, Try It Out details are displayed', async () => { | ||
| render(<TryItHeader />); | ||
| const elem = screen.getByTestId('try-it-header'); | ||
| const icon = elem.querySelector('[data-icon="question-circle"]') as Element; | ||
|
|
||
| userEvent.hover(icon); | ||
|
|
||
| expect( | ||
| await screen.findByText( | ||
| "Send HTTP requests to your API, or one of our mock servers, to see how it's going to respond. View the docs", | ||
| ), | ||
|
There was a problem hiding this comment. Testing the copy is rarely a good idea either. The only thing it does is makes it more annoying to change it down the road, without providing any real safety. There was a problem hiding this comment. But testing whether the popover works is a good one! Now on how to select it? One really underrated and underutilized way of selecting things is by accessibility attributes (ARIA). You may be familiar already that HTML5 includes many new "semantic" tags that behave the same as a regular In addition to these, a more in-depth way to describe a web-page is using the HTML accessibility attributes: https://www.w3.org/TR/wai-aria-1.1/ & https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics While these are mainly designed to provide accessibility to websites - help screen readers and such - they implicitly let you describe the semantics of your site really well, the very semantics that you want to test. I tend to think of these as tools aiding testability and comprehension, and think of the accessibility improvement as a nice side-effect. In this case using the tooltip role would be a perfect fit, then you could use the There was a problem hiding this comment.
I agree and will get rid of it |
||
| ).toBeInTheDocument(); | ||
|
|
||
| expect(await (await screen.findByText('here.')).closest('a')).toHaveAttribute( | ||
| 'href', | ||
| 'https://meta.stoplight.io/docs/studio/docs/Design-and-Modeling/05-request-maker.md', | ||
| ); | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is related to kulshekhar/ts-jest#1506 - I encountered an error when trying to run tests with
jesta couple of times and clearing cache helped. We could get rid of for now and see if it breaks in CircleCI frequently, but it only adds about 2 seconds to a job.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It cannot affect CircleCI because it's a new container each time, with an empty cache - that's also why it takes 2s.
This justifies having the
yarncommand however, if it is useful for you locally.The issue you linked to is closed however ("v26.1.4 is out, I will close this issue"), so you could try upgrading
ts-jest(by upgradingjestitself) and that should fix your local problems as well.