From 9ed8a3b91e8544bf61bd8a0fae8d568c6cb139fe Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Tue, 18 Jun 2019 14:48:39 +0200
Subject: [PATCH] Add ui-test accessibility

---
 app/src/components/ChartPanel/Chart.tsx                |  6 +++++-
 app/src/components/ChartPanel/ChartActions.tsx         |  2 +-
 .../ChartPanel/ChartSettings/SettingsButton.tsx        |  6 +++++-
 app/src/components/Sidebar/CodeDiff/ChartPreview.tsx   | 10 +++++++++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/src/components/ChartPanel/Chart.tsx b/app/src/components/ChartPanel/Chart.tsx
index 0d5862c..ad3bcb0 100644
--- a/app/src/components/ChartPanel/Chart.tsx
+++ b/app/src/components/ChartPanel/Chart.tsx
@@ -52,7 +52,11 @@ function Chart(props: Props) {
   }, [props.parameters])
 
   return (
-    <Paper style={{ padding: '8px' }}>
+    <Paper
+      style={{ padding: '8px' }}
+      data-test-type="ChartPaper"
+      data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+    >
       <div style={{ display: 'flex' }}>
         <div style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
           <ChartTitle parameters={parameters} />
diff --git a/app/src/components/ChartPanel/ChartActions.tsx b/app/src/components/ChartPanel/ChartActions.tsx
index 1b25ec3..c10b77c 100644
--- a/app/src/components/ChartPanel/ChartActions.tsx
+++ b/app/src/components/ChartPanel/ChartActions.tsx
@@ -19,7 +19,7 @@ export function ChartActions(props: {
       </CustomIconButton>
       <SettingsButton parameters={props.parameters} />
       <CustomIconButton tooltip="Remove chart" onClick={props.onRemove}>
-        <Clear />
+        <Clear data-test-type="RemoveChart" data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`} />
       </CustomIconButton>
     </div>
   )
diff --git a/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx b/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx
index bb8efc6..02002a3 100644
--- a/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx
@@ -19,7 +19,11 @@ export function SettingsButton(props: { parameters: ChartParameters }) {
     <span>
       <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
       <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
-        <MoreVertIcon ref={settingsRef as any} />
+        <MoreVertIcon
+          ref={settingsRef as any}
+          data-test-type="ChartSettings"
+          data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+        />
       </CustomIconButton>
     </span>
   )
diff --git a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
index 4c87183..e2b261e 100644
--- a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
+++ b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
@@ -47,11 +47,19 @@ function ChartPreview(props: Props) {
         onMouseEnter={mouseOver}
         onMouseLeave={mouseOut}
         onClick={onClick}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
       />
     </Tooltip>
   ) : (
     <Tooltip title="Add to chart panel, not enough data for preview">
-      <ShowChart onClick={onClick} className={props.classes.icon} style={{ color: '#aaa' }} />
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
     </Tooltip>
   )