Random proxy mode

jest.config.js

@@ -1,11 +1,13 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+
+export default {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     customExportConditions: ['node', 'node-addons'],
   },
   transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': '@swc/jest',
     '^.+\\.vue$': '@vue/vue3-jest',
   },
   moduleNameMapper: {

package.json

@@ -4,6 +4,7 @@
   "version": "0.9.5",
   "description": "Improve your Mullvad VPN experience, in your browser.",
   "private": true,
+  "type": "module",
   "engines": {
     "node": ">=18.14.2",
     "npm": ">=9.5.0"
@@ -43,6 +44,7 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
     "@ffflorian/jszip-cli": "^3.8.2",
+    "@swc/jest": "^0.2.37",
     "@types/firefox-webext-browser": "^120.0.4",
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.14",

scripts/utils.ts

@@ -1,10 +1,15 @@
-import { resolve } from 'path';
 import { bgCyan, black } from 'kolorist';
-
-export const port = parseInt(process.env.PORT || '') || 3303;
-export const r = (...args: string[]) => resolve(__dirname, '..', ...args);
-export const isDev = process.env.NODE_ENV !== 'production';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 export function log(name: string, message: string) {
   console.log(black(bgCyan(` ${name} `)), message);
 }
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export const port = parseInt(process.env.PORT || '') || 3303;
+export const isDev = process.env.NODE_ENV !== 'production';
+
+export const r = (...args: string[]) => resolve(__dirname, '..', ...args);

src/components/Location.test.ts

@@ -10,7 +10,7 @@ jest.mock('@/composables/useActiveTab', () => ({
   })),
 }));
 
-jest.mock('@/composables/useSocksProxies/useSocksProxies', () => ({
+jest.mock('@/composables/useSocksProxies', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     filteredProxies: [

src/components/Location.vue

@@ -6,10 +6,10 @@ import LocationTabs from '@/components/LocationTabs.vue';
 import SearchLocation from '@/components/SearchLocation.vue';
 import IconLabel from '@/components/IconLabel.vue';
 
-import getRandomSocksProxy from '@/helpers/getRandomSocksProxy';
+import getCityCountrySocksProxy from '@/helpers/socksProxy/getCityCountrySocksProxy';
 import { updateCurrentTabProxyBadge } from '@/helpers/proxyBadge';
 
-import useSocksProxies from '@/composables/useSocksProxies/useSocksProxies';
+import useSocksProxies from '@/composables/useSocksProxies';
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
@@ -61,7 +61,7 @@ const clickServer = (
 };
 
 const clickCountryOrCity = (selectedCountry: string, selectedCity?: string) => {
-  const { country, countryCode, city, hostname, ipv4_address, port } = getRandomSocksProxy({
+  const { country, countryCode, city, hostname, ipv4_address, port } = getCityCountrySocksProxy({
     socksProxies: filteredProxies.value,
     country: selectedCountry,
     city: selectedCity,

src/components/OptionsTabs/ProxyTab.vue

@@ -6,6 +6,7 @@ import CustomProxies from '@/components/Proxy/CustomProxies.vue';
 import IconLabel from '@/components/IconLabel.vue';
 import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
 import ProxyAutoReload from '@/components/Proxy/ProxyAutoReload.vue';
+import RandomProxyMode from '@/components/Proxy/RandomProxyMode.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
 
 import useProxyPermissions from '@/composables/useProxyPermissions';
@@ -16,6 +17,7 @@ const { isGranted, requestPermissions } = useProxyPermissions();
   <template v-if="isGranted">
     <CustomProxies />
     <ProxyAutoReload class="mt-4" />
+    <RandomProxyMode class="mt-4" />
     <LocationDrawer />
   </template>