Merge pull request #10 from danielarbc/docs/create-commands-intellisense

docs: create commands intellisense

cypress/support/commands.js

@@ -1,30 +1,4 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
-//Overwrite type()
+// * Overwrite
 
 Cypress.Commands.overwrite("type", (originalFn, element, text, options) => {
   if (options && options.sensitive) {
@@ -41,7 +15,7 @@ Cypress.Commands.overwrite("type", (originalFn, element, text, options) => {
   return originalFn(element, text, options)
 })
 
-// Login
+// * Login
 
 Cypress.Commands.add("login", (user, password) => {
   const TEST_IDS = {
@@ -57,13 +31,12 @@ Cypress.Commands.add("login", (user, password) => {
   cy.get(TEST_IDS.loginButton).click()
 })
 
-// Checkout
+// * Checkout
 
 Cypress.Commands.add("addProductToCart", (productNumberList) => {
   for (let index in productNumberList) {
     cy.fixture("products.json").then((products) => {
       const product = products[productNumberList[index]]
-      cy.log(product.productName)
       cy.get(`[data-test="add-to-cart-${product.dataTestName}"]`).click()
     })
   }
@@ -73,6 +46,7 @@ Cypress.Commands.add("goToCart", () => {
   cy.get(".shopping_cart_link").click()
   cy.get('[data-test="checkout"]').click()
 })
+
 Cypress.Commands.add(
   "fillPersonalDataAtCheckout",
   (firstName, lastName, postalCode) => {
@@ -96,28 +70,23 @@ Cypress.Commands.add("validateCheckoutInfos", (productNumberList) => {
       productPriceList.push(productsList[index].productPrice)
     }
 
-    cy.log("**Product Name**")
     cy.get(".inventory_item_name")
       .should("have.length", productNumberList.length)
       .then(($els) => {
         return Cypress._.map(Cypress.$.makeArray($els), "innerText")
       })
       .should("deep.equal", productNameList)
 
-    cy.log("**Product Desc**")
     cy.get(".inventory_item_desc")
       .should("have.length", productNumberList.length)
       .then(($els) => {
-        // jQuery => Array => get "innerText" from each
         return Cypress._.map(Cypress.$.makeArray($els), "innerText")
       })
       .should("deep.equal", productDescriptionList)
 
-    cy.log("**Product Price**")
     cy.get(".inventory_item_price")
       .should("have.length", productNumberList.length)
       .then(($els) => {
-        // jQuery => Array => get "innerText" from each
         return Cypress._.map(Cypress.$.makeArray($els), "innerText")
       })
       .should("deep.equal", productPriceList)
@@ -141,6 +110,7 @@ Cypress.Commands.add("validateCheckoutInfos", (productNumberList) => {
       /Total: \${1,}([0-9]{1,}\.[0-9]{1,}|[0-9]{1,})\.([0-9]{2})/,
     )
 })
+
 Cypress.Commands.add("finishOrder", () => {
   cy.get('[data-test="finish"]').click()
   cy.get(".complete-header").contains("Thank you for your order!")

cypress/support/index.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    /**
+     * Login in application
+     * If you don't put any parameters we will use the username and password in cypress.env.json
+     * @param username string
+     * @param password string
+     * @example
+     * cy.login()
+     * cy.login(username,password)
+     */
+    login(username: string, password: string): Chainable<any>
+    /**
+     * Add a list of products to cart
+     * @param productList array
+     * @example
+     * cy.addProductToCart([product1, product2])
+     */
+    addProductToCart(productList: array): Chainable<any>
+    /**
+     * Add a list of products to cart
+     * @param firstName string
+     * @param secondName string
+     * @param postalCode string
+     * @example
+     * cy.fillPersonalDataAtCheckout(firstName, secondName, postalCode)
+     */
+    fillPersonalDataAtCheckout(
+      firstName: string,
+      secondName: string,
+      postalCode: string,
+    ): Chainable<any>
+    /**
+     * Validate the information of list of products added to cart like name, description and price
+     * @param productList array
+     * @example
+     * cy.validateCheckoutInfos([product1, product2])
+     */
+    validateCheckoutInfos(productList: array): Chainable<any>
+    /**
+     * After add the products to card and fill the personal information, finish order
+     * @example
+     * cy.finishOrder()
+     */
+    finishOrder(): Chainable<any>
+  }
+}

docs/plugins.md

@@ -18,4 +18,4 @@ You can configure it as a pre-commit step, but I'm the only one working on this
 
 A modern JavaScript utility library delivering modularity, performance & extras. Webpage: [https://lodash.com/](https://lodash.com/)
 
-I'm using this plugin in the checkout command to get the property "innerText". However, I can also use it to test Flaky Tests as the [Cypress documentation recommends](https://www.cypress.io/blog/2020/12/03/retry-rerun-repeat#repeat).
+Cypress natively imports Lodash. I'm using this plugin in the checkout command to get the property "innerText". However, I can also use it to test Flaky Tests as the [Cypress documentation recommends](https://www.cypress.io/blog/2020/12/03/retry-rerun-repeat#repeat).

package.json

@@ -24,7 +24,6 @@
   "devDependencies": {
     "@faker-js/faker": "^8.2.0",
     "cypress": "^13.4.0",
-    "lodash": "^4.17.21",
     "prettier": "3.0.3"
   }
-}
+}