Refactoring: Remove type assertions in remaining components

services/frontend-service/src/setupTests.ts

@@ -22,21 +22,33 @@ global.nextTick = (): Promise<void> => new Promise((resolve) => setTimeout(resol
 export const documentQuerySelectorSafe = (selectors: string): HTMLElement => {
     const result = document.querySelector(selectors);
     if (!result) {
-        throw new Error('did not find in selector in document ' + selectors);
+        throw new Error('documentQuerySelectorSafe: did not find in selector in document ' + selectors);
     }
     if (!(result instanceof HTMLElement)) {
-        throw new Error('did find element in selector but it is not an html element: ' + selectors);
+        throw new Error(
+            'documentQuerySelectorSafe: did find element in selector but it is not an html element: ' + selectors
+        );
     }
     return result;
 };
 
 export const elementQuerySelectorSafe = (element: HTMLElement, selectors: string): HTMLElement => {
     const result = element.querySelector(selectors);
     if (!result) {
-        throw new Error('did not find in selector in document ' + selectors);
+        throw new Error('elementQuerySelectorSafe: did not find in selector in document ' + selectors);
     }
     if (!(result instanceof HTMLElement)) {
-        throw new Error('did find element in selector but it is not an html element: ' + selectors);
+        throw new Error(
+            'elementQuerySelectorSafe: did find element in selector but it is not an html element: ' + selectors
+        );
+    }
+    return result;
+};
+
+export const getElementsByClassNameSafe = (element: HTMLElement, selectors: string): HTMLCollectionOf<Element> => {
+    const result = element.getElementsByClassName(selectors);
+    if (!result || result.length === 0) {
+        throw new Error('getElementsByClassNameSafe: did not find in selector in element ' + selectors);
     }
     return result;
 };

services/frontend-service/src/ui/components/SideBar/SideBar.test.tsx

@@ -28,6 +28,7 @@ import {
     DisplayLock,
 } from '../../utils/store';
 import { ActionDetails, ActionTypes, getActionDetails, SideBar } from './SideBar';
+import { elementQuerySelectorSafe } from '../../../setupTests';
 
 describe('Show and Hide Sidebar', () => {
     interface dataT {
@@ -44,8 +45,7 @@ describe('Show and Hide Sidebar', () => {
         {
             name: 'Sidebar is displayed',
             expect: (container) => {
-                // eslint-disable-next-line no-type-assertion/no-type-assertion
-                const result = container.querySelector('.mdc-show-button')! as HTMLElement;
+                const result = elementQuerySelectorSafe(container, '.mdc-show-button');
                 act(() => {
                     result.click();
                 });
@@ -54,7 +54,7 @@ describe('Show and Hide Sidebar', () => {
         },
     ];
 
-    const getNode = (overrides?: {}): JSX.Element | any => {
+    const getNode = (overrides?: {}): JSX.Element => {
         // given
         const defaultProps: any = {
             children: null,
@@ -145,8 +145,7 @@ describe('Sidebar shows list of actions', () => {
             updateActions(testcase.actions);
             // when
             const { container } = getWrapper({});
-            // eslint-disable-next-line no-type-assertion/no-type-assertion
-            const result = container.querySelector('.mdc-show-button')! as HTMLElement;
+            const result = elementQuerySelectorSafe(container, '.mdc-show-button');
             act(() => {
                 result.click();
             });
@@ -209,8 +208,7 @@ describe('Sidebar test deletebutton', () => {
             updateActions(testcase.actions);
             // when
             const { container } = getWrapper({});
-            // eslint-disable-next-line no-type-assertion/no-type-assertion
-            const result = container.querySelector('.mdc-show-button')! as HTMLElement;
+            const result = elementQuerySelectorSafe(container, '.mdc-show-button');
             act(() => {
                 result.click();
             });

services/frontend-service/src/ui/components/snackbar/snackbar.tsx

@@ -34,18 +34,19 @@ export const Snackbar = (): JSX.Element => {
 
     useEffect(() => {
         if (show) {
+            if (!MDComponent.current) {
+                throw new Error('snackbar: mdcomponent.current not set');
+            }
             // open the snackbar and then set show to false. the snackbar will remain opened 5s
             if (status === SnackbarStatus.WARN) {
                 // Warn is used for connection errors
                 // when you can't connect, always show a warning
-                // eslint-disable-next-line no-type-assertion/no-type-assertion
-                MDComponent.current!.timeoutMs = -1;
+                MDComponent.current.timeoutMs = -1;
             } else {
                 // snackbar closes after 5s
-                // eslint-disable-next-line no-type-assertion/no-type-assertion
-                MDComponent.current!.timeoutMs = 5000;
+                MDComponent.current.timeoutMs = 5000;
             }
-            MDComponent.current?.open();
+            MDComponent.current.open();
             UpdateSnackbar.set({ show: false });
         }
     }, [show, status]);

services/frontend-service/src/ui/components/textfield/textfield.test.tsx

@@ -17,6 +17,7 @@ import { Textfield } from './textfield';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { getElementsByClassNameSafe } from '../../../setupTests';
 
 describe('Textfield', () => {
     it('renders correctly using Snapshot', () => {
@@ -99,8 +100,7 @@ describe('Verify textfield content', () => {
             floatingLabel: 'Search',
             value: 'test-search',
             expect: (container) => {
-                // eslint-disable-next-line no-type-assertion/no-type-assertion
-                const input = container.getElementsByClassName('mdc-text-field__input')[0] as HTMLElement;
+                const input = getElementsByClassNameSafe(container, 'mdc-text-field__input')[0];
                 input.nodeValue = 'test-search';
                 return expect(container.getElementsByClassName('mdc-text-field__input')[0]).toHaveDisplayValue(
                     'test-search'