diff --git a/hermes-console/src/components/environment-switch/EnvironmentSwitch.spec.ts b/hermes-console/src/components/environment-switch/EnvironmentSwitch.spec.ts index 7949db6788..9aa3c5a6ac 100644 --- a/hermes-console/src/components/environment-switch/EnvironmentSwitch.spec.ts +++ b/hermes-console/src/components/environment-switch/EnvironmentSwitch.spec.ts @@ -2,9 +2,11 @@ import { expect } from 'vitest'; import { fireEvent } from '@testing-library/vue'; import { render } from '@/utils/test-utils'; import EnvironmentSwitch from '@/components/environment-switch/EnvironmentSwitch.vue'; +import userEvent from '@testing-library/user-event'; const mockReplace = vi.fn(); const mockHref = vi.fn(); +const mockOpen = vi.fn(); Object.defineProperty(window, 'location', { value: { @@ -15,6 +17,8 @@ Object.defineProperty(window, 'location', { }, }); +window.open = mockOpen; + const TEST_URL_ENV_1 = 'http://localhost:3000/ui/groups/pl.example.hermes/topics/pl.example.hermes.TemperatureChanged'; const TEST_URL_ENV_2 = @@ -82,4 +86,62 @@ describe('EnvironmentSwitch', () => { // then expect(mockReplace).toHaveBeenCalledWith(TEST_URL_ENV_2); }); + + it('should open the new tab on holding ctrl and clicking', async () => { + // given + mockHref.mockReturnValue(TEST_URL_ENV_1); + + // and + const { getByText } = render(EnvironmentSwitch, { + props: { + knownEnvironments: [ + { + name: 'env1', + url: 'localhost:3000', + }, + { + name: 'env2', + url: '127.0.0.1:3000', + }, + ], + }, + }); + + // when + const user = userEvent.setup(); + await user.keyboard('[ControlLeft>]'); + await user.click(getByText('env2').closest('button')); + + // then + expect(mockOpen).toHaveBeenCalledWith(TEST_URL_ENV_2, '_blank'); + }); + + it('should open the new tab on holding cmd and clicking', async () => { + // given + mockHref.mockReturnValue(TEST_URL_ENV_1); + + // and + const { getByText } = render(EnvironmentSwitch, { + props: { + knownEnvironments: [ + { + name: 'env1', + url: 'localhost:3000', + }, + { + name: 'env2', + url: '127.0.0.1:3000', + }, + ], + }, + }); + + // when + const user = userEvent.setup(); + await user.keyboard('[MetaLeft>]'); + await user.click(getByText('env2').closest('button')); + + // then + expect(mockOpen).toHaveBeenCalledWith(TEST_URL_ENV_2, '_blank'); + }); }); diff --git a/hermes-console/src/components/environment-switch/EnvironmentSwitch.vue b/hermes-console/src/components/environment-switch/EnvironmentSwitch.vue index 20374d549a..74bb047ba0 100644 --- a/hermes-console/src/components/environment-switch/EnvironmentSwitch.vue +++ b/hermes-console/src/components/environment-switch/EnvironmentSwitch.vue @@ -21,11 +21,15 @@ ); } - function switchToEnv(env: ConsoleEnvironment): string { + function switchToEnv(env: ConsoleEnvironment, event): string { const currentUrl = location.href; const currentEnv: ConsoleEnvironment = getCurrentEnv(); const switchedUrl = currentUrl.replace(currentEnv.url, env.url); - window.location.replace(switchedUrl); + if (event.ctrlKey || event.metaKey) { + window.open(switchedUrl, '_blank'); + } else { + window.location.replace(switchedUrl); + } } @@ -35,7 +39,7 @@ v-for="env in knownEnvironments" min-width="100" v-bind:key="env.name" - v-on:click="switchToEnv(env)" + @click="switchToEnv(env, $event)" > {{ env.name }}