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:
Hugo Häggmark
2020-04-24 08:48:04 +02:00
committed by GitHub
parent db3f2b90e9
commit e4d492fd35
27 changed files with 471 additions and 148 deletions

View File

@@ -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>

View File

@@ -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} />}