From 9bb5bc1aab84731d7c9405d3b47b33bfebcb6802 Mon Sep 17 00:00:00 2001
From: Pim van Nierop <pim@thehyve.nl>
Date: Sat, 14 May 2022 17:44:28 +0200
Subject: [PATCH] Fix e2e-tests

---
 .../study-view-custom-bins.screenshot.spec.js | 19 ++++++++-----------
 .../charts/barChart/CustomBinsModal.tsx       |  3 +++
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/end-to-end-test/local/specs/study-view-custom-bins.screenshot.spec.js b/end-to-end-test/local/specs/study-view-custom-bins.screenshot.spec.js
index 3f13da8b741..2c7465f9fee 100644
--- a/end-to-end-test/local/specs/study-view-custom-bins.screenshot.spec.js
+++ b/end-to-end-test/local/specs/study-view-custom-bins.screenshot.spec.js
@@ -13,8 +13,9 @@ const MUTATION_COUNT_HAMBURGER_ICON = `${MUTATION_COUNT_CHART} [data-test="chart
 const MUTATION_COUNT_MENU = `${MUTATION_COUNT_CHART} [data-test="chart-header-hamburger-icon-menu"]`;
 const CUSTOM_BINS_MENU = `.modal-dialog`;
 const UPDATE_BUTTON = '.btn-sm';
-const BIN_SIZE = 'span=Bin size';
-const MIN_VALUE = 'span=Min value';
+const BIN_SIZE_INPUT = '[data-test=bin-size-input]';
+const MIN_VALUE_INPUT = '[data-test=anchorvalue-input]';
+const CUSTOM_BINS_TEXTAREA = '[data-test=custom-bins-textarea]';
 
 describe('Custom Bins menu in study view chart header', function() {
     beforeEach(() => {
@@ -40,14 +41,9 @@ describe('Custom Bins menu in study view chart header', function() {
 
     it('generates bins using min and bin size input fields', () => {
         selectMenuOption('label=Generate bins');
-        $(BIN_SIZE)
-            .$('..')
-            .$('.input-sm')
-            .setValue('2');
-        $(MIN_VALUE)
-            .$('..')
-            .$('.input-sm')
-            .setValue('2');
+        $(BIN_SIZE_INPUT).waitForExist();
+        $(BIN_SIZE_INPUT).setValue('2');
+        $(MIN_VALUE_INPUT).setValue('2');
         clickUpdate();
         $('body').moveTo();
         const res = checkElementWithMouseDisabled(MUTATION_COUNT_CHART);
@@ -56,7 +52,8 @@ describe('Custom Bins menu in study view chart header', function() {
 
     it('creates custom bins using custom bins input field', () => {
         selectMenuOption('label=Custom bins');
-        $$('.input-sm')[2].setValue('0,10,20,30,40');
+        $(CUSTOM_BINS_TEXTAREA).waitForExist();
+        $(CUSTOM_BINS_TEXTAREA).setValue('0,10,20,30,40');
         clickUpdate();
         $('body').moveTo();
         const res = checkElementWithMouseDisabled(MUTATION_COUNT_CHART);
diff --git a/src/pages/studyView/charts/barChart/CustomBinsModal.tsx b/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
index 0328a4c834d..8cd4cf4eb2a 100644
--- a/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
+++ b/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
@@ -223,6 +223,7 @@ export default class CustomBinsModal extends React.Component<
                                 <FormControl
                                     type="text"
                                     style={{ width: 70 }}
+                                    data-test={'bin-size-input'}
                                     defaultValue={
                                         this.currentBinsGeneratorConfig.binSize
                                     }
@@ -245,6 +246,7 @@ export default class CustomBinsModal extends React.Component<
                                 <FormControl
                                     type="text"
                                     style={{ width: 70 }}
+                                    data-test={'anchorvalue-input'}
                                     defaultValue={
                                         this.currentBinsGeneratorConfig
                                             .anchorValue
@@ -274,6 +276,7 @@ export default class CustomBinsModal extends React.Component<
                             <textarea
                                 style={{ resize: 'none' }}
                                 rows={5}
+                                data-test={'custom-bins-textarea'}
                                 value={this.currentBinsValue}
                                 className="form-control input-sm"
                                 onChange={event =>