From 7aa551032eea8965a8cb70b5301130f5775b6f90 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Thu, 7 Apr 2022 21:45:27 -0500
Subject: [PATCH] Reducing the snapshot output of EuiMark unit tests. (#5772)

* Reducing the snapshot output of EuiMark unit tests.
* Refactoring EuiMark test for smaller output.
* Updating two snapshot tests.
* Adding Emotion matchers to config, consolidating test blocks.
---
 scripts/jest/setup/emotion.js                 |  4 +-
 .../mark/__snapshots__/mark.test.tsx.snap     | 50 -------------------
 src/components/mark/mark.test.tsx             | 16 ++++--
 3 files changed, 14 insertions(+), 56 deletions(-)

diff --git a/scripts/jest/setup/emotion.js b/scripts/jest/setup/emotion.js
index 48eeb0ad19f..cec3ec9bafb 100644
--- a/scripts/jest/setup/emotion.js
+++ b/scripts/jest/setup/emotion.js
@@ -1,4 +1,6 @@
-import { createSerializer } from "@emotion/jest";
+import { createSerializer, matchers } from "@emotion/jest";
+
+expect.extend(matchers);
 
 module.exports = createSerializer({
   classNameReplacer: (className) => className,
diff --git a/src/components/mark/__snapshots__/mark.test.tsx.snap b/src/components/mark/__snapshots__/mark.test.tsx.snap
index aa73980e6d5..fb20f8a40aa 100644
--- a/src/components/mark/__snapshots__/mark.test.tsx.snap
+++ b/src/components/mark/__snapshots__/mark.test.tsx.snap
@@ -9,53 +9,3 @@ exports[`EuiMark is rendered 1`] = `
   Marked
 </mark>
 `;
-
-exports[`EuiMark is rendered: renders with emotion styles 1`] = `
-.css-b9vly9-euiMarkStyles-EuiMark {
-  background-color: rgba(0,119,204,0.1);
-  font-weight: 700;
-  color: #343741;
-}
-
-.css-b9vly9-euiMarkStyles-EuiMark:before,
-.css-b9vly9-euiMarkStyles-EuiMark:after {
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.css-b9vly9-euiMarkStyles-EuiMark:before {
-  content: ' [highlight start] ';
-}
-
-.css-b9vly9-euiMarkStyles-EuiMark:after {
-  content: ' [highlight end] ';
-}
-
-<mark
-  class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
->
-  Marked
-</mark>
-`;
-
-exports[`No screen reader helper text is rendered without CSS :before and :after text 1`] = `
-.css-dtzpxu-euiMarkStyles-EuiMark {
-  background-color: rgba(0,119,204,0.1);
-  font-weight: 700;
-  color: #343741;
-}
-
-<mark
-  aria-label="aria-label"
-  class="euiMark testClass1 testClass2 css-dtzpxu-euiMarkStyles-EuiMark"
-  data-test-subj="test subject string"
->
-  Marked
-</mark>
-`;
diff --git a/src/components/mark/mark.test.tsx b/src/components/mark/mark.test.tsx
index ce38793869b..ad51da91eae 100644
--- a/src/components/mark/mark.test.tsx
+++ b/src/components/mark/mark.test.tsx
@@ -21,18 +21,24 @@ describe('EuiMark', () => {
       render(<EuiMark {...requiredProps}>Marked</EuiMark>)
     ).toMatchSnapshot();
   });
-});
 
-describe('No screen reader helper text', () => {
-  renderWithStyles(<EuiMark>Marked</EuiMark>);
+  test('is rendered without CSS :before', () => {
+    expect(
+      render(
+        <EuiMark hasScreenReaderHelpText={false} {...requiredProps}>
+          Marked
+        </EuiMark>
+      )
+    ).not.toHaveStyleRule('content', "' [highlight start] '");
+  });
 
-  test('is rendered without CSS :before and :after text', () => {
+  test('is rendered without CSS :after', () => {
     expect(
       render(
         <EuiMark hasScreenReaderHelpText={false} {...requiredProps}>
           Marked
         </EuiMark>
       )
-    ).toMatchSnapshot();
+    ).not.toHaveStyleRule('content', "' [highlight end] '");
   });
 });