Setup repository and add demo Cypress test (AvivBenchorin#2)

Setting up the Cypress folder structure and other repository dependencies such as TypeScript and ESLint. This adds a working Cypress functional test to run on OpenSearch Dashboards, and updates the .gitignore to include local Cypress files. As well, this adds instructions to the README on how to setup and run the Cypress tests.

Signed-off-by: Aviv Benchorin <[email protected]>

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "standard"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "indent": ["error", 4]
+    }
+};

.gitignore

@@ -102,3 +102,9 @@ dist
 
 # TernJS port file
 .tern-port
+
+.DS_Store
+
+cypress/videos
+
+cypress.env.json

README.md

@@ -1,2 +1,16 @@
-# monterey
-Functional testing framework to automate OpenSearch-Dashboards
+# Monterey
+Functional testing framework to automate OpenSearch Dashboards.
+
+## Getting Started
+Monterey uses [Cypress](https://www.cypress.io/), which you can install using the [installation guide](https://docs.cypress.io/guides/getting-started/installing-cypress).
+
+## Running tests
+Before running any tests, make sure that both [OpenSearch](https://github.com/opensearch-project/OpenSearch) and [OpenSearch Dashboards](https://github.com/opensearch-project/OpenSearch-Dashboards) are running. The demo test expects the OpenSearch Dashboards server base path to be stored as the `baseUrl` variable in the `cypress.json` file (more details [here](https://docs.cypress.io/guides/references/configuration#cypress-json)). By default, the `baseUrl` is set to `http://localhost:5601`.
+
+By default, Cypress test files are located in `cypress/integration`. More details about the Cypress folder structure can be found [here](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Configuring-Folder-Structure).
+
+### Cypress Test Runner
+To run tests through the Cypress Test Runner, open Cypress using one of the commands listed in the [installation guide](https://docs.cypress.io/guides/getting-started/installing-cypress#Opening-Cypress), such as `npx cypress open`. Once the Cypress Test Runner is open, all tests stored in `cypress/integration` should be visible and organized by directory. After you select the desired browser, click on the test you want to run and a new browser window will open running the test.
+
+### CLI
+Given that Cypress was installed as an `npm` module, you can also run Cypress in the command line, as is detailed [here](https://docs.cypress.io/guides/guides/command-line#Installation). To run a specific test, an example command you can use is `npx cypress run --spec "cypress/integration/path/to/test.js"`.

cypress.json

@@ -0,0 +1,4 @@
+{
+    "defaultCommandTimeout": 10000,
+    "baseUrl": "http://localhost:5601"
+}

cypress/integration/demo_tests/demo_spec.js

@@ -0,0 +1,63 @@
+// Demo OpenSearch-Dashboards Test
+// Note: Getting ResizeObserver loop limit exceeded errors!
+//    Added code from https://github.com/quasarframework/quasar/issues/2233#issuecomment-678115434
+//    to support/index.js to prevent from failing tests with the error.
+
+describe('opening OpenSearch-Dashboards', () => {
+    // Setup the dashboard to start at the home page
+    before(() => {
+        cy.visit('/')
+        cy.request('/api/saved_objects/_find?fields=title&per_page=1&search=*&search_fields=title&type=index-pattern').then((response) => {
+            if (response.body.total === 0) {
+                cy.log('Reached welcome page')
+
+                // Click the "Add sample data" button
+                cy.get('[class="euiButton euiButton--primary homWelcome__footerAction euiButton--fill"]', { timeout: 15000 }).click()
+
+                // View the "Sample eCommerce orders" data
+                cy.get('[data-test-subj="addSampleDataSetecommerce"]', { timeout: 15000 }).click()
+                cy.get('[data-test-subj="launchSampleDataSetecommerce"]').should('contain', 'View data')
+            }
+        })
+    })
+
+    // Return to the home page before every test, and ensure page has loaded
+    beforeEach(() => {
+        cy.visit('/app/home').then(() => {
+            cy.get('[data-test-subj="breadcrumb first last"]', { timeout: 20000 }).should('contain', 'Home')
+        })
+    })
+
+    it('Exploring data in the Discover page', () => {
+        cy.get('[data-test-subj="toggleNavButton"]').click()
+
+        // Click the Discover button in the Nav menu
+        cy.get('[data-test-subj="collapsibleNavAppLink"]').contains('Discover').click()
+
+        // Ensure that the page is a "blank slate" (clear previous searches, refresh to get rid of old errors)
+        cy.get('[data-test-subj="breadcrumbs"]').should('contain', 'Discover')
+        cy.get('[data-test-subj="queryInput"]').clear()
+        cy.get('[data-test-subj="querySubmitButton"]').click()
+
+        // Open time quick select tab
+        cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click()
+
+        // Select the time range
+        cy.get('[aria-label="Time tense"]').select('Last').should('have.value', 'last')
+        cy.get('[aria-label="Time value"]').clear().type('{selectall}7')
+        cy.get('[aria-label="Time unit"]').select('days').should('have.value', 'd')
+        cy.contains('Apply').click()
+
+        // Submit a search query
+        cy.get('[data-test-subj="queryInput"]').type("products.taxless_price >= 60 AND category : Women's Clothing")
+        cy.get('[data-test-subj="querySubmitButton"]').click()
+
+        // Select the "category" field
+        /**
+         * Issue: want to be able to "hover" over the category list element,
+         * mouseover/mouseenter did not work (https://docs.cypress.io/api/commands/hover)
+        **/
+        cy.get('[data-attr-field="category"]').click()
+        cy.get('[data-test-subj="fieldToggle-category"]').click()
+    })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// 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) => { ... })

cypress/support/index.js

@@ -0,0 +1,28 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
+Cypress.on('uncaught:exception', (err) => {
+    /* returning false here prevents Cypress from failing the test */
+    if (resizeObserverLoopErrRe.test(err.message)) {
+        return false
+    }
+})