influxdata / influxdata/docs-v2

e2e: topnav product dropdown test fails against current products.yml and dropdown markup

Open
#7,595 0 comments 0 reactions 0 assignees View on GitHub
area:site-ui
Dominant language
JavaScript
Stars
82
Forks
326
Avg merge
1d 1h
Merged PRs (30d)
82

Description

`cypress/e2e/topnav.cy.js` → `product dropdown` → `has links to all products`
fails against the current product data and dropdown markup. It fails for three
independent reasons.

Surfaced while fixing #7576. That hook failure was skipping this test, so the
breakage was hidden. #7594 fixes the hook; this test still fails after it.

## 1. `p.latest.replace is not a function`

```
TypeError: p.latest.replace is not a function
at eval (cypress/e2e/topnav.cy.js:55)
```

`topnav.cy.js:55` treats `latest` as a string:

```js
const urlFrag = p.latest.replace(/(v\d+)\.\w+/, '$1');
```

15 of 17 entries in `data/products.yml` are strings. Two are not:

| Product | Raw YAML | Parsed |
| --- | --- | --- |
| `telegraf_controller` | `latest: 1.0` | number `1` |
| `telegraf_enterprise` | `latest: 1.0` | number `1` |

Every other product quotes a URL path segment — `core`, `cloud-serverless`,
`v1.39`, `v2.9`. Unquoted `1.0` is parsed as a float.

This may be a data problem rather than a test problem. Both products link out
to a sales page via `link:` instead of having a docs section, so their `latest`
looks inert, and no template currently reads it — the `.latest` consumers in
`layouts/` reference `influxdb`, `enterprise_influxdb`, `telegraf`,
`chronograf`, `kapacitor`, and `flux`. Worth deciding whether these two should
carry a string like the others, or whether the test should coerce.

## 2. `influxdb_cloud` matches no dropdown link

The test strips parentheses from the product name:

```js
name = name.replace(/\((.*)\)/, '$1');
```

That turns `InfluxDB Cloud (TSM)` into `InfluxDB Cloud TSM`, but the dropdown
renders `InfluxDB Cloud (TSM)`, so `:contains()` finds nothing and `.first()`
gets an empty subject.

## 3. Ambiguous name matches

`:contains()` is a substring match, so short names match several links:

| Name | Matching links |
| --- | --- |
| `Telegraf` | Telegraf, Telegraf Controller, Telegraf Enterprise |
| `InfluxDB OSS` | InfluxDB OSS v2, InfluxDB OSS v1 |

`.first()` then picks whichever comes first in the DOM, which is not
necessarily the product being iterated, so the following `cy.url()` assertion
can check the wrong product.

## Reproduce

```
node cypress/support/run-e2e-specs.js --spec "cypress/e2e/topnav.cy.js" --no-mapping
```

On `master` at 736c0c7a with #7594 applied: 2 tests, 1 passing, 1 failing.

## Note on CI

This spec does not run in CI. `.github/workflows/pr-render-check.yml` runs only
`cypress/e2e/content/render-regression.cy.js` and
`cypress/e2e/content/canonical.cy.js`. Nothing catches this suite drifting from
the markup and data it asserts against.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with cypress/e2e/topnav.cy.js, then compare data/products.yml with the rendered dropdown markup. Run node cypress/support/run-e2e-specs.js --spec "cypress/e2e/topnav.cy.js" --no-mapping and address the numeric latest values, parenthesized name handling, and ambiguous matches. Done means the product dropdown test passes for all products against the current data and markup.

Written by the indexing model from the issue text.

Assessment

Tech stack
cypress, javascript
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.