Add snapshot testing

- to verify visual changes

ee/spec/frontend/threat_monitoring/components/policy_drawer/__snapshots__/policy_drawer_layout_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PolicyDrawerLayout component enabled policy matches the snapshots 1`] = `
+<div>
+  <div
+    data-testid="policy-summary"
+  >
+    <span
+      data-testid="summary-text"
+    >
+      Summary
+    </span>
+  </div>
+   
+  <policy-info-row-stub
+    data-testid="policy-type"
+    label="Policy Type"
+  >
+    
+    Scan Execution
+  
+  </policy-info-row-stub>
+   
+  <policy-info-row-stub
+    label="Description"
+  >
+    <div
+      data-testid="custom-description-text"
+    >
+      
+      This policy enforces pipeline configuration to have a job with DAST scan
+    
+    </div>
+  </policy-info-row-stub>
+   
+  <policy-info-row-stub
+    label="Status"
+  >
+    <div
+      class="gl-text-green-500"
+      data-testid="enabled-status-text"
+    >
+      <gl-icon-stub
+        class="gl-mr-3"
+        name="check-circle-filled"
+        size="16"
+      />
+      Enabled
+    
+    </div>
+  </policy-info-row-stub>
+</div>
+`;
+
+exports[`PolicyDrawerLayout component not enabled policy matches the snapshots 1`] = `
+<div>
+  <div
+    data-testid="policy-summary"
+  >
+    <span
+      data-testid="summary-text"
+    >
+      Summary
+    </span>
+  </div>
+   
+  <policy-info-row-stub
+    data-testid="policy-type"
+    label="Policy Type"
+  >
+    
+    Scan Execution
+  
+  </policy-info-row-stub>
+   
+  <policy-info-row-stub
+    label="Description"
+  >
+    <div
+      class="gl-text-gray-500"
+      data-testid="default-description-text"
+    >
+      
+      No description
+    
+    </div>
+  </policy-info-row-stub>
+   
+  <policy-info-row-stub
+    label="Status"
+  >
+    <div
+      class="gl-text-gray-500"
+      data-testid="not-enabled-status-text"
+    >
+      
+      Not enabled
+    
+    </div>
+  </policy-info-row-stub>
+</div>
+`;

ee/spec/frontend/threat_monitoring/components/policy_drawer/policy_drawer_layout_spec.js

@@ -11,15 +11,12 @@ describe('PolicyDrawerLayout component', () => {
   let wrapper;
 
   const DESCRIPTION = 'This policy enforces pipeline configuration to have a job with DAST scan';
-  const SUMMARY = 'Summary';
   const TYPE = 'Scan Execution';
 
   const findCustomDescription = () => wrapper.findByTestId('custom-description-text');
   const findDefaultDescription = () => wrapper.findByTestId('default-description-text');
   const findEnabledText = () => wrapper.findByTestId('enabled-status-text');
   const findNotEnabledText = () => wrapper.findByTestId('not-enabled-status-text');
-  const findSummaryText = () => wrapper.findByTestId('summary-text');
-  const findTypeText = () => wrapper.findByTestId('policy-type');
 
   const componentStatusText = (status) => (status ? 'does' : 'does not');
 
@@ -50,8 +47,6 @@ describe('PolicyDrawerLayout component', () => {
 
     it.each`
       component                | status                                  | finder                    | exists             | text
-      ${'type text'}           | ${'does'}                               | ${findTypeText}           | ${true}            | ${TYPE}
-      ${'summary text'}        | ${'does'}                               | ${findSummaryText}        | ${true}            | ${SUMMARY}
       ${'custom description'}  | ${componentStatusText(hasDescription)}  | ${findCustomDescription}  | ${hasDescription}  | ${DESCRIPTION}
       ${'default description'} | ${componentStatusText(!hasDescription)} | ${findDefaultDescription} | ${!hasDescription} | ${DEFAULT_DESCRIPTION_LABEL}
       ${'enabled text'}        | ${componentStatusText(enabled)}         | ${findEnabledText}        | ${enabled}         | ${ENABLED_LABEL}
@@ -63,5 +58,9 @@ describe('PolicyDrawerLayout component', () => {
         expect(component.text()).toBe(text);
       }
     });
+
+    it('matches the snapshots', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
   });
 });