Dolt is Git for data and DoltHub is our web application that hosts Dolt repositories. At the beginning of the year we redesigned DoltHub and decided to try out Cypress as our end-to-end testing solution (similar to how we use Bats tests for Dolt).

Last week I wrote about our suite of Cypress tests and promised they'd be open source soon. I'm here to announce that our suite of Cypress tests is now open for anyone to view or use as an example to write your own Cypress tests.

A refresher: what is Cypress?

Cypress is an end-to-end testing framework for anything that runs in the browser. Cypress runs in the web browser (we use Chrome), making the debugging process shorter and less painful . It also takes snapshots as your tests run that you can refer back to later in time. You can read more about their unique features in their docs.

If you want to know more about why we decided to use Cypress and how to get started writing some tests, check out my Cypress blog from last week. This blog will go over some caveats we found configuring Cypress to work with Typescript.

Setting up Typescript to work with Cypress

The first time around our dolthub-cypress application was written in Javascript. We decided to upgrade to Typescript while migrating our tests over to a public repository on GitHub. Especially if using a text editor (we like Visual Studio Code) with features like IntelliSense, Typescript makes coming in and writing tests as someone less familiar with the testing suite even easier.

Configuring Typescript to work with Cypress came with some challenges. Cypress ships with official type definitions for Typescript and has a setup guide in their docs, which came with some examples. You can check out our tsconfig.json here.

I made the mistake when I initially set up this repository of putting the cypress directory in src, which is standard for compiled languages. Cypress won't recognize your tests when you do this, so we had to change our rootDir to cypress. Typescript also won't recognize the global Cypress variables (Cypress, describe, it, etc) without adding "cypress" to the types array.

Adding types for custom commands

If you're adding custom commands to your cypress/support/commands file, you'll need a corresponding d.ts file. We named ours global.d.ts instead of index.d.ts because eslint was not recognizing two files with the same name within the same directory. For example, you can add a command called dataCy that gets the data-cy tag for some value:

// cypress/support/commands.ts

Cypress.Commands.add("dataCy", (value) => {
  return cy.get(`[data-cy=${value}]`);
});

You'll need to add the type definition to the Cypress namespace:

// in cypress/support/types.d.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(value: string): Chainable<Element>;
  }
}

You can learn more about adding types for custom commands in the Cypress docs.

Our custom util functions

When Dustin first set up our Cypress test suite, he had added a bunch of utility functions to make it easy for new developers to come in and start writing tests without a lot of Cypress knowledge. You can see these utils here, which have been revamped with some type definitions.

Our utility functions don't cover everything that you can do with Cypress, but it's a good baseline for what we needed to write some basic Cypress tests for our public pages. Our dolthub-cypress README goes through most of our important utility functions and types.

Conclusion

We made our Cypress test suite open source for others to use our source code as an example for writing Cypress tests for their own applications.

Next on our Cypress agenda is setting up tests for our authenticated pages. When we initially set up Cypress, our only DoltHub login option was Google. We have since added GitHub and email/password to our login options, which we think will make the login process easier. In the meantime, the Cypress docs have some recipes for different login options here.

Opening up our dolthub-cypress repository to the public also means that anyone can file an issue or open a pull request for DoltHub bugs and tests. Please contact us if you have any suggestions or feedback.