CoderBotOrg · previ · Nov 1, 2022 · Oct 31, 2022 · Oct 31, 2022 · Oct 31, 2022
diff --git a/.circleci/config.yml → .circleci/_config.yml b/.circleci/config.yml → .circleci/_config.yml
diff --git a/.env.test b/.env.test
@@ -0,0 +1 @@
+VITE_CB_ENDPOINT=http://localhost:5000
diff --git a/.github/workflows/build_frontend.yml b/.github/workflows/build_frontend.yml
@@ -6,20 +6,45 @@ name: build CoderBot frontend
 on: push
 
 jobs:
-  build-frontend:
+  test:
     runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Docker login
+        run: docker login ghcr.io -u previ -p ${{ secrets.GHCR_BACKEND_STUB_RO }}
+      - name: Run stub
+        run: docker run -dp 5000:5000 --name backend-stub ghcr.io/coderbotorg/backend:stub-latest
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        with:
+          build: npm run build-test
+          start: npm run preview
+          wait-on: 'http://localhost:5000/api/v1/openapi.json'
+          wait-on-timeout: 60
+          browser: chrome
+          record: true
+          parallel: true
+          group: 'UI - Chrome'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Clean up
+        run: docker stop backend-stub && docker rm backend-stub
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
+  build:
+    runs-on: ubuntu-latest
+    needs: test
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 16.x
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 16
         cache: 'npm'
     - run: npm ci
     - run: npm run build --if-present
@@ -29,9 +54,9 @@ jobs:
         name: dist
         path: dist
 
-  release-frontend:
+  release:
     runs-on: ubuntu-latest
-    needs: build-frontend
+    needs: build
     steps:
     - uses: actions/checkout@v3 # Checking out the repo
     - name: Docker meta

diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,11 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  projectId: 'm2n47r',
+  e2e: {
+    experimentalStudio: true,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/cypress/e2e/100_home.cy.js b/cypress/e2e/100_home.cy.js
@@ -0,0 +1,23 @@
+describe('load homepage', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('.logo').should('have.text', 'CoderBot')
+    cy.get('a[href*="program"]').should('exist')
+    cy.get('a[href*="control"]').should('exist')
+    cy.get('a[href*="settings"]').should('exist')
+  })
+
+  it('checks sidebar contents', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a[href="#/"]').should('exist')
+    cy.get('a[href*="/docs"]').should('exist')
+    cy.get('a[href*="/activity/manage"]').should('exist')
+    cy.get('a[href*="/program"]').should('exist')
+    cy.get('a[href*="/control"]').should('exist')
+    cy.get('a[href*="/gallery"]').should('exist')
+    cy.get('a[href*="/settings"]').should('exist')
+  })
+})
diff --git a/cypress/e2e/200_docs.cy.js b/cypress/e2e/200_docs.cy.js
@@ -0,0 +1,10 @@
+describe('load homepage', () => {
+  it('checks sidebar contents', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/docs"]').should('exist')
+    cy.get('a.v-list-item[href*="/docs"]').invoke('removeAttr', 'target').click()
+    cy.url().should('include', '/docs')
+  })
+})
diff --git a/cypress/e2e/300_activities.cy.js b/cypress/e2e/300_activities.cy.js
@@ -0,0 +1,55 @@
+describe('activities page', () => {
+  it('loads the default activity', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()  
+    cy.get('a.v-list-item[href*="activity/manage"]').click()
+    cy.get('#activity_list').should('exist')
+    cy.get('div#default').should('exist')
+    cy.get('div#default i.mdi-star').should('exist')
+    cy.get('div#default .v-list-item-title').should('have.text', 'default')
+    cy.get('div#default a[href*="activity/edit/default"]').should('exist')
+    cy.get('#app').click()
+    cy.get('div#default a[href*="activity/edit/default"]').click()
+  })
+
+  it('creates a new activity', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist')
+    cy.get('button.v-app-bar-nav-icon').click()  
+    cy.get('a.v-list-item[href*="activity/manage"]').click()
+    cy.get('#app').click()
+    cy.get('a.v-btn[href*="activity/new"]').should('exist')
+    cy.get('a.v-btn[href*="activity/new"]').click()
+    cy.get('input#name').should('exist')
+    cy.get('input#desc').should('exist')
+    cy.get('input#name').type("test-activity-name")
+    cy.get('input#desc').type("Test activity description")
+    cy.get('button#toolbox').should('exist')
+    cy.get('button#toolbox').click()
+    cy.get('button#add_category').should('exist')
+    cy.get('button#add_category_all').should('exist')
+    cy.get('button#add_category_all').click()
+    cy.get('button#save').should('exist')
+    cy.get('button#save').click()
+    /*
+    cy.get('input#input-317').should('exist')
+    cy.get('input#input-317').type("Test Category")
+    cy.get('button#category_ok').should('exist')
+    cy.get('button#category_ok').click()
+    */
+  })
+  it('deletes an existing activity', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist')
+    cy.get('button.v-app-bar-nav-icon').click()  
+    cy.get('a[href*="activity/manage"]').click()
+    cy.get('#app').click()
+    cy.get('div#test-activity-name').find('i.mdi-delete').should("exist")
+    cy.get('div#test-activity-name').find('i.mdi-delete').click()
+    cy.get('button#confirmDeleteDlg_ok').should("exist")
+    cy.get('button#confirmDeleteDlg_ok').click()
+  })
+})
diff --git a/cypress/e2e/400_program.cy.js b/cypress/e2e/400_program.cy.js
@@ -0,0 +1,47 @@
+describe('load homepage', () => {
+  it('checks toolbar bar contents', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/program"]').should('exist')
+    cy.get('a.v-list-item[href*="/program"]').click()
+    cy.get('#app').click()
+    cy.get('button#clearProgramDlg').should('exist')
+    cy.get('button#saveProgram').should('exist')
+    cy.get('button#toggleSaveAs').should('exist')
+    cy.get('button#loadProgramList').should('exist')
+    cy.get('button#runProgram').should('exist')
+    cy.get('button#getProgramCode').should('exist')
+    cy.get('button#exportProgram').should('exist')
+    cy.get('button#pickFile').should('exist')
+  })
+
+  it('checks blockly loades', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/program"]').should('exist')
+    cy.get('a.v-list-item[href*="/program"]').click()
+    cy.get('#app').click()
+    cy.get('.blocklyTotal').should('exist')
+    cy.get('.blocklyToolboxDiv').should('exist')
+    cy.get('.blocklyWorkspace').should('exist')
+  })
+
+  it('loads an existing program', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/program"]').should('exist')
+    cy.get('a.v-list-item[href*="/program"]').click()
+    cy.get('#app').click()
+    cy.get('button#loadProgramList').should('exist')
+    cy.get('button#loadProgramList').click()
+    cy.contains('test_sonars').should('exist')
+    cy.contains('test_sonars').click()
+    cy.get('.blocklyPath').should('exist')
+    cy.get('button#clearProgramDlg').click()
+    cy.get('button.text-green').should('exist')
+    cy.get('button.text-green').click()
+  })
+})
diff --git a/cypress/e2e/500_control.cy.js b/cypress/e2e/500_control.cy.js
@@ -0,0 +1,9 @@
+describe('load homepage', () => {
+  it('checks sidebar contents', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()  
+    cy.get('a.v-list-item[href*="control"]').click()
+    cy.get('img[src*="video/stream"]').should('exist')
+  })
+})
diff --git a/cypress/e2e/600_gallery.cy.js b/cypress/e2e/600_gallery.cy.js
@@ -0,0 +1,10 @@
+describe('load homepage', () => {
+  it('checks sidebar contents', () => {
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/gallery"]').should('exist')
+    cy.get('a.v-list-item[href*="/gallery"]').click()
+    cy.get('h3').should('exist')
+  })
+})
diff --git a/cypress/e2e/700_settings.cy.js b/cypress/e2e/700_settings.cy.js
@@ -0,0 +1,51 @@
+describe('load homepage', () => {
+  it('checks tabs', () => {
+    cy.intercept('http://localhost:5000/wifi/v1/connection_status', (req) => {
+      req.reply({"wifi": false, "internet": true})
+    })
+    cy.intercept('http://localhost:5000/wifi/v1/list_access_points', (req) => {
+      req.reply({"ssids": [{"ssid": "wifi-home", "conn_type": "WPA2", "strength": 99}]})
+    })
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/settings"]').click()
+    cy.get('#app').click()
+    cy.get('button#0').should('exist')
+    cy.get('button#1').should('exist')
+    cy.get('button#2').should('exist')
+    cy.get('button#3').should('exist')
+    cy.get('button#4').should('exist')
+    cy.get('button#5').should('exist')
+    cy.get('button#6').should('exist')
+    cy.get('button#7').should('exist')
+    cy.get('button#8').should('exist')
+  })
+
+  it('checks password', () => {
+    cy.intercept('http://localhost:5000/wifi/v1/connection_status', (req) => {
+      req.reply({"wifi": false, "internet": true})
+    })
+    cy.intercept('http://localhost:5000/wifi/v1/list_access_points', (req) => {
+      req.reply({"ssids": [{"ssid": "wifi-home", "conn_type": "WPA2", "strength": 99}]})
+    })
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/settings"]').click()
+    cy.get('#app').click()
+    cy.get('button#0').should('exist')
+    cy.get('button#0').click()
+    cy.get('#settings_password').type('secret')
+    cy.get('#save').should('exist')
+    cy.get('#save').click()
+    cy.visit('http://localhost:8080')
+    cy.get('.v-carousel').should('exist')
+    cy.get('button.v-app-bar-nav-icon').should('exist').click()
+    cy.get('a.v-list-item[href*="/settings"]').click()
+    cy.get('#settings_password_verify').should('exist')
+    cy.get('#settings_password_verify').type('secret')
+    cy.get('#settings_password_verify_ok').click()
+    cy.get('button#0').should('exist')
+  })
+})
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')