Merge c72bd74 into f83ac88

.vscode/launch.json

@@ -36,18 +36,18 @@
       "name": "frontend unit tests",
       "type": "node",
       "request": "launch",
-      "runtimeArgs": [
-        "--inspect-brk",
-        "./node_modules/@vue/cli-service/bin/vue-cli-service.js",
-        "test:unit",
-        "--runInBand"
-      ],
+      "runtimeArgs": ["--inspect-brk", "./node_modules/jest/bin/jest.js", "-w 1", "--colors"],
       "cwd": "${workspaceFolder}/packages/frontend",
       "protocol": "inspector",
       "disableOptimisticBPs": true,
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
-      "outFiles": ["${workspaceFolder}/packages/frontend/src/**/*.js"],
+      "outFiles": ["${workspaceFolder}/packages/frontend/dist/**/*.js"],
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/packages/frontend/**",
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
       "port": 9229
     }
   ]

packages/frontend/src/App.vue

@@ -86,8 +86,8 @@ export default {
     isInVsCode() {
       return typeof acquireVsCodeApi !== "undefined";
     },
+    /* c8 ignore start */
     async setupRpc() {
-      /* istanbul ignore if */
       if (this.isInVsCode()) {
         // eslint-disable-next-line no-undef
         window.vscode = acquireVsCodeApi();
@@ -118,6 +118,7 @@ export default {
         });
       });
     },
+    /* c8 ignore stop */
     init() {
       this.rpc.invoke("init").then((target) => {
         this.initialTarget = target;

packages/frontend/src/components/CFSignin.vue

@@ -207,9 +207,11 @@ export default {
       return this.isLoggedIn ? "none" : "";
     },
     ssoVisibility() {
+      /* c8 ignore next */
       return this.ssoOrCredentials === "SSO" ? "" : "none";
     },
     credentialsVisibility() {
+      /* c8 ignore next */
       return this.ssoOrCredentials === "Credentials" ? "" : "none";
     },
   },

packages/frontend/src/components/CFTarget.vue

@@ -26,6 +26,7 @@
 import { provideVSCodeDesignSystem, vsCodeButton } from "@vscode/webview-ui-toolkit";
 
 provideVSCodeDesignSystem().register(vsCodeButton());
+
 import * as _ from "lodash";
 export default {
   name: "CFTarget",
@@ -119,7 +120,7 @@ export default {
               selected: org.label === target.org,
             };
           });
-          this.orgs = orgsWithSelected;
+          this.orgs = _.sortBy(orgsWithSelected, (item) => item.label.toLowerCase());
 
           // If no org could be selected from the current target, set it to the first org if exists
           if (!this.selectedOrg || !this.selectedOrg.guid) {
@@ -147,7 +148,7 @@ export default {
             selected: targetSpace ? space.label === targetSpace : false,
           };
         });
-        this.spaces = spacesWithSelected;
+        this.spaces = _.sortBy(spacesWithSelected, (item) => item.label.toLowerCase());
         // If a specific space should be selected - choose it, otherwise take the first if exists and fallback to empty selection object.
         this.selectedSpace =
           _.find(this.spaces, (space) => space.selected === true) ?? (this.spaces && this.spaces[0]) ?? {};

packages/frontend/test/App.spec.js

@@ -54,6 +54,15 @@ jest.mock("../src/components/CFSignin.vue", () => ({
   template: "<div>Mocked CFSignin</div>", // Replace with your desired mock template
 }));
 
+// Stub is used to avoid console warnings of vscode custom elements
+const global = {
+  stubs: {
+    VscodeProgressRing: {
+      template: "<div></div>",
+    },
+  },
+};
+
 describe("App.vue", () => {
   // Mock the rpc object with the required methods
   const mockRpc = {
@@ -67,8 +76,10 @@ describe("App.vue", () => {
       data() {
         return {
           rpc: mockRpc, // Provide the mock rpc object
+          initialTarget: {},
         };
       },
+      global,
     });
 
     // Assert that the component exists without errors
@@ -80,8 +91,10 @@ describe("App.vue", () => {
       data() {
         return {
           rpc: mockRpc, // Provide the mock rpc object
+          initialTarget: {},
         };
       },
+      global,
     });
     expect(wrapper.vm.isLoggedIn).to.be.false; // Initial state
 
@@ -97,10 +110,12 @@ describe("App.vue", () => {
       data() {
         return {
           rpc: mockRpc, // Provide the mock rpc object
+          initialTarget: {},
         };
       },
+      global,
     });
-    const expectedHtml = `<divid="app"><c-f-header-stubclass="app"></c-f-header-stub><vscode-progress-ringclass="progress-ring"style="display:none;"></vscode-progress-ring><divclass="app"><divstyle="visibility:none;"><c-f-signin-stubtarget="functionObject(){[nativecode]}"rpc="[objectObject]"></c-f-signin-stub><divstyle="display:none;"><c-f-target-stubtarget="[Function]"rpc="[objectObject]"isloggedin="false"></c-f-target-stub></div></div></div><!--endprogress--></div>`;
+    const expectedHtml = `<divid="app"><c-f-header-stubclass="app"></c-f-header-stub><divclass="progress-ring"style="display:none;"></div><divclass="app"><divstyle="visibility:none;"><c-f-signin-stubtarget="[objectObject]"rpc="[objectObject]"></c-f-signin-stub><divstyle="display:none;"><c-f-target-stubtarget="[objectObject]"rpc="[objectObject]"isloggedin="false"></c-f-target-stub></div></div></div><!--endprogress--></div>`;
     expect(wrapper.html().replace(/\s/g, "")).to.equal(expectedHtml);
   });
 
@@ -109,8 +124,10 @@ describe("App.vue", () => {
       data() {
         return {
           rpc: mockRpc, // Provide the mock rpc object
+          initialTarget: {},
         };
       },
+      global,
     });
 
     // Check that the computed property returns true
@@ -123,8 +140,10 @@ describe("App.vue", () => {
         return {
           rpc: mockRpc, // Provide the mock rpc object
           showBusyIndicator: false, // Initialize with a specific value
+          initialTarget: {},
         };
       },
+      global,
     });
 
     // Call the setBusyIndicator method with a value of true
@@ -140,8 +159,10 @@ describe("App.vue", () => {
         return {
           rpc: mockRpc, // Provide the mock rpc object
           showBusyIndicator: true, // Initialize with a specific value
+          initialTarget: {},
         };
       },
+      global,
     });
 
     // Call the setBusyIndicator method with a value of false

packages/frontend/test/components/CFHeader.spec.js

@@ -11,6 +11,14 @@ jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({
   },
 }));
 
+const global = {
+  stubs: {
+    VscodeDivider: {
+      template: "<div></div>",
+    },
+  },
+};
+
 jest.mock("@vscode/webview-ui-toolkit", () => ({
   provideVSCodeDesignSystem: jest.fn(() => ({
     register: jest.fn(),
@@ -24,19 +32,21 @@ jest.mock("@vscode/webview-ui-toolkit", () => ({
 
 describe("CFHeader.vue", () => {
   it("renders without errors", () => {
-    const wrapper = mount(CFHeader);
+    const wrapper = mount(CFHeader, {
+      global,
+    });
     expect(wrapper.exists()).to.be.true;
   });
 
   it("renders the component with correct content", () => {
-    const wrapper = mount(CFHeader);
+    const wrapper = mount(CFHeader, { global });
     expect(wrapper.text()).contain("Cloud Foundry Sign In and Targets");
     expect(wrapper.text()).contain("Provide your Cloud Foundry parameters to sign in to the Cloud Foundry enviroment");
     expect(wrapper.find('[role="separator"]').exists()).to.be.true;
   });
 
   it("applies the correct subtitle-field style", () => {
-    const wrapper = mount(CFHeader);
+    const wrapper = mount(CFHeader, { global });
 
     // Access the element with class "subtitle-field"
     const subtitleField = wrapper.find(".subtitle-field").element;
@@ -49,8 +59,8 @@ describe("CFHeader.vue", () => {
   });
 
   it("renders the correct HTML structure", () => {
-    const wrapper = mount(CFHeader);
-    const expectedHtml = `<div><h1wrapping-type="Normal">CloudFoundrySignInandTargets</h1><spanclass="subtitle-field">ProvideyourCloudFoundryparameterstosignintotheCloudFoundryenviroment</span><br><br><vscode-dividerrole="separator"></vscode-divider><br></div>`;
+    const wrapper = mount(CFHeader, { global });
+    const expectedHtml = `<div><h1wrapping-type="Normal">CloudFoundrySignInandTargets</h1><spanclass="subtitle-field">ProvideyourCloudFoundryparameterstosignintotheCloudFoundryenviroment</span><br><br><divrole="separator"></div><br></div>`;
     expect(wrapper.html().replace(/\s/g, "")).to.equal(expectedHtml);
   });
 });