Comments (4)
I would love to pick this up as a way to get my feet wet! 👀
from react.
@khiga8 sounds great! Wanted to ask you, for the stretch goal is there anything that you all have found helpful for this in other projects like PVC or in github/github?
from react.
That's a great question @joshblack! I am not sure the same setup would translate to Primer React, but happy to share what I've observed about setups in other projects.
I've noticed that e2e tests in Primer React are reserved for auto-generated visual regression tests and axe scans tests. It sounds like this is because (as you've noted before), it is possible to write very robust React unit tests that test component behaviors. Since you can test most interactions (e.g. keyboard behavior) with unit tests, it isn't really worth testing these in e2e tests.
If I recall correctly, it's not possible to test JS behaviors with Rails unit tests. In PVC, in order to test (any kind of JS) interactions, e2e browser tests need to be written. Browser tests in PVC are written (manually, not auto-generated) with the intent of testing interactions because unit tests are limited. The e2e tests have been set up in a way where whenever interactions are made (e.g. a click
call), an axe scan is automatically called. This expands coverage of axe to different states of the component automatically. It doesn't seem like this same setup would make sense in Primer React though and would require a significant change.
If we want to work with the existing setup, I wonder if a starting point could be to modify the script/generate-e2e-tests.js script, and have this cross-check the component markup (somehow?), and if it is role="dialog"
, role="combobox"
, role="menu"
(or any markup that "pops over" or has a hidden initial state), the auto-generated tests would include the following:
Pseudo:
test('axe @aat' on open state, async ({page}) => {
await visit(page, {
id: '${story.id}',
globals: {
colorScheme: theme
}
})
// Remove this after addressing TODO
expect(false).toBeTruthy();
// TODO: We want the axe scan to run on the open state of the component. Please replace this with a call to open the component!
await expect(page).toHaveNoViolations()
})
Basically, try to call attention to the fact that there should be test coverage on the open state by noting it in the test and having it auto-fail.
Curious what you think of this approach to start with, or if you have any other ideas!
from react.
The following components have an open state and sufficient snapshot/axe coverage on it ✅
The following components have an open state and no snapshot/axe coverage on the open state ❌ , but are facing deprecation anyways. So I will take no action for now:
Opening a PR, just for ActionMenu!
from react.
Related Issues (20)
- TypeError: CSS.supports is not a function when running Jest tests HOT 2
- Active `NavList.Item` is incorrectly missing bold styling HOT 4
- The theme object inflates bundle size. HOT 1
- Release Tracking
- The `useAnchoredPosition` hook returns generic refs for Element, which always requires a type assertion by the user
- TreeView: Remove aria-describedby when leading and trailing visuals do not exist HOT 2
- Does the Primer Design System have card components or similar card-like components? HOT 1
- Release Tracking HOT 1
- TreeView: Add support for external styling HOT 3
- TexInput `onClick` focus behavior broken with `type=date` on Safari
- `Dialog` should allow wrapping content, header, and footer (for example in `Suspense` or some context) HOT 1
- Utils should be exported
- Tests: Remove redundant ThemeProvider from tests
- `DialogV2` has incorrect names for width values HOT 1
- Enhancement: Add support for flush action lists HOT 2
- Update docs for `Button` to not consider `count` as required HOT 1
- Release Tracking
- Using `TooltipV2` always sets aria associations on first child element HOT 9
- [TreeView] Add area for `dragHandle` to be shown before the expand/collapse toggle HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.