test: e2e for nested cart lines #3425
Conversation
| expect(firstProduct).toBeDefined(); | ||
| expect(secondProduct).toBeDefined(); | ||
|
|
||
| const addedLines = await request |
There was a problem hiding this comment.
i dont love this, but it works. i am calling the proxy endpoint which then forwards the query
i would love to not have to call any gql endpoints, but i’ll still take this over
- modifying the jsx and clicking on the button (flaky, hard to maintain patches)
- opening graphiql and typing there (selecting the input, calling the query and copying the result while preserving white space was VERY challenging and boilerplatey)
| <div className={className}> | ||
| <CartEmpty hidden={linesCount} layout={layout} /> | ||
| <div className="cart-details"> | ||
| <div aria-labelledby="cart-lines"> |
There was a problem hiding this comment.
an element with this id did not exist
maybe we could consider adding some form of Axe a11y testing as well
this would have been caught
There was a problem hiding this comment.
yes I absolutely want to add that in the future!
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
| </p> | ||
| <ul | ||
| aria-labelledby="cart-line-children" | ||
| className="cart-line-children" |
There was a problem hiding this comment.
Bug: Hardcoded ID causes duplicate IDs when multiple parents have children
id="cart-line-children" is hardcoded. If the cart has multiple parent items with children, this creates duplicate IDs (invalid HTML) and breaks the aria-labelledby reference for screen readers.
Suggested fix:
const childrenLabelId = `cart-line-children-${id}`;
// ...
<p id={childrenLabelId} className="sr-only">
Line items with {product.title}
</p>
<ul aria-labelledby={childrenLabelId} className="cart-line-children">
| @@ -0,0 +1,131 @@ | |||
| import {ProductVariant} from '@shopify/hydrogen/storefront-api-types'; | |||
There was a problem hiding this comment.
Imported but never used; should be removed
| @@ -0,0 +1,131 @@ | |||
| import {ProductVariant} from '@shopify/hydrogen/storefront-api-types'; | |||
| import {setTestStore, test, expect} from '../../fixtures'; | |||
| import {CART_QUERY_FRAGMENT} from '../../../templates/skeleton/app/lib/fragments'; | |||
There was a problem hiding this comment.
Also imported but not used
2 participants
WHY are these changes introduced?
Fixes #981
WHAT is this pull request doing?
HOW to test your changes?
run e2e tests
Checklist