Cypress cucumber

[mdelapenya]

Summary

It converts the existing Cypress tests for APM from Cypress to Cypress+Cucumber. To achieve that, it adds a cucumber-preprocessor, as shown in the following examples:

• cypress + webpack + cucumber + typescript example: https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example
• cypres + webpack example: https://github.com/cypress-io/cypress-example-recipes/tree/a240054d7f5626ffcd7bd668dded96d219c4a7eb/examples/preprocessors__typescript-webpack

The cypress tests are run using the npm run cypress:run script, BUT in the last step:

cy.get(yAxisTick)
    .eq(0)
    .invoke('text')
    .snapshot();

It says that snapshot is not a function, although I see it defined here (cypress/support/index.d.ts):

/// <reference types="Cypress" />

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

// typically custom commands are added in this support folder
// so it makes sense to put their TypeScript definitions here
// from the JavaScript specs loads this file using
// the triple slash "reference" comment like this:
//
// /// <reference path="../support/index.d.ts" />

declare namespace Cypress {
  interface Chainable<Subject> {
    snapshot: () => {};
  }
}

On the other hand, I struggled to bypass the precommit checks adding cucumber style, could you please take a look at that? Please DO complain about what I did for the lint scripts 😄 PS: not a javascript developer

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

- [ ] This was checked for cross-browser compatibility, including a check against IE11
- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
- [ ] Documentation was added for features that require explanation or tutorials
- [ ] Unit or functional tests were updated or added to match the most common scenarios
- [ ] This was checked for keyboard-only and screenreader accessibility

For maintainers

- [ ] This was checked for breaking API changes and was labeled appropriately
- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately

[mdelapenya]

Another issue I found was while running the tests after: after each modification, the kibana app was reloaded, so I had to wait for it to be rebuilt, slowing down the process. I started kibana with yarn start --no-base-path --csp.strict=false from project's root directory.

[mdelapenya]

This was already merged in upstream, so we will remove the commit that added it

[mdelapenya]

Backgrounds are executed before any scenario within this feature file (like a before test method)

[mdelapenya]

The When clause it really important, because it's the one triggering the action we want to verify its behavior.

[mdelapenya]

The Then clause is the outcome or the asserts to be done in the scenario. Ideally only one Then should be added per scenario

[mdelapenya]

The And clause could be used after a Then or a When. It's indistinguishable from any of them in the sense, but it's important the semantics of And steps: it's like creating another assertion, which ideally must be done just once.

[ElWPenn]

And works with Given, When or Then it makes a scenario easier to read.

Given a thing
And another thing

Reads better than

Given a thing
Given another thing

[mdelapenya]

Not sure what it's the purpose of this function, maybe to read the snapshots.js file? If so, Cucumber + Cypress provides a fixtures dir to store JSON files as data for the tests.

[dgieselaar]

Yep, it's for the snapshots IIRC.

[mdelapenya]

Moved to ../webpack.config.js, please check there the configuration for typescript. I'd love hearing your experience in the configuration part, as that is a copy&paste mix of the different examples. 🙏

[mdelapenya]

This is the function that is nor defined in the tests 🤷‍♀ How could we include it in the tests?

[dgieselaar]

this is a type def, it's not the actual code. likely we need to include cypress/snapshot somewhere.

[mdelapenya]

This file comes from the scaffolding

[mdelapenya]

This file comes from the scaffolding

[mdelapenya]

There is no difference using Given('foo'), When('foo'), Then('foo')... They technically could be defined in any format. BUT it's important to use the proper word for the sake of semantics! We are providing information to an occasional reader so he/she is able to properly understand the specification/behavior

[mdelapenya]

Because a Given represents the pre-conditions for a test, we moved the old before method here.

[mdelapenya]

The When is the action to verify its behavior.

[mdelapenya]

The traditional assertions are performed here, in the Then method, which must include the verifications points to mark a behavior as valid.

[mdelapenya]

Closing, thanks for the review!!