From ed40db0a1369e6a7f1d2a4906d5ce944794f6c4b Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Fri, 24 Nov 2023 09:00:17 -0500
Subject: [PATCH] bonus55 lesson

---
 cypress/e2e/inventory/sort-names.cy.ts | 24 +++++++++++++++++++
 cypress/e2e/inventory/sort-pom.cy.ts   | 31 ------------------------
 cypress/support/commands.ts            | 33 ++++++++++++++++++++++----
 cypress/support/index.d.ts             |  9 ++++---
 4 files changed, 58 insertions(+), 39 deletions(-)
 create mode 100644 cypress/e2e/inventory/sort-names.cy.ts
 delete mode 100644 cypress/e2e/inventory/sort-pom.cy.ts

diff --git a/cypress/e2e/inventory/sort-names.cy.ts b/cypress/e2e/inventory/sort-names.cy.ts
new file mode 100644
index 0000000..d25575a
--- /dev/null
+++ b/cypress/e2e/inventory/sort-names.cy.ts
@@ -0,0 +1,24 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+
+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('retrieves each sort order name', () => {
+    // fetch the list of options from the sort order SELECT element
+    cy.getByTest('product_sort_container')
+    // confirm there are at least a couple
+    // map each OPTION element to its inner text
+    // using cypress-map query cy.map
+    // optional: print the list of names
+    //
+    // then select each sort name one by one
+    // and confirm the sorting name shown on the page matches
+  })
+})
diff --git a/cypress/e2e/inventory/sort-pom.cy.ts b/cypress/e2e/inventory/sort-pom.cy.ts
deleted file mode 100644
index eb9f8be..0000000
--- a/cypress/e2e/inventory/sort-pom.cy.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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"
-  })
-})
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 272d2ed..bf14a65 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -20,8 +20,31 @@ Cypress.Commands.add(
   },
 )
 
-Cypress.Commands.add('getByTest', (testId) => {
-  const log = Cypress.log({ name: 'getByTest', message: testId })
-  // query the elements by the "data-test=..." attribute
-  cy.get(`[data-test="${testId}"]`)
-})
+Cypress.Commands.add(
+  'getByTest',
+  { prevSubject: 'optional' },
+  (parentElement, testId, text?: string) => {
+    console.log({ parentElement, testId })
+    const selector = `[data-test="${testId}"]`
+    if (text) {
+      const log = Cypress.log({
+        name: 'getByTest',
+        message: `${testId} "${text}"`,
+      })
+      // query the elements by the "data-test=..." attribute with the given text
+      if (parentElement) {
+        cy.wrap(parentElement, { log: false }).contains(selector, text)
+      } else {
+        cy.contains(selector, text)
+      }
+    } else {
+      const log = Cypress.log({ name: 'getByTest', message: testId })
+      // query the elements by the "data-test=..." attribute
+      if (parentElement) {
+        cy.wrap(parentElement, { log: false }).find(selector)
+      } else {
+        cy.get(selector)
+      }
+    }
+  },
+)
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
index f699278..c2adb89 100644
--- a/cypress/support/index.d.ts
+++ b/cypress/support/index.d.ts
@@ -12,10 +12,13 @@ declare namespace Cypress {
     fillForm(selectorsValues: object): Chainable<JQuery<HTMLFormElement>>
 
     /**
-     * Returns elements that have "data-test" attribute with the given value
+     * Returns elements that have "data-test" attribute with the given value.
+     * If you provide the text argument, it uses `cy.contains` to find a single
+     * element that includes the given text
      * @example
-     *  getByTest('checkout').should('be.visible')
+     *  cy.getByTest('CartCheckout').should('be.visible')
+     *  cy.getByText('UserName', 'Joe')
      */
-    getByTest(testId: string): Chainable<JQuery<HTMLElement>>
+    getByTest(testId: string, text?: string): Chainable<JQuery<HTMLElement>>
   }
 }