Search: add unit tests for FolderView (#51114)

* add unit tests for FolderView

* add basic unit test for Alert component

* prevent flicker of `No results found`

packages/grafana-ui/package.json

@@ -44,6 +44,7 @@
     "@react-aria/focus": "3.6.0",
     "@react-aria/menu": "3.5.0",
     "@react-aria/overlays": "3.9.0",
+    "@react-aria/utils": "3.13.0",
     "@react-stately/menu": "3.3.0",
     "@sentry/browser": "6.19.7",
     "ansicolor": "1.1.100",

packages/grafana-ui/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { Alert } from './Alert';
+
+describe('Alert', () => {
+  it('sets the accessible label correctly based on the title', () => {
+    render(<Alert title="Uh oh spagghettios!" />);
+    expect(screen.getByRole('alert', { name: 'Uh oh spagghettios!' })).toBeInTheDocument();
+  });
+});

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import { useId } from '@react-aria/utils';
 import React, { HTMLAttributes, ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -56,19 +57,24 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
   ) => {
     const theme = useTheme2();
     const styles = getStyles(theme, severity, elevated, bottomSpacing, topSpacing);
+    const titleId = useId();
 
     return (
       <div
         ref={ref}
         className={cx(styles.alert, className)}
         data-testid={selectors.components.Alert.alertV2(severity)}
+        role="alert"
+        aria-labelledby={titleId}
         {...restProps}
       >
         <div className={styles.icon}>
           <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
         </div>
-        <div className={styles.body} role="alert">
-          <div className={styles.title}>{title}</div>
+        <div className={styles.body}>
+          <div id={titleId} className={styles.title}>
+            {title}
+          </div>
           {children && <div className={styles.content}>{children}</div>}
         </div>
         {/* If onRemove is specified, giving preference to onRemove */}