[k7/breadcrumbs] add standard data-test-subjects (#28738)

* [k7/breadcrumbs] add standard data-test-subjects

* [k7/breadcrumbs] update snapshots

src/core/public/chrome/chrome_service.ts

@@ -37,6 +37,7 @@ export interface Brand {
 export interface Breadcrumb {
   text: string;
   href?: string;
+  'data-test-subj'?: string;
 }
 
 export class ChromeService {

src/ui/public/chrome/directives/header_global_nav/components/__snapshots__/header_breadcrumbs.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] =
 <span
   aria-current="page"
   className="euiBreadcrumb euiBreadcrumb--last"
+  data-test-subj="breadcrumb first last"
   title="First"
 >
   First
@@ -15,11 +16,13 @@ Array [
   <EuiLink
     className="euiBreadcrumb"
     color="subdued"
+    data-test-subj="breadcrumb first"
     title="First"
     type="button"
   >
     <button
       className="euiLink euiLink--subdued euiBreadcrumb"
+      data-test-subj="breadcrumb first"
       title="First"
       type="button"
     >
@@ -28,6 +31,7 @@ Array [
   </EuiLink>,
   <button
     className="euiLink euiLink--subdued euiBreadcrumb"
+    data-test-subj="breadcrumb first"
     title="First"
     type="button"
   >
@@ -36,6 +40,7 @@ Array [
   <span
     aria-current="page"
     className="euiBreadcrumb euiBreadcrumb--last"
+    data-test-subj="breadcrumb last"
     title="Second"
   >
     Second

src/ui/public/chrome/directives/header_global_nav/components/header_breadcrumbs.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import classNames from 'classnames';
 import React, { Component } from 'react';
 import * as Rx from 'rxjs';
 
@@ -63,13 +64,9 @@ export class HeaderBreadcrumbs extends Component<Props, State> {
   }
 
   public render() {
-    let breadcrumbs = this.state.breadcrumbs;
-
-    if (breadcrumbs.length === 0 && this.props.appTitle) {
-      breadcrumbs = [{ text: this.props.appTitle }];
-    }
-
-    return <EuiHeaderBreadcrumbs breadcrumbs={breadcrumbs} />;
+    return (
+      <EuiHeaderBreadcrumbs breadcrumbs={this.getBreadcrumbs()} data-test-subj="breadcrumbs" />
+    );
   }
 
   private subscribe() {
@@ -86,4 +83,22 @@ export class HeaderBreadcrumbs extends Component<Props, State> {
       delete this.subscription;
     }
   }
+
+  private getBreadcrumbs() {
+    let breadcrumbs = this.state.breadcrumbs;
+
+    if (breadcrumbs.length === 0 && this.props.appTitle) {
+      breadcrumbs = [{ text: this.props.appTitle }];
+    }
+
+    return breadcrumbs.map((breadcrumb, i) => ({
+      ...breadcrumb,
+      'data-test-subj': classNames(
+        'breadcrumb',
+        breadcrumb['data-test-subj'],
+        i === 0 && 'first',
+        i === breadcrumbs.length - 1 && 'last'
+      ),
+    }));
+  }
 }