VisiLake Tests

Included in this repo are various integration tests and end to end (e2e) tests for visilake

All testing is conducted using the Cypress testing framework.

Installation Instructions

Clone the repo

git clone https://github.com/nardoring/nardo-web-tests

Install required packages

npm install

Running Tests

Prerequisite: nardo-web must be built and running on localhost:45139

Run Cypress

npx cypress open

This should open up the following window:

Select E2E Tesing

Choose Browser for Testing

Select Test Specs

Test spec files include the code for running each test. Click on any spec to run the associated tests, or click Run X Specs to run all tests.

Viewing Test Results

After selecting the test spec(s), the tests will commence execution within the browser environment. As the tests run, you can monitor the results in real-time within the 'specs' panel.

Tests Overview

Example Test Spec

Here's an example test spec, just to give an idea of how these tests work. Most test specs are in a similar layout to this:

describe("Form Page: Source Entry Validation", () => {
  beforeEach(() => {
    cy.visit("http://localhost:45139/");
  });

    it("error for no source entry", () => {
      cy.get(submit_job_button_selector).click();

      cy.get(sources_selector).shouldBeErrorHighlighted();
    });
    
    it("error for invalid source entry", () => {
      cy.get(sources_selector)
        .type("Form Page: Source Entry Validation")
        .type("{enter}");

      cy.get(submit_job_button_selector).click();

      cy.get(sources_selector).shouldBeErrorHighlighted();
    });
   ...

This test spec does the following:

Before each test, visits the provided URL (form page)
Runs each test within the spec
- Test: "error for no source entry"
  - Clicks the submit job button
  - Verifies source field is error highlighted
- Test: "error for invalid source entry"
  - Inputs the provided text into the sources field
  - Clicks the submit job button
  - Verifies the source field is error highlighted

Included Tests (specs)

Integration
- Form Page
  - Job Name Input
    - Verify job name entry is required
  - Analysis Type Input
    - Verify analysis type entry is required
    - Verify one or many options can be selected
  - Sources Input
    - Verify sources entry is required
    - Verify one or many sources can be inputted
    - Verify incorrectly formatted tags fail
    - Verify functionality of Autocompletion
  - Date Range Input
    - Verify date range entry is required
    - Verify a valid date range passes
    - Verify an invalid date range fails
  - Description Input
    - Verify description entry is required
- List Page
  - Verify all default table headers are present
  - Verify all expected columns are available (including ones by default such as granularity and date range)
- Redirects
  - Verify the 'new job' button on the list page redirects to the form page
  - Verify the 'view jobs' button on the form page redirects to the list page
E2E
- Verify full form submission is successful
- Verify the table row for the submitted job matches what was submitted

Selectors

The Selectors folder includes various string consts such as:

export const view_jobs_button_selector = "#view-jobs-button";

These are used within test specs when selecting specific components

cy.get(submit_job_button_selector).click();

Commands

The commands folder includes custom commands that can be used across any of the tests.

For example, a custom command that selects the first Autocompletion option for the input field:

Cypress.Commands.add("selectFirstAutocompleteOption", { prevSubject: true }, ($subject) => {
  return cy.wrap($subject).click().wait(1000).type("{downarrow}").type("{enter}");
});

cy.get(sources_selector).selectFirstAutocompleteOption();

nardoring/visilake-tests