remove icon probably causing issues on production, fix tests for tooltip

bcc-code · Mar 13, 2024 · 135c4fc · 135c4fc
1 parent 763bb63
commit 135c4fc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 24 deletions.
diff --git a/design-library/src/components/BccTooltip/BccTooltip.spec.ts b/design-library/src/components/BccTooltip/BccTooltip.spec.ts
@@ -4,12 +4,8 @@ import BccTooltip from "./BccTooltip.vue";
 
 describe("BccTooltip", () => {
   it("renders properly by default", () => {
-    const wrapper = mount(BccTooltip, {
-      props: {
-        visible: true,
-      },
-    });
-    expect(wrapper.isVisible()).toBe(true);
+    const wrapper = mount(BccTooltip);
+    expect(wrapper.find(".bcc-tooltip-content").classes()).not.toContain("bcc-tooltip-visible");
   });
 
   it("toggles visibility based on the 'visible' prop", async () => {
@@ -19,10 +15,10 @@ describe("BccTooltip", () => {
       },
     });
 
-    expect(wrapper.find(".bcc-tooltip-content.visible").exists()).toBe(false);
+    expect(wrapper.find(".bcc-tooltip-content").classes()).not.toContain("bcc-tooltip-visible");
 
     await wrapper.setProps({ visible: true });
-    expect(wrapper.find(".bcc-tooltip-content.visible").exists()).toBe(true);
+    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bcc-tooltip-visible");
   });
 
   it("applies the correct class based on the 'primaryPosition' and 'secondaryPosition' props", async () => {
@@ -34,9 +30,9 @@ describe("BccTooltip", () => {
       },
     });
 
-    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("top-right");
+    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bcc-tooltip-top-right");
     await wrapper.setProps({ primaryPosition: "bottom", secondaryPosition: "left" });
-    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bottom-left");
+    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bcc-tooltip-bottom-left");
   });
 
   it("applies the correct class based on the 'variant' prop", async () => {
@@ -47,10 +43,10 @@ describe("BccTooltip", () => {
       },
     });
 
-    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("dark");
+    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bcc-tooltip-dark");
     await wrapper.setProps({ variant: "white" });
-    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("white");
+    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bcc-tooltip-white");
     await wrapper.setProps({ variant: "grey" });
-    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("grey");
+    expect(wrapper.find(".bcc-tooltip-content").classes()).toContain("bcc-tooltip-grey");
   });
 });
diff --git a/design-library/src/components/BccTooltip/BccTooltip.stories.ts b/design-library/src/components/BccTooltip/BccTooltip.stories.ts
@@ -1,4 +1,3 @@
-import { CelebrationIcon } from "@bcc-code/icons-vue";
 import BccTooltip from "./BccTooltip.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
@@ -77,7 +76,7 @@ Example.parameters = {
 };
 
 export const AllCombinations: StoryFn<typeof BccTooltip> = () => ({
-  components: { BccTooltip, CelebrationIcon },
+  components: { BccTooltip },
   setup() {},
   template: `
   <div class="flex flex-col p-20">
@@ -136,15 +135,6 @@ export const AllCombinations: StoryFn<typeof BccTooltip> = () => ({
           <div class="bg-slate-100 rounded-xl p-4 cursor-pointer w-[200px]">Longer texts</div>
         </template>
       </BccTooltip>
-      <BccTooltip class="mt-[250px]" secondaryPosition="right" :visible="true">
-      <div class="flex flex-col items-center">
-        <CelebrationIcon class="w-10 h-10 mb-2" /> 
-        <p>You can also use icons because why not?</p>
-      </div>
-      <template #child>
-          <div class="bg-slate-100 rounded-xl p-4 cursor-pointer w-[200px]">Do what you want</div>
-        </template>
-      </BccTooltip>
       </div>
       <div class="mt-[200px] flex items-center">
         <BccTooltip secondaryPosition="right" :visible="true" class="w-[200px]">