mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
e2e: adds inspect drawer tests (#23823)
* Explore: Create basic E2E test * Feature: adds e2e tests for panel inspector * Refactor: adds ts-ignore because of type checking errors * Refactor: changes after PR comments and updates snapshot * Refactor: adds typings back for IScope * Refactor: changes after PR comments Co-authored-by: Andreas Opferkuch <andreas.opferkuch@gmail.com>
This commit is contained in:
@@ -5,6 +5,7 @@ import { css } from 'emotion';
|
||||
import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
|
||||
import { IconButton } from '../IconButton/IconButton';
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
import { e2e } from '@grafana/e2e';
|
||||
|
||||
export interface Props {
|
||||
children: ReactNode;
|
||||
@@ -93,17 +94,40 @@ export const Drawer: FC<Props> = ({
|
||||
getContainer={inline ? false : 'body'}
|
||||
style={{ position: `${inline && 'absolute'}` } as CSSProperties}
|
||||
className={drawerStyles.drawer}
|
||||
aria-label={
|
||||
typeof title === 'string'
|
||||
? e2e.components.Drawer.General.selectors.title(title)
|
||||
: e2e.components.Drawer.General.selectors.title('no title')
|
||||
}
|
||||
>
|
||||
{typeof title === 'string' && (
|
||||
<div className={drawerStyles.header}>
|
||||
<div className={drawerStyles.actions}>
|
||||
{expandable && !isExpanded && (
|
||||
<IconButton name="angle-left" size="xl" onClick={() => setIsExpanded(true)} surface="header" />
|
||||
<IconButton
|
||||
name="angle-left"
|
||||
size="xl"
|
||||
onClick={() => setIsExpanded(true)}
|
||||
surface="header"
|
||||
aria-label={e2e.components.Drawer.General.selectors.expand}
|
||||
/>
|
||||
)}
|
||||
{expandable && isExpanded && (
|
||||
<IconButton name="angle-right" size="xl" onClick={() => setIsExpanded(false)} surface="header" />
|
||||
<IconButton
|
||||
name="angle-right"
|
||||
size="xl"
|
||||
onClick={() => setIsExpanded(false)}
|
||||
surface="header"
|
||||
aria-label={e2e.components.Drawer.General.selectors.contract}
|
||||
/>
|
||||
)}
|
||||
<IconButton name="times" size="xl" onClick={onClose} surface="header" />
|
||||
<IconButton
|
||||
name="times"
|
||||
size="xl"
|
||||
onClick={onClose}
|
||||
surface="header"
|
||||
aria-label={e2e.components.Drawer.General.selectors.close}
|
||||
/>
|
||||
</div>
|
||||
<div className={drawerStyles.titleWrapper}>
|
||||
<h3>{title}</h3>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Icon } from '../Icon/Icon';
|
||||
import { IconName } from '../../types';
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
import { Counter } from './Counter';
|
||||
import { e2e } from '@grafana/e2e';
|
||||
|
||||
export interface TabProps {
|
||||
label: string;
|
||||
@@ -40,6 +41,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
}
|
||||
`,
|
||||
activeStyle: css`
|
||||
label: activeTabStyle;
|
||||
border-color: ${theme.palette.orange} ${colors.pageHeaderBorder} transparent;
|
||||
background: ${colors.bodyBg};
|
||||
color: ${colors.link};
|
||||
@@ -64,7 +66,11 @@ export const Tab: FC<TabProps> = ({ label, active, icon, onChangeTab, counter })
|
||||
const tabsStyles = getTabStyles(theme);
|
||||
|
||||
return (
|
||||
<li className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)} onClick={onChangeTab}>
|
||||
<li
|
||||
className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)}
|
||||
onClick={onChangeTab}
|
||||
aria-label={e2e.components.Tab.selectors.title(label)}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{label}
|
||||
{typeof counter === 'number' && <Counter value={counter} />}
|
||||
|
||||
Reference in New Issue
Block a user