WIP: fixed test

coralproject · Nov 13, 2023 · 6e0d743 · 6e0d743
1 parent e1c79f5
commit 6e0d743
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 14 deletions.
diff --git a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
@@ -26,7 +26,14 @@ const DetailedExplantion: FunctionComponent<Props> = ({
   return (
     <>
       <Localized id={`common-moderationReason-rejectionReason-${code}`}>
-        <RadioButton value={code} name={code} key={code} checked>
+        <RadioButton
+          tabIndex={-1}
+          aria-hidden
+          value={code}
+          name={code}
+          key={code}
+          checked
+        >
           {unsnake(code)}
         </RadioButton>
       </Localized>

diff --git a/client/src/core/client/admin/components/ModerationReason/Reasons.tsx b/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
@@ -45,15 +45,15 @@ const Reasons: FunctionComponent<Props> = ({
         .filter(
           (code) =>
             code !== GQLREJECTION_REASON_CODE.ILLEGAL_CONTENT &&
+            code !== GQLREJECTION_REASON_CODE.BANNED_WORD &&
             code !== GQLREJECTION_REASON_CODE.OTHER
         )
         .map((code) => (
-          <>
+          <div key={code}>
             <Localized id={`common-moderationReason-rejectionReason-${code}`}>
               <RadioButton
                 value={code}
                 name={code}
-                key={code}
                 checked={selected === code}
                 onChange={(e) => {
                   if (e.target.checked) {
@@ -68,7 +68,7 @@ const Reasons: FunctionComponent<Props> = ({
             {selected === code && (
               <AddExpanationButton onClick={onAddExplanation} />
             )}
-          </>
+          </div>
         ))}
 
       <Localized id="common-moderationReason-reason-moreReasons">

diff --git a/...re/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx b/...re/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx
@@ -104,7 +104,11 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
           />
         </Dropdown>
       ) : view === "REJECT_REASON" ? (
-        <ModerationReason onReason={reject} onCancel={onDismiss} />
+        <ModerationReason
+          id={comment.id}
+          onReason={reject}
+          onCancel={onDismiss}
+        />
       ) : (
         <UserBanPopoverContainer
           comment={comment}

diff --git a/client/src/core/client/stream/test/comments/stream/moderation.spec.tsx b/client/src/core/client/stream/test/comments/stream/moderation.spec.tsx
@@ -674,7 +674,6 @@ it("requires rection reason when dsaFeaturesEnabled", async () => {
       },
     });
   });
-  // const tabPane = await screen.findByTestId("current-tab-pane");
   const comment = screen.getByTestId(`comment-${firstComment.id}`);
 
   const caretButton = within(comment).getByLabelText("Moderate");
@@ -683,17 +682,15 @@ it("requires rection reason when dsaFeaturesEnabled", async () => {
 
   const rejectButton = within(comment).getByRole("button", { name: "Reject" });
 
-  await act(async () => {
+  act(() => {
     fireEvent.click(rejectButton);
   });
 
   await waitFor(() => {
-    expect(screen.queryByTestId("moderation-reason-modal")).toBeInTheDocument();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
   });
 
-  const reasonModal = await within(comment).findByTestId(
-    "moderation-reason-modal"
-  );
+  const reasonModal = screen.getByRole("dialog");
 
   expect(reasonModal).toBeInTheDocument();
 

diff --git a/client/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx b/client/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
@@ -48,22 +48,37 @@ export interface RadioButtonProps {
   onFocus: EventHandler<FocusEvent<HTMLElement>>;
   onBlur: EventHandler<FocusEvent<HTMLElement>>;
   keyboardFocus: boolean;
+  tabIndex?: number;
 }
 
 export class RadioButton extends Component<RadioButtonProps> {
   public state = {
     randomID: uuid(),
   };
   public render() {
-    const { className, classes, id, light, children, keyboardFocus, ...rest } =
-      this.props;
+    const {
+      className,
+      classes,
+      id,
+      light,
+      children,
+      keyboardFocus,
+      tabIndex,
+      ...rest
+    } = this.props;
 
     const rootClassName = cn(classes.root, className);
     const finalID = id || this.state.randomID;
 
     return (
       <Flex alignItems="center" className={rootClassName}>
-        <input className={classes.input} type="radio" id={finalID} {...rest} />
+        <input
+          className={classes.input}
+          type="radio"
+          id={finalID}
+          {...rest}
+          tabIndex={tabIndex}
+        />
         <label
           className={cn(classes.label, {
             [classes.labelLight]: light,