[IN-4716] Update vega lite dependencies and react script (#81)

* Update vega lite dependencies and react script * update ci node version * update test * update cypress * Replace libpython-dev with python-dev * update python package * adds libatk-bridge2.0-dev * Add gtk library * use circleci orbs to run cypress test * update image * Add cypress test command to build
datadotworld · May 2, 2024 · bfa9158 · bfa9158
1 parent e304a8a
commit bfa9158
Show file tree

Hide file tree

Showing 22 changed files with 40,121 additions and 15,417 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -3,10 +3,6 @@ commands:
   cypress_tests:
     description: Setup and run cypress tests
     steps:
-      - run:
-          name: Install integration test deps
-          command: |
-            sudo apt-get update && sudo apt-get install -qq -y python-pip libpython-dev xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
       - run:
           name: Run server for tests
           command: yarn http-server build/ -p 3500
@@ -30,7 +26,7 @@ commands:
 jobs:
   build:
     docker:
-      - image: circleci/node:10
+      - image: cypress/base:latest
     environment:
       BASH_ENV: ~/.env
       CI: true
@@ -53,7 +49,7 @@ jobs:
       - cypress_tests
   build_main:
     docker:
-      - image: circleci/node:10
+      - image: cimg/node:20.7.0
     environment:
       BASH_ENV: ~/.env
     steps:

diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,32 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  blockHosts: ['*.google-analytics.com', '*.mxpnl.com'],
+
+  hosts: {
+    'api.data.world': '127.0.0.1'
+  },
+
+  reporter: 'junit',
+
+  reporterOptions: {
+    mochaFile: 'cypress/junit-results/my-test-output.xml',
+    toConsole: true
+  },
+
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3500'
+  },
+
+  component: {
+    devServer: {
+      framework: 'create-react-app',
+      bundler: 'webpack'
+    }
+  }
+})
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/integration/spec.js → cypress/e2e/spec.cy.js b/cypress/integration/spec.js → cypress/e2e/spec.cy.js
@@ -38,6 +38,8 @@ describe('Chart Builder', function() {
       }
     }
 
+    cy.once('uncaught:exception', () => false)
+
     cy.fixture('profile').as('profile')
     cy.fixture('queryResponse').as('queryResponse')
 

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/cypress/support/component.js b/cypress/support/component.js
@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/cypress/support/index.js → cypress/support/e2e.js b/cypress/support/index.js → cypress/support/e2e.js
diff --git a/package.json b/package.json
@@ -28,23 +28,24 @@
     "react-measure": "3.0.0-rc.3",
     "react-monaco-editor": "0.14.1",
     "react-router-dom": "4.3.1",
-    "react-scripts": "2.0.0-next.3e165448",
+    "react-scripts": "^5.0.1",
     "react-select": "2.0.0",
-    "vega": "5.6.0",
-    "vega-lite": "3.4.0",
-    "vega-tooltip": "0.13.0"
+    "vega": "5.28.0",
+    "vega-lite": "5.18.0",
+    "vega-tooltip": "0.34.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "dev": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject",
     "flow": "flow",
     "precommit": "pretty-quick --staged"
   },
   "devDependencies": {
-    "cypress": "3.4.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "cypress": "13.8.1",
     "fetch-mock": "6.5.2",
     "http-server": "0.11.1",
     "husky": "0.14.3",

diff --git a/src/components/Editor.js b/src/components/Editor.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 import debounce from 'lodash/debounce'
 import MonacoEditor from 'react-monaco-editor'
 import { Measure } from 'react-measure'
-import vegaLiteSchema from '../util/vega-lite-schema-v2.json'
+import vegaLiteSchema from '../util/vega-lite-schema-v5.json'
 import classes from './Editor.module.css'
 
 const monacoJsonSchema = {
-  uri: 'https://vega.github.io/schema/vega-lite/v2.json',
+  uri: 'https://vega.github.io/schema/vega-lite/v5.json',
   schema: vegaLiteSchema,
   fileMatch: ['*']
 }

diff --git a/src/components/SidebarFooter.js b/src/components/SidebarFooter.js
@@ -1,5 +1,4 @@
 // @flow
-/* eslint jsx-a11y/anchor-is-valid: 0 */
 import React, { Component } from 'react'
 import { decorate, observable } from 'mobx'
 import { observer } from 'mobx-react'

diff --git a/src/components/__tests__/__snapshots__/CopyField.spec.js.snap b/src/components/__tests__/__snapshots__/CopyField.spec.js.snap
@@ -14,7 +14,6 @@ exports[`renders 1`] = `
   >
     <input
       className="form-control"
-      id={undefined}
       readOnly={true}
       type="text"
       value="test copy"

diff --git a/src/components/__tests__/__snapshots__/DatasetSelector.spec.js.snap b/src/components/__tests__/__snapshots__/DatasetSelector.spec.js.snap
@@ -9,7 +9,6 @@ exports[`renders loading 1`] = `
   >
     <input
       className="form-control"
-      id={undefined}
       readOnly={true}
       type="text"
       value="Loading..."

diff --git a/src/components/__tests__/__snapshots__/DownloadButton.spec.js.snap b/src/components/__tests__/__snapshots__/DownloadButton.spec.js.snap
@@ -4,10 +4,8 @@ exports[`DownloadMenuItem renders 1`] = `
 <li
   className=""
   role="presentation"
-  style={undefined}
 >
   <a
-    data-test={undefined}
     download="testing.json"
     href="##"
     onClick={[Function]}
@@ -49,14 +47,12 @@ exports[`renders 1`] = `
       className="dropdown-header"
       onKeyDown={[Function]}
       role="heading"
-      style={undefined}
     >
       JSON
     </li>
     <li
       className=""
       role="presentation"
-      style={undefined}
     >
       <a
         data-test="download-vega-lite"
@@ -79,7 +75,6 @@ exports[`renders 1`] = `
     <li
       className=""
       role="presentation"
-      style={undefined}
     >
       <a
         data-test="download-vega"
@@ -103,14 +98,12 @@ exports[`renders 1`] = `
       className="dropdown-header"
       onKeyDown={[Function]}
       role="heading"
-      style={undefined}
     >
       Image
     </li>
     <li
       className=""
       role="presentation"
-      style={undefined}
     >
       <a
         data-test="download-png"
@@ -133,7 +126,6 @@ exports[`renders 1`] = `
     <li
       className=""
       role="presentation"
-      style={undefined}
     >
       <a
         data-test="download-svg"
@@ -157,14 +149,12 @@ exports[`renders 1`] = `
       className="dropdown-header"
       onKeyDown={[Function]}
       role="heading"
-      style={undefined}
     >
       HTML
     </li>
     <li
       className=""
       role="presentation"
-      style={undefined}
     >
       <a
         data-test="download-html"

diff --git a/src/components/__tests__/__snapshots__/Encoding.spec.js.snap b/src/components/__tests__/__snapshots__/Encoding.spec.js.snap
@@ -3,7 +3,6 @@
 exports[`renders 1`] = `
 <div
   className="container"
-  data-test={undefined}
 >
   <div
     className="bar"
@@ -165,7 +164,6 @@ exports[`renders 1`] = `
           "valueContainer": [Function],
         }
       }
-      value={undefined}
     />
     <button
       className="btn btn-xs btn-default"

diff --git a/src/components/__tests__/__snapshots__/FieldSelect.spec.js.snap b/src/components/__tests__/__snapshots__/FieldSelect.spec.js.snap
@@ -34,6 +34,5 @@ exports[`renders 1`] = `
       "valueContainer": [Function],
     }
   }
-  value={undefined}
 />
 `;
diff --git a/src/components/__tests__/__snapshots__/GlobalOptions.spec.js.snap b/src/components/__tests__/__snapshots__/GlobalOptions.spec.js.snap
@@ -14,7 +14,6 @@ exports[`renders 1`] = `
         <input
           className="form-control"
           disabled={false}
-          id={undefined}
           onChange={[Function]}
           placeholder="Auto"
           type="number"
@@ -51,7 +50,6 @@ exports[`renders 1`] = `
         <input
           className="form-control"
           disabled={false}
-          id={undefined}
           onChange={[Function]}
           placeholder="Auto"
           type="number"

diff --git a/src/components/__tests__/__snapshots__/Sidebar.spec.js.snap b/src/components/__tests__/__snapshots__/Sidebar.spec.js.snap
@@ -7,7 +7,6 @@ exports[`renders 1`] = `
   <div
     className="editTab"
     id="configure-tabs"
-    style={undefined}
   >
     <ul
       className="nav nav-tabs"
@@ -16,7 +15,6 @@ exports[`renders 1`] = `
       <li
         className="active"
         role="presentation"
-        style={undefined}
       >
         <a
           aria-controls="configure-tabs-pane-builder"
@@ -26,15 +24,13 @@ exports[`renders 1`] = `
           onClick={[Function]}
           onKeyDown={[Function]}
           role="tab"
-          tabIndex={undefined}
         >
           Visual Builder
         </a>
       </li>
       <li
         className=""
         role="presentation"
-        style={undefined}
       >
         <a
           aria-controls="configure-tabs-pane-editor"
@@ -90,7 +86,6 @@ exports[`renders 1`] = `
         >
           <react-select
             classNamePrefix="react-select"
-            isClearable={undefined}
             isDisabled={false}
             menuPortalTarget={<body />}
             onChange={[Function]}
@@ -130,7 +125,6 @@ exports[`renders 1`] = `
                 },
               ]
             }
-            placeholder={undefined}
             styles={
               Object {
                 "clearIndicator": [Function],

diff --git a/src/util/Store.js b/src/util/Store.js
@@ -243,7 +243,7 @@ export const ChartConfig = types
       })
 
       return {
-        $schema: 'https://vega.github.io/schema/vega-lite/v2.json',
+        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
         title: self.title != null ? self.title : undefined,
         width: self.hasFacetField
           ? undefined

diff --git a/src/util/__test__/__snapshots__/Store.spec.js.snap b/src/util/__test__/__snapshots__/Store.spec.js.snap
@@ -64,7 +64,7 @@ Object {
 
 exports[`ChartConfig sets a few encodings 2`] = `
 Object {
-  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "autosize": undefined,
   "config": Object {
     "background": "#ffffff",
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,8 @@ describe('Chart Builder', function() { @@
           }
         }
+        cy.once('uncaught:exception', () => false)
         cy.fixture('profile').as('profile')
         cy.fixture('queryResponse').as('queryResponse')
@@ Expand Down @@