fix: support wildcard ports in url matching (#2677)

Co-authored-by: Artem Zakharchenko <kettanaito@gmail.com>

Author: trknhr

src/core/utils/matching/matchRequestUrl.test.ts

@@ -1,6 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
+// @vitest-environment jsdom
 import { coercePath, matchRequestUrl } from './matchRequestUrl'
 
 describe('matchRequestUrl', () => {
@@ -87,6 +85,77 @@ describe('matchRequestUrl', () => {
     })
   })
 
+  test('returns true when matching URLs with wildcard ports', () => {
+    expect
+      .soft(
+        matchRequestUrl(new URL('http://localhost:3000'), 'http://localhost:*'),
+      )
+      .toEqual({
+        matches: true,
+        params: {
+          '0': '3000/',
+        },
+      })
+
+    expect
+      .soft(
+        matchRequestUrl(
+          new URL('http://localhost:3000'),
+          'http://localhost:*/',
+        ),
+      )
+      .toEqual({
+        matches: true,
+        params: {
+          '0': '3000',
+        },
+      })
+  })
+
+  test('returns true when matching URLs with wildcard ports and pathnames', () => {
+    expect(
+      matchRequestUrl(
+        new URL('http://localhost:3000/resource'),
+        'http://localhost:*/resource',
+      ),
+    ).toEqual({
+      matches: true,
+      params: {
+        '0': '3000',
+      },
+    })
+  })
+
+  test('matches wildcard ports with other wildcard parameters', () => {
+    expect(
+      matchRequestUrl(
+        new URL('http://subdomain.localhost:3000/user/settings'),
+        'http://*.localhost:*/user/*',
+      ),
+    ).toEqual({
+      matches: true,
+      params: {
+        '0': 'subdomain',
+        '1': '3000',
+        '2': 'settings',
+      },
+    })
+  })
+
+  test('matches wildcard ports that also match a part of the pathname', () => {
+    expect(
+      matchRequestUrl(
+        new URL('http://localhost:3000/user/settings'),
+        'http://localhost:*/settings',
+      ),
+    ).toEqual({
+      matches: true,
+      params: {
+        '0': '3000/user',
+      },
+    })
+  })
+
   test('returns true for matching WebSocket URL', () => {
     expect(
       matchRequestUrl(new URL('ws://test.mswjs.io'), 'ws://test.mswjs.io'),
@@ -130,6 +199,17 @@ describe('matchRequestUrl', () => {
       },
     })
   })
+
+  test('returns true for matching WebSocket URLs with wildcard ports', () => {
+    expect(
+      matchRequestUrl(new URL('ws://localhost:3000'), 'ws://localhost:*'),
+    ).toEqual({
+      matches: true,
+      params: {
+        '0': '3000/',
+      },
+    })
+  })
 })
 
 describe('coercePath', () => {
@@ -156,6 +236,10 @@ describe('coercePath', () => {
     expect(coercePath('https://example.com:8080/:5678')).toEqual(
       'https\\://example.com\\:8080/:5678',
     )
+    expect(coercePath('http://localhost:*')).toEqual(
+      'http\\://localhost\\:(.*)',
+    )
+    expect(coercePath('ws://localhost:*')).toEqual('ws\\://localhost\\:(.*)')
   })
 
   test('replaces wildcard with an unnnamed capturing group', () => {

src/core/utils/matching/matchRequestUrl.ts

@@ -40,9 +40,9 @@ export function coercePath(path: string): string {
       )
       /**
        * Escape the port so that "path-to-regexp" can match
-       * absolute URLs including port numbers.
+       * absolute URLs with numeric or wildcard ports.
        */
-      .replace(/([^/])(:)(?=\d+)/, '$1\\$2')
+      .replace(/([^/])(:)(?=(?:\d+|\(\.\*\))(?=\/|$))/, '$1\\$2')
       /**
        * Escape the protocol so that "path-to-regexp" could match
        * absolute URL.