feat: manage multiple edge devices in PWA (#757)

Closes #757 Closes #758 Closes #753 Closes #741 Closes #711 Closes #705 Closes #660 Closes #659 Closes #601 Closes #595 Closes #589 Closes #563 Closes #408 Closes #370 Closes #329 Closes #327 Closes #302 Closes #299
ambianic · Nov 3, 2021 · 72f72ba · 72f72ba
1 parent 9aaaff9
commit 72f72ba
Show file tree

Hide file tree

Showing 75 changed files with 41,484 additions and 4,086 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -72,6 +72,9 @@ jobs:
       with:
         name: test-coverage
         path: ./coverage
+    - name: Check if coverage meets minimum threshold
+      run:
+        npx nyc check-coverage --lines 84 --functions 77 --branches 63
     - name: Build PWA distribution for production
       run: |
           npm run build --if-present

diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile
@@ -1,12 +1,29 @@
-FROM gitpod/workspace-full:latest
+FROM gitpod/workspace-full-vnc
 
 USER root
 # Install custom tools, runtime, etc.
-RUN apt-get update && \
-        DEBIAN_FRONTEND=noninteractive apt-get -qq install \
-        libgtk2.0-0 libgtk-3-0 libgbm-dev \
-        libnotify-dev libgconf-2-4  libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
-    && apt-get clean && rm -rf /var/cache/apt/* && rm -rf /var/lib/apt/lists/* && rm -rf /tmp/*
+
+# Install Cypress dependencies.
+RUN apt-get update \
+ && sudo DEBIAN_FRONTEND=noninteractive apt-get install -y \
+   libgtk2.0-0 \
+   libgtk-3-0 \
+   libnotify-dev \
+   libgconf-2-4 \
+   libnss3 \
+   libxss1 \
+   libasound2 \
+   libxtst6 \
+   xauth \
+   xvfb \
+ && sudo rm -rf /var/lib/apt/lists/* \
+
+
+# RUN apt-get update && \
+#        DEBIAN_FRONTEND=noninteractive apt-get -qq install \
+#        libgtk2.0-0 libgtk-3-0 libgbm-dev \
+#        libnotify-dev libgconf-2-4  libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
+#        && apt-get clean && rm -rf /var/cache/apt/* && rm -rf /var/lib/apt/lists/* && rm -rf /tmp/*
 
 USER gitpod
 # Apply user-specific settings

diff --git a/.gitpod.yml b/.gitpod.yml
@@ -4,30 +4,65 @@ image:
 
 tasks:
   - init: |
+      touch /tmp/.npm-lock
       npm install
       npm run prepare
       npm update
       npm audit fix
       npm install -g @vue/cli
-  - command: |
+      rm /tmp/.npm-lock
+  - init: |
+      echo "Waiting for npm install to complete"
+      sleep 1 && while [ -f /tmp/.npm-lock ]; do sleep 1; done
+    command: |
       echo "Starting Ambianic UI in dev mode:"
       npm run serve
-  - command: |
-      echo "Waiting for npm install to finish"
-      npm install cypress
-      gp await-port 8080 && gp preview $(gp url 8080)/index.html
+  - init: |
+      echo "Waiting for npm install to complete"
+      sleep 1 && while [ -f /tmp/.npm-lock ]; do sleep 1; done
+      # echo "Waiting for Ambianic UI to start..."
+      # gp await-port 8080 && gp preview $(gp url 8080)/index.html
+    command: |
       echo "Starting Ambianic PWA testsuite"
+      # need to install cypress here because
+      # it needs system dirs that gitpod deletes on workspace restart
+      # https://community.gitpod.io/t/gitpod-and-cypress-disagree-on-cache/5535
+      npm install -g cypress
       npm run test
-  - command: |
+  - init: |
+      echo "Waiting for npm install to complete"
+      sleep 1 && while [ -f /tmp/.npm-lock ]; do sleep 1; done
+      # echo "Waiting for Ambianic UI to start.."
+      # gp await-port 8080 && gp preview $(gp url 8080)/index.html
+    command: |
+      echo "Starting Cypress in Interactive Mode"
+      npm install -g cypress
+      npm run cy:open
+  - init: |
+      echo "Waiting for npm install to complete"
+      sleep 1 && while [ -f /tmp/.npm-lock ]; do sleep 1; done
+    command: |
       echo "Starting http server for local HTML file preview"
-      npx browser-sync start -s -w
+      npm install -g browser-sync
+      npx browser-sync start --watch --directory --server
 
 # vscode:
 #  extensions:
 #    - [email protected]:QHyAEoimIBiRDoL6WtEoRg==
 
 ports:
-  - port: 8080
+  - port: 8080 # Ambianic UI App
+    onOpen: open-browser
+  - port: 6080 # Cypress Interactive Mode
+    onOpen: open-browser
+  - port: 3000 # Static file serve via Browsersync
+  - port: 3001 # Browsersync dashboard
+  - port: 8888 # Dependencies chart
+  - port: 10000
+    onOpen: ignore
+  - port: 5900
+    onOpen: ignore
+
 
 github:
   prebuilds:
@@ -36,4 +71,4 @@ github:
 
 vscode:
   extensions:
-    - octref.vetur
+    - octref.vetur
diff --git a/babel.config.js b/babel.config.js
@@ -17,6 +17,7 @@ module.exports = {
         preventFullImport: false
       }
     }],
-    'istanbul'
+    'istanbul',
+    '@babel/plugin-proposal-class-properties'
   ]
 }
diff --git a/cypress/integration/ambianic-tests/about.spec.js b/cypress/integration/ambianic-tests/about.spec.js
@@ -4,19 +4,23 @@ context('AboutPage', () => {
     cy.visit('/about')
   })
 
+  it('Loads logo', () => {
+      cy.get('[data-cy=logo-image]').should('exist')
+  })
+
   it('Loads title and subtitle', () => {
-    cy.get('#about-title > .v-list-item__content > .v-list-item__title')
-      .should('contain.text', 'Safer Home')
+    cy.get('[data-cy=subtitle-one]')
+      .should('contain', 'Safer Home')
 
-    cy.get('#about-title > .v-list-item__content > .v-list-item__subtitle')
-      .should('contain.text', 'via Ambient Intelligence')
+    cy.get('[data-cy=subtitle-two]')
+      .should('contain', 'Privacy Preserving. Decentralized.')
   })
 
   it('Loads timeline button', () => {
-    cy.get('#btn-timeline')
+    cy.get('[data-cy=btn-timeline]')
       .should('have.attr', 'href', '/timeline')
       .get('.v-btn__content')
-      .contains('View Timeline', { matchCase: false })
+      .contains('Timeline', { matchCase: false })
   })
 
   it('Loads settings button', () => {
@@ -27,7 +31,7 @@ context('AboutPage', () => {
   })
 
   it('Loads version info', () => {
-    cy.get('#version-info > .v-list-item__content > .v-list-item__subtitle')
+    cy.get('[data-cy=version-info]')
       .should('contain.text', 'UI App Version')
 
       const versionNumber = require('../../../package.json').version

diff --git a/cypress/integration/ambianic-tests/actions.spec.js b/cypress/integration/ambianic-tests/actions.spec.js
diff --git a/cypress/integration/ambianic-tests/feedback.spec.js b/cypress/integration/ambianic-tests/feedback.spec.js
@@ -5,17 +5,17 @@ context('FeedbackPage', () => {
   })
 
   it('Look at page title and subtitle', () => {
-    cy.get('#feedback-title > .v-list-item__content > .v-list-item__title')
+    cy.get('[data-cy=feedback-title]')
       .contains('Send Feedback', { matchCase: false })
 
-    cy.get('#feedback-title > .v-list-item__content > .v-list-item__subtitle')
-      .contains('We currently use github to gather user feedbaack', { matchCase: false })
+    cy.get('[data-cy=feedback-text]')
+      .contains('Your feedback helps us focus.', { matchCase: false })
   })
 
   it('Check feedback button', () => {
-    cy.get('#btn-feedback')
-      .should('have.attr', 'href', 'https://github.com/ambianic/ambianic-ui/issues')
+    cy.get('[data-cy=btn-feedback]')
+      .should('have.attr', 'href', 'https://github.com/ambianic/ambianic-ui/discussions/categories/feedback')
       .get('.v-btn__content')
-      .contains('Open Feedback Page', { matchCase: false })
+      .contains('Feedback Forum', { matchCase: false })
   })
 })
diff --git a/cypress/integration/ambianic-tests/help.spec.js b/cypress/integration/ambianic-tests/help.spec.js
@@ -5,24 +5,31 @@ context('HelpPage', () => {
   })
 
   it('Look at page title and subtitle', () => {
-    cy.get('#help-title > .v-list-item__content > .v-list-item__title')
+    cy.get('[data-cy=help-title]')
       .contains('Need Help with Ambianic?', { matchCase: false })
 
-    cy.get('#help-title > .v-list-item__content > .v-list-item__subtitle')
-      .contains('Please reference our online docs or connect on Twitter', { matchCase: false })
+    cy.get('[data-cy=help-text]')
+      .contains('Please reference our online docs', { matchCase: false })
   })
 
   it('Check docs button', () => {
-    cy.get('#btn-docs')
+    cy.get('[data-cy=btn-docs]')
       .should('have.attr', 'href', 'https://docs.ambianic.ai')
       .get('.v-btn__content')
-      .contains('Documentation', { matchCase: false })
+      .contains('Docs', { matchCase: false })
+  })
+
+  it('Check forum button', () => {
+    cy.get('[data-cy=btn-forum]')
+      .should('have.attr', 'href', 'https://github.com/ambianic/ambianic-ui/discussions')
+      .get('.v-btn__content')
+      .contains('Forum', { matchCase: false })
   })
 
   it('Check community button', () => {
-    cy.get('#btn-community')
-      .should('have.attr', 'href', 'https://twitter.com/ambianicai')
+    cy.get('[data-cy=btn-community]')
+      .should('have.attr', 'href', 'https://join.slack.com/t/ambianicai/shared_invite/zt-eosk4tv5-~GR3Sm7ccGbv1R7IEpk7OQ')
       .get('.v-btn__content')
-      .contains('Twitter', { matchCase: false })
+      .contains('Slack', { matchCase: false })
   })
 })
diff --git a/cypress/integration/ambianic-tests/home.spec.js b/cypress/integration/ambianic-tests/home.spec.js
@@ -7,28 +7,16 @@ context('HomePage', () => {
   })
 
   it('Loads title and subtitle', () => {
-    cy.get('.v-list-item__subtitle')
-      .should('contain.text', 'Safer Home via Ambient Intelligence')
-  })
+    cy.get('[data-cy=subtitle-one]')
+      .should('contain.text', 'Safer Home via Ambient Intelligence.')
 
-  it('Loads firsttime installation button', () => {
-    cy.get('#btn-setup > .v-btn__content')
-      .should('contain.text', 'Begin Setup')
-      .click()
-      .url().should('include', '/onboarding')
+    cy.get('[data-cy=subtitle-two]')
+      .should('contain.text', 'Privacy Preserving. Decentralized.')
   })
 
-  it('Ensures returning users are taken directly to timeline', () => {
-    cy.window().should('have.property', '__store__')
-    cy.window().then((win) => {
-      win.__store__.dispatch(CHANGE_REMOTE_PEER_ID, '917d5f0a-6469-4d33-b5c2-efd858118b74')
-      // cy.wait(1000)
-      // reload to use new values for testing
-      // cy.reload()
-      cy.get('#btn-dashboard > .v-btn__content')
-        .should('contain.text', 'View Timeline')
-        .click()
-        .url().should('include', '/timeline')
-    })
+  it('looks at continue button', () => {
+    cy.get('[data-cy=btn-continue]')
+      .get('.v-btn__content')
+      .contains('Continue', { matchCase: false })
   })
 })
diff --git a/cypress/integration/ambianic-tests/index.spec.js b/cypress/integration/ambianic-tests/index.spec.js
@@ -0,0 +1,40 @@
+/// <reference types="cypress" />
+
+context('index.html', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+
+  const checkViewPort = (cy, device) => {
+    cy.viewport(device).window().then(win => {
+        cy.title().should('eq', 'Ambianic UI')
+
+        cy.get('head meta[name="description"][content*="Ambianic UI"]')
+
+        cy.get('#welcome-text')
+          .should('contain', 'Safer Home via Ambient Intelligence' )
+
+        cy.get('[data-cy=btn-continue]')
+          .get('.v-btn__content')
+          .contains('Continue', { matchCase: false })
+    })
+  }
+
+
+  //Set an array of sizes
+  const sizes = [
+    'iphone-5', 'iphone-6' , 'samsung-s10', 'samsung-note9', 'iphone-x', 'iphone-xr',
+    'ipad-mini', 'ipad-2', 'macbook-11', 'macbook-13',
+    'macbook-16'
+  ]
+
+  describe('Find page elements correctly in a range of browser device viewports', () => {
+    sizes.forEach(size => {
+      it(`Should display elements correctly on ${size}`, () => {
+        // ensure elements are shown on smaller viewports
+        checkViewPort(cy, size)
+      })
+    })
+  })
+})
diff --git a/cypress/integration/ambianic-tests/navbar.spec.js b/cypress/integration/ambianic-tests/navbar.spec.js
@@ -2,7 +2,7 @@
 
 context('Check Navbar Items', () => {
   before(() => {
-    cy.visit('http://localhost:8080/about')
+    cy.visit('/about')
   })
 
   it('Should display a connection-offline icon before edge connection', () => {
@@ -12,34 +12,18 @@ context('Check Navbar Items', () => {
       cy.url().should('include', '/settings')
   })
 
-  /** future buttons
-  it('Should not have a search bar', () => {
-      cy.get('[data-cy=container').find("#searchbar")
-  })
-
-  it('Should not have a heart button', () => {
-    const t = cy.get('[data-cy=heart]')
-    expect(t).to.exist
-  })
-
-  it('Should be a bell button', () => {
-    const t = cy.get('[data-cy=bell]')
-    expect(t).to.exist
-  })
-   */
-
-  it('Should be an about button', () => {
-    cy.get('[data-cy=about]').should('exist')
+  it('Should be a settings button', () => {
+    cy.get('[data-cy=settings-btn]').should('exist')
   })
 
   it('Should have a five links', () => {
-    cy.get('[data-cy=drawer]').then(($result) => { 
+    cy.get('[data-cy=drawer]').then(($result) => {
       assert.equal($result.children().children()[0].childElementCount,5,'Five links in the drawer')
     })
   })
 
   it('Should have a clickable timeline icon', () => {
-    cy.get('[data-cy=timeline-icon]').should('be.visible').click()
+    cy.get('[data-cy=timeline-btn]').should('be.visible').click()
     cy.url().should('include', '/timeline')
   })
 })