Merge branch 'develop_react_upgrade' into trigyn-testcases-record-actions-transitions-components-referrals

 Conflicts:
	app/javascript/components/record-actions/transitions/components/referrals/component.spec.js
	app/javascript/components/record-actions/transitions/components/referrals/form-internal.spec.js
	app/javascript/components/record-actions/transitions/components/referrals/provided-consent.spec.js
	app/javascript/components/record-actions/transitions/components/referrals/provided-form.spec.js

Author: aespinoza-quoin

app/javascript/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

app/javascript/components/action-button/component.jsx

@@ -41,6 +41,7 @@ function Component({
 
   return (
     <ButtonType
+      data-testid="action-button"
       id={buttonID}
       icon={icon}
       cancel={cancel}

app/javascript/components/action-dialog/component.jsx

@@ -132,8 +132,7 @@ const ActionDialog = ({
   }, [open, fetchAction]);
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-    <div onClick={stopPropagation} data-testid="action-dialog">
+    <div onClick={stopPropagation}>
       <Dialog
         open={open}
         onClose={onCloseDialog}

app/javascript/components/charts/bar-chart/component.jsx

@@ -84,8 +84,12 @@ const BarChart = ({ data, description, showDetails = false, hideLegend = false,
 
   return (
     <div>
-      {!showDetails ? <p className={css.description}>{description}</p> : null}
-      <canvas id="reportGraph" ref={chartRef} height={!showDetails ? null : 400} />
+      {!showDetails ? (
+        <p className={css.description} data-testid="paragraph">
+          {description}
+        </p>
+      ) : null}
+      <canvas id="reportGraph" data-testid="canvas" ref={chartRef} height={!showDetails ? null : 400} />
     </div>
   );
 };

app/javascript/components/charts/bar-chart/component.unit.test.js app/javascript/components/charts/bar-chart/component.spec.js

@@ -1,9 +1,9 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 import { Map } from "immutable";
+import { mountedComponent, screen } from "test-utils";
 
 import { buildGraphData } from "../../report/utils";
-import { setupMountedThemeComponent } from "../../../test";
 
 import BarChart from "./component";
 
@@ -28,13 +28,14 @@ describe("<BarChart />", () => {
     });
     const showDetails = false;
     const description = "Number of cases broken down by nationality";
-    const component = setupMountedThemeComponent(BarChart, {
+    const props = {
       ...buildGraphData(data, { t: () => "Total" }, { agencies }),
       description,
       showDetails
-    });
+    };
 
-    expect(component.find("p").props().children).to.equal("Number of cases broken down by nationality");
-    expect(component.find("canvas")).to.have.lengthOf(1);
+    mountedComponent(<BarChart {...props} />);
+    expect(screen.getByText("Number of cases broken down by nationality")).toBeInTheDocument();
+    expect(screen.getByTestId("canvas")).toBeInTheDocument();
   });
 });

app/javascript/components/charts/table-values/component.unit.test.js app/javascript/components/charts/table-values/component.spec.js

@@ -1,10 +1,10 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 import { fromJS } from "immutable";
-import { TableRow } from "@material-ui/core";
+import { mountedComponent, screen } from "test-utils";
 
 import { buildTableData } from "../../report/utils";
-import { abbrMonthNames, setupMountedComponent, stub } from "../../../test";
+import { abbrMonthNames, stub } from "../../../test";
 
 import TableValues from "./component";
 
@@ -74,13 +74,14 @@ describe("<TableValues />", () => {
       }
     ];
 
-    const { component } = setupMountedComponent(TableValues, {
+    const props = {
       ...buildTableData(data, window.I18n, { agencies })
-    });
+    };
 
-    expect(component.find(TableRow)).to.have.lengthOf(6);
+    mountedComponent(<TableValues />, props);
+    expect(screen.getAllByRole("table")).toHaveLength(1);
+    expect(screen.getAllByRole("columnheader")).toHaveLength(2);
   });
-
   afterEach(() => {
     if (stubI18n) {
       window.I18n.t.restore();

app/javascript/components/charts/table-values/components/table-header/component.spec.js

@@ -0,0 +1,24 @@
+import { mountedComponent, screen } from "test-utils";
+
+import TableHeader from "./component";
+
+describe("<TableValues />/components/<TableHeader/ >", () => {
+  it("should render the correct number of headers", () => {
+    const props = {
+      columns: [
+        {
+          items: ["Category 1", "report.total"],
+          colspan: 2
+        },
+        {
+          items: ["6 - 11", "report.total"],
+          colspan: 0
+        }
+      ]
+    };
+
+    mountedComponent(<TableHeader />, props);
+    expect(screen.getAllByRole("row")).toHaveLength(1);
+    expect(screen.getAllByRole("cell")).toHaveLength(2);
+  });
+});

app/javascript/components/charts/table-values/components/table-header/component.unit.test.js

@@ -0,0 +1,14 @@
+import { mountedComponent, screen } from "test-utils";
+
+import CustomSnackbarProvider from "./component";
+
+describe("<CustomSnackbarProvider /> - Component", () => {
+  it("renders <CustomSnackbarProvider/> children", () => {
+    const props = {
+      children: <div>snackbar child</div>
+    };
+
+    mountedComponent(<CustomSnackbarProvider {...props} />);
+    expect(screen.getByText("snackbar child")).toBeInTheDocument();
+  });
+});

app/javascript/components/custom-snackbar-provider/component.spec.js

@@ -49,7 +49,7 @@ const BadgedIndicator = ({ data, lookup, sectionTitle, indicator, loading, error
 
   return (
     <>
-      <LoadingIndicator {...loadingIndicatorProps}>
+      <LoadingIndicator {...loadingIndicatorProps} data-testid="badged-indicator">
         <div className={css.sectionTitle}>{sectionTitle}</div>
         <div className={css.content}>{dashboardChips}</div>
       </LoadingIndicator>

app/javascript/components/custom-snackbar-provider/component.unit.test.js

@@ -11,7 +11,14 @@ const DashboardChip = ({ label, type, handleClick }) => {
   const classes = clsx(css.chip, css[type]);
 
   return (
-    <Button id={`chip-${type}`} label={label} className={classes} onClick={handler} variant="text">
+    <Button
+      data-testid="chip-button"
+      id={`chip-${type}`}
+      label={label}
+      className={classes}
+      onClick={handler}
+      variant="text"
+    >
       {label}
     </Button>
   );

app/javascript/components/dashboard/badged-indicator/component.jsx

@@ -66,7 +66,7 @@ const DashboardTable = ({ columns, data, query, title, pathname }) => {
   };
 
   return (
-    <div className={css.tableContainer}>
+    <div className={css.tableContainer} data-testid="dashboard-table">
       <MUIDataTable {...tableOptions} />
     </div>
   );

app/javascript/components/dashboard/dashboard-chip/component.jsx

@@ -0,0 +1,34 @@
+import { mountedComponent, screen } from "test-utils";
+import { fromJS } from "immutable";
+
+import DashboardTable from "./component";
+
+describe("<DashboardTable />", () => {
+  const props = {
+    columns: [],
+    data: [],
+    query: [],
+    title: "testTitle",
+    pathname: "/cases"
+  };
+
+  const state = fromJS({
+    user: {
+      permissions: {
+        cases: ["manage"]
+      }
+    }
+  });
+
+  beforeEach(() => {
+    mountedComponent(<DashboardTable {...props} />, state);
+  });
+
+  it("renders a MUIDataTable />", () => {
+    expect(screen.getByRole("grid")).toBeInTheDocument();
+  });
+
+  it("should render text", () => {
+    expect(screen.queryAllByText("testTitle")).toBeTruthy();
+  });
+});

app/javascript/components/dashboard/dashboard-table/component.jsx

@@ -1,14 +1,9 @@
-// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
-
+import { mountedComponent, screen } from "test-utils";
 import { fromJS } from "immutable";
 
-import { setupMountedComponent } from "../../../test";
-
-import FlagBoxItem from "./components/flag-box-item";
 import FlagBox from "./component";
 
 describe("<FlagBox />", () => {
-  let component;
   const props = {
     flags: fromJS([
       {
@@ -33,10 +28,10 @@ describe("<FlagBox />", () => {
   };
 
   beforeEach(() => {
-    ({ component } = setupMountedComponent(FlagBox, props, {}));
+    mountedComponent(<FlagBox {...props} />);
   });
 
   it("should render 2 FlagBoxItem", () => {
-    expect(component.find(FlagBoxItem)).to.have.lengthOf(2);
+    expect(screen.getAllByRole("button")).toHaveLength(2);
   });
 });

app/javascript/components/dashboard/dashboard-table/component.spec.js

@@ -0,0 +1,33 @@
+import { mountedComponent, screen } from "test-utils";
+
+import FlagBoxItem from "./component";
+
+describe("<FlagBoxItem />", () => {
+  const props = {
+    date: "2020-12-10",
+    reason: "Reason 1",
+    recordId: "41a3e69b-991a-406e-b0ee-9123cb60c983",
+    title: "User 1",
+    user: "primero_test"
+  };
+
+  beforeEach(() => {
+    mountedComponent(<FlagBoxItem {...props} />);
+  });
+
+  it("should render a h4 tag", () => {
+    expect(screen.getByRole("heading")).toHaveTextContent("User 1");
+  });
+
+  it("should render a span tag", () => {
+    expect(screen.getByText("2020-12-10")).toBeInTheDocument();
+  });
+
+  it("should render a p tag", () => {
+    expect(screen.getByText("Reason 1")).toBeInTheDocument();
+  });
+
+  it("should render a span tag", () => {
+    expect(screen.getByText("primero_test")).toBeInTheDocument();
+  });
+});