Merge pull request #426 from sensebox/development

Release 2.2.0

Author: mariopesch

.env

@@ -1,9 +1,9 @@
-REACT_APP_INITIAL_COMPILER_URL=https://compiler.sensebox.de
+VITE_INITIAL_COMPILER_URL=https://compiler.sensebox.de
 
-REACT_APP_BOARD=sensebox-mcu
-REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de
+VITE_BOARD=sensebox-mcu
+VITE_BLOCKLY_API=https://api.blockly.sensebox.de
 
 GENERATE_SOURCEMAP=false
 
 # in days
-REACT_APP_SHARE_LINK_EXPIRES=30
+VITE_SHARE_LINK_EXPIRES=30

.github/workflows/e2e.yml

@@ -1,14 +1,15 @@
 name: Cypress Tests
 
 on:
-    push:
-      branches: [main]
-      tags: ['v*.*.*']
-    pull_request:
-      branches:
-        - main
-    workflow_dispatch:
-  
+  push:
+    branches: [main, development]
+    tags: ["v*.*.*"]
+  pull_request:
+    branches:
+      - main
+      - development
+  workflow_dispatch:
+
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
@@ -21,4 +22,13 @@ jobs:
         uses: cypress-io/github-action@v6
         with:
           build: npm run build
-          start: npx  --yes serve -s build -l 3000
+          start: npx --yes serve -s build -l 3000
+      - name: Run CTRF annotations
+        if: always()
+        uses: ctrf-io/github-test-reporter@v1
+        with:
+          report-path: "./ctrf/*.json"
+          test-report: true
+          pull-request: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -22,3 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+crtf/*
+cypress/downloads/*
+yarn.lock

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

README.md

@@ -69,7 +69,7 @@ A modern, React-based version of the [senseBox](https://sensebox.de) Ardublockly
 The compiler URL can be configured in the `.env` file:
 
 ```
-REACT_APP_COMPILER_URL=https://compiler.sensebox.de
+VITE_COMPILER_URL=https://compiler.sensebox.de
 ```
 
 ## 📝 Development Guidelines

cypress.config.js

@@ -1,9 +1,12 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from "cypress";
+import { GenerateCtrfReport } from "cypress-ctrf-json-reporter";
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      new GenerateCtrfReport({
+        on,
+      });
     },
     baseUrl: "http://localhost:3000",
   },

cypress/e2e/blockly.cy.js

@@ -5,9 +5,67 @@ describe("Blockly Editor Page Tests", () => {
     cy.visit("/");
   });
 
-  it("[Blockly] selects senseBox ESP", () => {
+  it("[Blockly] visits the tutorial page", () => {
+    cy.visit("/tutorial");
+  });
+
+  it("[Blockly] visits the gallery page", () => {
+    cy.visit("/gallery");
+  });
+
+  it("[Blockly] visits the faq page", () => {
+    cy.visit("/faq");
+  });
+
+  it("[Blockly] visits the settings page", () => {
+    cy.visit("/settings");
+  });
+
+  it("[Blockly] visits the login page", () => {
+    cy.visit("/user/login");
+  });
+
+  it("[Blockly] navigates to tutorial and back", () => {
     cy.visit("/");
     cy.get('img[alt="Sensebox ESP"]').click();
+
+    // get a button that has an SVG with the class "fa-bars" inside it
+    // this is the button that opens the menu
+    const menuButton = cy.get("button").find("svg.fa-bars").parents("button");
+
+    // click the button
+    menuButton.click();
+
+    // click the a with href "/tutorial"
+    cy.get('a[href="/tutorial"]').click();
+    cy.wait(1000);
+    cy.url().should("include", "/tutorial");
+    cy.wait(1000);
+
+    // click the button
+    menuButton.click();
+
+    // click the a with href "/" and deep inside it an span containing "Blockly"
+    cy.get('a[href="/"]').find("span").contains("Blockly").parents("a").click();
+    cy.wait(1000);
+    cy.url().should("include", "/");
+
+    cy.get('button[aria-label="Compile code"]').should("exist");
+  });
+
+  it("[Blockly] selects senseBox ESP", () => {
+    cy.visit("/");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 8000 }).click();
+  });
+
+  it("[Blockly] selects senseBox MCU", () => {
+    cy.visit("/");
+    cy.get('img[alt="Sensebox MCU"]', { timeout: 8000 }).click();
+  });
+
+  it("[Blockly] selects senseBox Mini", () => {
+    cy.visit("/");
+    cy.get('img[alt="Sensebox Mini"]', { timeout: 8000 }).click();
   });
 
   it("[Blockly] compiles code", () => {
@@ -32,6 +90,5 @@ describe("Blockly Editor Page Tests", () => {
       expect(interception.response.body.data).to.have.property("id");
       expect(interception.response.body.data.id).to.be.a("string");
     });
-
   });
 });

cypress/e2e/code-editor.cy.js

@@ -13,7 +13,7 @@ describe("Code Editor Page Tests", () => {
   it("[CodeEditor] compiles code", () => {
     cy.visit("/codeeditor");
     cy.get('img[alt="Sensebox ESP"]').click();
-    cy.get("button").contains("Kompilieren").click();
+    cy.get("#compile").click();
   });
 
   it("[CodeEditor] opens reset dialog", () => {

public/index.html renamed to index.html

@@ -2,15 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#4EAF47" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -25,6 +25,8 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.