Data 2997 expand cypress tests (#35)

* DATA-2997 expand cypress tests * Address PR comments * Update snapshot tests * Address PR comments * Address PR comments * Fix edit chart using editor cypress test
datadotworld · Oct 9, 2019 · 19db74a · 19db74a
1 parent c4fe580
commit 19db74a
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 130 deletions.
diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
@@ -1,15 +1,25 @@
 const fetchMock = require('fetch-mock')
 
-describe('Chart Explorer', function() {
-  it('Visits the app', function() {
-    const visitOptions = {
+describe('Chart Builder', function() {
+  let visitOptions
+  beforeEach(function() {
+    visitOptions = {
       onBeforeLoad: win => {
         let fetch = fetchMock.sandbox()
         fetch.get('https://api.data.world/v0/user', this.profile)
         fetch.post(
           'https://api.data.world/v0/sql/data-society/iris-species?includeTableSchema=true',
           this.queryResponse
         )
+        fetch.post(
+          'https://api.data.world/v0/insights/data-society/iris-species',
+          {
+            message: 'Insight created successfully.',
+            saving: false,
+            uri:
+              'https://data.world/data-society/iris-species/insights/abcd-1234'
+          }
+        )
         fetch.get(
           'https://api.data.world/v0/datasets/data-society/iris-species',
           {
@@ -38,31 +48,29 @@ describe('Chart Explorer', function() {
 
     // set some chart options
     cy.get(
-      ':nth-child(1) > [data-test=encoding-bar] > .css-1y3q4ke > .react-select__control > .react-select__indicators > .react-select__indicator'
+      '[data-test=encoding-container-0] > [data-test=encoding-bar]'
     ).click()
 
     cy.get('#react-select-4-option-1').click()
 
-    cy.get(
-      ':nth-child(2) > [data-test=encoding-bar] > .css-1y3q4ke > .react-select__control > .react-select__indicators > .react-select__indicator'
-    ).click()
+    cy.get('[data-test=encoding-container-1]> [data-test=encoding-bar]').click()
 
     cy.get('#react-select-6-option-2').click()
 
-    cy.get(
-      '#configure-tabs-pane-builder > :nth-child(2) > .react-select__control > .react-select__indicators > .react-select__indicator'
-    ).click()
+    cy.get('[data-test=chart-type-selector]').click()
 
     cy.get('#react-select-2-option-3').click()
+  })
 
+  it('Should toggle advanced options and ensure chart and title exist', function() {
     // toggle some advanced options
-    cy.get('[data-test=encoding-container]:nth-child(1)').within(() => {
+    cy.get('[data-test=encoding-container-0]').within(() => {
       cy.get('[data-test=toggle-adv-config]').click()
       cy.get('[data-test=bin-yes]').click()
       cy.get('[data-test=toggle-adv-config]').click()
     })
 
-    cy.get('[data-test=encoding-container]:nth-child(2)').within(() => {
+    cy.get('[data-test=encoding-container-1]').within(() => {
       cy.get('[data-test=toggle-adv-config]').click()
       cy.get('[data-test=zero-no]').click()
       cy.get('[data-test=toggle-adv-config]').click()
@@ -72,37 +80,97 @@ describe('Chart Explorer', function() {
     cy.get('[data-test=add-encoding]').click()
 
     cy.get(
-      ':nth-child(4) > [data-test=encoding-bar] > [data-test=toggle-adv-config]'
+      '[data-test=encoding-container-3]> [data-test=encoding-bar] > [data-test=toggle-adv-config]'
     ).click()
-    cy.get('[data-test=rm-encoding]').click()
-
-    // check for editor existence
-    cy.get('#configure-tabs-tab-editor').click()
-    cy.get('.monaco-editor')
-    cy.get('#configure-tabs-tab-builder').click()
 
+    cy.get('[data-test=rm-encoding]').click()
+    cy.get(
+      '[data-test=encoding-container-1] > [data-test=encoding-bar] > [data-test=toggle-adv-config]'
+    )
     // check that titles work
     cy.get('[data-test=chart-title]').type('test title')
     cy.get('svg .role-title').contains('test title')
 
     // check that chart exists
     cy.get('[data-test=vega-embed]')
 
-    cy.screenshot('page with viz')
+    cy.get('[data-test=license-open]').click()
+    cy.get('[data-test=license-text]').contains('cypress license text')
+  })
+
+  it('Should be able to edit chart using editor', function() {
+    cy.get('#configure-tabs-tab-editor').click()
 
-    // check download options
+    cy.get('.inputarea')
+      .type('{rightarrow}')
+      .type('"title": "test 123",')
+
+    cy.get('#configure-tabs-tab-builder').click()
+
+    cy.get('svg .role-title').contains('test 123')
+  })
+
+  it('Should be able to download a chart', function() {
     cy.get('#dropdown-download').click()
 
-    cy.get('.open > .dropdown-menu > :nth-child(3) > a').trigger('mousedown')
-    cy.get('.open > .dropdown-menu > :nth-child(3) > a').should($m => {
+    // download as a vega-lite file format
+    cy.get('[data-test=download-vega-lite]').trigger('mousedown')
+    cy.get('[data-test=download-vega-lite]').should($m => {
       expect($m).to.have.length(1)
       expect($m.attr('href')).to.match(/^blob/)
     })
-    cy.get('#dropdown-download').click()
 
-    // check download as insight
+    // download as a vega file format
+    cy.get('[data-test=download-vega]').trigger('mousedown')
+    cy.get('[data-test=download-vega]').should($m => {
+      expect($m).to.have.length(1)
+      expect($m.attr('href')).to.match(/^blob/)
+    })
+
+    // download as a png file format
+    cy.get('[data-test=download-png]').trigger('mousedown')
+    cy.get('[data-test=download-png]').should($m => {
+      expect($m).to.have.length(1)
+      expect($m.attr('href')).to.match(/^data:image\/png/)
+    })
+
+    // download as a svg file format
+    cy.get('[data-test=download-svg]').trigger('mousedown')
+    cy.get('[data-test=download-svg]').should($m => {
+      expect($m).to.have.length(1)
+      expect($m.attr('href')).to.match(/^blob/)
+    })
+
+    // download as a HTML file format
+    cy.get('[data-test=download-html]').trigger('mousedown')
+    cy.get('[data-test=download-html]').should($m => {
+      expect($m).to.have.length(1)
+      expect($m.attr('href')).to.match(/^blob/)
+    })
+  })
+
+  it('Should be able to be shared', function() {
+    cy.get('[data-test=chart-title]').type('test title')
+
+    // share as an insight
+    cy.get('#dropdown-save-ddw').click()
+    cy.get('[data-test=share-insight]').click()
+    cy.get('.modal')
+
+    cy.get('[data-test=insight-save-vega-lite-checkbox]').uncheck()
+    cy.get('.btn-primary').click()
+
+    cy.get('.alert-link').should(
+      'have.attr',
+      'href',
+      'https://data.world/data-society/iris-species/insights/abcd-1234'
+    )
+
+    cy.get('.modal-footer > .btn').click()
+
+    // share as a file
     cy.get('#dropdown-save-ddw').click()
-    cy.get('.open > .dropdown-menu > :nth-child(3) > a').click()
+    cy.get('[data-test=share-file]').click()
     cy.get('.modal')
 
     cy.get('.btn-primary').click()
@@ -115,18 +183,24 @@ describe('Chart Explorer', function() {
 
     cy.get('.modal-footer > .btn').click()
 
-    // check share link
+    // share as a markdown comment
     cy.get('#dropdown-save-ddw').click()
-    cy.get('[data-test=share-btn]').click()
+    cy.get('[data-test=share-markdown]').click()
+    cy.get('.modal')
 
-    cy.get('[data-test=share-url-text] input').then($i => {
-      cy.visit($i.val(), visitOptions)
+    cy.get('[data-test=share-markdown-embed] input').then($i => {
+      expect($i.val()).to.have.string('test title')
+      expect($i.val()).to.have.string('```')
     })
 
-    cy.get('[data-test=vega-embed]')
-    cy.screenshot('page with viz after reload')
+    cy.get('.modal-footer > .btn').click()
 
-    cy.get('[data-test=license-open]').click()
-    cy.get('[data-test=license-text]').contains('cypress license text')
+    // share as a URL
+    cy.get('#dropdown-save-ddw').click()
+    cy.get('[data-test=share-url]').click()
+
+    cy.get('[data-test=share-url-text] input').then($i => {
+      cy.visit($i.val(), visitOptions)
+    })
   })
 })
diff --git a/src/components/DownloadButton.js b/src/components/DownloadButton.js
@@ -19,7 +19,8 @@ type DownloadMenuItemProps = {
   extension: string,
   baseName: string,
   children: Node,
-  getDownloadUrl: () => string
+  getDownloadUrl: () => string,
+  'data-test'?: string
 }
 
 export class DownloadMenuItem extends Component<DownloadMenuItemProps> {
@@ -37,6 +38,7 @@ export class DownloadMenuItem extends Component<DownloadMenuItemProps> {
 
     return (
       <MenuItem
+        data-test={this.props['data-test']}
         download={`${baseName}.${extension}`}
         onMouseDown={this.handleMouseDown}
         href="##"
@@ -69,6 +71,7 @@ export class DownloadButton extends Component<Props> {
       >
         <MenuItem header>JSON</MenuItem>
         <DownloadMenuItem
+          data-test="download-vega-lite"
           baseName="vega-lite"
           extension="vl.json"
           getDownloadUrl={() => {
@@ -81,6 +84,7 @@ export class DownloadButton extends Component<Props> {
           Vega-Lite <span className="text-muted">(.vl.json)</span>
         </DownloadMenuItem>
         <DownloadMenuItem
+          data-test="download-vega"
           baseName="vega"
           extension="vg.json"
           getDownloadUrl={() => {
@@ -96,6 +100,7 @@ export class DownloadButton extends Component<Props> {
         </DownloadMenuItem>
         <MenuItem header>Image</MenuItem>
         <DownloadMenuItem
+          data-test="download-png"
           baseName="download"
           extension="png"
           getDownloadUrl={() => {
@@ -106,6 +111,7 @@ export class DownloadButton extends Component<Props> {
           PNG <span className="text-muted">(.png)</span>
         </DownloadMenuItem>
         <DownloadMenuItem
+          data-test="download-svg"
           baseName="download"
           extension="svg"
           getDownloadUrl={() => {
@@ -117,6 +123,7 @@ export class DownloadButton extends Component<Props> {
         </DownloadMenuItem>
         <MenuItem header>HTML</MenuItem>
         <DownloadMenuItem
+          data-test="download-html"
           baseName="download"
           extension="html"
           getDownloadUrl={() => {

diff --git a/src/components/Encoding.js b/src/components/Encoding.js
@@ -88,7 +88,8 @@ type EncodingProps = {
   fields: Array<FieldType>,
   encodings: Array<EncLineType>,
   encoding: EncLineType,
-  disabled: boolean
+  disabled: boolean,
+  'data-test'?: string
 }
 
 class Encoding extends Component<EncodingProps> {
@@ -104,7 +105,7 @@ class Encoding extends Component<EncodingProps> {
     const { fields, encoding, encodings, disabled } = this.props
 
     return (
-      <div className={classes.container} data-test="encoding-container">
+      <div className={classes.container} data-test={this.props['data-test']}>
         <div className={classes.bar} data-test="encoding-bar">
           <Select
             classNamePrefix="react-select"

diff --git a/src/components/SaveAsInsightModal.js b/src/components/SaveAsInsightModal.js
@@ -188,6 +188,7 @@ class SaveAsInsightModal extends Component<Props> {
                   />
                 </FormGroup>
                 <Checkbox
+                  data-test="insight-save-vega-lite-checkbox"
                   checked={this.saveAsFile}
                   onChange={e => (this.saveAsFile = e.target.checked)}
                 >

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -47,31 +47,33 @@ class Sidebar extends Component<Props> {
               </Alert>
             )}
             <div className={classes.title}>Marks</div>
-            <SimpleSelect
-              values={[
-                'area',
-                'bar',
-                'line',
-                'point',
-                'tick',
-                'rect',
-                'circle',
-                'square'
-              ]}
-              labels={[
-                'Area',
-                'Bar',
-                'Line',
-                'Point',
-                'Tick',
-                'Rect',
-                'Circle',
-                'Square'
-              ]}
-              value={store.config.mark}
-              onChange={store.config.setMark}
-              disabled={store.config.hasManualSpec}
-            />
+            <div data-test="chart-type-selector">
+              <SimpleSelect
+                values={[
+                  'area',
+                  'bar',
+                  'line',
+                  'point',
+                  'tick',
+                  'rect',
+                  'circle',
+                  'square'
+                ]}
+                labels={[
+                  'Area',
+                  'Bar',
+                  'Line',
+                  'Point',
+                  'Tick',
+                  'Rect',
+                  'Circle',
+                  'Square'
+                ]}
+                value={store.config.mark}
+                onChange={store.config.setMark}
+                disabled={store.config.hasManualSpec}
+              />
+            </div>
             <div className={classes.title}>
               Configuration
               <Button
@@ -88,9 +90,10 @@ class Sidebar extends Component<Props> {
             </div>
             {fields && (
               <div data-test="encodings-list">
-                {store.config.encodings.map(e => {
+                {store.config.encodings.map((e, index) => {
                   return (
                     <Encoding
+                      data-test={`encoding-container-${index}`}
                       key={e._id}
                       fields={fields}
                       encodings={store.config.encodings}