+
+
+
+
+
diff --git a/projects/cloud-foundry-tools/packages/frontend/src/components/CFHeader.vue b/projects/cloud-foundry-tools/packages/frontend/src/components/CFHeader.vue
new file mode 100644
index 000000000..38ef5a6d7
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/src/components/CFHeader.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/cloud-foundry-tools/packages/frontend/src/components/CFSignin.vue b/projects/cloud-foundry-tools/packages/frontend/src/components/CFSignin.vue
new file mode 100644
index 000000000..6fe4bceb0
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/src/components/CFSignin.vue
@@ -0,0 +1,416 @@
+
+
+
+ Cloud Foundry Sign In and Targets
+ + Provide your credentials to sign in to the Cloud Foundry environment and + then select the target org and space. ++
+
+
+
+ +
+
+
+
+
+
diff --git a/projects/cloud-foundry-tools/packages/frontend/src/components/CFTarget.vue b/projects/cloud-foundry-tools/packages/frontend/src/components/CFTarget.vue
new file mode 100644
index 000000000..e0a63cc87
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/src/components/CFTarget.vue
@@ -0,0 +1,288 @@
+
+ Cloud Foundry Sign In
+
+
+
+
+ {{
+ "You are signed in to Cloud Foundry." +
+ (orgAndSpaceSet ? "" : " You can now set the Org and Space.")
+ }}
+
+ + +
+ Cloud Foundry Endpoint
+
+
+ Sign Out
+
+
+
+ +
+ {{ endpoint }}
+
+ +
+
+ Enter Cloud Foundry Endpoint * +
+
+
+
+ Credentials
+
+
+ SSO Passcode
+
+
+
+
+ +
+ +
+ +
+
+ Sign in
+
+
+
+ + Enter Cloud Foundry Endpoint * +
+
+
+ You must provide a valid URL
+ +
+ Select authentication method
+
+
+
+
+
+
+
+ + Enter your SSO Passcode * +
+ +
+
+
+
+
+
+ + + Enter your SSO Passcode * +
+ +
+ +
+ Enter your username *
+
+
+ + Enter your password * +
+
+ +
+ + Enter your password * +
+
+ +
+
+ Authentication failed. Please try again.
+
+ + +
+
+
+
+
+ + Select Cloud Foundry Organization *
+
+ {{ org.label }}
+
+
+ Select Cloud Foundry Space *
+
+ {{ space.label }}
+
+
+
+ Apply
+
+
+
+
+
+
+
+
diff --git a/projects/cloud-foundry-tools/packages/frontend/src/directives/tooltip.js b/projects/cloud-foundry-tools/packages/frontend/src/directives/tooltip.js
new file mode 100644
index 000000000..cd93b144e
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/src/directives/tooltip.js
@@ -0,0 +1,159 @@
+export default {
+ updateTooltip(el, { value, modifiers }) {
+ if (typeof value === "string") {
+ // we can pass either a string
+ el.setAttribute("data-v-tooltip", value);
+
+ // this check if when v-tooltip receives string with .arrow modifier
+ if (modifiers.arrow) {
+ el.style.setProperty("--v-tooltip-arrow-display", "inline");
+ }
+ } else {
+ // or an object
+ if (value.text) {
+ el.setAttribute("data-v-tooltip", value.text);
+ }
+ if (value.displayArrow || modifiers.arrow) {
+ // if there is a prop global: true then mutate the :root css variables
+ // otherwise it adds given variables to the element, which makes it possible to be different than others
+ const targetEl = value.global ? document.documentElement : el;
+ targetEl.style.setProperty("--v-tooltip-arrow-display", "inline");
+ }
+ if (value.theme) {
+ // if there is a prop global: true then mutate the :root css variables
+ // otherwise it adds given variables to the element, which makes it possible to be different than others
+ const targetEl = value.global ? document.documentElement : el;
+ for (const [key, val] of Object.entries(value.theme)) {
+ if (key === "placement") {
+ switch (val) {
+ case "top":
+ targetEl.style.setProperty("--v-tooltip-left", "50%");
+ targetEl.style.setProperty("--v-tooltip-top", "0%");
+ targetEl.style.setProperty(
+ "--v-tooltip-translate",
+ "translate(-50%, -110%)"
+ );
+ if (value.displayArrow || modifiers.arrow) {
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-border-color",
+ "var(--v-tooltip-background-color) transparent transparent transparent"
+ );
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-top",
+ "calc(var(--v-tooltip-top) - var(--v-tooltip-top-offset) + 8px)"
+ );
+ }
+ break;
+ case "bottom":
+ targetEl.style.setProperty("--v-tooltip-left", "50%");
+ targetEl.style.setProperty("--v-tooltip-top", "100%");
+ targetEl.style.setProperty(
+ "--v-tooltip-translate",
+ "translate(-50%, 10%)"
+ );
+ if (value.displayArrow || modifiers.arrow) {
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-border-color",
+ "transparent transparent var(--v-tooltip-background-color) transparent"
+ );
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-top",
+ "calc(var(--v-tooltip-top) - var(--v-tooltip-top-offset) - 7px)"
+ );
+ }
+ break;
+ case "left":
+ targetEl.style.setProperty("--v-tooltip-left", "0%");
+ targetEl.style.setProperty("--v-tooltip-top", "50%");
+ targetEl.style.setProperty(
+ "--v-tooltip-translate",
+ "translate(-110%, -50%)"
+ );
+ if (value.displayArrow || modifiers.arrow) {
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-border-color",
+ "transparent transparent transparent var(--v-tooltip-background-color)"
+ );
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-top",
+ "calc(var(--v-tooltip-top)"
+ );
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-left",
+ "calc( var(--v-tooltip-left) - var(--v-tooltip-left-offset) + 1.5px)"
+ );
+ }
+ break;
+ case "right":
+ targetEl.style.setProperty("--v-tooltip-left", "100%");
+ targetEl.style.setProperty("--v-tooltip-top", "50%");
+ targetEl.style.setProperty(
+ "--v-tooltip-translate",
+ "translate(3%, -50%)"
+ );
+ if (value.displayArrow || modifiers.arrow) {
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-border-color",
+ "transparent var(--v-tooltip-background-color) transparent transparent"
+ );
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-top",
+ "calc(var(--v-tooltip-top)"
+ );
+ targetEl.style.setProperty(
+ "--v-tooltip-arrow-left",
+ "calc( var(--v-tooltip-left) - var(--v-tooltip-left-offset) - 2px)"
+ );
+ }
+ break;
+ default:
+ break;
+ }
+ } else if (key === "offset" && !value.global) {
+ for (const direction of val) {
+ if (direction === "left") {
+ targetEl.style.setProperty(
+ "--v-tooltip-left-offset",
+ `-${targetEl.scrollWidth - targetEl.clientWidth}px`
+ );
+ } else if (direction === "right") {
+ targetEl.style.setProperty(
+ "--v-tooltip-left-offset",
+ `${targetEl.scrollWidth - targetEl.clientWidth}px`
+ );
+ } else if (direction === "top") {
+ targetEl.style.setProperty(
+ "--v-tooltip-top-offset",
+ `-${targetEl.scrollHeight - targetEl.clientHeight}px`
+ );
+ } else if (direction === "bottom") {
+ targetEl.style.setProperty(
+ "--v-tooltip-top-offset",
+ `${targetEl.scrollHeight - targetEl.clientHeight}px`
+ );
+ }
+ }
+ } else {
+ targetEl.style.setProperty(`--v-tooltip-${key}`, val);
+ }
+ }
+ }
+ }
+ },
+ // hooks
+ mounted(el, { value, dir, modifiers }) {
+ // v-tooltips with global prop won't show the tooltip
+ // also object notation without text prop won't show neither
+ if (typeof value === "object" && !value.global && value.text) {
+ el.classList.add("data-v-tooltip");
+ } else if (typeof value === "string") {
+ el.classList.add("data-v-tooltip");
+ }
+
+ // to use functions in Vue's directives which are inside this object, we can't use this, we have to use dir, which is the directive object
+ dir.updateTooltip(el, { value, modifiers });
+ },
+ updated(el, { value, dir, modifiers }) {
+ dir.updateTooltip(el, { value, modifiers });
+ },
+};
diff --git a/projects/cloud-foundry-tools/packages/frontend/src/main.js b/projects/cloud-foundry-tools/packages/frontend/src/main.js
new file mode 100644
index 000000000..597549a43
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/src/main.js
@@ -0,0 +1,11 @@
+import { createApp } from "vue";
+import CFSignIn from "./App.vue";
+import "./styles/tooltip.css";
+import tooltip from "./directives/tooltip.js";
+
+const app = createApp(CFSignIn);
+
+// register all directives
+app.directive("tooltip", tooltip);
+
+app.mount("#app");
diff --git a/projects/cloud-foundry-tools/packages/frontend/src/styles/tooltip.css b/projects/cloud-foundry-tools/packages/frontend/src/styles/tooltip.css
new file mode 100644
index 000000000..aefb93248
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/src/styles/tooltip.css
@@ -0,0 +1,83 @@
+:root {
+ --v-tooltip-left: 50%;
+ --v-tooltip-top: 0%;
+ --v-tooltip-translate: translate(-50%, -110%);
+ --v-tooltip-left-offset: 0px;
+ --v-tooltip-top-offset: 0px;
+ --v-tooltip-width: max-content;
+ --v-tooltip-background-color: var(--vscode-editor-background, white);
+ --v-tooltip-color: var(--vscode-foreground, black);
+ --v-tooltip-border-radius: 0.4rem;
+ --v-tooltip-padding: 0.6em;
+ --v-tooltip-font-size: 0.7rem;
+ --v-tooltip-font-family: var(--vscode-font-family, Roboto, Avenir, Helvetica, Arial, sans-serif);
+ --v-tooltip-border: 0.1rem solid var(--v-tooltip-color);
+ --v-tooltip-box-shadow: none;
+ --v-tooltip-transition-duration: 0.25s;
+ --v-tooltip-transition-delay: 0.3s;
+ --v-tooltip-transition-timing-function: ease;
+ --v-tooltip-arrow-display: none;
+ --v-tooltip-arrow-border-color: var(--v-tooltip-background-color)
+ transparent transparent transparent;
+ --v-tooltip-arrow-top: calc(
+ var(--v-tooltip-top) - var(--v-tooltip-top-offset) + 8px
+ );
+ --v-tooltip-arrow-left: calc(
+ var(--v-tooltip-left) - var(--v-tooltip-left-offset)
+ );
+}
+.data-v-tooltip {
+ position: relative;
+}
+.data-v-tooltip::after {
+ z-index: 2147483647;
+ content: attr(data-v-tooltip);
+ position: absolute;
+ left: calc(var(--v-tooltip-left) - var(--v-tooltip-left-offset));
+ top: calc(var(--v-tooltip-top) - var(--v-tooltip-top-offset));
+ transform: var(--v-tooltip-translate);
+ width: var(--v-tooltip-width);
+ background-color: var(--v-tooltip-background-color);
+ color: var(--v-tooltip-color);
+ border-radius: var(--v-tooltip-border-radius);
+ padding: var(--v-tooltip-padding);
+ font-size: var(--v-tooltip-font-size);
+ font-family: var(--v-tooltip-font-family);
+ border: var(--v-tooltip-border);
+ box-shadow: var(--v-tooltip-box-shadow);
+ transition-property: all;
+ transition-duration: var(--v-tooltip-transition-duration);
+ transition-delay: 0s;
+ transition-timing-function: var(--v-tooltip-transition-timing-function);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+/* arrow */
+.data-v-tooltip::before {
+ z-index: 2147483647;
+ content: "";
+ position: absolute;
+ display: var(--v-tooltip-arrow-display);
+ left: var(--v-tooltip-arrow-left);
+ top: var(--v-tooltip-arrow-top);
+ transform: var(--v-tooltip-translate);
+ border-width: 5px;
+ border-style: solid;
+ border-color: var(--v-tooltip-arrow-border-color);
+ transition-property: all;
+ transition-duration: var(--v-tooltip-transition-duration);
+ transition-delay: 0s;
+ transition-timing-function: var(--v-tooltip-transition-timing-function);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+.data-v-tooltip:hover::after,
+.data-v-tooltip:hover::before {
+ transition-duration: var(--v-tooltip-transition-duration);
+ transition-delay: var(--v-tooltip-transition-delay);
+ transition-timing-function: var(--v-tooltip-transition-timing-function);
+ opacity: 1;
+ visibility: visible;
+}
\ No newline at end of file
diff --git a/projects/cloud-foundry-tools/packages/frontend/test/App.spec.js b/projects/cloud-foundry-tools/packages/frontend/test/App.spec.js
new file mode 100644
index 000000000..27bdb8818
--- /dev/null
+++ b/projects/cloud-foundry-tools/packages/frontend/test/App.spec.js
@@ -0,0 +1,184 @@
+import { expect } from "chai";
+import { shallowMount } from "@vue/test-utils";
+import App from "../src/App";
+
+jest.mock("@sap-devx/webview-rpc/out.browser/rpc-browser", () => ({
+ RpcBrowser: jest.fn().mockImplementation(() => ({
+ invoke: jest.fn(),
+ registerMethod: jest.fn(),
+ })),
+}));
+
+// Mock RpcBrowserWebSockets class
+jest.mock("@sap-devx/webview-rpc/out.browser/rpc-browser-ws", () => {
+ class MockRpcBrowserWebSockets {
+ constructor(ws, logger) {
+ this.ws = ws;
+ this.logger = logger;
+ this.eventListeners = {};
+
+ // Simulate the behavior of the real constructor
+ this.ws.addEventListener = (eventName, callback) => {
+ this.eventListeners[eventName] = callback;
+ };
+
+ // Initialize an empty invoke method
+ this.invoke = jest.fn();
+ }
+
+ registerMethod() {}
+ }
+
+ return {
+ RpcBrowserWebSockets: MockRpcBrowserWebSockets,
+ };
+});
+
+jest.mock("../src/components/CFHeader.vue", () => ({
+ name: "CFHeader",
+ template: "+
Cloud Foundry Target
+
+
+ Target is set to: {{ currentOrg }} org and {{ currentSpace }} space.
+
+
+
+ {{
+ orgMissing
+ ? "There is no Org defined for this landscape."
+ : "There is no Space defined for the org you selected."
+ }}
+
+ + + Select Cloud Foundry Organization *
+
+ Select Cloud Foundry Space *
+
+
Mocked CFHeader
", // Replace with your desired mock template
+}));
+
+// Mock the CFSignin.vue module
+jest.mock("../src/components/CFSignin.vue", () => ({
+ name: "CFSignin",
+ template: "Mocked CFSignin
", // Replace with your desired mock template
+}));
+
+// Stub is used to avoid console warnings of vscode custom elements
+const global = {
+ stubs: {
+ VscodeProgressRing: {
+ template: "",
+ },
+ },
+};
+
+describe("App.vue", () => {
+ // Mock the rpc object with the required methods
+ const mockRpc = {
+ invoke: jest.fn(() => Promise.resolve({})),
+ registerMethod: jest.fn(),
+ };
+
+ it("renders without errors", () => {
+ // Mount the component with the mocked rpc object and target prop
+ const wrapper = shallowMount(App, {
+ data() {
+ return {
+ rpc: mockRpc, // Provide the mock rpc object
+ initialTarget: {},
+ };
+ },
+ global,
+ });
+
+ // Assert that the component exists without errors
+ expect(wrapper.exists()).to.be.true;
+ });
+
+ it("updates isLoggedIn when updateIsLoggedIn is called", () => {
+ const wrapper = shallowMount(App, {
+ data() {
+ return {
+ rpc: mockRpc, // Provide the mock rpc object
+ initialTarget: {},
+ };
+ },
+ global,
+ });
+ expect(wrapper.vm.isLoggedIn).to.be.false; // Initial state
+
+ // Call the updateIsLoggedIn method with a value of true
+ wrapper.vm.updateIsLoggedIn(true);
+
+ // Check that isLoggedIn has been updated to true
+ expect(wrapper.vm.isLoggedIn).to.be.true;
+ });
+
+ it("updates orgAndSpaceSet when updateOrgAndSpaceSet is called", () => {
+ const wrapper = shallowMount(App, {
+ data() {
+ return {
+ rpc: mockRpc, // Provide the mock rpc object
+ initialTarget: {},
+ };
+ },
+ global,
+ });
+ expect(wrapper.vm.orgAndSpaceSet).to.be.false; // Initial state
+
+ // Call the updateOrgAndSpaceSet method with a value of true
+ wrapper.vm.updateOrgAndSpaceSet(true);
+
+ // Check that isLoggedIn has been updated to true
+ expect(wrapper.vm.orgAndSpaceSet).to.be.true;
+ });
+
+ it("renders the correct HTML structure", () => {
+ const wrapper = shallowMount(App, {
+ data() {
+ return {
+ rpc: mockRpc, // Provide the mock rpc object
+ initialTarget: {},
+ };
+ },
+ global,
+ });
+ const expectedHtml = ``; + expect(wrapper.html().replace(/\s/g, "")).to.equal(expectedHtml); + }); +}); diff --git a/projects/cloud-foundry-tools/packages/frontend/test/components/CFSignin.spec.js b/projects/cloud-foundry-tools/packages/frontend/test/components/CFSignin.spec.js new file mode 100644 index 000000000..e36aabd19 --- /dev/null +++ b/projects/cloud-foundry-tools/packages/frontend/test/components/CFSignin.spec.js @@ -0,0 +1,428 @@ +import { expect } from "chai"; +import { shallowMount } from "@vue/test-utils"; +import CFSignin from "../../src/components/CFSignin.vue"; + +const mockTooltipDirective = jest.fn(); + +const global = { + directives: { + // Use the mockTooltipDirective for v-tooltip + tooltip: mockTooltipDirective, + }, + stubs: { + VscodeLink: { + template: "", + }, + VscodeRadioGroup: { + template: "", + }, + VscodeRadio: { + template: "", + }, + VscodeTextfield: { + template: "", + }, + VscodeButton: { + template: "", + }, + VscodeIcon: { + template: "", + }, + }, +}; + +describe("CFSignin.vue", () => { + it("renders without errors", () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: {}, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + expect(wrapper.exists()).to.be.true; + }); + + it("initializes with default data values", () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "https://example.com", + isLoggedIn: false, + }, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + + // Check initial data values + expect(wrapper.vm.endpoint).to.equal("https://example.com"); + expect(wrapper.vm.passcode).to.equal(""); + expect(wrapper.vm.username).to.equal(""); + expect(wrapper.vm.password).to.equal(""); + expect(wrapper.vm.isCFEndpointValid).to.be.true; + expect(wrapper.vm.disableButton).to.be.true; + }); + + it("disables the Sign in button when no input is provided", async () => { + //avoid showing warning for custom element in console log. + jest.spyOn(console, "warn").mockImplementation(() => { + return; + }); + + const wrapper = shallowMount(CFSignin, { + // Do not mock button + global: { + directives: { + // Use the mockTooltipDirective for v-tooltip + tooltip: mockTooltipDirective, + }, + stubs: { + VscodeLink: { + template: "", + }, + VscodeRadioGroup: { + template: "", + }, + VscodeRadio: { + template: "", + }, + VscodeTextField: { + template: "", + }, + }, + }, + props: { + target: { + defaultEndpoint: "", + isLoggedIn: false, + }, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + + // Confirm that the Sign in button is initially not visible + expect(wrapper.find("vscode-button").isVisible()).to.be.false; + }); + + it("handles successful sign-in with valid credentials", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "https://example.com", + isLoggedIn: false, + }, + rpc: { + invoke: jest.fn().mockResolvedValue(true), // Mock RPC to return success + }, + orgAndSpaceSet: false, + }, + }); + // Set endPoint to be the default one + wrapper.vm.setEndpoint({ target: { value: "" } }); + + // Set SSO target to be Credentials + wrapper.vm.setSSO({ target: { value: "Credentials" } }); + + // Set valid username and password or passcode + wrapper.setData({ username: "validUsername", password: "validPassword" }); + + const invokeSpy = jest.spyOn(wrapper.props().rpc, "invoke"); + + // Trigger the SigninClicked method + await wrapper.vm.SigninClicked(); + + // Assert that authentication failed message is not displayed and isLoggedIn is set to true + expect(wrapper.vm.authFailed).to.equal(""); + expect(wrapper.vm.isLoggedIn).to.be.true; + // Check that loginClick was called with correct params + expect(invokeSpy.mock.calls[0][0]).to.be.equals("loginClick"); + expect(invokeSpy.mock.calls[0][1][0]).to.deep.equal({ + endpoint: "https://example.com", + user: "validUsername", + password: "validPassword", + }); + }); + + it("handles successful sign-in with valid SSO", async () => { + const endpoint = "https://example.com"; + const passcode = "-_validPasscode"; + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: endpoint, + isLoggedIn: false, + }, + rpc: { + invoke: async (command, args) => { + expect(command).to.equal("loginClick"); + expect(args[0]).to.deep.equal({ + endpoint: endpoint, + ssoPasscode: `"${passcode}"`, + }); + return true; + }, + }, + orgAndSpaceSet: false, + }, + }); + + // Set SSO authentication method + wrapper.vm.setSSO({ target: { value: "SSO" } }); + + wrapper.vm.passcode = passcode; + + // Trigger the SigninClicked method + await wrapper.vm.SigninClicked(); + + // Assert that authentication failed message is not displayed and isLoggedIn is set to true + expect(wrapper.vm.authFailed).to.equal(""); + expect(wrapper.vm.isLoggedIn).to.be.true; + }); + + it("handles unsuccessful sign-in with invalid credentials", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "https://example.com", + isLoggedIn: false, + }, + rpc: { + invoke: jest.fn().mockResolvedValue(false), // Mock RPC to return failure + }, + orgAndSpaceSet: false, + }, + }); + + // Set invalid username and password or passcode + wrapper.setData({ + username: "invalidUsername", + password: "invalidPassword", + }); + + // Trigger the SigninClicked method + await wrapper.vm.SigninClicked(); + + // Assert that authentication failed message is displayed and isLoggedIn remains false + expect(wrapper.vm.authFailed).not.to.equal(""); + expect(wrapper.vm.isLoggedIn).to.be.false; + }); + + it("handles successful sign-out", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "https://example.com", + isLoggedIn: true, + }, + rpc: { + invoke: jest.fn().mockResolvedValue(true), // Mock RPC to return success + }, + orgAndSpaceSet: false, + }, + }); + + // Trigger the SignoutClicked method + await wrapper.vm.SignoutClicked(); + + // Assert that isLoggedIn is set to false after sign-out + expect(wrapper.vm.isLoggedIn).to.be.false; + }); + + it("sets SSO or Credentials authentication method", () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "", + isLoggedIn: false, + }, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + + // Assert that ssoOrCredentials is set to "SSO" by default + expect(wrapper.vm.ssoOrCredentials).to.equal("SSO"); + + // Set Credentials authentication method + wrapper.vm.setSSO({ target: { value: "Credentials" } }); + + // Assert that ssoOrCredentials is set to "Credentials" + expect(wrapper.vm.ssoOrCredentials).to.equal("Credentials"); + }); + + it("should set correct button state when conditions are met", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "", + isLoggedIn: false, + }, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + + // Set enabled credentials data + await wrapper.setData({ + endpoint: "https://example.com", // Set a valid endpoint + isCFEndpointValid: true, + ssoOrCredentials: "Credentials", + username: "user", + password: "password", + }); + + // Trigger the btnStatus method + await wrapper.vm.btnStatus(); + + // Check that the button is enabled + expect(wrapper.vm.disableButton).to.be.false; + + // Set enabled sso data + await wrapper.setData({ + endpoint: "https://example.com", // Set a valid endpoint + isCFEndpointValid: true, + ssoOrCredentials: "SSO", + passcode: "passcode", + }); + + // Trigger the btnStatus method + await wrapper.vm.btnStatus(); + + // Check that the button is enabled + expect(wrapper.vm.disableButton).to.be.false; + + // Set disabled sso data + await wrapper.setData({ + endpoint: "https://example.com", // Set a valid endpoint + isCFEndpointValid: true, + ssoOrCredentials: "SSO", + passcode: "", + }); + + // Trigger the btnStatus method + await wrapper.vm.btnStatus(); + + // Check that the button is enabled + expect(wrapper.vm.disableButton).to.be.true; + }); + + it("should disable the button when conditions are not met", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "", + isLoggedIn: false, + }, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + + // Set some initial values to trigger button disabling + await wrapper.setData({ + endpoint: "", // Set an empty endpoint + isCFEndpointValid: false, + ssoOrCredentials: "Credentials", + username: "", + password: "", + }); + + // Trigger the btnStatus method + await wrapper.vm.btnStatus(); + + // Check that the button is disabled + expect(wrapper.vm.disableButton).to.be.true; + }); + + it("should set CF endpoint and validate it", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "", + isLoggedIn: false, + }, + rpc: {}, + orgAndSpaceSet: false, + }, + }); + + // Set a valid CF endpoint + const validEndpoint = "https://example.com"; + await wrapper.vm.setEndpoint({ target: { value: validEndpoint } }); + + // Check if endpoint is correctly set + expect(wrapper.vm.endpoint).to.be.equals(validEndpoint); + + // Set an invalid CF endpoint + const invalidEndpoint = "invalid-url"; + await wrapper.vm.setEndpoint({ target: { value: invalidEndpoint } }); + + // Check if endpoint is correctly set + expect(wrapper.vm.endpoint).to.be.equals(invalidEndpoint); + }); + + it("handles successful open passcode link", async () => { + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "https://example.com", + isLoggedIn: true, + }, + rpc: { + invoke: jest.fn().mockResolvedValue(true), // Mock RPC to return success + }, + orgAndSpaceSet: false, + }, + }); + + const invokeSpy = jest.spyOn(wrapper.props().rpc, "invoke"); + + // Trigger the method that should call openPasscodeLink + await wrapper.vm.openPasscodeLink(); + + // Check that openPasscodeLink was called + expect(invokeSpy.mock.calls[0][0]).to.be.equals("openPasscodeLink"); + }); + + it("handles successful paste", async () => { + // Mock the clipboard API + navigator.clipboard = { + readText: jest.fn().mockResolvedValue("mocked-passcode"), + }; + + const wrapper = shallowMount(CFSignin, { + global, + props: { + target: { + defaultEndpoint: "https://example.com", + isLoggedIn: true, + }, + rpc: { + invoke: jest.fn().mockResolvedValue(true), // Mock RPC to return success + }, + orgAndSpaceSet: false, + }, + }); + + // Trigger the paste method + wrapper.vm.paste(); + + // Assert the passcode is set correctly + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.passcode).to.be.equals("mocked-passcode"); + }); + }); +}); diff --git a/projects/cloud-foundry-tools/packages/frontend/test/components/CFTarget.spec.js b/projects/cloud-foundry-tools/packages/frontend/test/components/CFTarget.spec.js new file mode 100644 index 000000000..9d7eb7ff0 --- /dev/null +++ b/projects/cloud-foundry-tools/packages/frontend/test/components/CFTarget.spec.js @@ -0,0 +1,742 @@ +import CFTarget from "../../src/components/CFTarget.vue"; +import { expect } from "chai"; +import { shallowMount } from "@vue/test-utils"; + +jest.spyOn(window, "getComputedStyle").mockImplementation(() => ({ + getPropertyValue: (property) => { + if (property === "--vscode-descriptionForeground") { + return "#717171"; // Mock the CSS variable value + } + return ""; + }, +})); + +// Stub is used to avoid console warnings of vscode custom elements +const global = { + stubs: { + VscodeDivider: { + template: "", + }, + VscodeOption: { + template: "", + }, + VscodeButton: { + template: "", + }, + VscodeSingleSelect: { + template: "", + }, + }, +}; + +describe("CFTarget.vue", () => { + it("renders without errors", () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: {}, + isLoggedIn: true, // Provide isLoggedIn value as needed + }, + global, + }); + expect(wrapper.exists()).to.be.true; + }); + + it("invokes setTarget method on Apply button click", async () => { + const rpcMock = { + invoke: jest.fn().mockResolvedValue(), // Mock the applyTarget method + }; + //avoid showing warning for custom element in console log. + jest.spyOn(console, "warn").mockImplementation(() => { + return; + }); + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: rpcMock, + isLoggedIn: true, + }, + global: { + stubs: { + VscodeDivider: { + template: "", + }, + VscodeOption: { + template: "", + }, + VscodeDropdown: { + template: "", + }, + }, + }, + }); + + // Simulate selecting an organization and space + wrapper.setData({ + selectedOrg: { label: "Org Label" }, + selectedSpace: { label: "Space Label" }, + }); + + // Simulate clicking the "Apply" button + await wrapper.find("vscode-button").trigger("click"); + + // Add more assertions for component state updates + expect(wrapper.vm.areOrgAndSpaceSet).to.be.true; // Ensure it's set to true + expect(wrapper.vm.currentOrg).to.equal("Org Label"); // Ensure it's updated with the selected organization + expect(wrapper.vm.currentSpace).to.equal("Space Label"); // Ensure it's updated with the selected space + }); + + it("displays certain elements when logged in", () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: {}, + isLoggedIn: true, // Logged in + }, + global, + }); + + // Assert that certain elements are visible + expect(wrapper.find(".cloud-foundry-target").isVisible()).to.be.true; + expect(wrapper.vm.loggedInVisibility).to.equal(""); + }); + + it("hides certain elements when not logged in", () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: {}, + rpc: {}, + isLoggedIn: false, // Simulate not being logged in + }, + global, + }); + + // Assert that certain elements are hidden + expect(wrapper.vm.orgAndSpaceSetVisibility).to.equal("none"); + expect(wrapper.vm.loggedInVisibility).to.equal("none"); + }); + + it("populates organization dropdown", async () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: { + invoke: jest.fn().mockResolvedValue([]), // Mock the getOrgs and getSpaces methods + }, + isLoggedIn: true, + }, + global, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Assert that the organization dropdown is populated correctly + const orgDropdown = wrapper.find(".cf-drop-down"); // Adjust the selector as needed + expect(orgDropdown.exists()).to.be.true; + }); + + it("populates space dropdown when an organization is selected", async () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: { + invoke: jest.fn().mockResolvedValue([]), // Mock the getOrgs and getSpaces methods + }, + isLoggedIn: true, + }, + global, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Simulate selecting an organization + await wrapper.setData({ + selectedOrg: { guid: "org-guid", label: "Org Label" }, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Assert that the space dropdown is populated correctly + const spaceDropdown = wrapper.find(".cf-drop-down"); // Adjust the selector as needed + expect(spaceDropdown.exists()).to.be.true; + }); + + it("populates organization and space dropdowns", async () => { + const rpcMock = { + invoke: jest.fn().mockResolvedValue([]), // Mock the getOrgs and getSpaces methods + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: rpcMock, + isLoggedIn: true, + }, + global, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Assert that the organization and space dropdowns are populated correctly + const orgDropdown = wrapper.find(".cf-drop-down"); // Adjust the selector as needed + const spaceDropdown = wrapper.findAll(".cf-drop-down"); // Adjust the selector as needed + expect(orgDropdown.exists()).to.be.true; + expect(spaceDropdown.length).to.equal(2); // You may need to adjust this based on your component's structure + }); + + it("sets currentOrg and currentSpace to undefined when target is undefined", async () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: undefined, + rpc: { + invoke: jest.fn().mockResolvedValue([]), // Mock the getOrgs and getSpaces methods + }, + isLoggedIn: true, + }, + global, + }); + await wrapper.vm.$nextTick(); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ currentOrg: "", currentSpace: "" }); + + // // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.currentOrg).to.equal(undefined); + expect(wrapper.vm.currentSpace).to.equal(undefined); + }); + + it("does select Organizaion when Organizaion is returned from selectedTarget", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([ + { guid: "47423742", label: "bbbb" }, + { guid: "32432423", label: "aaaaa" }, + ]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "32432423", org: "aaaaa" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Assert orgs got sorted + const orgsList = wrapper.vm.$data.orgs; + expect(orgsList[0]?.label).equal("aaaaa"); + expect(orgsList[1]?.label).equal("bbbb"); + expect(wrapper.vm.selectedOrg).to.deep.equal({ + label: "aaaaa", + guid: "32432423", + selected: true, + }); + }); + + it("does not select Organizaion when multiple Organizaions returned and unknown Organizaion from selectedTarget", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([ + { guid: "47423742", label: "bbbb" }, + { guid: "32432423", label: "aaaaa" }, + ]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([ + { + label: "space1", + guid: "xxxxxxxx", + orgGUID: "32432423", + }, + { + label: "space2", + guid: "yyyyyyyy", + orgGUID: "47423742", + }, + ]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedOrg).to.deep.equal({}); + expect(wrapper.vm.selectedSpace).to.deep.equal({}); + }); + + it("does select Organizaion and no Space when one Organizaion is returned but multiple Spaces and unknown org from selectedTarget", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([{ guid: "32432423", label: "aaaaa" }]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([ + { + label: "space1", + guid: "xxxxxxxx", + orgGUID: "32432423", + }, + { + label: "space2", + guid: "yyyyyyyy", + orgGUID: "47423742", + }, + ]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedOrg).to.deep.equal({ + label: "aaaaa", + guid: "32432423", + }); + expect(wrapper.vm.selectedSpace).to.deep.equal({}); + }); + + it("does select Organisaion and Space when one Organisation and one Space and unknown org from selectedTarget", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([{ guid: "32432423", label: "aaaaa" }]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([ + { + label: "space1", + guid: "xxxxxxxx", + orgGUID: "32432423", + }, + ]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedOrg).to.deep.equal({ + label: "aaaaa", + guid: "32432423", + }); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.selectedSpace).to.deep.equal({ + guid: "xxxxxxxx", + label: "space1", + selected: false, + }); + }); + + it("does select Organisaion and Space when one Organisation and multiple Space and known org from selectedTarget", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([{ guid: "32432423", label: "aaaaa" }]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ + guid: "32432423", + org: "aaaaa", + space: "space1", + }); + } else if (funcName === "getSpaces") { + return Promise.resolve([ + { + label: "space1", + guid: "xxxxxxxx", + orgGUID: "32432423", + }, + { + label: "space2", + guid: "xxxxxxxx", + orgGUID: "32432423", + }, + ]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedOrg).to.deep.equal({ + label: "aaaaa", + guid: "32432423", + selected: true, + }); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.selectedSpace).to.deep.equal({ + guid: "xxxxxxxx", + label: "space1", + selected: true, + }); + }); + + it("does show error message when no Organisations are returned", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + await wrapper.setData({ + orgMissing: true, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Trigger watch by changing isLoggedIn prop + expect(wrapper.vm.selectedOrg).to.deep.equal({}); + expect(wrapper.vm.selectedSpace).to.deep.equal({}); + expect(wrapper.text()).contain( + "There is no Org defined for this landscape." + ); + }); + + it("does show error message when there is Organisaion but no Spaces are returned", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([{ guid: "32432423", label: "aaaaa" }]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + await wrapper.setData({ + spaceMissing: true, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedOrg).to.deep.equal({ + label: "aaaaa", + guid: "32432423", + }); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.selectedSpace).to.deep.equal({}); + expect(wrapper.text()).contain( + "There is no Space defined for the org you selected." + ); + }); + + it("updates selectedOrg when an organization is selected", async () => { + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", // Set your desired currentOrg value + currentSpace: "ExampleSpace", // Set your desired currentSpace value + }, + rpc: {}, + isLoggedIn: true, + }, + global, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Simulate selecting an organization + await wrapper.setData({ + selectedOrg: { guid: "org-guid", label: "Org Label" }, + }); + + // Assert that selectedOrg is updated correctly + expect(wrapper.vm.selectedOrg).to.deep.equal({ + guid: "org-guid", + label: "Org Label", + }); + }); + + it("selects a space when an organization is selected", async () => { + // Mock the RPC object with a custom implementation for getSpaces + const rpcMock = { + invoke: jest.fn((method, args) => { + if (method === "getSpaces" && args[0] === "org-guid") { + return Promise.resolve([ + { guid: "space-guid-1", label: "Space 1" }, + { guid: "space-guid-2", label: "Space 2" }, + ]); + } + return Promise.resolve([]); + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "ExampleOrg", + }, + rpc: rpcMock, + isLoggedIn: true, + }, + global, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Simulate selecting an organization + await wrapper.setData({ + selectedOrg: { guid: "org-guid", label: "Org Label" }, + }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + // Assert that the space dropdown is populated correctly + const spaceDropdown = wrapper.find(".cf-drop-down"); + expect(spaceDropdown.exists()).to.be.true; + + // Simulate selecting a space + await wrapper.setData({ + selectedSpace: { guid: "space-guid-1", label: "Space 1" }, + }); + + // Assert that selectedSpace is updated correctly + expect(wrapper.vm.selectedSpace).to.deep.equal({ + guid: "space-guid-1", + label: "Space 1", + }); + }); + + it("update selectedOrg and clears selected space when Organization is changed", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([ + { guid: "32432423", label: "aaaaa" }, + { guid: "47423742", label: "bbbb" }, + ]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([ + { + label: "space1", + guid: "xxxxxxxx", + orgGUID: "32432423", + }, + ]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + wrapper.vm.updateSelectedOrg({ target: { value: "bbbb" } }); + + expect(wrapper.vm.selectedOrg).to.deep.equal({ + guid: "47423742", + label: "bbbb", + selected: false, + }); + expect(wrapper.vm.selectedSpace).to.deep.equal({}); + }); + + it("update selectedSpace when new space is passed", async () => { + const rpcMock = { + invoke: jest.fn().mockImplementation((funcName) => { + if (funcName === "getOrgs") { + return Promise.resolve([{ guid: "32432423", label: "aaaaa" }]); + } else if (funcName === "getSelectedTarget") { + return Promise.resolve({ guid: "00000000", org: "cccccc" }); + } else if (funcName === "getSpaces") { + return Promise.resolve([]); + } + }), + }; + + const wrapper = shallowMount(CFTarget, { + props: { + target: { + currentOrg: "aaaaa", + }, + rpc: rpcMock, + isLoggedIn: false, + }, + global, + }); + + await wrapper.setData({ + spaces: [ + { + label: "space1", + guid: "xxxxxxxx", + orgGUID: "32432423", + selected: true, + }, + { + label: "space2", + guid: "yyyyyyyy", + orgGUID: "47423742", + }, + ], + }); + // Trigger watch by changing isLoggedIn prop + await wrapper.setProps({ isLoggedIn: true }); + + // Wait for Vue to update the component + await wrapper.vm.$nextTick(); + + wrapper.vm.updateSelectedSpace({ target: { value: "space2" } }); + + expect(wrapper.vm.selectedSpace).to.deep.equal({ + guid: "yyyyyyyy", + label: "space2", + orgGUID: "47423742", + }); + }); +}); diff --git a/projects/cloud-foundry-tools/packages/frontend/vite.config.js b/projects/cloud-foundry-tools/packages/frontend/vite.config.js new file mode 100644 index 000000000..c1ca7e97a --- /dev/null +++ b/projects/cloud-foundry-tools/packages/frontend/vite.config.js @@ -0,0 +1,35 @@ +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; +const path = require("path"); + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + // Instruct the compiler to treat UI5 Web Components and VSCode Elements Web Components as custom elements. + isCustomElement: (tag) => + tag.startsWith("ui5-") || tag.startsWith("vscode-"), + }, + }, + }), + { + name: "html-transform", + transformIndexHtml(html) { + // Add id="vscode-codicon-stylesheet" to the existing link tag + return html.replace( + //, + (match) => + match.replace("