TRI-29994 Add and fix lint testing

.github/workflows/tests.js.yml

@@ -32,4 +32,5 @@ jobs:
         cache: 'npm'
         cache-dependency-path: ui/package-lock.json
     - run: npm ci
+    - run: npm run lint
     - run: npm run build --if-present

ui/package.json

@@ -7,7 +7,7 @@
     "start": "vite",
     "build": "tsc --noEmit && vite build",
     "build-stage": "tsc --noEmit && vite build --mode staging",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
     "preview": "vite preview"
   },
   "dependencies": {

ui/src/App.tsx

@@ -5,7 +5,7 @@ import { Provider as JotaiProvider } from 'jotai';
 import { ThemeProvider, createTheme } from '@mui/material';
 import AboutUs from './pages/AboutUs/AboutUs';
 import { customTheme } from './theme';
-import FAQ from './pages/FAQ/FAQ';
+import { FAQ } from './pages/FAQ/FAQ';
 import Tutorial from './pages/Tutorial/Tutorial';
 
 const queryClient = new QueryClient();

ui/src/components/Footer/Footer.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import Footer from './Footer';
 import { MemoryRouter } from 'react-router-dom';
 
-test('renders Header correctly', async () => {
+test('renders Header correctly', () => {
     render(<Footer />, { wrapper: MemoryRouter });
 
     const faq = screen.getByText('FAQ');

ui/src/components/Header/Header.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import Header from './Header';
 import { MemoryRouter } from 'react-router-dom';
 
-test('renders Header correctly', async () => {
+test('renders Header correctly', () => {
     render(<Header />, { wrapper: MemoryRouter });
 
     const faq = screen.getByText('FAQ');

ui/src/features/data-table/table/data-grid-utils/oxidation-state-formatter.tsx

@@ -73,7 +73,7 @@ export const formatOxidationState = ({ counts, oxidationStates, symbols }: Table
                 finalString += symbol + oxidationState + ' ';
             } else if (counts[index] % 1 === 0) {
                 finalArr.push(formatOxidationStateWithWholeNumberCount(index, symbol, counts[index], oxidationState));
-                finalString += ~~counts[index] + symbol + oxidationState + ' ';
+                finalString += `${~~counts[index]}${symbol}${oxidationState} `;
             } else {
                 finalArr.push(formatOxidationStateWithDecimalCount(index, symbol, counts[index], oxidationState));
                 finalString += counts[index].toFixed(2) + symbol + oxidationState + ' ';

ui/src/pages/FAQ/FAQ.tsx

@@ -2,17 +2,15 @@ import PageWrapper from '@/components/PageWrapper/PageWrapper';
 import styles from './FAQ.module.css';
 import { Accordion, AccordionDetails, AccordionSummary, Breadcrumbs, Button, Link, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { FAQs } from '@/pages/FAQ/FAQUtil/FAQText';
+import { FAQ_ITEMS, URL_FAQ_STRING_MATCH } from './faq-util/faq-text';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 
-const URL_FAQ_STRING_MATCH = 'faq-';
-
-const FAQ = () => {
+export function FAQ() {
     const [expanded, setExpanded] = useState<string[]>([]);
     const [expandAll, setExpandAll] = useState<boolean>(false);
 
-    const allAccordians = FAQs.map((_value, index) => `panel${index}`);
+    const allAccordians = FAQ_ITEMS.map((_value, index) => `panel${index}`);
 
     useEffect(() => {
         document.title = 'Oxidation State Analyzer - FAQ';
@@ -23,7 +21,7 @@ const FAQ = () => {
         if (indexOfNumber !== -1) {
             const panelNumberString = currentUrl.slice(indexOfNumber);
             const panelNumber = Number.parseInt(panelNumberString);
-            if (!Number.isNaN(panelNumber) && panelNumber >= 0 && panelNumber < FAQs.length) {
+            if (!Number.isNaN(panelNumber) && panelNumber >= 0 && panelNumber < FAQ_ITEMS.length) {
                 if (panelNumber > 5) document.getElementById(`faq-${panelNumber}`)?.scrollIntoView();
                 setExpanded([`panel${panelNumber}`]);
             }
@@ -78,7 +76,7 @@ const FAQ = () => {
                         </Button>
                     </div>
                     <div className={styles.accordiansContainer}>
-                        {FAQs.map((value, index) => {
+                        {FAQ_ITEMS.map((value, index) => {
                             const panelName = `panel${index}`;
                             return (
                                 <Accordion
@@ -111,6 +109,4 @@ const FAQ = () => {
             </div>
         </PageWrapper>
     );
-};
-
-export default FAQ;
+}

ui/src/pages/FAQ/FAQUtil/FAQText.tsx → ui/src/pages/FAQ/faq-util/faq-text.tsx

@@ -3,7 +3,9 @@ export interface FAQText {
     answer: string;
 }
 
-export const FAQs: FAQText[] = [
+export const URL_FAQ_STRING_MATCH = 'faq-';
+
+export const FAQ_ITEMS: FAQText[] = [
     {
         question: 'How can I cite the Oxidation State Analyzer?',
         //answer: 'If you would like to cite the oxidation state analyzer, please reference the following manuscript: PLACEHOLDER. You can directly export this reference to a citation manager by clicking on one of the following links: PLACEHOLDER'

ui/src/vite-env.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="vite/client" />
-declare const AWS_CONFIG: any;
+declare const AWS_CONFIG: {
+    Auth: {
+        region: string;
+        userPoolId: string;
+        userPoolWebClientId: string;
+        mandatorySignIn: boolean;
+    };
+};
 declare const API_BASE_URL: string;
 declare const AMPLIFY_ENABLED: boolean;
 declare const dataLayer: Record<string, string>[];