mirror of
https://github.com/grafana/grafana.git
synced 2024-12-24 16:10:22 -06:00
Search: add basic e2e test for the folder view (#55820)
This commit is contained in:
parent
d9d7bff793
commit
202dce66ff
28
e2e/dashboards-suite/dashboard-search.spec.ts
Normal file
28
e2e/dashboards-suite/dashboard-search.spec.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { e2e } from '@grafana/e2e';
|
||||
|
||||
import testDashboard from '../dashboards/TestDashboard.json';
|
||||
|
||||
e2e.scenario({
|
||||
describeName: 'Dashboard search',
|
||||
itName: 'Basic folder view test',
|
||||
addScenarioDataSource: false,
|
||||
addScenarioDashBoard: false,
|
||||
skipScenario: false,
|
||||
scenario: () => {
|
||||
e2e.flows.importDashboard(testDashboard, 1000, true);
|
||||
|
||||
e2e.pages.Search.FolderView.visit();
|
||||
|
||||
// folder view is collapsed - verify its content does not exist
|
||||
e2e.components.Search.folderContent('General').should('not.exist');
|
||||
e2e.components.Search.dashboardItem('E2E Test - Dashboard Search').should('not.exist');
|
||||
|
||||
e2e.components.Search.folderHeader('General').click({ force: true });
|
||||
|
||||
e2e.components.Search.folderContent('General').should('be.visible');
|
||||
e2e.components.Search.dashboardItem('E2E Test - Import Dashboard').should('be.visible');
|
||||
|
||||
// verify the imported dashboard is the only dashboard present in the folder
|
||||
e2e().get('[data-testid^="data-testid Dashboard search item "]').should('have.length', 1);
|
||||
},
|
||||
});
|
210
e2e/dashboards/DashboardSearchTest.json
Normal file
210
e2e/dashboards/DashboardSearchTest.json
Normal file
@ -0,0 +1,210 @@
|
||||
{
|
||||
"annotations": {
|
||||
"list": [
|
||||
{
|
||||
"builtIn": 1,
|
||||
"datasource": "-- Grafana --",
|
||||
"enable": true,
|
||||
"hide": true,
|
||||
"iconColor": "rgba(0, 211, 255, 1)",
|
||||
"name": "Annotations & Alerts",
|
||||
"target": {
|
||||
"limit": 100,
|
||||
"matchAny": false,
|
||||
"tags": [],
|
||||
"type": "dashboard"
|
||||
},
|
||||
"type": "dashboard"
|
||||
}
|
||||
]
|
||||
},
|
||||
"editable": true,
|
||||
"gnetId": null,
|
||||
"graphTooltip": 0,
|
||||
"id": 321,
|
||||
"links": [],
|
||||
"liveNow": false,
|
||||
"panels": [
|
||||
{
|
||||
"datasource": null,
|
||||
"fieldConfig": {
|
||||
"defaults": {
|
||||
"color": {
|
||||
"mode": "thresholds"
|
||||
},
|
||||
"mappings": [],
|
||||
"thresholds": {
|
||||
"mode": "absolute",
|
||||
"steps": [
|
||||
{
|
||||
"color": "green",
|
||||
"value": null
|
||||
},
|
||||
{
|
||||
"color": "red",
|
||||
"value": 80
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"overrides": []
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 8,
|
||||
"w": 12,
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"id": 6,
|
||||
"options": {
|
||||
"reduceOptions": {
|
||||
"calcs": ["lastNotNull"],
|
||||
"fields": "",
|
||||
"values": false
|
||||
},
|
||||
"showThresholdLabels": false,
|
||||
"showThresholdMarkers": true,
|
||||
"text": {}
|
||||
},
|
||||
"pluginVersion": "8.3.0-pre",
|
||||
"title": "Gauge Example",
|
||||
"type": "gauge"
|
||||
},
|
||||
{
|
||||
"datasource": null,
|
||||
"fieldConfig": {
|
||||
"defaults": {
|
||||
"color": {
|
||||
"mode": "thresholds"
|
||||
},
|
||||
"mappings": [],
|
||||
"thresholds": {
|
||||
"mode": "absolute",
|
||||
"steps": [
|
||||
{
|
||||
"color": "green",
|
||||
"value": null
|
||||
},
|
||||
{
|
||||
"color": "red",
|
||||
"value": 80
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"overrides": []
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 8,
|
||||
"w": 12,
|
||||
"x": 0,
|
||||
"y": 8
|
||||
},
|
||||
"id": 4,
|
||||
"options": {
|
||||
"colorMode": "value",
|
||||
"graphMode": "area",
|
||||
"justifyMode": "auto",
|
||||
"orientation": "auto",
|
||||
"reduceOptions": {
|
||||
"calcs": ["lastNotNull"],
|
||||
"fields": "",
|
||||
"values": false
|
||||
},
|
||||
"text": {},
|
||||
"textMode": "auto"
|
||||
},
|
||||
"pluginVersion": "8.3.0-pre",
|
||||
"title": "Stat",
|
||||
"type": "stat"
|
||||
},
|
||||
{
|
||||
"datasource": null,
|
||||
"fieldConfig": {
|
||||
"defaults": {
|
||||
"color": {
|
||||
"mode": "palette-classic"
|
||||
},
|
||||
"custom": {
|
||||
"axisLabel": "",
|
||||
"axisPlacement": "auto",
|
||||
"barAlignment": 0,
|
||||
"drawStyle": "line",
|
||||
"fillOpacity": 0,
|
||||
"gradientMode": "none",
|
||||
"hideFrom": {
|
||||
"legend": false,
|
||||
"tooltip": false,
|
||||
"viz": false
|
||||
},
|
||||
"lineInterpolation": "linear",
|
||||
"lineWidth": 1,
|
||||
"pointSize": 5,
|
||||
"scaleDistribution": {
|
||||
"type": "linear"
|
||||
},
|
||||
"showPoints": "auto",
|
||||
"spanNulls": false,
|
||||
"stacking": {
|
||||
"group": "A",
|
||||
"mode": "none"
|
||||
},
|
||||
"thresholdsStyle": {
|
||||
"mode": "off"
|
||||
}
|
||||
},
|
||||
"mappings": [],
|
||||
"thresholds": {
|
||||
"mode": "absolute",
|
||||
"steps": [
|
||||
{
|
||||
"color": "green",
|
||||
"value": null
|
||||
},
|
||||
{
|
||||
"color": "red",
|
||||
"value": 80
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"overrides": []
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 9,
|
||||
"w": 12,
|
||||
"x": 0,
|
||||
"y": 16
|
||||
},
|
||||
"id": 2,
|
||||
"options": {
|
||||
"legend": {
|
||||
"calcs": [],
|
||||
"displayMode": "list",
|
||||
"placement": "bottom"
|
||||
},
|
||||
"tooltip": {
|
||||
"mode": "single"
|
||||
}
|
||||
},
|
||||
"title": "Time series example",
|
||||
"type": "timeseries"
|
||||
}
|
||||
],
|
||||
"refresh": false,
|
||||
"schemaVersion": 31,
|
||||
"style": "dark",
|
||||
"tags": [],
|
||||
"templating": {
|
||||
"list": []
|
||||
},
|
||||
"time": {
|
||||
"from": "2021-09-01T04:00:00.000Z",
|
||||
"to": "2021-09-15T04:00:00.000Z"
|
||||
},
|
||||
"timepicker": {},
|
||||
"timezone": "",
|
||||
"title": "E2E Test - Dashboard Search",
|
||||
"uid": "kquZN5H7k",
|
||||
"version": 4
|
||||
}
|
@ -318,6 +318,8 @@ export const Components = {
|
||||
expandFolder: (sectionId: string) => `data-testid Expand folder ${sectionId}`,
|
||||
dashboardItem: (item: string) => `${Components.Search.dashboardItems} ${item}`,
|
||||
dashboardCard: (item: string) => `data-testid Search card ${item}`,
|
||||
folderHeader: (folderName: string) => `data-testid Folder header ${folderName}`,
|
||||
folderContent: (folderName: string) => `data-testid Folder content ${folderName}`,
|
||||
dashboardItems: 'data-testid Dashboard search item',
|
||||
},
|
||||
DashboardLinks: {
|
||||
|
@ -220,4 +220,10 @@ export const Pages = {
|
||||
interval: 'Playlist interval',
|
||||
itemDelete: 'Delete playlist item',
|
||||
},
|
||||
Search: {
|
||||
url: '/?search=openn',
|
||||
FolderView: {
|
||||
url: '/?search=open&layout=folders',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -18,6 +18,8 @@ export interface Props {
|
||||
contentClassName?: string;
|
||||
loading?: boolean;
|
||||
labelId?: string;
|
||||
headerDataTestId?: string;
|
||||
contentDataTestId?: string;
|
||||
}
|
||||
|
||||
export const CollapsableSection: FC<Props> = ({
|
||||
@ -29,6 +31,8 @@ export const CollapsableSection: FC<Props> = ({
|
||||
children,
|
||||
labelId,
|
||||
loading = false,
|
||||
headerDataTestId,
|
||||
contentDataTestId,
|
||||
}) => {
|
||||
const [open, toggleOpen] = useState<boolean>(isOpen);
|
||||
const styles = useStyles2(collapsableSectionStyles);
|
||||
@ -65,12 +69,16 @@ export const CollapsableSection: FC<Props> = ({
|
||||
<Icon name={open ? 'angle-up' : 'angle-down'} className={styles.icon} />
|
||||
)}
|
||||
</button>
|
||||
<div className={styles.label} id={`collapse-label-${id}`}>
|
||||
<div className={styles.label} id={`collapse-label-${id}`} data-testid={headerDataTestId}>
|
||||
{label}
|
||||
</div>
|
||||
</div>
|
||||
{open && (
|
||||
<div id={`collapse-content-${id}`} className={cx(styles.content, contentClassName)}>
|
||||
<div
|
||||
id={`collapse-content-${id}`}
|
||||
className={cx(styles.content, contentClassName)}
|
||||
data-testid={contentDataTestId}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
|
@ -3,6 +3,7 @@ import React, { FC } from 'react';
|
||||
import { useAsync, useLocalStorage } from 'react-use';
|
||||
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { Card, Checkbox, CollapsableSection, Icon, IconName, Spinner, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { getSectionStorageKey } from 'app/features/search/utils';
|
||||
import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';
|
||||
@ -157,6 +158,8 @@ export const FolderSection: FC<SectionHeaderProps> = ({
|
||||
|
||||
return (
|
||||
<CollapsableSection
|
||||
headerDataTestId={selectors.components.Search.folderHeader(section.title)}
|
||||
contentDataTestId={selectors.components.Search.folderContent(section.title)}
|
||||
isOpen={sectionExpanded ?? false}
|
||||
onToggle={onSectionExpand}
|
||||
className={styles.wrapper}
|
||||
|
Loading…
Reference in New Issue
Block a user