test: preload all icons for chromatic screenshot tests

package.json

@@ -46,7 +46,6 @@
     "@octokit/webhooks-types": "7.6.1",
     "@prettier/sync": "0.5.2",
     "@rollup/plugin-node-resolve": "16.0.0",
-    "@rollup/plugin-replace": "6.0.2",
     "@rollup/plugin-typescript": "12.1.2",
     "@storybook/addon-a11y": "8.4.7",
     "@storybook/addon-controls": "8.4.7",

packages/calcite-components/package.json

@@ -49,7 +49,7 @@
     "lint:scss": "stylelint --fix \"src/**/*.scss\" && prettier --write \"**/*.scss\" >/dev/null",
     "lint:ts": "eslint --fix . && prettier --write \"**/*.{ts,tsx,cjs,mjs}\" >/dev/null",
     "prepublish": "./support/cleanupDistFiles.sh",
-    "screenshot-tests": "npm run build-storybook",
+    "screenshot-tests": "npm run build-storybook --mode=dev",
     "screenshot-tests:preview": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true storybook dev",
     "screenshot-tests:publish": "npm run screenshot-tests && storybook-to-ghpages --existing-output-dir=docs",
     "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",

packages/calcite-components/src/components/icon/icon.tsx

@@ -77,7 +77,7 @@ export class Icon extends LitElement {
   // #region Lifecycle
 
   override connectedCallback(): void {
-    if (this.preload) {
+    if (this.preload || (import.meta.env.MODE === "development" && __STORYBOOK_SCREENSHOT_TEST_BUILD__)) {
       this.visible = true;
       this.loadIconPathData();
       return;

packages/calcite-components/src/utils/config.spec.ts

@@ -30,21 +30,21 @@ describe("config", () => {
   });
 
   describe("stampVersion", () => {
-    const calciteVersionPreBuildPlaceholder = "__CALCITE_VERSION__";
+    const buildVersion = __CALCITE_VERSION__;
 
     beforeEach(() => delete globalThis.calciteConfig);
 
     it("creates global config and stamps the version onto it", async () => {
       config = await loadConfig();
       config.stampVersion();
-      expect(globalThis.calciteConfig.version).toBe(calciteVersionPreBuildPlaceholder);
+      expect(globalThis.calciteConfig.version).toBe(buildVersion);
     });
 
     it("stamps the version onto existing config if there's no version present", async () => {
       globalThis.calciteConfig = {};
       config = await loadConfig();
       config.stampVersion();
-      expect(globalThis.calciteConfig.version).toBe(calciteVersionPreBuildPlaceholder);
+      expect(globalThis.calciteConfig.version).toBe(buildVersion);
     });
 
     it("bails if version is already stamped onto existing config", async () => {

packages/calcite-components/src/utils/config.ts

@@ -32,9 +32,9 @@ const runningInE2ETest = import.meta.env.MODE === "test" && !isServer;
 export const logLevel: LogLevel = existingConfig?.logLevel || (runningInE2ETest ? "error" : "info");
 
 // the following placeholders are replaced by the build
-const version = "__CALCITE_VERSION__";
-const buildDate = "__CALCITE_BUILD_DATE__";
-const revision = "__CALCITE_REVISION__";
+const version = __CALCITE_VERSION__;
+const buildDate = __CALCITE_BUILD_DATE__;
+const revision = __CALCITE_REVISION__;
 
 /** Stamp the version onto the global config. */
 export function stampVersion(): void {

packages/calcite-components/vite-env.d.ts

@@ -0,0 +1,4 @@
+declare const __CALCITE_BUILD_DATE__: string;
+declare const __CALCITE_REVISION__: string;
+declare const __CALCITE_VERSION__: string;
+declare const __STORYBOOK_SCREENSHOT_TEST_BUILD__: boolean;

packages/calcite-components/vite.config.ts

@@ -6,7 +6,6 @@ import stylelint from "stylelint";
 // TODO: [MIGRATION] evaluate the usages of the key={} props - most of the time key is not necessary in Lit. See https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-jsx--docs#key-prop
 import { defineConfig } from "vite";
 import { useLumina } from "@arcgis/lumina-compiler";
-import replace from "@rollup/plugin-replace";
 import { version } from "./package.json";
 import tailwindConfig from "./tailwind.config";
 
@@ -53,16 +52,6 @@ export default defineConfig({
         },
       },
     }),
-    process.env.NODE_ENV !== "test" &&
-      replace({
-        values: {
-          __CALCITE_BUILD_DATE__: () => new Date().toISOString().split("T")[0],
-          __CALCITE_REVISION__: execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim(),
-          __CALCITE_VERSION__: version,
-        },
-        include: ["src/utils/config.ts"],
-        preventAssignment: true,
-      }),
   ],
 
   css: {
@@ -95,6 +84,14 @@ export default defineConfig({
       ],
     },
   },
+
+  define: {
+    __CALCITE_BUILD_DATE__: JSON.stringify(new Date().toISOString().split("T")[0]),
+    __CALCITE_REVISION__: JSON.stringify(execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim()),
+    __CALCITE_VERSION__: JSON.stringify(version),
+    __STORYBOOK_SCREENSHOT_TEST_BUILD__: process.env.STORYBOOK_SCREENSHOT_TEST_BUILD,
+  },
+
   test: {
     setupFiles: ["src/tests/setupTests.ts"],
     include: ["**/*.{e2e,spec}.?(c|m)[jt]s?(x)"],