fix: Add eslint-plugin-chai-friendly and update package.json

frontend/package.json

@@ -39,10 +39,17 @@
     "lint:fix": "eslint --fix src/**/*.js"
   },
   "eslintConfig": {
+    "plugins": [
+      "chai-friendly"
+    ],
     "extends": [
       "react-app",
       "plugin:storybook/recommended"
-    ]
+    ],
+    "rules": {
+      "no-unused-expressions": 0,
+      "chai-friendly/no-unused-expressions": ["error", { "allowShortCircuit": true }]
+    }
   },
   "browserslist": {
     "production": [
@@ -73,6 +80,7 @@
     "coverage-badges-cli": "^1.2.5",
     "eslint": "^8.54.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-storybook": "^0.6.15",
     "happy-dom": "^12.10.3",
     "history": "^5.3.0",

frontend/src/components/AppBar/AppBar.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import AppBar from './AppBar';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { vi } from 'vitest';
 
 describe('AppBar', () => {
 

frontend/src/components/Button/Button.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import Button from './Button';
+import { vi } from 'vitest';
 
 describe('Button component', () => {
 

frontend/src/components/Consent/Consent.test.js

@@ -3,6 +3,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
 import Consent from './Consent';
 import { useConsent } from '../../API'
 import { saveAs } from 'file-saver';
+import { vi } from 'vitest';
 
 global.Blob = vi.fn().mockImplementation((content, options) => ({
     content,

frontend/src/components/Playback/MatchingPairs.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import MatchingPairs from './MatchingPairs';
+import { vi } from 'vitest';
 
 vi.mock("@/components/PlayButton/PlayCard", () => ({
     default: props => <div data-testid="play-card" {...props} />

frontend/src/components/Question/_ButtonArray.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ButtonArray from './_ButtonArray';
+import { vi } from 'vitest';
 
 const getProps = (overrides = {}) => ({
     question: {

frontend/src/components/Score/Score.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import Score from './Score';
 import makeDefaultScoreProps from '../../util/testUtils/makeDefaultScoreProps';
+import { vi } from 'vitest';
 
 vi.useFakeTimers();
 

frontend/src/hooks/useResultHandler.test.js

@@ -1,5 +1,6 @@
 import { renderHook, act } from "@testing-library/react";
 import useResultHandler from "./useResultHandler";
+import { vi } from 'vitest';
 
 import * as API from '../API.js';
 

frontend/src/util/audio.js

@@ -10,7 +10,7 @@ audio.controls = "controls";
 audio.src = SILENT_MP3;
 
 // switch to cors anonymous for local development (needed for webaudio)
-API_ROOT === 'http://localhost:8000' ? audio.crossOrigin = "anonymous" : audio.crossorigin = "use-credentials";
+audio.crossOrigin = API_ROOT === 'http://localhost:8000' ? "anonymous" : "use-credentials";
 
 audio.disableRemotePlayback = true;
 audio.style.display = "none";
@@ -36,7 +36,7 @@ export let audioInitialized = false;
 export const init = () => {
     load(SILENT_MP3);
     play();
-    audioInitialized = true;   
+    audioInitialized = true;
 };
 
 // init audio after first user action on page

frontend/src/util/testUtils/makeDefaultScoreProps.js

@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 const makeDefaultProps = (overrides = {}) => ({
     last_song: 'Test Song',
     score: 10,

frontend/src/util/timer.js

@@ -20,16 +20,17 @@ export const Timer = ({
 
         // timer finished
         if (time === duration) {
-            onFinish && onFinish();
-            return;
+            return onFinish ? onFinish() : void 0;
         }
 
         // callback after interval
         if (time - lastTime > interval) {
             lastTime = time;
 
             // tick
-            onTick && onTick(time, delta);
+            if (onTick) {
+                onTick(time, delta);
+            }
         }
 
         lastTimestamp = timestamp;

frontend/yarn.lock

@@ -6819,6 +6819,7 @@ __metadata:
     email-validator: "npm:^2.0.4"
     eslint: "npm:^8.54.0"
     eslint-config-react-app: "npm:^7.0.1"
+    eslint-plugin-chai-friendly: "npm:^0.7.2"
     eslint-plugin-storybook: "npm:^0.6.15"
     file-saver: "npm:^2.0.5"
     happy-dom: "npm:^12.10.3"
@@ -9082,6 +9083,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-chai-friendly@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "eslint-plugin-chai-friendly@npm:0.7.2"
+  peerDependencies:
+    eslint: ">=3.0.0"
+  checksum: 44742cbbb4d95880824e2034d749d9f71799ce96308eb1376c8defededfb0c90a96048717bbb5a7ccd409956a8ac28ea5deee720159f0b2be6aa1318ef656776
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-flowtype@npm:^8.0.3":
   version: 8.0.3
   resolution: "eslint-plugin-flowtype@npm:8.0.3"