openvidu-components: Added lang and captionsLang directive tests

openvidu-components-angular/e2e/webcomponent-app/app.js

@@ -1,5 +1,7 @@
 
 var MINIMAL;
+var LANG;
+var CAPTIONS_LANG;
 var PREJOIN;
 var VIDEO_MUTED;
 var AUDIO_MUTED;
@@ -35,6 +37,8 @@ $(document).ready(() => {
 
     // Directives
 	MINIMAL = url.searchParams.get("minimal") === null ? false : url.searchParams.get("minimal") === 'true';
+    LANG = url.searchParams.get("lang") || 'en';
+    CAPTIONS_LANG = url.searchParams.get("captionsLang") || 'en-US';
     PARTICIPANT_NAME = url.searchParams.get("participantName") || 'TEST_USER';
     PREJOIN = url.searchParams.get("prejoin") === null ? true : url.searchParams.get("prejoin") === 'true';
     VIDEO_MUTED = url.searchParams.get("videoMuted") === null ? false : url.searchParams.get("videoMuted")  === 'true';
@@ -154,6 +158,8 @@ async function joinSession(sessionName, participantName) {
     }
 
     webComponent.minimal = MINIMAL;
+    webComponent.lang = LANG;
+    webComponent.captionsLang = CAPTIONS_LANG;
     webComponent.prejoin = PREJOIN;
     webComponent.videoMuted = VIDEO_MUTED;
     webComponent.audioMuted = AUDIO_MUTED;

openvidu-components-angular/e2e/webcomponent.test.ts

@@ -97,6 +97,61 @@ describe('Testing API Directives', () => {
 		expect(await utils.isPresent('#settings-container')).to.be.false;
 	});
 
+	it('should change the UI LANG ', async () => {
+		await browser.get(`${url}?lang=es`);
+
+		await utils.checkPrejoinIsPresent();
+
+		let element = await utils.waitForElement('.lang-button');
+		expect(await element.getText()).equal('Españolexpand_more');
+
+		element = await utils.waitForElement('#join-button');
+		expect(await element.getText()).equal('Unirme ahora');
+	});
+
+	/**
+	 * TODO:
+	 * This test is only available with OpenVidu PRO
+	 */
+	// it('should change the captions LANG ', async () => {
+	// 	await browser.get(`${url}?prejoin=false&captionsLang=es-ES`);
+
+	// 	await utils.checkSessionIsPresent();
+
+	// 	// Checking if toolbar is present
+	// 	await utils.checkToolbarIsPresent();
+
+	// 	// Open more options menu
+	// 	await utils.clickOn('#more-options-btn');
+
+	// 	await browser.sleep(500);
+
+	// 	// Checking if button panel is present
+	// 	await utils.waitForElement('.mat-menu-content');
+	// 	expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+	// 	// Checking if captions button is present
+	// 	await utils.waitForElement('#captions-btn');
+	// 	expect(await utils.isPresent('#captions-btn')).to.be.true;
+	// 	await utils.clickOn('#captions-btn');
+
+	// 	await utils.waitForElement('.captions-container');
+	// 	await utils.waitForElement('#caption-settings-btn');
+	// 	await utils.clickOn('#caption-settings-btn');
+
+	// 	await browser.sleep(500);
+
+	// 	await utils.waitForElement('.settings-container');
+	// 	expect(await utils.isPresent('.settings-container')).to.be.true;
+
+	// 	await utils.waitForElement('ov-captions-settings');
+
+	// 	expect(await utils.isPresent('.captions-container')).to.be.true;
+
+	// 	const element = await utils.waitForElement('.lang-button');
+	// 	expect(await element.getText()).equal('Españolexpand_more')
+	// });
+
 	it('should show the PREJOIN page', async () => {
 		await browser.get(`${url}?prejoin=true`);
 

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts

@@ -75,7 +75,7 @@ export class MinimalDirective implements OnDestroy {
  * * Portuguese: `pt`
  *
  * @example
- * <ov-videoconference [lang]="es"></ov-videoconference>
+ * <ov-videoconference [lang]="'es'"></ov-videoconference>
  */
  @Directive({
 	selector: 'ov-videoconference[lang]'
@@ -138,7 +138,7 @@ export class LangDirective implements OnDestroy {
  * * Portuguese: `pt-PT`
  *
  * @example
- * <ov-videoconference [captionsLang]="es-ES"></ov-videoconference>
+ * <ov-videoconference [captionsLang]="'es-ES'"></ov-videoconference>
  */
  @Directive({
 	selector: 'ov-videoconference[captionsLang]'

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html

@@ -3,6 +3,8 @@
 	[participantName]="_participantName"
 	[tokens]="_tokens"
 	[minimal]="_minimal"
+	[lang]="_lang"
+	[captionsLang]="_captionsLang"
 	[prejoin]="_prejoin"
 	[videoMuted]="_videoMuted"
 	[audioMuted]="_audioMuted"

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts

@@ -19,6 +19,15 @@ export class OpenviduWebComponentComponent implements OnInit {
 	 * @internal
 	 */
 	_minimal: boolean = false;
+	/**
+	 * @internal
+	 */
+	_lang: string = '';
+	/**
+	 * @internal
+	 */
+	_captionsLang: string = '';
+
 	/**
 	 * @internal
 	 */
@@ -124,6 +133,30 @@ export class OpenviduWebComponentComponent implements OnInit {
 	@Input() set minimal(value: string | boolean) {
 		this._minimal = this.castToBoolean(value);
 	}
+	/**
+	 * The **lang** attribute sets the default UI language.
+	 *
+	 * Default: `en`
+	 *
+	 * @example
+	 * <openvidu-webcomponent lang="es"></openvidu-webcomponent>
+	 */
+	@Input() set lang(value: string) {
+		this._lang = value;
+	}
+	/**
+	 * The **captionsLang** attribute sets the deafult language that OpenVidu will try to recognise.
+	 *
+	 * It must be a valid [BCP-47](https://tools.ietf.org/html/bcp47) language tag like "en-US" or "es-ES".
+	 *
+	 * Default: `en-US`
+	 *
+	 * @example
+	 * <openvidu-webcomponent captions-lang="es-ES"></openvidu-webcomponent>
+	 */
+	@Input() set captionsLang(value: string) {
+		this._captionsLang = value;
+	}
 	/**
 	 * The **participantName** attribute sets the participant name. It can be useful for aplications which doesn't need the prejoin page.
 	 *