fix(pageHeader): ent-3533 check consistent html for Pendo (#580)

RedHatInsights · Apr 13, 2021 · f141eb3 · f141eb3
1 parent 3d70cb7
commit f141eb3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/config/cspell.config.json b/config/cspell.config.json
@@ -32,6 +32,7 @@
     "openshift",
     "optin",
     "patternfly",
+    "pendo",
     "perpage",
     "qe's",
     "random'ish",

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap
@@ -190,6 +190,50 @@ exports[`PageHeader Component should render the subtitle when viewId is provided
 </PageHeader>
 `;
 
+exports[`PageHeader Component should render the tour button when includeTour is provided: consistent html output for Pendo CSS selector 1`] = `
+<section
+  class="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
+  widget-type="InsightsPageHeader"
+>
+  <div
+    class="pf-l-flex pf-m-justify-content-space-between-on-sm"
+  >
+    <div
+      class=""
+    >
+      <h1
+        class="pf-c-title pf-m-2xl pf-u-mb-sm"
+        widget-type="InsightsPageHeaderTitle"
+      >
+         lorem 
+      </h1>
+    </div>
+    <div
+      class=""
+    >
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-link pf-m-inline uxui-curiosity__button-tour"
+        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <span
+          class="pf-c-label pf-m-blue"
+        >
+          <span
+            class="pf-c-label__content"
+          >
+            t(curiosity-optin.buttonTour)
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</section>
+`;
+
 exports[`PageHeader Component should render the tour button when includeTour is provided: with tour button 1`] = `
 <PageHeader
   includeTour={true}

diff --git a/src/components/pageLayout/__tests__/pageHeader.test.js b/src/components/pageLayout/__tests__/pageHeader.test.js
@@ -26,5 +26,6 @@ describe('PageHeader Component', () => {
   it('should render the tour button when includeTour is provided', () => {
     const component = mount(<PageHeader includeTour>lorem</PageHeader>);
     expect(component).toMatchSnapshot('with tour button');
+    expect(component.render()).toMatchSnapshot('consistent html output for Pendo CSS selector');
   });
 });