Vue 3.5 and other dependencies

.github/workflows/build_and_release.yml

@@ -38,7 +38,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.17.1
+          node-version: '20'
       - run: npm install
       - run: npm run build-bundle
 
@@ -54,7 +54,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           registry-url: 'https://registry.npmjs.org'
-          node-version: 18.17.1
+          node-version: '20'
       - name: "Release ${{ github.event.inputs.release_type }}"
         run: |
           git config user.name github-actions

.github/workflows/deploy-docs.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18.17.1'
+          node-version: '20'
           cache: npm
 
       - name: Install dependencies

.gitignore

@@ -16,3 +16,4 @@ docs/.vitepress/cache
 docs/components
 .vitepress
 **/components.d.ts
+cypress.env.json

cypress.config.js

@@ -10,6 +10,13 @@ export default {
   reporterOptions: {
     configFile: "reporter-config.json",
   },
+  expose: {
+    visualRegressionType: 'regression',
+    visualRegressionBaseDirectory: 'cypress/snapshots/MapContent.cy.js/base',
+    visualRegressionDiffDirectory: 'cypress/snapshots/diff',
+    visualRegressionGenerateDiff: 'always',
+    visualRegressionFailSilently: false,
+  },
   component: {
     viewportWidth: 1440,
     viewportHeight: 900,
@@ -18,13 +25,6 @@ export default {
       framework: "vue",
       bundler: "vite",
     },
-    env: {
-      visualRegressionType: 'regression',
-      visualRegressionBaseDirectory: 'cypress/snapshots/MapContent.cy.js/base',
-      visualRegressionDiffDirectory: 'cypress/snapshots/diff',
-      visualRegressionGenerateDiff: 'always',
-      visualRegressionFailSilently: false,
-    },
     screenshotsFolder: './cypress/snapshots',
     setupNodeEvents(on, config) {
       on('task', {
@@ -34,6 +34,7 @@ export default {
         },
       });
       configureVisualRegression(on);
+      return config;
     },
     trashAssetsBeforeRuns: false,
   },

cypress/component/MapContent.cy.js

@@ -41,16 +41,19 @@ describe('MapContent', () => {
 
     //cy.intercept('GET', 'https://mapcore-demo.org/current/flatmap/v2/**');
 
-    cy.mount(MapContent, {
-      props: {
-        options: {
-          sparcApi: "https://mock-test/sparc-api/",
-          flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
-          algoliaKey: Cypress.env('ALGOLIA_KEY'),
-          algoliaId: Cypress.env('ALGOLIA_ID'),
-        }
-      },
-    });
+    cy.env(['ALGOLIA_KEY', 'ALGOLIA_ID']).then(({ ALGOLIA_KEY, ALGOLIA_ID }) => {
+      cy.mount(MapContent, {
+        props: {
+          options: {
+            sparcApi: "https://mock-test/sparc-api/",
+            flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
+            algoliaKey: ALGOLIA_KEY,
+            algoliaId: ALGOLIA_ID,
+          }
+        },
+      })
+    })
+
 
     let mockClipboardText = '';
 
@@ -213,19 +216,19 @@ describe('MapContent', () => {
 
     //Intercept the request and stub it with preloaded fixture
     cy.get('@metadata').then((metadata) => {
-      cy.intercept('/sparc-api/s3-resource/999/1/files/derivative/sub-54-8/scaffold/54-8_metadata.json?s3BucketName=pennsieve-prod-discover-publish-use1',
+      cy.intercept('/sparc-api/s3-resource/999/1/files/derivative/sub-54-5/scaffold/54-5_metadata.json?s3BucketName=pennsieve-prod-discover-publish-use1',
         {statusCode: 200, body: metadata});
     })
 
     //Intercept the request and stub it with preloaded fixture
     cy.get('@primitive').then((primitive) => {
-      cy.intercept('/sparc-api/s3-resource/999/1/files/derivative/sub-54-8/scaffold/cube_2.json?s3BucketName=pennsieve-prod-discover-publish-use1',
+      cy.intercept('/sparc-api/s3-resource/999/1/files/derivative/sub-54-5/scaffold/cube_2.json?s3BucketName=pennsieve-prod-discover-publish-use1',
         {statusCode: 200, body: primitive}).as("scaffoldResponse");
     })
 
     //Check for scaffolds and open it, should have three items in select now
     cy.get('.box-card .container button').contains('Scaffolds (2)').click();
-    cy.get('.gallery-strip').contains('54-8_metadata.json').should("exist");
+    cy.get('.gallery-strip .next').should('exist').click(); // TODO: to add after sidebar update.
     cy.get('.box-card :nth-child(1) > .details .el-button').filter(':visible').click();
     cy.get('.pane-1.contentvuer').should('have.length', 1);
     cy.get('.pane-1 .toolbar > .toolbar-flex-container > .el-select > .el-select__wrapper').should('exist').click();

cypress/component/NeuronConnection.cy.js

@@ -48,20 +48,22 @@ describe('MapContent', () => {
       cy.intercept('/sparc-api/dataset_info/anatomy?identifier=130', {statusCode: 200, body: anatomy_dataset}).as("anatomyResponse");
     })
 
-    cy.mount(MapContent, {
-      props: {
-        options: {
-          sparcApi: "https://mock-test/sparc-api/",
-          flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
-          algoliaKey: Cypress.env('ALGOLIA_KEY'),
-          algoliaId: Cypress.env('ALGOLIA_ID'),
+    cy.env(['ALGOLIA_KEY', 'ALGOLIA_ID']).then(({ ALGOLIA_KEY, ALGOLIA_ID }) => {
+      cy.mount(MapContent, {
+        props: {
+          options: {
+            sparcApi: "https://mock-test/sparc-api/",
+            flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
+            algoliaKey: ALGOLIA_KEY,
+            algoliaId: ALGOLIA_ID,
+          },
         },
-      },
-      global: {
-        stubs: {
-          transition: false, // Disable transition to avoid el-tag issue - PR #432 for more details
-        }
-      },
+        global: {
+          stubs: {
+            transition: false, // Disable transition to avoid el-tag issue - PR #432 for more details
+          }
+        },
+      })
     });
 
     cy.get('.mapcontent').invoke('attr', 'style', 'height: 880px').should('have.attr', 'style', 'height: 880px');

cypress/support/commands.js

@@ -26,6 +26,24 @@
 
 import 'cypress-wait-until';
 
+// Retries clear+type until the input's value matches, to work around inputs that
+// occasionally drop keystrokes or get detached (e.g., Element Plus fields re-rendering mid-type).
+Cypress.Commands.add('typeReliably', (selector, text, options = {}) => {
+  const attempt = (retriesLeft) => {
+    cy.get(selector)
+      .clear(options)
+      .type(text, { delay: 50, ...options });
+
+    cy.get(selector).then(($el) => {
+      if ($el.val() !== text && retriesLeft > 0) {
+        attempt(retriesLeft - 1);
+      }
+    });
+  };
+  attempt(5);
+  return cy.get(selector);
+});
+
 Cypress.on('uncaught:exception', (err) => {
   // returning false here prevents Cypress from
   // failing the test
@@ -171,12 +189,13 @@ Cypress.Commands.add('testSetCurrentEntry', (entry, species) => {
 Cypress.Commands.add('checkNeuronConnectionMode', (mode, searchTerm) => {
   cy.get('.viewing-mode-selector .el-dropdown').as('viewingModes').trigger('mouseenter'); // open
   cy.get('@viewingModes').contains(mode).click();
-  cy.get('.search-box.el-autocomplete > .el-input > .el-input__wrapper > .el-input__inner').should('exist').type(searchTerm);
+  cy.get('.search-box.el-autocomplete > .el-input > .el-input__wrapper > .el-input__inner').should('exist');
+  cy.typeReliably('.search-box.el-autocomplete > .el-input > .el-input__wrapper > .el-input__inner', searchTerm);
   cy.get('.search-container > .map-icon > use').should('exist').click();
   cy.wait(2000);
   const tagTerm = `${mode[0]}:${searchTerm}`
-  cy.get('.sidebar-container .filters').should('exist').contains(tagTerm);
-  cy.wait(10000);
+  cy.get('.sidebar-container .content-card:visible .filters').should('exist').contains(tagTerm);
+  cy.wait(4000);
   cy.get('.connectivity-card-container > .connectivity-card').should('have.length.greaterThan', 0);
   cy.get('.sidebar-container .el-card:visible .header .is-link > span').contains('Reset').click({ multiple: true })
   cy.get('.search-box.el-autocomplete > .el-input > .el-input__wrapper > .el-input__inner').should('exist').clear();
@@ -186,7 +205,7 @@ Cypress.Commands.add('connectivitySearch', (searchTerm) => {
   cy.get('[style=""] > .el-card__header > .header > .search-input-container > .el-input > .el-input__wrapper > .el-input__inner').clear();
   cy.get('[style=""] > .el-card__header > .header > .search-input-container > .el-input > .el-input__wrapper > .el-input__inner').type(searchTerm);
   cy.get('[style=""] > .el-card__header > .header > .el-button--primary').click();
-  cy.wait(10000);
+  cy.wait(4000);
   cy.get('.connectivity-card-container > .connectivity-card').should('have.length.greaterThan', 0);
   cy.get('.dataset-results-feedback:visible').should('exist').contains('results');
 });

eslint.config.js

@@ -0,0 +1,33 @@
+import { includeIgnoreFile } from "eslint/config";
+import js from "@eslint/js";
+import cypress from "eslint-plugin-cypress";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+import { fileURLToPath } from "node:url";
+
+const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url));
+
+export default [
+  includeIgnoreFile(gitignorePath),
+  {
+    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+  },
+  js.configs.recommended,
+  ...vue.configs["flat/essential"],
+  {
+    ...cypress.configs.recommended,
+    files: ["cypress/**/*.js"],
+  },
+  {
+    files: ["**/*.{js,vue}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {},
+  },
+];