chore: Added data-test to all extensible-area components

samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx

@@ -27,6 +27,7 @@ function SampleGenericContentSidekickPlugin(
         id: GENERIC_CONTENT_BADGE_ID,
         name: 'Generic Content 1',
         section: 'Section 1',
+        dataTest: 'section-1-generic-content-sidekick-abc',
         buttonIcon: 'video',
         open: false,
         contentFunction: (element: HTMLElement) => {

src/extensible-areas/actions-bar-item/types.ts

@@ -5,7 +5,7 @@ import { ActionsBarItemType, ActionsBarPosition } from './enums';
 /**
  * Interface for the generic Actions bar item. (`position` is mandatory)
  */
-export interface ActionsBarInterface extends PluginProvidedUiItemDescriptor{
+export interface ActionsBarInterface extends PluginProvidedUiItemDescriptor {
   position: ActionsBarPosition;
 }
 

src/extensible-areas/base.ts

@@ -27,4 +27,5 @@ export interface PluginProvidedUiItemDescriptor {
   id: string;
   type: PluginProvidedUiItemType;
   setItemId: (id: string) => void;
+  dataTest?: string;
 }

src/extensible-areas/floating-window/component.ts

@@ -19,6 +19,8 @@ export class FloatingWindow implements FloatingWindowInterface {
 
   boxShadow: string;
 
+  dataTest?: string;
+
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 
   /**
@@ -45,13 +47,15 @@ export class FloatingWindow implements FloatingWindowInterface {
     backgroundColor,
     boxShadow,
     contentFunction,
+    dataTest,
   }: FloatingWindowProps) {
     if (id) {
       this.id = id;
     }
     this.top = top;
     this.left = left;
     this.movable = movable;
+    this.dataTest = dataTest;
     this.backgroundColor = backgroundColor;
     this.boxShadow = boxShadow;
 

src/extensible-areas/floating-window/types.ts

@@ -11,6 +11,7 @@ export interface FloatingWindowProps {
   movable: boolean;
   backgroundColor: string;
   boxShadow: string;
+  dataTest?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 }
 

src/extensible-areas/generic-content-item/component.ts

@@ -11,22 +11,26 @@ export class GenericContentMainArea implements GenericContentInterface {
 
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 
+  dataTest: string;
+
   /**
    * Returns an object that when used in the setter as a generic content will be rendered
    * over the meeting main presentation.
    *
    * @param contentFunction - function that gives the html element to render the content of
    * the generic component
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, contentFunction,
+    id, contentFunction, dataTest = '',
   }: GenericContentMainAreaProps) {
     if (id) {
       this.id = id;
     }
     this.contentFunction = contentFunction;
+    this.dataTest = dataTest;
     this.type = GenericContentType.MAIN_AREA;
   }
 
@@ -48,6 +52,8 @@ export class GenericContentSidekickArea implements GenericContentInterface {
 
   open: boolean = false;
 
+  dataTest: string;
+
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 
   /**
@@ -63,11 +69,12 @@ export class GenericContentSidekickArea implements GenericContentInterface {
    *  displayed
    * @param buttonIcon - the icon of the associated sidebar navigation button
    * @param open - boolean value to decide wether to start open
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, contentFunction, name, section, buttonIcon, open,
+    id, contentFunction, name, section, buttonIcon, open, dataTest = '',
   }: GenericContentSidekickAreaProps) {
     if (id) {
       this.id = id;
@@ -76,6 +83,7 @@ export class GenericContentSidekickArea implements GenericContentInterface {
     this.name = name;
     this.section = section;
     this.buttonIcon = buttonIcon;
+    this.dataTest = dataTest;
     this.type = GenericContentType.SIDEKICK_AREA;
     this.open = open;
   }

src/extensible-areas/generic-content-item/types.ts

@@ -7,6 +7,7 @@ export interface GenericContentInterface extends PluginProvidedUiItemDescriptor
 export interface GenericContentMainAreaProps {
   id?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
+  dataTest?: string;
 }
 
 export interface GenericContentSidekickAreaProps {
@@ -16,4 +17,5 @@ export interface GenericContentSidekickAreaProps {
   section: string;
   buttonIcon: string;
   open: boolean;
+  dataTest?: string;
 }

src/extensible-areas/nav-bar-item/component.ts

@@ -19,6 +19,8 @@ export class NavBarButton implements NavBarInterface {
 
   disabled: boolean;
 
+  dataTest: string;
+
   position: NavBarItemPosition;
 
   hasSeparator: boolean;
@@ -38,11 +40,12 @@ export class NavBarButton implements NavBarInterface {
    * @param hasSeparator - boolean indicating whether the navigation bar button has separator
    * (vertical bar)
    * @param disabled - if true, the navigation bar button will not be clickable
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
   }: NavBarButtonProps) {
     if (id) {
@@ -52,6 +55,7 @@ export class NavBarButton implements NavBarInterface {
     this.icon = icon;
     this.tooltip = tooltip;
     this.disabled = disabled;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = NavBarItemType.BUTTON;
     this.hasSeparator = hasSeparator;
@@ -70,6 +74,8 @@ export class NavBarInfo implements NavBarInterface {
 
   label: string;
 
+  dataTest: string;
+
   hasSeparator: boolean;
 
   position: NavBarItemPosition;
@@ -83,17 +89,19 @@ export class NavBarInfo implements NavBarInterface {
    * See {@link NavBarItemPosition}
    * @param hasSeparator - boolean indicating whether the navigation bar information has separator
    * (vertical bar)
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
     id, label = '', position = NavBarItemPosition.RIGHT,
-    hasSeparator = true,
+    hasSeparator = true, dataTest = '',
   }: NavBarInfoProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
+    this.dataTest = dataTest;
     this.type = NavBarItemType.INFO;
     this.position = position;
     this.hasSeparator = hasSeparator;

src/extensible-areas/nav-bar-item/types.ts

@@ -15,11 +15,13 @@ export interface NavBarButtonProps {
   hasSeparator: boolean;
   position: NavBarItemPosition;
   onClick: () => void;
+  dataTest?: string;
 }
 
 export interface NavBarInfoProps {
   id?: string;
   label: string;
   hasSeparator: boolean;
   position: NavBarItemPosition;
+  dataTest?: string;
 }

src/extensible-areas/options-dropdown-item/component.ts

@@ -14,6 +14,8 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
 
   icon: string;
 
+  dataTest: string;
+
   onClick: () => void;
 
   /**
@@ -22,18 +24,20 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
    *
    * @param label - label to be displayed in the options dropdown option.
    * @param icon - icon to be displayed in the options dropdown. It goes in the left side of it.
+   * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the option.
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => {},
   }: OptionsDropdownOptionProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
     this.icon = icon;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = OptionsDropdownItemType.OPTION;
   }
@@ -48,13 +52,18 @@ export class OptionsDropdownSeparator implements OptionsDropdownInterface {
 
   type: OptionsDropdownItemType;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the Navigation Bar. In this case,
    * a separator.
    *
+   * @param dataTest - string attribute to be used for testing
+   *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
-  constructor() {
+  constructor({ dataTest = '' } = {}) {
+    this.dataTest = dataTest;
     this.type = OptionsDropdownItemType.SEPARATOR;
   }
 

src/extensible-areas/options-dropdown-item/types.ts

@@ -15,4 +15,5 @@ export interface OptionsDropdownOptionProps {
   label: string;
   icon: string;
   onClick: () => void;
+  dataTest?: string;
 }

src/extensible-areas/presentation-dropdown-item/component.ts

@@ -14,6 +14,8 @@ export class PresentationDropdownOption implements PresentationDropdownInterface
 
   icon: string;
 
+  dataTest: string;
+
   onClick: () => void;
 
   /**
@@ -23,18 +25,20 @@ export class PresentationDropdownOption implements PresentationDropdownInterface
    * @param label - label to be displayed in the presentation dropdown option.
    * @param icon - icon to be displayed in the presentation dropdown.
    * It goes in the left side of it.
+   * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the option.
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => {},
   }: PresentationDropdownOptionProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
     this.icon = icon;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = PresentationDropdownItemType.OPTION;
   }
@@ -49,13 +53,18 @@ export class PresentationDropdownSeparator implements PresentationDropdownInterf
 
   type: PresentationDropdownItemType;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the Presentation Dropdown. In this case,
    * a separator (horizontal thin black line).
-
+   *
+   * @param dataTest - string attribute to be used for testing
+   *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
-  constructor() {
+  constructor({ dataTest = '' } = {}) {
+    this.dataTest = dataTest;
     this.type = PresentationDropdownItemType.SEPARATOR;
   }
 

src/extensible-areas/presentation-dropdown-item/types.ts

@@ -15,4 +15,5 @@ export interface PresentationDropdownOptionProps {
   label: string;
   icon: string;
   onClick: () => void;
+  dataTest?: string;
 }

src/extensible-areas/screenshare-helper-item/component.ts

@@ -20,6 +20,8 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
 
   disabled: boolean;
 
+  dataTest: string;
+
   position: ScreenshareHelperItemPosition;
 
   onClick: (args: ScreenshareHelperButtonOnclickCallback) => void;
@@ -37,11 +39,12 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
    * @param hasSeparator - boolean indicating whether the screenshare helper button has separator
    * (vertical bar)
    * @param disabled - if true, the screenshare helper button will not be clickable
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
     position = ScreenshareHelperItemPosition.TOP_RIGHT,
   }: ScreenshareHelperButtonProps) {
     if (id) {
@@ -51,6 +54,7 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
     this.icon = icon;
     this.tooltip = tooltip;
     this.disabled = disabled;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = ScreenshareHelperItemType.BUTTON;
     this.position = position;

src/extensible-areas/screenshare-helper-item/types.ts

@@ -32,4 +32,5 @@ export interface ScreenshareHelperButtonProps {
   hasSeparator: boolean;
   position: ScreenshareHelperItemPosition;
   onClick: (args: ScreenshareHelperButtonOnclickCallback) => void;
+  dataTest?: string;
 }