Skip to content

Add tests for links_inner component

What does this MR do?

Adding tests to cover the link drawing portion of the new pipeline graph and visualization for CI configs. This adds essentially cover that given valid data, the links_inner component will generate an SVG with valid paths for the links between job nodes. To ensure this is accurate, we have a couple of assertions we can make:

  1. Ensure the base SVG is in the DOM with the right dimensions
  2. Ensure that given multiple set of different data, the number of links is correct
  3. Check that there are no NaN value in the DOM. NaN would appear in the d attribute of the path elements if the methods were broken.
  4. Have multiple snapshots of valid paths so that developers get warned in the future if their changes affect the expected d value of each path.
  5. Ensure that the hover class change is triggered when there is a mouse over on a jobpill that is tied to this path

Note also that the trickiest part of this MR was to generate fixtures that would not remove the value of the test. What we do here is that we generate fixture that simulate jobPills (each job returns an empty div with a valid ID we can then select). The biggest "mock" comes from getBoundingClientRect which we mock return value. This shouldn't affect the validity of the tests because we don't care about the values in the rect for unit tests. As long as the path generated is valid, then the value is attained because we have a path we can compare against when we do changes.

This MR doesn't add any E2E or visual tests, which require a larger effort.

Screenshots (strongly suggested)

No visual changes.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Related to #276949 (closed)

Edited by Frédéric Caplette

Merge request reports

Loading