chore(datagrid): add expanded row visual tests (backport to 15.x) (#1294

)

Backport 6d4ea1a from #1293. 
## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [x] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
No visual regression tests for datagrid expandable rows.

Issue Number: CDE-1692

## What is the new behavior?
Visual regression tests for datagrid expandable rows are added.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
Follow up on #1288

---------

Co-authored-by: Valentin Mladenov <[email protected]>
Co-authored-by: GitHub <[email protected]>

.storybook/stories/datagrid/datagrid-expandable-row.stories.ts

@@ -14,6 +14,12 @@ import { setupStorybook } from '../../helpers/setup-storybook.helpers';
 
 const defaultStory: Story = args => ({
   template: `
+  <style>
+    .open-tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+  </style>
   <clr-datagrid
     ${args.height ? '[style.height.px]="height"' : ''}
     ${args.multiSelectable ? '[clrDgSelected]="[]"' : ''}
@@ -57,9 +63,14 @@ const defaultStory: Story = args => ({
             solid
           ></cds-icon>
           <span class="tooltip-content"
+            [class.open-tooltip]="openTooltip && index === 0"
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in
             neque in ante placerat mattis id sed quam. Proin rhoncus lacus et
             tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit
+            eget, pellentesque sed arcu. Vivamus in dui lectus.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in
+            neque in ante placerat mattis id sed quam. Proin rhoncus lacus et
+            tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit
             eget, pellentesque sed arcu. Vivamus in dui lectus.</span
           >
         </a>
@@ -131,6 +142,7 @@ const defaultParameters: Parameters = {
     toggleExpand: { control: { disable: true } },
     // story helpers
     elements: { control: { disable: true }, table: { disable: true } },
+    openTooltip: { defaultValue: false, control: { type: 'boolean' } },
   },
   args: {
     // outputs
@@ -148,4 +160,21 @@ const defaultParameters: Parameters = {
   },
 };
 
-setupStorybook([ClrDatagridModule, ClrConditionalModule], defaultStory, defaultParameters);
+const variants: Parameters[] = [
+  {
+    clrDgExpanded: false,
+  },
+  {
+    clrDgExpanded: true,
+  },
+  {
+    clrDgExpanded: false,
+    openTooltip: true,
+  },
+  {
+    clrDgExpanded: true,
+    openTooltip: true,
+  },
+];
+
+setupStorybook([ClrDatagridModule, ClrConditionalModule], defaultStory, defaultParameters, variants);