Merge pull request #9048 from rundeck/feat/unit-test-for-rundeckInfo

Run-2255 add unit tests for RundeckInfo component

rundeckapp/grails-spa/packages/ui-trellis/src/library/components/version/ServerDisplay.vue

@@ -1,10 +1,14 @@
 <template>
-  <span :title="title">
-    <span :style="{ color }">
+  <span :title="title" data-test-id="server-title">
+    <span :style="{ color }" data-test-id="server-color">
       <i class="glyphicon" :class="[`glyphicon-${glyphicon}`]" />
-      <span v-if="showId">{{ uuidShort }}</span>
+      <span v-if="showId" data-test-id="server-uuid-short">{{
+        uuidShort
+      }}</span>
     </span>
-    <span style="margin-left: 0.5em" :class="css">{{ name }}</span>
+    <span style="margin-left: 0.5em" :class="css" data-test-id="server-name">{{
+      name
+    }}</span>
     <ui-socket
       section="server-info-display"
       location="badges"

rundeckapp/grails-spa/packages/ui-trellis/src/library/components/widgets/rundeck-info/RundeckInfo.spec.ts

@@ -0,0 +1,111 @@
+import { mount } from "@vue/test-utils";
+import RundeckInfo from "./RundeckInfo.vue";
+jest.mock("../../../rundeckService", () => ({
+  getRundeckContext: jest.fn().mockReturnValue({ rdBase: "mocked-rdBase" }),
+  url: jest.fn().mockReturnValue("http://localhost"),
+}));
+const mountRundeckInfo = async (props = {}) => {
+  return mount(RundeckInfo, {
+    props: {
+      appInfo: { title: "Rundeck", logocss: "some-css" },
+      version: {
+        number: "1.0.0",
+        tag: "stable",
+        name: "Erebus",
+        color: "red",
+        icon: "glass",
+        edition: "Community",
+      },
+      server: {
+        name: "localHost",
+        icon: "paperclip",
+        uuid: "uuid1",
+      },
+      latest: {
+        title: "Rundeck",
+        full: "v5.2.0-20240410",
+        number: "5.2.0",
+        tag: "GA",
+        color: "aquamarine",
+        date: new Date(),
+        icon: "knight",
+        edition: "Community",
+      },
+      ...props,
+    },
+  });
+};
+
+describe("RundeckInfo", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it("renders RundeckLogo when appInfo.title is 'Rundeck'", async () => {
+    const wrapper = await mountRundeckInfo();
+    expect(wrapper.findComponent({ name: "RundeckLogo" }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: "PagerdutyLogo" }).exists()).toBe(
+      false,
+    );
+  });
+  it("renders PagerdutyLogo when appInfo.title is 'Pagerduty'", async () => {
+    const wrapper = await mountRundeckInfo({ appInfo: { title: "Pagerduty" } });
+    expect(wrapper.findComponent({ name: "PagerdutyLogo" }).exists()).toBe(
+      true,
+    );
+    expect(wrapper.findComponent({ name: "RundeckLogo" }).exists()).toBe(false);
+  });
+
+  it("renders the server's shortened uuid along with a title attribute", async () => {
+    const wrapper = await mountRundeckInfo();
+    await wrapper.vm.$nextTick();
+    const serverComponent = wrapper.findComponent({ name: "ServerDisplay" });
+    expect(serverComponent.exists()).toBe(true);
+    const uuidShortElement = serverComponent.find(
+      '[data-test-id="server-uuid-short"]',
+    );
+    expect(uuidShortElement.exists()).toBe(true);
+    expect(uuidShortElement.text()).toBe("uu");
+    const serverTitleElement = serverComponent.find(
+      '[data-test-id="server-title"]',
+    );
+    expect(serverTitleElement.attributes("title")).toBe("paperclip-uu / uuid1");
+  });
+
+  it("renders Rundeck's version display name", async () => {
+    const wrapper = await mountRundeckInfo();
+    const versionDisplayComponent = wrapper.findComponent({
+      name: "VersionDisplay",
+    });
+    expect(versionDisplayComponent.props("text")).toBe("Erebus red glass");
+  });
+
+  it("renders the link with the correct href", async () => {
+    const wrapper = await mountRundeckInfo();
+    const anchorElement = wrapper.find('[data-test-id="welcome-link"]');
+
+    expect(anchorElement.attributes("href")).toBe("http://localhost");
+  });
+
+  it("renders the correct Rundeck version based on number and title props", async () => {
+    const wrapper = await mountRundeckInfo();
+
+    const rundeckVersionComponent = wrapper.findComponent({
+      name: "RundeckVersion",
+    });
+    expect(rundeckVersionComponent.exists()).toBe(true);
+
+    expect(rundeckVersionComponent.find("span").text()).toBe("Rundeck 1.0.0");
+    expect(rundeckVersionComponent.props().title).toBe("Rundeck");
+  });
+  it("renders the latest release information correctly", async () => {
+    const wrapper = await mountRundeckInfo();
+    const rundeckVersionComponents = wrapper.findAllComponents({
+      name: "RundeckVersion",
+    });
+    const latestReleaseComponent = rundeckVersionComponents[1];
+    expect(latestReleaseComponent.exists()).toBe(true);
+    expect(latestReleaseComponent.find("span").text()).toBe("v5.2.0-20240410");
+    expect(latestReleaseComponent.props().number).toBe("v5.2.0-20240410");
+    expect(latestReleaseComponent.props().tag).toBe("GA");
+  });
+});

rundeckapp/grails-spa/packages/ui-trellis/src/library/components/widgets/rundeck-info/RundeckInfo.vue

@@ -2,7 +2,7 @@
   <div class="rundeck-info-widget">
     <div class="rundeck-info-widget__group">
       <div class="rundeck-info-widget__more-link">
-        <a :href="welcomeUrl()">
+        <a :href="welcomeUrl()" data-test-id="welcome-link">
           <RundeckLogo v-if="appInfo.title === 'Rundeck'" />
           <PagerdutyLogo v-else />
         </a>