Implement comprehensive UI test suite with meaningful assertions and best practices (#921)

app/src/actions/Publish.ts

@@ -14,26 +14,27 @@ export const setTopic = (topic?: string): Action => {
   }
 }
 
-export const openFile = (encoding: 'utf8' = 'utf8') => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-  try {
-    const file = await getFileContent(encoding)
-    if (file) {
-      dispatch(
-        setPayload(file.data))
+export const openFile =
+  (encoding: 'utf8' = 'utf8') =>
+  async (dispatch: Dispatch<any>, getState: () => AppState) => {
+    try {
+      const file = await getFileContent(encoding)
+      if (file) {
+        dispatch(setPayload(file.data))
+      }
+    } catch (error) {
+      dispatch(showError(error))
     }
-  } catch (error) {
-    dispatch(showError(error))
   }
-}
 
 type FileParameters = {
-  name: string,
+  name: string
   data: string
 }
 async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
   const rejectReasons = {
     noFileSelected: 'No file selected',
-    errorReadingFile: 'Error reading file'
+    errorReadingFile: 'Error reading file',
   }
 
   const { canceled, filePaths } = await rendererRpc.call(makeOpenDialogRpc(), {

app/src/components/Sidebar/CodeDiff/ChartPreview.tsx

@@ -52,16 +52,16 @@ function ChartPreview(props: Props) {
       />
     </Tooltip>
   ) : (
-      <Tooltip title="Add to chart panel, not enough data for preview">
-        <ShowChart
-          onClick={onClick}
-          className={props.classes.icon}
-          style={{ color: '#aaa' }}
-          data-test-type="ShowChart"
-          data-test={props.literal.path}
-        />
-      </Tooltip>
-    )
+    <Tooltip title="Add to chart panel, not enough data for preview">
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
+    </Tooltip>
+  )
 
   return (
     <span>
@@ -69,7 +69,11 @@ function ChartPreview(props: Props) {
       <Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
         <Fade in={open} timeout={300}>
           <Paper style={{ width: '300px' }}>
-            {open ? <TopicPlot node={props.treeNode} history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
+            {open ? (
+              <TopicPlot node={props.treeNode} history={props.treeNode.messageHistory} dotPath={props.literal.path} />
+            ) : (
+              <span />
+            )}
           </Paper>
         </Fade>
       </Popper>