Merge pull request #720 from Shopify/line-item-list

Use list markup for cart line items
Shopify · Sep 10, 2020 · 33d6aff · 33d6aff
2 parents e8415e4 + c32382d
commit 33d6aff
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/cart.js b/src/components/cart.js
@@ -117,7 +117,7 @@ export default class Cart extends Component {
       data.text = this.config.lineItem.text;
       data.lineItemImage = this.imageForLineItem(data);
       data.variantTitle = data.variant.title === 'Default Title' ? '' : data.variant.title;
-      return acc + this.childTemplate.render({data}, (output) => `<div id="${lineItem.id}" class=${this.classes.lineItem.lineItem}>${output}</div>`);
+      return acc + this.childTemplate.render({data}, (output) => `<li id="${lineItem.id}" class=${this.classes.lineItem.lineItem}>${output}</li>`);
     }, '');
   }
 

diff --git a/src/templates/cart.js b/src/templates/cart.js
@@ -8,7 +8,7 @@ const cartTemplates = {
           </div>`,
   lineItems: `<div class="{{data.classes.cart.cartScroll}}{{#data.contents.note}} {{data.classes.cart.cartScrollWithCartNote}}{{/data.contents.note}}{{#data.discounts}} {{data.classes.cart.cartScrollWithDiscounts}}{{/data.discounts}}" data-element="cart.cartScroll">
                 {{#data.isEmpty}}<p class="{{data.classes.cart.empty}} {{data.classes.cart.emptyCart}}" data-element="cart.empty">{{data.text.empty}}</p>{{/data.isEmpty}}
-                <div class="{{data.classes.cart.lineItems}}" data-element="cart.lineItems">{{{data.lineItemsHtml}}}</div>
+                <ul role="list" class="{{data.classes.cart.lineItems}}" data-element="cart.lineItems">{{{data.lineItemsHtml}}}</ul>
               </div>`,
   footer: `{{^data.isEmpty}}
             <div class="{{data.classes.cart.footer}}" data-element="cart.footer">

diff --git a/test/unit/cart/cart.js b/test/unit/cart/cart.js
@@ -139,7 +139,7 @@ describe('Cart class', () => {
       formatMoneySpy.restore();
     });
 
-    it('calls render and returns an html string', () => {
+    it('calls render and returns an html <li /> string', () => {
       cart.lineItemCache = [{
         id: 123,
         title: 'test',
@@ -158,7 +158,9 @@ describe('Cart class', () => {
       }];
 
       const renderSpy = sinon.spy(cart.childTemplate, 'render');
-      assert.include(cart.lineItemsHtml, 'data-line-item-id="123"');
+      const cartLineItemsHtml = cart.lineItemsHtml;
+      assert.include(cartLineItemsHtml, 'data-line-item-id="123"');
+      assert.match(cartLineItemsHtml, /<li\b.*>[\s\S]*<\/li>/);
       assert.calledOnce(renderSpy);
     });