@playkit-js/moderation 3.1.1 → 3.2.0-canary.2-3a1409b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "3.1.1",
+  "version": "3.2.0-canary.2-3a1409b",
   "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {
@@ -15,24 +15,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "documentation": "^13.2.5",
-    "husky": "^8.0.1",
-    "jest": "^28.1.0",
     "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master",
-    "lint-staged": "^12.4.1",
     "prettier": "^2.6.2",
     "sass": "^1.52.3",
     "sass-loader": "^12.6.0",
     "standard-version": "^9.3.2",
     "style-loader": "1.3.0",
     "ts-loader": "^9.3.0",
-    "tslint": "^6.1.3",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.4",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
@@ -55,14 +48,13 @@
     "build": "webpack --mode production",
     "dev": "webpack-dev-server --mode development",
     "watch": "webpack --progress --color --watch --mode development",
-    "test": "jest",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "test:prepare": "yarn run build && yes | cp -i ./dist/playkit-moderation.js ./cypress/public/plugin.js",
+    "test:watch": "yarn run test:prepare && cypress open",
+    "test": "yarn run test:prepare && cypress run",
     "release": "standard-version",
     "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
-    "eslint": "eslint . --color",
-    "commit:dist": "git add --force --all dist && (git commit -m 'chore: update dist' || exit 0)",
-    "docs:generate": "documentation build flow-typed/** src/** -f md -o docs/configuration.md",
-    "docs:serve": "documentation serve flow-typed/** src/** --watch",
-    "precommit": "lint-staged",
     "prettier:fix": "prettier --write ."
   },
   "keywords": [
@@ -75,7 +67,8 @@
   ],
   "dependencies": {
     "@playkit-js/common": "^1.0.14",
-    "@playkit-js/ui-managers": "^1.3.1"
+    "@playkit-js/ui-managers": "^1.3.1",
+    "cypress": "^12.2.0"
   },
   "kaltura": {
     "name": "playkit-js-moderation",

package/src/components/moderation/moderation.tsx

@@ -135,7 +135,7 @@ export class Moderation extends Component<MergedProps, ModerationState> {
     return (
       <OverlayPortal>
         <Overlay open onClose={onClick}>
-          <div className={[styles.root, styles[playerSize]].join(' ')}>
+          <div className={[styles.root, styles[playerSize]].join(' ')} data-testid="moderationRoot">
             <div className={styles.mainWrapper}>
               <div className={styles.title}>{this.props.reportTitle}</div>
               {subtitle ? <div className={[styles.subtitle].join(' ')}>{subtitle}</div> : null}
@@ -145,7 +145,8 @@ export class Moderation extends Component<MergedProps, ModerationState> {
                   tabIndex={0}
                   ref={node => {
                     this._buttonRef = node;
-                  }}>
+                  }}
+                  data-testid="selectButton">
                   <div className={styles.select}>{reportContentType > -1 ? this._getContentType()?.label || '' : this.props.defaultContentType}</div>
                   <div className={styles.downArrow}>
                     <DownIcon />
@@ -168,7 +169,7 @@ export class Moderation extends Component<MergedProps, ModerationState> {
                   }}
                 />
                 <div className={styles.submitWrapper}>
-                  <div className={styles.characterCounter}>{`${reportContent.length}/${reportLength}`}</div>
+                  <div className={styles.characterCounter} data-testid="characterCounter">{`${reportContent.length}/${reportLength}`}</div>
                   <Tooltip label={tooltipMessage} classNames={styles.tooltip}>
                     <A11yWrapper onClick={this._handleSubmit}>
                       <button
@@ -176,7 +177,8 @@ export class Moderation extends Component<MergedProps, ModerationState> {
                         aria-disabled={submitButtonDisabled}
                         aria-label={this.props.sendReportLabel}
                         className={[styles.submitButton, submitButtonDisabled ? styles.disabled : ''].join(' ')}
-                        tabIndex={0}>
+                        tabIndex={0}
+                        data-testid="submitButton">
                         {this.props.sendReportLabel}
                       </button>
                     </A11yWrapper>

package/src/components/plugin-button/plugin-button.tsx

@@ -14,7 +14,7 @@ export const PluginButton = ({onClick, label}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
-        <button aria-label={label} className={ui.style.upperBarIcon}>
+        <button aria-label={label} className={ui.style.upperBarIcon} data-testid="moderationPluginButton">
           <Icon
             id="moderation-plugin-button"
             height={icons.BigSize}

package/src/components/popover/popover.tsx

@@ -113,7 +113,7 @@ export class Popover extends Component<PopoverProps, PopoverState> {
               this._popoverElementRef = node;
             }}
             className={[styles.reportPopover, styles.popoverComponent, styles.bottom, styles.right].join(' ')}>
-            <div role="menu" className={styles.popoverMenu}>
+            <div role="menu" className={styles.popoverMenu} data-testid="popoverMenu">
               {props.options.map((el, index) => {
                 return (
                   <A11yWrapper