dependencies: add typescript support

Author: shn-liqd

.eslintrc

@@ -1,12 +1,12 @@
 {
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 2020,
     "sourceType": "module",
-    "requireConfigFile": false,
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true
-    }
+      "jsx": true
+    },
+    "project": "./tsconfig.json"
   },
   "env": {
     "browser": true,
@@ -21,10 +21,12 @@
     "plugin:jsx-a11y/recommended",
     "plugin:react/recommended",
     "plugin:import/recommended",
+    "plugin:import/typescript",
     "plugin:n/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:promise/recommended"
-    ],
+    "plugin:promise/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "rules": {
     "jsx-quotes": [2, "prefer-double"],
     "jsx-a11y/no-onchange": "off",
@@ -34,24 +36,50 @@
     "n/no-missing-import": "off",
     "n/no-unpublished-import": "off",
     "n/no-extraneous-import": "off",
-    "no-restricted-syntax": ["error", "TemplateLiteral"]
+    "no-restricted-syntax": ["error", "TemplateLiteral"],
+    "import/default": "warn",
+    // TypeScript specific rules
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-this-alias": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/ban-ts-comment": ["error", { "ts-expect-error": "allow-with-description" }]
   },
   "plugins": [
     "jsx-a11y",
     "jest",
-    "promise"
+    "promise",
+    "@typescript-eslint"
   ],
   "ignorePatterns": [
     "node_modules/",
-    "venv/"
+    "venv/",
+    "*.d.ts"
   ],
   "settings": {
-    "import/core-modules": [ django ],
+    "import/core-modules": ["django"],
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "paths": ["src"]
+      },
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-var-requires": "off"
       }
     }
-  }
-}
-
+  ]
+}

__mocks__/djangoMock.js

@@ -1,47 +1,33 @@
 import React from 'react'
 import { render, fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import AiReport from '../ai_report'
+import { describe, test, expect } from 'vitest' // Import from vitest
 
+import AiReport from '../ai_report'
 describe('Test AiReport', () => {
+  const testReport = {
+    label: [['cattest', 'test label']],
+    confidence: [['cattest', 0.65]],
+    explanation: { cattest: [['word', 0.61]] },
+    show_in_discussion: true
+  }
+
   test('renders with Read More button', () => {
-    render(
-      <AiReport
-        report={{ label: [['cattest', 'test label']], confidence: [['cattest', 0.65]], explanation: { cattest: [['word', 0.61]] }, show_in_discussion: true }}
-      />
-    )
-    const comment = screen.getByText('Read more')
-    expect(comment).toBeInTheDocument()
+    render(<AiReport report={testReport} />)
+    expect(screen.getByText('Read more')).toBeInTheDocument()
   })
 
-  test('functionality of Read More button', () => {
-    render(
-      <AiReport
-        report={{ label: [['cattest', 'test label']], confidence: [['cattest', 0.65]], explanation: { cattest: [['word', 0.61]] }, show_in_discussion: true }}
-      />
-    )
-    const readMore = screen.getByText('Read more')
-    expect(readMore).toBeInTheDocument()
+  test('functionality of Read More button', async () => {
+    render(<AiReport report={testReport} />)
     const button = screen.getByRole('button')
-    expect(button).toBeInTheDocument()
     fireEvent.click(button)
-    const readLess = screen.getByText('Show less')
-    expect(readLess).toBeInTheDocument()
-    expect(readLess).toBeInTheDocument()
+    const showLessButton = screen.getByText("Show less")
+    await expect(showLessButton).toHaveTextContent("Show less")
   })
 
-  test('shows percentage for each label', async () => {
-    render(
-      <AiReport
-        report={{ label: [['cattest', 'test label']], confidence: [0.65], explanation: { cattest: [['word', 0.61]] }, show_in_discussion: true }}
-      />
-    )
-    const readMore = screen.getByText('Read more')
-    expect(readMore).toBeInTheDocument()
+  test('shows percentage for each label', () => {
+    render(<AiReport report={{...testReport, confidence: [0.65]}} />)
     const button = screen.getByRole('button')
-    expect(button).toBeInTheDocument()
     fireEvent.click(button)
-    const percent = screen.getByText(/65%/)
-    expect(percent).toBeInTheDocument()
+    expect(screen.getByText(/65%/)).toBeInTheDocument()
   })
-})
+})

__mocks__/flipmoveMock.js

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Comment Component renders comment with creator and comment text 1`] = `
+exports[`Comment Component > renders comment with creator and comment text 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
@@ -219,7 +219,7 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
               id="share-url-undefined"
               readonly=""
               type="text"
-              value="http://localhost/?comment=1"
+              value="http://localhost:3000/?comment=1"
             />
             <button
               aria-pressed="false"
@@ -465,7 +465,7 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
 }
 `;
 
-exports[`Comment Component renders comment with moderator badge 1`] = `
+exports[`Comment Component > renders comment with moderator badge 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
@@ -689,7 +689,7 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
               id="share-url-undefined"
               readonly=""
               type="text"
-              value="http://localhost/?comment=1"
+              value="http://localhost:3000/?comment=1"
             />
             <button
               aria-pressed="false"