ov-components: Added elements ids for testing

OpenVidu · Jul 26, 2024 · 9f7efd8 · 9f7efd8
1 parent a7e5f27
commit 9f7efd8
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 70 deletions.
diff --git a/.github/workflows/openvidu-components-angular-E2E.yml b/.github/workflows/openvidu-components-angular-E2E.yml
@@ -97,69 +97,48 @@ jobs:
       - name: Run openvidu-components-angular E2E
         run: npm run lib:e2e-ci --prefix openvidu-components-angular
 
-  # webcomponent_e2e:
-  #   needs: test_setup
-  #   name: Webcomponent E2E CE tests
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #       with:
-  #         ref: ${{ inputs.commit_sha || github.sha }}
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version: '20'
-  #     - uses: actions/download-artifact@v4
-  #       with:
-  #         name: openvidu-browser
-  #         path: openvidu-components-angular
-  #     - name: Run Browserless Chrome
-  #       run: docker run -d -p 3000:3000 --network host browserless/chrome:1.57-chrome-stable
-  #     - name: Run openvidu-server-kms
-  #       run: |
-  #         docker run -p 4443:4443 --rm -d \
-  #         -e OPENVIDU_SECRET=MY_SECRET \
-  #         openvidu/openvidu-dev:latest
-  #     - name: Install openvidu-browser and dependencies
-  #       run: |
-  #         cd openvidu-components-angular
-  #         npm install openvidu-browser-*.tgz
-  #     - name: Build openvidu-angular
-  #       run: npm run lib:build --prefix openvidu-components-angular
-  #     - name: Build openvidu-webcomponent
-  #       run: npm run webcomponent:build --prefix openvidu-components-angular
-  #     - name: Serve Webcomponent Testapp
-  #       run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular &
-  #     - name: Run Webcomponent E2E
-  #       run: npm run webcomponent:e2e-ci --prefix openvidu-components-angular
-
-  # webcomponent_e2e_pro:
-  #   if: false #Skip PRO test because infra is unstable
-  #   needs: test_setup
-  #   name: Webcomponent E2E PRO tests
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version: '20'
-  #     - uses: actions/download-artifact@v4
-  #       with:
-  #         name: openvidu-browser
-  #         path: openvidu-components-angular
-  #     - name: Run Browserless Chrome
-  #       run: docker run -d -p 3000:3000 --network host browserless/chrome:1.57-chrome-stable
-  #     - name: Install openvidu-browser and dependencies
-  #       run: |
-  #         cd openvidu-components-angular
-  #         npm install openvidu-browser-*.tgz
-  #     - name: Build openvidu-angular
-  #       run: npm run lib:build --prefix openvidu-components-angular
-  #     - name: Build openvidu-webcomponent
-  #       run: npm run webcomponent:build --prefix openvidu-components-angular
-  #     - name: Serve Webcomponent Testapp
-  #       run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular &
-  #     - name: Run Webcomponent E2E PRO
-  #       env:
-  #         OPENVIDU_SERVER_URL: ${{ secrets.OPENVIDU_CALL_NEXT_URL }}
-  #         OPENVIDU_SECRET: ${{ secrets.OPENVIDU_CALL_NEXT_SECRET }}
-  #       run: npm run webcomponent:e2e-pro-ci --prefix openvidu-components-angular
+  webcomponent_e2e:
+    needs: test_setup
+    name: Webcomponent E2E CE tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.commit_sha || github.sha }}
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Run Browserless Chrome
+        run: docker run -d -p 3000:3000 --network host browserless/chrome:1.57-chrome-stable
+      - name: Run openvidu-local-deployment
+        run: |
+          git clone --depth 1 https://github.com/OpenVidu/openvidu-local-deployment
+          cd openvidu-local-deployment/community
+          ./configure_lan_private_ip_linux.sh
+          docker compose up -d
+      - name: Wait for openvidu-local-deployment
+        run: |
+          until curl -s -f -o /dev/null http://localhost:7880; do
+            echo "Waiting for openvidu-local-deployment to be ready..."
+            sleep 5
+          done
+      - name: Run openvidu-call-backend
+        run: |
+          git clone --depth 1 https://github.com/OpenVidu/openvidu-call
+          cd openvidu-call/openvidu-call-back
+          npm install
+          npm run dev:start &
+      - name: Install dependencies
+        run: |
+          cd openvidu-components-angular
+          npm install
+      - name: Build openvidu-angular
+        run: npm run lib:build --prefix openvidu-components-angular
+      - name: Build openvidu-webcomponent
+        run: npm run webcomponent:build --prefix openvidu-components-angular
+      - name: Serve Webcomponent Testapp
+        run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular &
+      - name: Run Webcomponent E2E
+        run: npm run webcomponent:e2e-ci --prefix openvidu-components-angular
diff --git a/...src/lib/components/panel/background-effects-panel/background-effects-panel.component.html b/...src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
@@ -35,6 +35,7 @@ <h4>{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>
 				<div
 					*ngFor="let effect of backgroundImages"
 					class="effect-button"
+					[id]="'effect-' + effect.id"
 					[class.active-effect-btn]="backgroundSelectedId === effect.id"
 					(click)="applyBackground(effect)"
 				>

diff --git a/...openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html b/...openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
@@ -17,7 +17,7 @@ <h3 class="panel-title">{{ 'PANEL.CHAT.TITLE' | translate }}</h3>
 					<p *ngIf="data.isLocal">{{ 'PANEL.CHAT.YOU' | translate }}</p>
 					<p *ngIf="!data.isLocal">{{ data.participantName }}</p>
 				</div>
-				<div class="msg-content">
+				<div class="chat-message">
 					<p [innerHTML]="data.message | linkify"></p>
 				</div>
 			</div>

diff --git a/...openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss b/...openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
@@ -77,7 +77,7 @@
 	color: var(--ov-panel-text-color);
 }
 
-.msg-content {
+.chat-message {
 	position: relative;
 	border-radius: var(--ov-panel-radius);
 	padding: 8px;
@@ -102,7 +102,7 @@
 	text-align: left;
 }
 
-.message.left .msg-detail .msg-content {
+.message.left .msg-detail .chat-message {
 	float: left;
 }
 
@@ -114,7 +114,7 @@
 	text-align: right;
 }
 
-.message.right .msg-detail .msg-content {
+.message.right .msg-detail .chat-message {
 	float: right;
 }
 

diff --git a/.../src/lib/components/settings/participant-name-input/participant-name-input.component.html b/.../src/lib/components/settings/participant-name-input/participant-name-input.component.html
@@ -6,6 +6,7 @@
 			</button>
 		</mat-select-trigger>
 		<input
+			id="name-input"
 			matInput
 			(change)="updateName()"
 			type="text"