feat(pie-tag): DSW-1520 updating tests after PR reviews

justeattakeaway · Jan 2, 2024 · 015857b · 015857b
1 parent 47eb57f
commit 015857b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/.changeset/serious-maps-grow.md b/.changeset/serious-maps-grow.md
diff --git a/packages/components/pie-tag/src/tag.scss b/packages/components/pie-tag/src/tag.scss
@@ -12,7 +12,6 @@
     // These are defined here instead of :host to encapsulate them inside Shadow DOM
     --tag-font-family: var(--dt-font-body-s-family);
     --tag-font-weight: var(--dt-font-body-s-weight);
-    --tag-icon-size: 16px;
 
     // The following values set to default background and color
     // currently this sets the neutral large tag styles
@@ -26,6 +25,10 @@
     --tag-height-large: 24px;
     --tag-height-small: 16px;
 
+    // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
+    --icon-display-override: block;
+    --icon-size-override: 16px;
+
     display: inline-flex;
     vertical-align: middle;
     align-items: center;
@@ -144,6 +147,6 @@
 // Used to size an SVG if one is passed in (when not using the component icons)
 ::slotted(svg) {
     display: block;
-    height: var(--tag-icon-size);
-    width: var(--tag-icon-size);
+    height: var(--icon-size-override);
+    width: var(--icon-size-override);
 }
diff --git a/packages/components/pie-tag/test/component/pie-tag.spec.ts b/packages/components/pie-tag/test/component/pie-tag.spec.ts
@@ -44,7 +44,7 @@ test.describe('PieTag - Component tests', () => {
         const tag = page.locator(componentSelector);
 
         // Assert
-        expect(tag).toBeVisible();
+        await expect(tag).toBeVisible();
     });
 
     test.describe('icon slot', () => {
@@ -64,30 +64,48 @@ test.describe('PieTag - Component tests', () => {
                     const tagIcon = page.locator(tagIconSelector);
 
                     // Assert
-                    expect(tagIcon).toBeVisible();
+                    await expect(tagIcon).toBeVisible();
+                });
+            });
+
+            test.describe('if the size is small', () => {
+                test('should NOT render the icon', async ({ mount, page }) => {
+                    // Arrange
+                    await mount(PieTag, {
+                        props: {
+                            ...props,
+                            size: 'small',
+                        },
+                        slots: {
+                            default: 'Label',
+                            icon,
+                        },
+                    });
+
+                    // Act
+                    const tagIcon = page.locator(tagIconSelector);
+
+                    // Assert
+                    await expect(tagIcon).toBeHidden();
                 });
             });
         });
 
-        test.describe('if the size is small', () => {
+        test.describe('when NOT passed', () => {
             test('should NOT render the icon', async ({ mount, page }) => {
                 // Arrange
                 await mount(PieTag, {
-                    props: {
-                        ...props,
-                        size: 'small',
-                    },
+                    props,
                     slots: {
                         default: 'Label',
-                        icon,
                     },
                 });
 
                 // Act
                 const tagIcon = page.locator(tagIconSelector);
 
                 // Assert
-                await expect(tagIcon).not.toBeVisible();
+                await expect(tagIcon).toBeHidden();
             });
         });
     });
@@ -107,7 +125,7 @@ test.describe('PieTag - Component tests', () => {
 
             const [currentBgStyle, expectedBgStyle] = await getShadowElementStylePropValues(component, componentSelector, ['--tag-bg-color', bgStyle]);
 
-            await expect(currentBgStyle).toBe(expectedBgStyle);
+            expect(currentBgStyle).toBe(expectedBgStyle);
         });
     });
 });
diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js
@@ -43,12 +43,6 @@ export class ${name} extends LitElement implements IconProps {
             width: var(--icon-size-override);
             height: var(--icon-size-override);
         }
-
-        :host-context(pie-tag) svg {
-            display: block;
-            width: var(--tag-icon-size);
-            height: var(--tag-icon-size);
-        }
     \`;
 
     @property({ type: String, reflect: true })