bonus 54

cypress/e2e/inventory/sort-pom.cy.ts

@@ -0,0 +1,31 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+
+const SortingPOM = {
+  sortBy(order: 'az' | 'za' | 'lohi' | 'hilo') {
+    // select the sorting order using the <select> element
+    cy.get('select[data-test=product_sort_container]').select(order)
+    // once the sorting changes
+    // get the selected option text
+    // and save it as alias "sortName"
+    //
+    // alternative: get the .active_option element's text
+    // cy.get('.active_option').invoke('text').as('sortName')
+  },
+}
+
+describe('Products', { viewportHeight: 1600 }, () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+
+    cy.visit('/inventory.html', { failOnStatusCode: false })
+    cy.location('pathname').should('equal', '/inventory.html')
+  })
+
+  it('sorts the items and shows the sorting order', () => {
+    SortingPOM.sortBy('lohi')
+    // confirm the sorting name shown below the products
+    // is the same as selected text in the alias "sortName"
+  })
+})

src/pages/Inventory.jsx

@@ -9,6 +9,13 @@ import { sortAsc, sortDesc, sortHiLo, sortLoHi } from '../utils/Sorting'
 import Select from '../components/Select'
 import './Inventory.css'
 
+const sortingValues = {
+  az: 'Name (A to Z)',
+  za: 'Name (Z to A)',
+  lohi: 'Price (low to high)',
+  hilo: 'Price (high to low)',
+}
+
 const Inventory = () => {
   const [inventoryList, setInventoryList] = useState(
     sortAsc(InventoryData, 'name'),
@@ -75,7 +82,11 @@ const Inventory = () => {
         />
         <div id="inventory_container">
           <div>
-            <div id="inventory_container" className="inventory_container">
+            <div
+              id="inventory_container"
+              className="inventory_container"
+              data-test="InventoryPage"
+            >
               <div className="inventory_list">
                 {inventoryList.map((item, i) => {
                   return (
@@ -86,6 +97,7 @@ const Inventory = () => {
                       name={item.name}
                       desc={item.desc}
                       price={item.price}
+                      dataTestId="InventoryPageItem"
                     />
                   )
                 })}
@@ -94,6 +106,10 @@ const Inventory = () => {
           </div>
         </div>
       </div>
+      <center>
+        Items were sorted using{' '}
+        <span data-test="sorting-name">{sortingValues[activeOption]}</span> sort
+      </center>
       <SwagLabsFooter />
     </div>
   )