chore: convert @packages/icons to a compiled package and convert tests to vitest (#32649)

* chore: convert tests to vitest

* chore: make icons builds from source and remove ts-node entry point to make ESM compatible

* make sure the icons tests actually run in CI

* correctly configure ES Module for packages/icons

* chore: update ESM migration

Author: AtofStryker

guides/esm-migration.md

@@ -46,9 +46,8 @@ When migrating some of these projects away from the `ts-node` entry [see `@packa
 - [ ] packages/example
 - [ ] packages/extension
 - [ ] packages/frontend-shared **PARTIAL** - entry point is JS
-- [ ] packages/https-proxy - higher priority
 - [x] packages/electron ✅ **COMPLETED**
-- [ ] packages/https-proxy **PARTIAL** - entry point is JS
+- [ ] packages/https-proxy - higher priority
 - [x] packages/icons ✅ **COMPLETED**
 - [x] packages/launcher ✅ **COMPLETED**
 - [x] packages/launchpad ✅ **COMPLETED**
@@ -98,8 +97,7 @@ When migrating some of these projects away from the `ts-node` entry [see `@packa
 - [ ] packages/extension
 - [ ] packages/https-proxy
 - [x] packages/electron ✅ **COMPLETED**
-- [ ] packages/https-proxy
-- [ ] packages/icons
+- [x] packages/icons ✅ **COMPLETED**
 - [ ] packages/launcher
 - [ ] packages/net-stubbing
 - [x] packages/network ✅ **COMPLETED**

package.json

@@ -58,7 +58,7 @@
     "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__,patches --exclude cypress-tests.ts,*only.cy.js",
     "stop-only-all": "yarn stop-only --folder packages",
     "pretest": "yarn ensure-deps",
-    "test": "yarn lerna exec yarn test --scope=cypress --scope=@packages/{config,data-context,driver,electron,errors,extension,https-proxy,launcher,net-stubbing,network,packherd-require,proxy,rewriter,scaffold-config,socket,v8-snapshot-require,telemetry,stderr-filtering,types} --scope=@tooling/{electron-mksnapshot,v8-snapshot}",
+    "test": "yarn lerna exec yarn test --scope=cypress --scope=@packages/{config,data-context,driver,electron,errors,extension,https-proxy,icons,launcher,net-stubbing,network,packherd-require,proxy,rewriter,scaffold-config,socket,v8-snapshot-require,telemetry,stderr-filtering,types} --scope=@tooling/{electron-mksnapshot,v8-snapshot}",
     "test-debug": "lerna exec yarn test-debug --ignore=@packages/{driver,root,static,web-config}",
     "test-integration": "lerna exec yarn test-integration --ignore=@packages/{driver,root,static,web-config}",
     "test-mocha": "mocha --reporter spec scripts/spec.js",

packages/icons/.eslintignore

@@ -1,5 +1,8 @@
 **/dist
+index.js
+index.mjs
 **/*.d.ts
+**/*.d.mts
 **/package-lock.json
 **/tsconfig.json
 **/cypress/fixtures

packages/icons/.gitignore

@@ -0,0 +1,5 @@
+**/dist
+index.js
+index.mjs
+index.d.ts
+index.d.mts

packages/icons/index.d.ts

@@ -0,0 +1,19 @@
+import path from 'path'
+
+const dist = [import.meta.dirname, 'dist']
+
+function distPath (...args: string[]) {
+  return path.join.apply(path, dist.concat([...args]))
+}
+
+export const getPathToFavicon = (filename: string) => {
+  return distPath('favicon', filename)
+}
+
+export const getPathToIcon = (filename: string) => {
+  return distPath('icons', filename)
+}
+
+export const getPathToLogo = (filename: string) => {
+  return distPath('logo', filename)
+}

packages/icons/index.js

@@ -1,6 +1,6 @@
 import path from 'path'
 
-const dist = [__dirname, '..', 'dist']
+const dist = [__dirname, 'dist']
 
 function distPath (...args: string[]) {
   return path.join.apply(path, dist.concat([...args]))

packages/icons/index.mts

@@ -5,26 +5,32 @@
   "private": true,
   "main": "index.js",
   "scripts": {
-    "build": "ts-node ./scripts/build.ts && ts-node ./scripts/ico.ts",
-    "check-ts": "tsc --noEmit && yarn -s tslint",
+    "build": "yarn build-assets && yarn build:cjs && yarn build:esm",
+    "build-assets": "tsx ./scripts/build.ts && tsx ./scripts/ico.ts",
+    "build-prod": "yarn build",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "check-ts": "tsc -p tsconfig.cjs.json --noEmit && yarn -s tslint -p tsconfig.cjs.json",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
     "test": "yarn test-unit",
-    "test-unit": "NODE_ENV=test mocha -r @packages/ts/register test/*.ts",
+    "test-unit": "vitest run",
     "tslint": "tslint --config ../ts/tslint.json --project ."
   },
   "devDependencies": {
     "@types/mocha": "^8.0.3",
     "@types/to-ico": "^1.1.1",
-    "chai": "^4.2.0",
     "fs-extra": "9.1.0",
-    "mocha": "^8.1.3",
-    "to-ico": "^1.1.5"
+    "to-ico": "^1.1.5",
+    "tsx": "^4.20.5",
+    "vitest": "^3.2.4"
   },
   "files": [
     "dist",
     "index.js",
     "index.d.ts"
   ],
+  "types": "index.d.ts",
   "license": "MIT",
+  "module": "index.mjs",
   "nx": {}
 }

packages/icons/src/icons.ts renamed to packages/icons/index.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import * as iconsESM from '../index.mjs'
+import * as iconsCjs from '../index.js'
+
+const cwd = process.cwd()
+
+describe('Cypress Icons', function () {
+  it('returns path to favicon', function () {
+    expect(iconsESM.getPathToFavicon('favicon-red.ico')).toEqual(`${cwd }/dist/favicon/favicon-red.ico`)
+    expect(iconsCjs.getPathToFavicon('favicon-red.ico')).toEqual(`${cwd }/dist/favicon/favicon-red.ico`)
+  })
+
+  it('returns path to icon', function () {
+    expect(iconsESM.getPathToIcon('cypress.icns')).toEqual(`${cwd }/dist/icons/cypress.icns`)
+    expect(iconsCjs.getPathToIcon('cypress.icns')).toEqual(`${cwd }/dist/icons/cypress.icns`)
+  })
+
+  it('returns path to logo', function () {
+    expect(iconsESM.getPathToLogo('cypress-bw.png')).toEqual(`${cwd }/dist/logo/cypress-bw.png`)
+    expect(iconsCjs.getPathToLogo('cypress-bw.png')).toEqual(`${cwd }/dist/logo/cypress-bw.png`)
+  })
+})