Combined PR of ROS1 laser block and CI Workflow with basic frontend t…

…est (#309)

* added ROS1 Laser block

* added npm install yml code

* changed node version

* adding legacy in npm install

* added backend installation

* added CI workflow with basic frontend test

* added permission for node modules

* changed node version to 18

* modified node modules with cache

* added opening google.com using selenium in standalone-chrome ~ first test

* added automatic Opening VC and clicking File and Open button of menubar

* Update collection-factory to include blocks in the UI

---------

Co-authored-by: toshan-luktuke <[email protected]>

.github/first_test.py

@@ -0,0 +1,55 @@
+from selenium import webdriver
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+import time
+
+try:
+    # Set up the webdriver to connect to the remote Selenium server
+    options = webdriver.ChromeOptions()
+    options.add_argument('--no-sandbox')
+    options.add_argument('--disable-dev-shm-usage')
+
+    # Disable headless mode to show the Chrome UI
+    # options.add_argument('--headless=false')
+
+    # Remote WebDriver URL (provided by the selenium/standalone-chrome service)
+    driver = webdriver.Remote(
+        command_executor='http://localhost:4444/wd/hub',
+        options=options
+    )
+
+    # Open the browser and go to the URL
+    driver.get('http://IP:4000')
+
+    # time.sleep(120)
+
+
+    # Wait for the "File" button to be clickable and click it
+    basic_button = WebDriverWait(driver, 20).until(
+        EC.element_to_be_clickable((By.XPATH, "//button[contains(@class, 'menu-button') and .//span[text()='File']]"))
+    )
+    basic_button.click()
+
+
+    # Wait for the dropdown menu to be visible
+    dropdown_menu = WebDriverWait(driver, 10).until(
+        EC.visibility_of_element_located((By.XPATH, "//ul[@role='menu' and @aria-label='File']"))
+    )
+
+    # Wait for the "Open" menu item to be clickable and click it
+    code_menu_item = WebDriverWait(driver, 20).until(
+        EC.element_to_be_clickable((By.XPATH, "//ul[@role='menu' and @aria-label='File']//li[text()='Open']"))
+    )
+    code_menu_item.click()
+
+    time.sleep(20)  
+
+
+    # Capture a screenshot
+    driver.get_screenshot_as_file('screenshot.png')
+
+finally:
+    # Close the browser
+    if driver:
+        driver.quit()

.github/workflows/CI_Workflow.yml

@@ -0,0 +1,93 @@
+name: CI Workflow
+
+on:
+  pull_request:
+    branches:
+      - 'master'
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install frontend dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        working-directory: frontend
+        run: npm ci --legacy-peer-deps
+
+      - name: Cache Node modules
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        uses: actions/cache@v4
+        with:
+          path: frontend/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/frontend/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x' 
+
+      - name: Create virtual environment
+        run: python -m venv .venv
+
+      - name: Activate virtual environment
+        run: source .venv/bin/activate
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r backend/requirements.txt
+
+      - name: Add .env file
+        run: cp backend/.env.template backend/.env
+
+      - name: Generate static files
+        run: python backend/manage.py collectstatic
+
+      - name: Save venv
+        uses: actions/upload-artifact@v4
+        with:
+          name: venv
+          path: .venv
+
+  frontend-tests:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Restore Node modules cache
+        id: restore-node-modules
+        uses: actions/cache@v4
+        with:
+          path: frontend/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/frontend/package-lock.json') }}
+
+      - name: Install frontend dependencies
+        if: steps.restore-node-modules.outputs.cache-hit != 'true'
+        working-directory: frontend
+        run: npm ci --legacy-peer-deps
+
+      - name: Permissions for node_modules
+        run: chmod -R +x frontend/node_modules/.bin
+
+      - name: Verify node_modules restoration
+        run: |
+          ls -la frontend/node_modules
+          ls -la frontend/node_modules/.bin
+
+      - name: Run frontend test
+        run: npm test -- --watchAll=false
+        working-directory: frontend

frontend/src/App.test.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders App for test', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/File/i);
   expect(linkElement).toBeInTheDocument();
 });

frontend/src/components/blocks/collection/collection-factory.tsx

@@ -109,7 +109,8 @@ export const collectionBlocks: { 'blocks': CollectionBlockType,
             'children': {
                 'cameraRos': {'label': 'CameraROS'},
                 'odometer': {'label': 'Odometer'},
-                'imu': {'label': 'IMU'}
+                'imu': {'label': 'IMU'},
+                'laserRos':{'label':'LaserROS'}
             }
         },
         'ros2sensors': {
@@ -170,12 +171,15 @@ export function getCollectionBlock(name: string) {
             return import('./ros-sensors/Odometer.json');
         case 'drivers.rossensors.imu':
             return import('./ros-sensors/IMU.json');
+        case 'drivers.rossensors.laserRos':
+            return import('./ros-sensors/ROSLaserScan.json');
         case 'drivers.ros2sensors.cameraRos2':
             return import('./ros-sensors/ROS2Camera.json');
         case 'drivers.ros2sensors.laserRos2':
             return import('./ros-sensors/ROS2LaserScan.json');
         case 'processing.tensorflow.objectDetector':
             return import('./tensorflow/ObjectDetector.json');
+
 
         default:
             break;