Saleor 2078/create cypress test ids (#958)

* Add first id

* Add more ids

* Add more test ids

* Fix typing

* Remove unnecessary import

* Update snapshots

src/channels/components/ChannelForm/ChannelForm.tsx

@@ -20,6 +20,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { useStyles } from "../styles";
+import { ExtendedFormHelperTextProps } from "./types";
 
 export interface FormData {
   name: string;
@@ -80,6 +81,11 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             helperText={getChannelsErrorMessage(formErrors?.slug, intl)}
             disabled={disabled}
             fullWidth
+            FormHelperTextProps={
+              {
+                "data-testid": "slug-text-input-helper-text"
+              } as ExtendedFormHelperTextProps
+            }
             label={intl.formatMessage({
               defaultMessage: "Slug",
               description: "channel slug"
@@ -124,8 +130,14 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
         <CardContent>
           {!!currencyCodes ? (
             <SingleAutocompleteSelectField
+              data-test-id="channel-currency-select-input"
               allowCustomValues
               error={!!formErrors.currencyCode}
+              FormHelperTextProps={
+                {
+                  "data-testid": "currency-text-input-helper-text"
+                } as ExtendedFormHelperTextProps
+              }
               helperText={getChannelsErrorMessage(
                 formErrors?.currencyCode,
                 intl

src/channels/components/ChannelForm/types.ts

@@ -0,0 +1,5 @@
+import { FormHelperTextProps } from "@material-ui/core/FormHelperText";
+
+export type ExtendedFormHelperTextProps = FormHelperTextProps & {
+  "data-testid": string;
+};

src/components/AppHeader/AppHeader.tsx

@@ -61,7 +61,11 @@ const AppHeader: React.FC<AppHeaderProps> = props => {
       {anchor =>
         anchor ? (
           <Portal container={anchor.current}>
-            <div className={classes.root} onClick={onBack}>
+            <div
+              className={classes.root}
+              onClick={onBack}
+              data-test-id="app-header-back-button"
+            >
               <ArrowBackIcon className={classes.backArrow} />
               {children ? (
                 <Typography className={classes.title}>{children}</Typography>

src/components/AppLayout/AppChannelSelect.tsx

@@ -38,6 +38,7 @@ const AppChannelSelect: React.FC<AppChannelSelectProps> = ({
   return (
     <div className={classes.root}>
       <SingleSelectField
+        testId="app-channel-select"
         choices={mapNodeToChoice(channels)}
         disabled={disabled}
         value={selectedChannelId}

src/components/ChannelsAvailability/ChannelsAvailability.tsx

@@ -417,7 +417,11 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityProps> = props =
               userPermissions={user?.userPermissions || []}
               requiredPermissions={[PermissionEnum.MANAGE_CHANNELS]}
             >
-              <Button color="primary" onClick={openModal}>
+              <Button
+                color="primary"
+                onClick={openModal}
+                data-test-id="channels-availiability-manage-button"
+              >
                 {intl.formatMessage({
                   defaultMessage: "Manage",
                   description: "section header button"

src/components/ChannelsAvailabilityContent/ChannelsAvailabilityContent.tsx

@@ -77,7 +77,10 @@ export const ChannelsAvailabilityContent: React.FC<ChannelsAvailabilityContentPr
         <Typography className={classes.contentTitle}>
           <FormattedMessage defaultMessage="Channels A to Z" />
         </Typography>
-        <div className={classes.scrollArea}>
+        <div
+          className={classes.scrollArea}
+          data-test-id="manage-products-channels-availiability-list"
+        >
           {filteredChannels?.length ? (
             filteredChannels.map(option => (
               <div key={option.id} className={classes.option}>

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -1,6 +1,7 @@
 import { InputProps } from "@material-ui/core/Input";
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
+import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import Downshift, { ControllerStateAndHelpers } from "downshift";
@@ -42,6 +43,7 @@ export interface SingleAutocompleteSelectFieldProps
   InputProps?: InputProps;
   fetchChoices?: (value: string) => void;
   onChange: (event: React.ChangeEvent<any>) => void;
+  FormHelperTextProps?: ExtendedFormHelperTextProps;
 }
 
 const DebounceAutocomplete: React.ComponentType<DebounceProps<
@@ -69,6 +71,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
     fetchChoices,
     onChange,
     onFetchMore,
+    FormHelperTextProps,
     ...rest
   } = props;
   const classes = useStyles(props);
@@ -178,6 +181,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                   error={error}
                   disabled={disabled}
                   helperText={helperText}
+                  FormHelperTextProps={FormHelperTextProps}
                   label={label}
                   fullWidth={true}
                 />

src/components/SingleSelectField/SingleSelectField.tsx

@@ -35,6 +35,7 @@ export interface Choice {
 
 export type Choices = Choice[];
 interface SingleSelectFieldProps {
+  testId?: string;
   choices: Choices;
   className?: string;
   disabled?: boolean;
@@ -62,7 +63,8 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
     hint,
     selectProps,
     placeholder,
-    InputProps
+    InputProps,
+    testId
   } = props;
   const classes = useStyles(props);
 
@@ -84,6 +86,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
         {label}
       </InputLabel>
       <Select
+        data-test-id={testId}
         variant="outlined"
         fullWidth
         renderValue={choiceValue =>

src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx

@@ -44,7 +44,12 @@ const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
         toolbar={
           !disabled &&
           order?.channel?.isActive && (
-            <Button color="primary" variant="text" onClick={onOrderLineAdd}>
+            <Button
+              color="primary"
+              variant="text"
+              onClick={onOrderLineAdd}
+              data-test-id="add-products-button"
+            >
               <FormattedMessage
                 defaultMessage="Add products"
                 description="button"

src/orders/components/OrderListPage/OrderListPage.tsx

@@ -72,7 +72,12 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
             ]}
           />
         )}
-        <Button color="primary" variant="contained" onClick={onAdd}>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={onAdd}
+          data-test-id="create-order-button"
+        >
           <FormattedMessage
             defaultMessage="Create order"
             description="button"

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -2688,6 +2688,7 @@ exports[`Storyshots Generics / ChannelsAvailability default 1`] = `
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+          data-test-id="channels-availiability-manage-button"
           tabindex="0"
           type="button"
         >
@@ -2773,6 +2774,7 @@ exports[`Storyshots Generics / ChannelsAvailability with onChange 1`] = `
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+          data-test-id="channels-availiability-manage-button"
           tabindex="0"
           type="button"
         >
@@ -46366,6 +46368,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
           >
             <div
               class="SingleAutocompleteSelectField-container-id"
+              data-test-id="channel-currency-select-input"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -46627,6 +46630,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
           >
             <div
               class="SingleAutocompleteSelectField-container-id"
+              data-test-id="channel-currency-select-input"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -46887,6 +46891,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
           >
             <div
               class="SingleAutocompleteSelectField-container-id"
+              data-test-id="channel-currency-select-input"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -47146,6 +47151,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
           >
             <div
               class="SingleAutocompleteSelectField-container-id"
+              data-test-id="channel-currency-select-input"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -47372,6 +47378,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
               </div>
               <p
                 class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                data-testid="slug-text-input-helper-text"
               >
                 Slug must be unique
               </p>
@@ -47410,6 +47417,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
           >
             <div
               class="SingleAutocompleteSelectField-container-id"
+              data-test-id="channel-currency-select-input"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -48149,6 +48157,7 @@ exports[`Storyshots Views / Channels / Channel form with errors 1`] = `
         </div>
         <p
           class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+          data-testid="slug-text-input-helper-text"
         >
           Slug must be unique
         </p>
@@ -125137,6 +125146,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-products-button"
                 tabindex="0"
                 type="button"
               >
@@ -126212,6 +126222,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-products-button"
                 tabindex="0"
                 type="button"
               >
@@ -126855,6 +126866,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-products-button"
                 tabindex="0"
                 type="button"
               >
@@ -127191,6 +127203,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-order-button"
             tabindex="0"
             type="button"
           >
@@ -128539,6 +128552,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-order-button"
             tabindex="0"
             type="button"
           >
@@ -128997,6 +129011,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-order-button"
             tabindex="0"
             type="button"
           >