Webpack to Vite

.github/workflows/ci.yml

@@ -400,7 +400,7 @@ jobs:
       - name: Set up Node environment
         uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
-          node-version: '20.17.0'
+          node-version: '22.16.0'
       - name: Install node dependencies
         run: check/npm ci
       - name: Check build matches the current
@@ -415,7 +415,7 @@ jobs:
       - name: Set up Node environment
         uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
-          node-version: '20.17.0'
+          node-version: '22.16.0'
       - name: Install node dependencies
         run: check/npm ci
       - name: Lint Typescript files
@@ -430,7 +430,7 @@ jobs:
       - name: Set up Node environment
         uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
-          node-version: '20.17.0'
+          node-version: '22.16.0'
       - name: Install node dependencies
         run: check/npm ci
       - name: Run unit tests
@@ -447,7 +447,7 @@ jobs:
       - name: Set up Node environment
         uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
-          node-version: '20.17.0'
+          node-version: '22.16.0'
       - name: Install node dependencies
         run: check/npm ci
       - name: Run coverage test

cirq-web/cirq_web/.eslintignore

@@ -1,3 +1,7 @@
 build/
 **/node_modules
 **/dist
+vitest.config.ts
+vitest.setup.ts
+vite.config.ts
+vitest.e2e.config.ts

cirq-web/cirq_web/e2e/bloch_sphere/bloch_sphere_e2e_test.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import puppeteer from 'puppeteer';
-import {expect} from 'chai';
+import {beforeAll, describe, it, expect} from 'vitest';
 import {readFileSync} from 'fs';
 import pixelmatch from 'pixelmatch';
 import * as PNG from 'pngjs';
@@ -53,65 +53,53 @@ function htmlContent(clientCode: string) {
 temp.track();
 
 describe('Bloch sphere', () => {
-  // Create the temporary directory first, then run everything.
-  temp.mkdir('tmp', (err, dirPath) => {
-    const outputPath = path.join(dirPath, 'bloch_sphere');
-    const newVectorOutputPath = path.join(dirPath, 'bloch_sphere_vec');
-
-    before(async () => {
-      // Opens a headless browser with the generated HTML file and takes a screenshot.
-      // The '--app' flag ensures that chromium does capture any
-      // excess browser input
-      const browser = await puppeteer.launch({args: ['--app']});
-      const page = await browser.newPage();
-
-      // Take a screenshot of the first image
-      await page.setContent(htmlContent("renderBlochSphere('container')"));
-      await page.screenshot({path: `${outputPath}.png`});
-      await browser.close();
-    });
+  const dirPath = temp.mkdirSync('tmp');
+  const outputPath = path.join(dirPath, 'bloch_sphere');
+  const newVectorOutputPath = path.join(dirPath, 'bloch_sphere_vec');
+
+  beforeAll(async () => {
+    const browser = await puppeteer.launch({args: ['--app']});
+    const page = await browser.newPage();
 
-    it('with no vector matches the gold PNG', () => {
-      const expected = PNG.PNG.sync.read(
-        readFileSync('e2e/bloch_sphere/bloch_sphere_expected.png'),
-      );
-      const actual = PNG.PNG.sync.read(readFileSync(`${outputPath}.png`));
-      const {width, height} = expected;
-      const diff = new PNG.PNG({width, height});
+    await page.setContent(htmlContent("renderBlochSphere('container')"));
+    await page.screenshot({path: `${outputPath}.png`});
+    await browser.close();
+  });
 
-      const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, {
-        threshold: 0.1,
-      });
+  it('with no vector matches the gold PNG', () => {
+    const expected = PNG.PNG.sync.read(readFileSync('e2e/bloch_sphere/bloch_sphere_expected.png'));
+    const actual = PNG.PNG.sync.read(readFileSync(`${outputPath}.png`));
+    const {width, height} = expected;
+    const diff = new PNG.PNG({width, height});
 
-      expect(pixels).to.equal(0);
+    const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, {
+      threshold: 0.1,
     });
 
-    before(async () => {
-      //Opens a headless browser with the generated HTML file and takes a screenshot.
-      const browser = await puppeteer.launch({args: ['--app']});
-      const page = await browser.newPage();
-
-      // Take a screenshot of the second image, adding the vector
-      await page.setContent(
-        htmlContent("renderBlochSphere('container').addVector(0.5, 0.5, 0.5);"),
-      );
-      await page.screenshot({path: `${newVectorOutputPath}.png`});
-      await browser.close();
-    });
+    expect(pixels).toBe(0);
+  });
+
+  beforeAll(async () => {
+    const browser = await puppeteer.launch({args: ['--app']});
+    const page = await browser.newPage();
 
-    it('with custom statevector matches the gold PNG', () => {
-      const expected = PNG.PNG.sync.read(
-        readFileSync('e2e/bloch_sphere/bloch_sphere_expected_custom.png'),
-      );
-      const actual = PNG.PNG.sync.read(readFileSync(`${newVectorOutputPath}.png`));
-      const {width, height} = expected;
-      const diff = new PNG.PNG({width, height});
+    await page.setContent(htmlContent("renderBlochSphere('container').addVector(0.5, 0.5, 0.5);"));
+    await page.screenshot({path: `${newVectorOutputPath}.png`});
+    await browser.close();
+  });
 
-      const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, {
-        threshold: 0.1,
-      });
+  it('with custom statevector matches the gold PNG', () => {
+    const expected = PNG.PNG.sync.read(
+      readFileSync('e2e/bloch_sphere/bloch_sphere_expected_custom.png'),
+    );
+    const actual = PNG.PNG.sync.read(readFileSync(`${newVectorOutputPath}.png`));
+    const {width, height} = expected;
+    const diff = new PNG.PNG({width, height});
 
-      expect(pixels).to.equal(0);
+    const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, {
+      threshold: 0.1,
     });
+
+    expect(pixels).toBe(0);
   });
 });

cirq-web/cirq_web/e2e/circuit/circuit_e2e_test.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import puppeteer from 'puppeteer';
-import {expect} from 'chai';
+import {beforeAll, describe, it, expect} from 'vitest';
 import {readFileSync} from 'fs';
 import pixelmatch from 'pixelmatch';
 import * as PNG from 'pngjs';
@@ -49,16 +49,15 @@ function htmlContent(clientCode: string) {
 temp.track();
 
 describe('Circuit', () => {
-  temp.mkdir('tmp', (err, dirPath) => {
-    const outputPath = path.join(dirPath, 'circuit');
+  const dirPath = temp.mkdirSync('tmp');
+  const outputPath = path.join(dirPath, 'circuit');
 
-    before(async () => {
-      const browser = await puppeteer.launch({args: ['--app']});
-      const page = await browser.newPage();
+  beforeAll(async () => {
+    const browser = await puppeteer.launch({args: ['--app']});
+    const page = await browser.newPage();
 
-      // Take a screenshot of the first image
-      await page.setContent(
-        htmlContent(`
+    await page.setContent(
+      htmlContent(`
       const circuit = createGridCircuit(
         [
             {
@@ -82,22 +81,21 @@ describe('Circuit', () => {
         ], 5, 'mycircuitdiv'
         );
       `),
-      );
-      await page.screenshot({path: `${outputPath}.png`});
-      await browser.close();
-    });
-
-    it('with limited gates matches the gold copy', () => {
-      const expected = PNG.PNG.sync.read(readFileSync('e2e/circuit/circuit_expected.png'));
-      const actual = PNG.PNG.sync.read(readFileSync(`${outputPath}.png`));
-      const {width, height} = expected;
-      const diff = new PNG.PNG({width, height});
+    );
+    await page.screenshot({path: `${outputPath}.png`});
+    await browser.close();
+  });
 
-      const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, {
-        threshold: 0.1,
-      });
+  it('with limited gates matches the gold copy', () => {
+    const expected = PNG.PNG.sync.read(readFileSync('e2e/circuit/circuit_expected.png'));
+    const actual = PNG.PNG.sync.read(readFileSync(`${outputPath}.png`));
+    const {width, height} = expected;
+    const diff = new PNG.PNG({width, height});
 
-      expect(pixels).to.equal(0);
+    const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, {
+      threshold: 0.1,
     });
+
+    expect(pixels).toBe(0);
   });
 });