feat: jestのセットアップファイルを追加し、URLモックを設定

fix: ESLint設定にreact/jsx-props-no-spreadingルールを追加
fix: テストワークフローをmacOS専用に変更
fix: DataPlotコンポーネントのインポートを整理
fix: DataViewerコンポーネントのレイアウト設定を修正

Author: kiyu-git

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
     'consistent-return': 'off',
     'no-plusplus': 'off',
     'no-alert': 'off',
+    'react/jsx-props-no-spreading': 'off',
   },
   parserOptions: {
     ecmaVersion: 2020,

.github/workflows/test.yml

@@ -4,11 +4,7 @@ on: [push, pull_request, workflow_dispatch]
 
 jobs:
   test:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+    runs-on: macos-latest
 
     steps:
       - name: Check out Git repository
@@ -35,5 +31,4 @@ jobs:
         run: |
           npm run package
           npm run lint
-          npm exec tsc
           npm test

package-lock.json

@@ -81,6 +81,10 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
       "\\.(css|less|sass|scss)$": "identity-obj-proxy"
     },
+    "setupFilesAfterEnv": [
+      "jest-canvas-mock",
+      "<rootDir>/test/jest.setup.js"
+    ],
     "setupFiles": [
       "./.erb/scripts/check-build-exists.ts"
     ],
@@ -163,6 +167,7 @@
     "html-webpack-plugin": "^5.5.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.6",
     "prettier": "^2.8.8",

package.json

@@ -1,7 +1,6 @@
 /* eslint global-require: off, no-console: off, promise/always-return: off */
-/* global BrowserWindow */
 
-import type { BrowserWindow } from 'electron'; // Added this line
+import type { BrowserWindow, HandlerDetails } from 'electron'; // Added this line
 
 /**
  * This module executes inside of electron's main process. You can start
@@ -34,7 +33,8 @@ const {
 } = require('./electron-src/lib/serialManager');
 const { resolveHtmlPath } = require('./util');
 
-const transpose = (a: string[][]): string[][] => a[0].map((_: string, c: number) => a.map((r: string[]) => r[c])); // Added types
+const transpose = (a: string[][]): string[][] =>
+  a[0].map((_: string, c: number) => a.map((r: string[]) => r[c])); // Added types
 
 class AppUpdater {
   constructor() {
@@ -86,7 +86,8 @@ const createWindow = async () => {
     return path.join(RESOURCES_PATH, ...paths);
   };
 
-  mainWindow = new ElectronBrowserWindow({ // Used ElectronBrowserWindow
+  mainWindow = new ElectronBrowserWindow({
+    // Used ElectronBrowserWindow
     title: 'Serial Plot Tools',
     show: false,
     width: 1024,
@@ -117,7 +118,8 @@ const createWindow = async () => {
   });
 
   // Open urls in the user's browser
-  mainWindow.webContents.setWindowOpenHandler((edata: Electron.HandlerDetails) => { // Added type for edata
+  mainWindow.webContents.setWindowOpenHandler((edata: HandlerDetails) => {
+    // Added type for edata
     shell.openExternal(edata.url);
     return { action: 'deny' };
   });
@@ -136,7 +138,8 @@ const createWindow = async () => {
     const primaryDisplay = screen.getPrimaryDisplay();
     const { width, height } = primaryDisplay.workAreaSize;
 
-    const newWindow = new ElectronBrowserWindow({ // Used ElectronBrowserWindow
+    const newWindow = new ElectronBrowserWindow({
+      // Used ElectronBrowserWindow
       title: 'Realtime Data Logger',
       width,
       height,
@@ -169,7 +172,8 @@ const createWindow = async () => {
     const primaryDisplay = screen.getPrimaryDisplay();
     const { width, height } = primaryDisplay.workAreaSize;
 
-    subWindowDataViewer = new ElectronBrowserWindow({ // Used ElectronBrowserWindow
+    subWindowDataViewer = new ElectronBrowserWindow({
+      // Used ElectronBrowserWindow
       title: 'Data Viewer',
       width,
       height,

src/main/main.ts

@@ -1,6 +1,6 @@
+import { Layout, ScatterData } from 'plotly.js';
 import { useEffect, useRef, useState } from 'react';
 import Plot from 'react-plotly.js';
-import { ScatterData, Layout } from 'plotly.js';
 import './index.scss';
 
 type DataType = {
@@ -40,7 +40,11 @@ class Line {
     this.revision = 0;
   }
 
-  update(lineData: Partial<ScatterData>, layout: Partial<Layout>, revision: number) {
+  update(
+    lineData: Partial<ScatterData>,
+    layout: Partial<Layout>,
+    revision: number
+  ) {
     this.lineData = lineData;
     this.layout = layout;
     this.revision = revision;
@@ -116,4 +120,4 @@ export default function DataViewer() {
       })}
     </>
   );
-}
+}

src/renderer/components/DataPlot.tsx

@@ -106,12 +106,14 @@ export default function DataViewer() {
                   },
                 ] as Data[]
               }
-              layout={{
-                xaxis: { title: '時刻' },
-                yaxis: { title: data.title },
-                title: '',
-                margin: { t: 0 },
-              } as Partial<Layout>}
+              layout={
+                {
+                  xaxis: { title: '時刻' },
+                  yaxis: { title: data.title },
+                  title: '',
+                  margin: { t: 0 },
+                } as Partial<Layout>
+              }
             />
           );
         })}

src/renderer/pages/DataViewer/index.tsx

@@ -0,0 +1,3 @@
+// window.URL.createObjectURL と revokeObjectURL をモックする
+window.URL.createObjectURL = jest.fn();
+window.URL.revokeObjectURL = jest.fn();