Add diagrams for frontend testing levels (docs)

What does this MR do?

Add mermaid diagrams to visualize what parts of the code are covered by which testing levels.

Related issues

https://gitlab.com/gitlab-org/gitlab-ce/issues/56376

Author's checklist

• Follow the Documentation Guidelines and Style Guide.
• Link docs to and from the higher-level index page, plus other related docs where helpful.
• Apply the ~Documentation label.

Review checklist

All reviewers can help ensure accuracy, clarity, completeness, and adherence to the Documentation Guidelines and Style Guide.

1. Primary Reviewer

• Review by a code reviewer or other selected colleague to confirm accuracy, clarity, and completeness. This can be skipped for minor fixes without substantive content changes.

2. Technical Writer

• Optional: Technical writer review. If not requested for this MR, must be scheduled post-merge. To request for this MR, assign the writer listed for the applicable DevOps stage.

3. Maintainer

1. Review by assigned maintainer, who can always request/require the above reviews. Maintainer's review can occur before or after a technical writer review.
2. Ensure a release milestone is set and that you merge the equivalent EE MR before the CE MR if both exist.
3. If there has not been a technical writer review, create an issue for one using the Doc Review template.