add cypress test

grafana · Sep 6, 2021 · 47fe150 · 47fe150
1 parent 4dcc061
commit 47fe150
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 6 deletions.
diff --git a/cypress/integration/basic.ts b/cypress/integration/basic.ts
@@ -18,6 +18,15 @@ describe('basic test', () => {
     cy.location('pathname').should('eq', '/');
   });
 
+  it('updates flamegraph on app name change', () => {
+    cy.visit('/')
+    waitInDevMode(100);
+
+    cy.findByTestId('app-name-selector').select('pyroscope.server.cpu');
+    waitInDevMode(100);
+    cy.findByTestId('flamegraph-canvas').invoke('attr', 'data-appname').should('eq', 'pyroscope.server.cpu{}');
+  });
+
   it('view buttons should change view when clicked', () => {
     cy.visit('/')
     cy.findByTestId('btn-table-view').click();

diff --git a/webapp/__tests__/__snapshots__/NameSelector.spec.js.snap b/webapp/__tests__/__snapshots__/NameSelector.spec.js.snap
@@ -5,6 +5,7 @@ exports[`NameSelector render correctly NameSelector component 1`] = `
   Application: 
   <select
     className="label-select"
+    data-testid="app-name-selector"
     onChange={[Function]}
     value="hotrod.golang.customer"
   >

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx
@@ -549,6 +549,8 @@ class FlameGraph extends React.Component {
             <canvas
               className="flamegraph-canvas"
               height="0"
+              data-testid="flamegraph-canvas"
+              data-appname={this.props.label}
               ref={this.canvasRef}
               onClick={this.clickHandler}
               onMouseMove={this.mouseMoveHandler}

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/styles.css b/webapp/javascript/components/FlameGraph/FlameGraphComponent/styles.css
@@ -54,7 +54,7 @@
   height: 100%;
   display: flex;
   justify-content: center;
-  align-items: start;
+  align-items: flex-start;
   position: relative;
   padding: 60px 0;
 }

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx b/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx
@@ -214,11 +214,7 @@ class FlameGraphRenderer extends React.Component {
           format={this.parseFormat(this.state.flamebearer.format)}
           view={this.state.view}
           ExportData={ExportData}
-          label={
-            this.props.labels
-              ? this.props.labels.filter((x) => x.name === "__name__")[0].value
-              : ""
-          }
+          label={this.props.query}
         />
       ) : null;
 

diff --git a/webapp/javascript/components/NameSelector.jsx b/webapp/javascript/components/NameSelector.jsx
@@ -20,6 +20,7 @@ function NameSelector(props) {
       Application:&nbsp;
       <select
         className="label-select"
+        data-testid="app-name-selector"
         value={defaultValue}
         onChange={selectAppName}
       >