add: data testids

Author: joonatank

apps/admin-ui/src/component/RichTextInput.tsx

@@ -7,19 +7,6 @@ import "react-quill/dist/quill.snow.css";
 import styled from "styled-components";
 import { HorisontalFlex } from "../styles/layout";
 
-type Props = {
-  required?: boolean;
-  disabled?: boolean;
-  label?: string;
-  value: string;
-  id: string;
-  onChange: (v: string) => void;
-  errorText?: string;
-  tooltipText?: string;
-  style?: React.CSSProperties;
-  className?: string;
-};
-
 const Container = styled.div<{ $disabled: boolean }>`
   .ql-toolbar {
     border: none !important;
@@ -81,7 +68,18 @@ const modules = {
   toolbar: [["bold"], ["link"]],
 };
 
-const RichTextInput = ({
+type Props = {
+  required?: boolean;
+  disabled?: boolean;
+  label?: string;
+  value: string;
+  id: string;
+  onChange: (v: string) => void;
+  errorText?: string;
+  tooltipText?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function RichTextInput({
   value,
   required = false,
   disabled = false,
@@ -90,16 +88,10 @@ const RichTextInput = ({
   errorText,
   tooltipText,
   onChange,
-  style,
-  className,
-}: Props): JSX.Element => {
+  ...rest
+}: Props): JSX.Element {
   return (
-    <Container
-      style={style}
-      className={className}
-      $disabled={disabled}
-      id={`${id}-container`}
-    >
+    <Container {...rest} $disabled={disabled} id={`${id}-container`}>
       <HorisontalFlex style={{ justifyContent: "space-between" }}>
         <Label htmlFor={id}>
           {label} {required ? <Asterix>*</Asterix> : null}
@@ -124,6 +116,6 @@ const RichTextInput = ({
       )}
     </Container>
   );
-};
+}
 
 export default RichTextInput;

apps/admin-ui/src/component/my-units/UnitCalendar.tsx

@@ -199,7 +199,7 @@ const Container = styled.div<{ $height: number }>`
   height: ${({ $height }) => $height}px;
 `;
 
-const Cells = ({
+function Cells({
   cols,
   reservationUnitPk,
   date,
@@ -211,7 +211,7 @@ const Cells = ({
   date: Date;
   setModalContent: (content: JSX.Element | null, isHds?: boolean) => void;
   onComplete: () => void;
-}) => {
+}) {
   const now = new Date();
 
   const isPast = (index: number) => {
@@ -234,14 +234,21 @@ const Cells = ({
       );
     };
 
+  const testId = `UnitCalendar__RowCalendar--cells-${reservationUnitPk}`;
+  const cellTestId = `UnitCalendar__RowCalendar--cell-${reservationUnitPk}`;
   return (
-    <CellContent $numCols={cols}>
+    <CellContent $numCols={cols} data-testid={testId}>
       {Array.from(Array(cols).keys()).map((i) => (
-        <Cell key={i} onClick={onClick(i)} $isPast={isPast(i)} />
+        <Cell
+          key={i}
+          onClick={onClick(i)}
+          $isPast={isPast(i)}
+          data-testid={`${cellTestId}-${i}`}
+        />
       ))}
     </CellContent>
   );
-};
+}
 const PreBuffer = ({
   event,
   hourPercent,
@@ -274,7 +281,7 @@ const PreBuffer = ({
   return null;
 };
 
-const PostBuffer = ({
+function PostBuffer({
   event,
   hourPercent,
   right,
@@ -284,27 +291,28 @@ const PostBuffer = ({
   hourPercent: number;
   right: string;
   style?: CSSProperties;
-}): JSX.Element | null => {
+}): JSX.Element | null {
   const buffer = event.event?.bufferTimeAfter;
   const { t } = useTranslation();
 
-  if (buffer) {
-    const width = `calc(${(hourPercent * buffer) / 3600}% - 1px)`;
-    return (
-      <div
-        style={{
-          ...POST_PAUSE.style,
-          ...style,
-          left: right,
-          width,
-        }}
-        title={t("MyUnits.Calendar.legend.pause")}
-        key={`${event.event?.pk}-post`}
-      />
-    );
+  if (buffer == null) {
+    return null;
   }
-  return null;
-};
+
+  const width = `calc(${(hourPercent * buffer) / 3600}% - 1px)`;
+  return (
+    <div
+      style={{
+        ...POST_PAUSE.style,
+        ...style,
+        left: right,
+        width,
+      }}
+      title={t("MyUnits.Calendar.legend.pause")}
+      key={`${event.event?.pk}-post`}
+    />
+  );
+}
 
 function getEventTitle({
   reservation: { title, event },
@@ -342,7 +350,7 @@ const EventContainer = styled.div`
   left: 0;
 `;
 
-const Events = ({
+function Events({
   firstHour,
   events,
   eventStyleGetter,
@@ -352,10 +360,10 @@ const Events = ({
   events: CalendarEventType[];
   eventStyleGetter: EventStyleGetter;
   numHours: number;
-}) => {
+}) {
   const { t } = useTranslation();
   return (
-    <EventContainer>
+    <EventContainer data-testid="UnitCalendar__RowCalendar--events">
       {events.map((e) => {
         const title = getEventTitle({ reservation: e, t });
         const startDate = new Date(e.start);
@@ -377,6 +385,7 @@ const Events = ({
           100 / numHours
         }% + 1px)`;
 
+        const testId = `UnitCalendar__RowCalendar--event-${e.event?.pk}`;
         return (
           <Fragment key={`${title}-${startDate.toISOString()}`}>
             <PreBuffer
@@ -395,7 +404,10 @@ const Events = ({
                 zIndex: 5,
               }}
             >
-              <EventContent style={{ ...eventStyleGetter(e).style }}>
+              <EventContent
+                style={{ ...eventStyleGetter(e).style }}
+                data-testid={testId}
+              >
                 <p>{title}</p>
                 {/* NOTE don't set position on Popup it breaks responsiveness */}
                 <Popup trigger={EventTriggerButton}>
@@ -414,16 +426,16 @@ const Events = ({
       })}
     </EventContainer>
   );
-};
+}
 
-const sortByDraftStatusAndTitle = (resources: Resource[]) => {
+function sortByDraftStatusAndTitle(resources: Resource[]) {
   return resources.sort((a, b) => {
     const draftComparison: number = Number(a.isDraft) - Number(b.isDraft);
     const titleComparison = sortByName(a.title, b.title);
 
     return draftComparison || titleComparison;
   });
-};
+}
 
 function UnitCalendar({ date, resources, refetch }: Props): JSX.Element {
   const calendarRef = useRef<HTMLDivElement>(null);

apps/admin-ui/src/component/my-units/create-reservation/CreateReservationModal.tsx

@@ -144,7 +144,7 @@ const CollisionWarning = ({
   ) : null;
 };
 
-const ActionContainer = ({
+function ActionContainer({
   form,
   reservationUnit,
   onCancel,
@@ -154,7 +154,7 @@ const ActionContainer = ({
   reservationUnit: ReservationUnitType;
   onCancel: () => void;
   onSubmit: (values: FormValueType) => void;
-}) => {
+}) {
   const { t } = useTranslation();
   const {
     handleSubmit,
@@ -168,7 +168,13 @@ const ActionContainer = ({
   return (
     <ActionButtons>
       <CollisionWarning form={form} reservationUnit={reservationUnit} />
-      <Button size="small" variant="secondary" onClick={onCancel} theme="black">
+      <Button
+        size="small"
+        variant="secondary"
+        onClick={onCancel}
+        theme="black"
+        data-testid="CreateReservationModal__cancel-reservation"
+      >
         {t("common.cancel")}
       </Button>
       <Button
@@ -178,12 +184,13 @@ const ActionContainer = ({
         onClick={() => {
           handleSubmit(onSubmit)();
         }}
+        data-testid="CreateReservationModal__accept-reservation"
       >
         {t("ReservationDialog.accept")}
       </Button>
     </ActionButtons>
   );
-};
+}
 
 const DialogContent = ({
   onClose,

apps/admin-ui/src/component/notifications/page.tsx

@@ -50,7 +50,7 @@ import ControlledDateInput from "../my-units/components/ControlledDateInput";
 import ControlledTimeInput from "../my-units/components/ControlledTimeInput";
 import { base64encode } from "common/src/helpers";
 
-const RichTextInput = dynamic(() => import("app/component/RichTextInput"), {
+const RichTextInput = dynamic(() => import("@/component/RichTextInput"), {
   ssr: false,
 });
 
@@ -494,6 +494,7 @@ const NotificationForm = ({
         label={t("headings.name")}
         style={{ gridColumn: "1 / -1" }}
         errorText={translateError(errors.name?.message)}
+        data-testid="Notification__Page--name-input"
       />
       <Controller
         control={control}
@@ -555,6 +556,7 @@ const NotificationForm = ({
                 : undefined
             }
             required
+            data-testid="Notification__Page--message-fi-input"
           />
         )}
       />
@@ -568,6 +570,7 @@ const NotificationForm = ({
             style={{ gridColumn: "1 / -1" }}
             onChange={(val) => onChange(val)}
             value={value}
+            data-testid="Notification__Page--message-en-input"
           />
         )}
       />
@@ -581,6 +584,7 @@ const NotificationForm = ({
             style={{ gridColumn: "1 / -1" }}
             onChange={(val) => onChange(val)}
             value={value}
+            data-testid="Notification__Page--message-sv-input"
           />
         )}
       />
@@ -591,6 +595,7 @@ const NotificationForm = ({
             size="large"
             to=".."
             style={{ marginRight: "auto" }}
+            data-testid="Notification__Page--cancel-button"
           >
             {t("form.cancel")}
           </ButtonLikeLink>
@@ -602,12 +607,17 @@ const NotificationForm = ({
               setValue("isDraft", true);
               handleSubmit(onSubmit)();
             }}
+            data-testid="Notification__Page--save-draft-button"
           >
             {t("form.saveDraft")}
           </Button>
         </InnerButtons>
         <div>
-          <Button style={{ marginLeft: "auto" }} type="submit">
+          <Button
+            style={{ marginLeft: "auto" }}
+            type="submit"
+            data-testid="Notification__Page--publish-button"
+          >
             {t("form.save")}
           </Button>
         </div>

apps/admin-ui/src/component/reservations/requested/RequestedReservation.tsx

@@ -42,6 +42,7 @@ import { useRecurringReservations, useReservationData } from "./hooks";
 import ApprovalButtonsRecurring from "./ApprovalButtonsRecurring";
 import ReservationTitleSection from "./ReservationTitleSection";
 import { base64encode } from "common/src/helpers";
+import { fontMedium } from "common";
 
 type ReservationType = NonNullable<ReservationQuery["reservation"]>;
 
@@ -66,20 +67,31 @@ const Summary = styled(ApplicationDatas)`
   }
 `;
 
-const ApplicationProp = ({
+const PropValue = styled.span`
+  white-space: pre-wrap;
+  ${fontMedium}
+`;
+function ApplicationProp({
   label,
   data,
   wide,
 }: {
   label: string;
   data?: Maybe<string> | number;
   wide?: boolean;
-}) =>
-  data ? (
+}) {
+  if (data == null) {
+    return null;
+  }
+  return (
     <div style={{ gridColumn: wide ? "1 / -1" : "" }}>
-      {label}: <strong style={{ whiteSpace: "pre-wrap" }}>{data}</strong>
+      {label}:{" "}
+      <PropValue data-testid={`reservation__summary--${label}`}>
+        {data}
+      </PropValue>
     </div>
-  ) : null;
+  );
+}
 
 // Need to set max-width otherwise word-break doesn't work, different max-width because of the side menu.
 const KVPair = styled.div<{ $wide?: boolean }>`