feat: add tests for ActionBar component (#216)

Author: suwarnoong

ui/src/components/ActionBar/__tests__/ActionBar.test.ts

@@ -0,0 +1,32 @@
+import { mount } from "@vue/test-utils";
+import ActionBar from "../ActionBar.vue";
+
+describe("ActionBar", () => {
+  it("renders correctly", () => {
+    const wrapper = mount(ActionBar, {
+      propsData: {
+        title: "Page Title",
+        description: "Action bar descrtiption",
+      },
+      slots: {
+        back: 'Back',
+        default: 'Actions'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("renders without description", () => {
+    const wrapper = mount(ActionBar, {
+      propsData: {
+        title: "Page Title",
+      },
+      slots: {
+        back: 'Back',
+        default: 'Actions'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+    expect(wrapper.find(".fd-action-bar__description").exists()).toBe(false);
+  });
+})

ui/src/components/ActionBar/__tests__/__snapshots__/ActionBar.test.ts.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionBar renders correctly 1`] = `
+<div
+  class="fd-action-bar"
+>
+  <div
+    class="fd-action-bar__back"
+  >
+    Back
+  </div>
+   
+  <div
+    class="fd-action-bar__header"
+  >
+    <h1
+      class="fd-action-bar__title"
+    >
+      Page Title
+    </h1>
+     
+    <p
+      class="fd-action-bar__description"
+    >
+      
+      Action bar descrtiption
+    
+    </p>
+  </div>
+   
+  <div
+    class="fd-action-bar__actions"
+  >
+    Actions
+  </div>
+</div>
+`;
+
+exports[`ActionBar renders without description 1`] = `
+<div
+  class="fd-action-bar"
+>
+  <div
+    class="fd-action-bar__back"
+  >
+    Back
+  </div>
+   
+  <div
+    class="fd-action-bar__header"
+  >
+    <h1
+      class="fd-action-bar__title"
+    >
+      Page Title
+    </h1>
+     
+    <!---->
+  </div>
+   
+  <div
+    class="fd-action-bar__actions"
+  >
+    Actions
+  </div>
+</div>
+`;