Vue3 upgrade

.babelrc

@@ -1,28 +1,14 @@
 {
   "presets": [
-    ["env", {
-      modules: false,
-      useBuiltIns: true,
-      targets: {
-        browsers: [
-          '> 1%',
-          'last 2 versions'
-        ]
+    ["@babel/preset-env", {
+      "useBuiltIns": "entry",
+      "targets": {
+        "node": "current"
       }
     }]
   ],
   "plugins": [
+    '@babel/plugin-transform-modules-commonjs',
     "transform-object-rest-spread"
-  ],
-  "env": {
-    "test": {
-       "presets": [
-        ["env", {
-          targets: {
-            "node": "current"
-          }
-        }]
-      ]
-    }
-  }
+  ]
 }

.github/workflows/node.js.yml

@@ -12,24 +12,25 @@ on:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
-    - run: npm run lint
+#    - run: npm run lint
     - run: npm run build
-    - run: npm test
+    - run: npm run cy:run
+#    - run: npm test
     - run: npm run e2e-ci
     - name: Upload E2E Test Report
       uses: actions/upload-artifact@v3

.github/workflows/pages.yml

@@ -32,22 +32,30 @@ defaults:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     steps:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Use Node.js 
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 20.x
           cache: 'npm'
       - run: npm ci
       - run: npm run build
 
   # Deployment job
       - name: Deploy 🚀
+        if: ${{ github.ref_name == 'master' }}
         uses: JamesIves/[email protected]
-        with:       
+        with:
           BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: public # The folder the action should deploy.
+          FOLDER: build # The folder the action should deploy.
+      - name: Test build
+        if: ${{ github.ref_name != 'master' }}
+        uses: JamesIves/[email protected]
+        with:
+          BRANCH: gh-pages-test # The branch the action should deploy to.
+          FOLDER: build # The folder the action should deploy.
+

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules/
+build/
 public/build.js
 public/build.js.map
 public/assets
@@ -8,7 +9,7 @@ yarn-error.log
 data-scripts/venv
 data-scripts/__pycache__
 data-scripts/*.pyc
-
+public/build
 # Editor directories and files
 .idea
 *.suo
@@ -17,4 +18,6 @@ data-scripts/*.pyc
 *.sln
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+cypress/screenshots/*
+cypress/videos/*

Dockerfile

@@ -1,3 +1,3 @@
-FROM node:14-alpine3.15
-  RUN apk update && apk add --no-cache bash
+FROM node:20-alpine3.18
+  RUN apk update && apk add --no-cache bash && apk add --no-cache python3
   ENTRYPOINT ["bash"]

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "entry",
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "plugins": [
+    '@babel/plugin-transform-modules-commonjs',
+    "transform-object-rest-spread"
+  ]
+}

cypress.config.js

@@ -0,0 +1,38 @@
+const  { defineConfig } = require('cypress');
+const { startDevServer } = require('@cypress/vite-dev-server');
+
+module.exports=defineConfig({
+  component: {
+    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+  },
+  e2e: {
+    baseUrl: 'http://localhost:5173', // Default Vite dev server port
+    supportFile: 'cypress/support/e2e.js',
+    specPattern: 'cypress/e2e/**/*.cy.js',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    defaultCommandTimeout: 3000,
+    video: true,
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+    setupNodeEvents(on, config) {
+      on('dev-server:start', (options) => {
+        return startDevServer({
+          options,
+          viteConfig: {
+            configFile: 'vite.config.js', // Path to your Vite config file
+          },
+        });
+      });
+
+      return config;
+    },
+  },
+});
+

cypress/component/baseball-card.cy.js

@@ -0,0 +1,90 @@
+import BaseballCard from '../../src/components/baseball-card/index.vue';
+
+describe('BaseballCard Component', () => {
+  it('renders correctly with props', () => {
+    const props = {
+      name: 'John Doe',
+      ward: 1,
+      subWard: 'A',
+      party: 'democratic',
+      photo: 'https://example.com/photo.jpg',
+      registeredVotersParty: 1000,
+      turnoutParty: 400,
+      turnoutTotal: 600,
+      divisionCount: 30,
+      committeePersonCount: 25,
+    };
+
+    cy.mount(BaseballCard, { props });
+
+    // Verify basic rendering
+    cy.get('.stats h3').contains('John Doe');
+    cy.get('.ward-ordinal').contains('1st Ward A');
+    cy.get('dt').contains('Voters (D)');
+    cy.get('dd').contains('1,000');
+    cy.get('dt').contains('Turnout (D)');
+    cy.get('dd').contains('40%');
+  });
+
+  it('computes the correct URL', () => {
+    const props = {
+      name: 'Jane Doe',
+      ward: 3,
+      subWard: 'B',
+      party: 'republican',
+      registeredVotersParty: 500,
+      turnoutParty: 200,
+      turnoutTotal: 300,
+      divisionCount: 10,
+      committeePersonCount: 15,
+    };
+
+    cy.mount(BaseballCard, { props });
+    cy.get(".button").should('have.attr', 'to', '/leaders/republican/3B/jane-doe');
+  });
+
+  it('renders fallback values for missing data', () => {
+    const props = {
+      name: 'Anonymous',
+      ward: 4,
+      party: 'independent',
+    };
+
+    cy.mount(BaseballCard, { props });
+
+    cy.get('dt').contains('Voters (I)');
+    cy.get('dd').contains('Unknown');
+    cy.get('dt').contains('Turnout (I)');
+    cy.get('dd').contains('Unknown');
+    cy.get('dt').contains('Vacancies');
+    cy.get('dd').contains('Unknown');
+  });
+
+  it('responds to hover interactions', () => {
+    const props = {
+      name: 'Hover Test',
+      ward: 5,
+      party: 'democratic',
+    };
+
+    cy.mount(BaseballCard, { props });
+
+    // // Simulate hover interaction
+    cy.get('.front').should('be.visible');
+
+    // Check that the back side is rotated out of view
+    cy.get('.back').should('not.be.visible');
+
+    cy.get('.flip-container').realHover().find('.front').should(($front) => {
+      expect($front).to.not.be.visible;
+      expect($front).to.be.hidden;
+    });
+    // Still flipped.
+    cy.get('.front').should('be.hidden');
+
+    cy.get('.flip-container').realHover().find('.back').should(($back) => {
+      expect($back).to.be.visible;
+    });
+
+  });
+})

cypress/component/committee-person.cy.js

@@ -0,0 +1,61 @@
+import CommitteePerson from '../../src/components/committee-person.vue'
+
+describe('CommitteePerson Component', () => {
+    beforeEach(() => {
+      // Mount the component before each test
+      cy.mount(CommitteePerson, {
+        props: {
+          fullName: 'John Doe',
+          division: 3,
+          address: '123 Main Street, Springfield',
+          title: 'Chairman',
+          email: '[email protected]'
+        }
+      });
+    });
+
+    it('renders the full name correctly', () => {
+      cy.get('.title.is-4').should('contain.text', 'John Doe');
+    });
+
+    it('renders the division with ordinal formatting', () => {
+      cy.get('.subtitle.is-6 span:first').should('contain.text', '3rd Division');
+    });
+
+    it('renders the title when provided', () => {
+      cy.get('.subtitle.is-6').should('contain.text', '& Chairman');
+    });
+
+    it('does not render the title when not provided', () => {
+      cy.mount(CommitteePerson, {
+        props: {
+          fullName: 'John Doe',
+          division: 3,
+          address: '123 Main Street, Springfield',
+          email: '[email protected]'
+        }
+      });
+      cy.get('.subtitle.is-6').should('not.contain.text', '&');
+    });
+
+    it('renders the address correctly', () => {
+      cy.get('address').should('contain.text', '123 Main Street, Springfield');
+    });
+
+    it('renders the email as a mailto link when provided', () => {
+      cy.get('a[href="mailto:[email protected]"]').should('contain.text', '[email protected]');
+    });
+
+    it('does not render the email link when not provided', () => {
+      cy.mount(CommitteePerson, {
+        props: {
+          fullName: 'John Doe',
+          division: 3,
+          address: '123 Main Street, Springfield',
+          title: 'Chairman'
+        }
+      });
+      cy.get('a[href^="mailto:"]').should('not.exist');
+    });
+  });
+

cypress/component/notification.cy.js

@@ -0,0 +1,34 @@
+import Notification from '../../src/components/notification.vue'
+
+describe('Notification Component', () => {
+    const message = 'This is a danger notification!';
+
+    beforeEach(() => {
+      // Mount the component before each test
+      cy.mount(Notification, {
+        props: {
+          msg: message,
+        }
+      });
+    });
+
+    it('renders the notification message correctly', () => {
+      cy.get('.notification.is-danger').should('contain.text', message);
+    });
+
+    it('emits the dismiss event when the delete button is clicked', () => {
+      const onDismissSpy = cy.spy().as('onDismissSpy');
+
+      cy.mount(Notification, {
+        props: {
+          msg: message,
+          onDismiss: onDismissSpy
+        }
+      });
+
+      cy.get('.delete').click();
+      cy.get('@onDismissSpy').should('have.been.calledOnce');
+    });
+
+  });
+