added unit test for composition title (#134)

TRI-AMDD · Nov 14, 2023 · 7e27909 · 7e27909
1 parent c6b0022
commit 7e27909
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/ui/src/components/DataViewer/DataViewer.tsx b/ui/src/components/DataViewer/DataViewer.tsx
@@ -1,4 +1,4 @@
-import { dataViewerStateAtom } from '@/atoms/atoms';
+import { dataViewerStateAtom, dynamicCompositionTitleAtom } from '@/atoms/atoms';
 import styles from './DataViewer.module.css';
 import InitialState from './InitialState/InitialState';
 import { useAtom } from 'jotai';
@@ -8,13 +8,16 @@ import { LoadingState } from '@/features/data-table/table-models/data-viewer-mod
 
 const DataViewer = () => {
     const [dataViewerState] = useAtom(dataViewerStateAtom);
+    const [dynamicCompositionTitle] = useAtom(dynamicCompositionTitleAtom);
 
     return (
         <div id="data-viewer-container" className={styles.container}>
             {(dataViewerState === LoadingState.Initial || dataViewerState === LoadingState.Loading) && (
                 <InitialState dataState={dataViewerState} />
             )}
-            {dataViewerState === LoadingState.Loaded && <LoadedWithMessageState />}
+            {dataViewerState === LoadingState.Loaded && (
+                <LoadedWithMessageState dynamicCompositionTitle={dynamicCompositionTitle} />
+            )}
             {dataViewerState === LoadingState.Error && <ErrorState />}
         </div>
     );

diff --git a/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.test.tsx b/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.test.tsx
@@ -0,0 +1,30 @@
+import { parseAPICompositionString } from '@/features/data-table/table/data-grid-utils/oxidation-state-formatter';
+import LoadedWithMessageState from './LoadedWithMessageState';
+import { render, screen, within } from '@testing-library/react';
+
+describe('ensure composition title renders correctly', () => {
+    test('MgO passed as composition title', () => {
+        const dynamicTitleProp = {
+            formattedTitle: parseAPICompositionString('MgO'),
+            unformattedTitle: 'MgO'
+        };
+        render(<LoadedWithMessageState dynamicCompositionTitle={dynamicTitleProp} />);
+        const compositionTitleElem = screen.getByTestId('dynamic-composition-title');
+        expect(compositionTitleElem).toHaveTextContent('MgO');
+    });
+
+    test('LiMn2O4 passed as composition title', () => {
+        const dynamicTitleProp = {
+            formattedTitle: parseAPICompositionString('LiMn2O4'),
+            unformattedTitle: 'LiMn2O4'
+        };
+        render(<LoadedWithMessageState dynamicCompositionTitle={dynamicTitleProp} />);
+        const compositionTitleElem = screen.getByTestId('dynamic-composition-title');
+        const innerSubElem1 = within(compositionTitleElem).getByText('2');
+        const innerSubElem2 = within(compositionTitleElem).getByText('4');
+
+        expect(compositionTitleElem).toHaveTextContent('LiMn2O4');
+        expect(innerSubElem1.nodeName).toEqual('SUB');
+        expect(innerSubElem2.nodeName).toEqual('SUB');
+    });
+});
diff --git a/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.tsx b/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.tsx
@@ -1,14 +1,17 @@
 import { Alert, Typography } from '@mui/material';
 import styles from './LoadedWithMessageState.module.css';
 import { useAtom } from 'jotai';
-import { dynamicCompositionTitleAtom, oxidationDataAtom } from '@/atoms/atoms';
+import { oxidationDataAtom } from '@/atoms/atoms';
 import Table from '@/features/data-table/table/table';
 import Graph from '../Graph/Graph';
 import { useMemo } from 'react';
 import CompositionTitle from '../CompositionTitle/CompositionTitle';
 
-const LoadedWithMessageState = () => {
-    const [dynamicCompositionTitle] = useAtom(dynamicCompositionTitleAtom);
+interface LoadedWithMessageStateProps {
+    dynamicCompositionTitle: { formattedTitle: string[]; unformattedTitle: string };
+}
+
+const LoadedWithMessageState = ({ dynamicCompositionTitle }: LoadedWithMessageStateProps) => {
     const [oxidationData] = useAtom(oxidationDataAtom);
     const messages = useMemo(() => {
         if (typeof oxidationData !== 'undefined' && oxidationData && oxidationData.messages.length > 0) {
@@ -22,7 +25,7 @@ const LoadedWithMessageState = () => {
         <div>
             <Alert severity="info">
                 <div className={styles.alertMessage}>
-                    <div className={styles.dynamicTitle}>
+                    <div className={styles.dynamicTitle} data-testid="dynamic-composition-title">
                         {' '}
                         Oxidation state analysis for&nbsp;
                         {dynamicCompositionTitle.formattedTitle.map((item) => (