NPM Install And Copilot Instructions

Here is something I have noticed about my projects and using Copilot lately. When I add a new NPM dependency, I also update the Copilot instructions file to include examples of how I want to use that dependency in my tests.

For example, let's say I need to test if item prices on the inventory page are sorted.

We can use cypress-map queries to create a retry-able chain of commands.

cypress/e2e/sorted-prices.cy.ts

import { LoginPage } from '@support/pages/login.page'

describe('Inventory page', () => {
  // visit the login page before each test
  beforeEach(() => {
    const user = Cypress.env('users').standard
    LoginPage.login(user.username, user.password)
  })

  it('sorts items by price, low to high', () => {
    cy.visit('/inventory')
    cy.get('[data-test="product_sort_container"]').select('Price (low to high)')
    cy.get('.inventory_item_price')
      .map('innerText')
      // slice the leading $
      .mapInvoke('slice', 1)
      .map(parseFloat)
      .print('prices %o')
      // confirm the numbers are sorted in ascending order
  })
})

🎓 This example comes from my online courses Testing The Swag Store and Write Cypress Tests Using GitHub Copilot.

How do we write the last assertion following the // confirm the numbers are sorted in ascending order comment? We can ask Copilot or wait for it to suggest the code completion. Here is one possible suggestion:

.then((prices) => {
  const sortedPrices = [...prices].sort((a, b) => a - b)
  expect(prices).to.deep.equal(sortedPrices)
})

The test runs and shows an anonymous deeply equal assertion inside the .then(callback) function:

Nothing wrong with this suggestion (except it is not retry-able), but I prefer using chai-sorted plugin instead. The assertions are easier to read and much shorter. Let's install the plugin:

$ npm i -D chai-sorted

Then we update the cypress/support/e2e.js file to include the plugin:

cypress/support/e2e.ts

// https://www.chaijs.com/plugins/chai-sorted/
chai.use(require('chai-sorted'))

Now we need to tell Copilot to use the newly installed plugin. We can update the Copilot instruction file

.github/copilot-instructions.md

This is a project that uses Cypress for end-to-end testing, and follows best practices.

To check if the numbers are sorted, always use the chai-sorted plugin for Cypress, for example:

    // sort the numbers in ascending order
    cy.get('.price').map('innerText').map(parseFloat).should('be.ascending')
    // sort the numbers in descending order
    cy.get('.price').map('innerText').map(parseFloat).should('be.descending')

Now let's return the test and see what Copilot suggests for the last assertion:

Much shorter and easier to read, and it even includes helpful text, unlike .then(callback) we had before! This is exactly what we wanted. Here is the passing test

Perfect.