Merge pull request #664 from mirumee/add/data-test-filters

Add test ids to filters

src/components/Filter/FilterAutocompleteField.tsx

@@ -50,7 +50,8 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
   displayValues,
   filterField,
   setDisplayValues,
-  onFilterPropertyChange
+  onFilterPropertyChange,
+  ...rest
 }) => {
   const classes = useStyles({});
 
@@ -90,8 +91,9 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
   };
 
   return (
-    <div>
+    <div {...rest}>
       <TextField
+        data-test="filterFieldAutocompleteInput"
         className={classes.inputContainer}
         fullWidth
         name={filterField.name + "_autocomplete"}
@@ -107,6 +109,8 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
           <FormControlLabel
             control={
               <Checkbox
+                data-test="filterFieldAutocompleteSelected"
+                data-test-id={filterField.value}
                 checked={filterField.value.includes(displayValue.value)}
               />
             }
@@ -118,7 +122,11 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
       ))}
       {displayHr && <Hr className={classes.hr} />}
       {displayNoResults && (
-        <Typography className={classes.noResults} color="textSecondary">
+        <Typography
+          data-test="filterFieldAutocompleteNoResults"
+          className={classes.noResults}
+          color="textSecondary"
+        >
           <FormattedMessage defaultMessage="No results" description="search" />
         </Typography>
       )}
@@ -126,7 +134,11 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
         <div className={classes.option} key={option.value}>
           <FormControlLabel
             control={
-              <Checkbox checked={filterField.value.includes(option.value)} />
+              <Checkbox
+                data-test="filterFieldAutocompleteOption"
+                data-test-id={filterField.value}
+                checked={filterField.value.includes(option.value)}
+              />
             }
             label={option.label}
             name={filterField.name}
@@ -136,6 +148,7 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
       ))}
       {filterField.hasMore && (
         <Link
+          data-test="filterFieldAutocompleteHasMore"
           className={classes.showMore}
           underline
           onClick={filterField.onFetchMore}

src/components/Filter/FilterContent.tsx

@@ -101,6 +101,8 @@ function getIsFilterMultipleChoices(
   ];
 }
 
+const filterFieldTestingContext = "filter-field";
+
 const FilterContent: React.FC<FilterContentProps> = ({
   currencySymbol,
   filters,
@@ -136,10 +138,19 @@ const FilterContent: React.FC<FilterContentProps> = ({
             <FormattedMessage defaultMessage="Filters" />
           </Typography>
           <div>
-            <Button className={classes.clear} onClick={onClear}>
+            <Button
+              data-test="clear"
+              className={classes.clear}
+              onClick={onClear}
+            >
               <FormattedMessage {...buttonMessages.clear} />
             </Button>
-            <Button color="primary" variant="contained" type="submit">
+            <Button
+              data-test="submit"
+              color="primary"
+              variant="contained"
+              type="submit"
+            >
               <FormattedMessage {...buttonMessages.done} />
             </Button>
           </div>
@@ -151,7 +162,13 @@ const FilterContent: React.FC<FilterContentProps> = ({
             <React.Fragment key={filterField.name}>
               <div className={classes.filterFieldBar}>
                 <FormControlLabel
-                  control={<Checkbox checked={filterField.active} />}
+                  control={
+                    <Checkbox
+                      data-test="filterGroupActive"
+                      data-test-id={filterField.name}
+                      checked={filterField.active}
+                    />
+                  }
                   label={filterField.label}
                   onChange={() =>
                     onFilterPropertyChange({
@@ -170,6 +187,8 @@ const FilterContent: React.FC<FilterContentProps> = ({
                 <div className={classes.filterSettings}>
                   {filterField.type === FieldType.text && (
                     <TextField
+                      data-test={filterFieldTestingContext}
+                      data-test-id={filterField.name}
                       fullWidth
                       name={filterField.name}
                       InputProps={{
@@ -196,6 +215,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
                   ) && (
                     <>
                       <SingleSelectField
+                        data-test="filterFieldRangeTypeChoice"
                         choices={getIsFilterMultipleChoices(intl)}
                         value={
                           filterField.multiple
@@ -228,6 +248,9 @@ const FilterContent: React.FC<FilterContentProps> = ({
                         {filterField.multiple ? (
                           <>
                             <TextField
+                              data-test={filterFieldTestingContext}
+                              data-test-id={filterField.name}
+                              data-test-range-type="min"
                               fullWidth
                               name={filterField.name + "_min"}
                               InputProps={{
@@ -265,6 +288,9 @@ const FilterContent: React.FC<FilterContentProps> = ({
                               />
                             </span>
                             <TextField
+                              data-test={filterFieldTestingContext}
+                              data-test-id={filterField.name}
+                              data-test-range-type="max"
                               fullWidth
                               name={filterField.name + "_max"}
                               InputProps={{
@@ -298,6 +324,8 @@ const FilterContent: React.FC<FilterContentProps> = ({
                           </>
                         ) : (
                           <TextField
+                            data-test={filterFieldTestingContext}
+                            data-test-id={filterField.name}
                             fullWidth
                             name={filterField.name}
                             InputProps={{
@@ -339,6 +367,8 @@ const FilterContent: React.FC<FilterContentProps> = ({
                   )}
                   {filterField.type === FieldType.options && (
                     <FilterOptionField
+                      data-test={filterFieldTestingContext}
+                      data-test-id={filterField.name}
                       filterField={filterField}
                       onFilterPropertyChange={onFilterPropertyChange}
                     />
@@ -355,6 +385,10 @@ const FilterContent: React.FC<FilterContentProps> = ({
                         <FormControlLabel
                           control={
                             <Radio
+                              data-test="filterFieldBoolean"
+                              data-test-is-checked={
+                                filterField.value[0] === option.value
+                              }
                               checked={filterField.value[0] === option.value}
                               color="primary"
                             />
@@ -378,6 +412,8 @@ const FilterContent: React.FC<FilterContentProps> = ({
                   {filterField.type === FieldType.autocomplete &&
                     filterField.multiple && (
                       <FilterAutocompleteField
+                        data-test={filterFieldTestingContext}
+                        data-test-id={filterField.name}
                         displayValues={autocompleteDisplayValues}
                         filterField={filterField}
                         setDisplayValues={setAutocompleteDisplayValues}

src/components/Filter/FilterOptionField.tsx

@@ -24,7 +24,8 @@ const useStyles = makeStyles(
 
 const FilterOptionField: React.FC<FilterBaseFieldProps> = ({
   filterField,
-  onFilterPropertyChange
+  onFilterPropertyChange,
+  ...rest
 }) => {
   const classes = useStyles({});
   const handleSelect = (value: string) =>
@@ -41,7 +42,7 @@ const FilterOptionField: React.FC<FilterBaseFieldProps> = ({
     });
 
   return (
-    <div className={classes.root}>
+    <div className={classes.root} {...rest}>
       {filterField.options.map(option => (
         <div
           className={classNames(classes.option, {
@@ -52,9 +53,15 @@ const FilterOptionField: React.FC<FilterBaseFieldProps> = ({
           <FormControlLabel
             control={
               filterField.multiple ? (
-                <Checkbox checked={filterField.value.includes(option.value)} />
+                <Checkbox
+                  data-test="filterOption"
+                  data-test-id={option.value}
+                  checked={filterField.value.includes(option.value)}
+                />
               ) : (
                 <Radio
+                  data-test="filterOption"
+                  data-test-id={option.value}
                   checked={filterField.value[0] === option.value}
                   color="primary"
                 />

src/components/SingleSelectField/SingleSelectField.tsx

@@ -99,12 +99,21 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
       >
         {choices.length > 0 ? (
           choices.map(choice => (
-            <MenuItem value={choice.value} key={choice.value}>
+            <MenuItem
+              data-test="selectFieldOption"
+              data-test-id={choice.value}
+              value={choice.value}
+              key={choice.value}
+            >
               {choice.label}
             </MenuItem>
           ))
         ) : (
-          <MenuItem disabled={true}>
+          <MenuItem
+            data-test="selectFieldOption"
+            data-test-disabled
+            disabled={true}
+          >
             <FormattedMessage defaultMessage="No results found" />
           </MenuItem>
         )}

src/fragments/metadata.ts

@@ -0,0 +1,16 @@
+import gql from "graphql-tag";
+
+export const metadataFragment = gql`
+  fragment MetadataItem on MetadataItem {
+    key
+    value
+  }
+  fragment Metadata on ObjectWithMetadata {
+    metadata {
+      ...MetadataItem
+    }
+    privateMetadata {
+      ...MetadataItem
+    }
+  }
+`;

src/fragments/types/Metadata.ts

@@ -0,0 +1,25 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: Metadata
+// ====================================================
+
+export interface Metadata_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface Metadata_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface Metadata {
+  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  metadata: (Metadata_metadata | null)[];
+  privateMetadata: (Metadata_privateMetadata | null)[];
+}

src/fragments/types/MetadataItem.ts

@@ -0,0 +1,13 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: MetadataItem
+// ====================================================
+
+export interface MetadataItem {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}

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

@@ -1976,6 +1976,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           <div>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
+              data-test="clear"
               tabindex="0"
               type="button"
             >
@@ -1987,6 +1988,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
             </button>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+              data-test="submit"
               tabindex="0"
               type="submit"
             >
@@ -2010,6 +2012,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="createdAt"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2128,6 +2132,9 @@ exports[`Storyshots Generics / Filter default 1`] = `
             </div>
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              data-test="filter-field"
+              data-test-id="createdAt"
+              data-test-range-type="min"
             >
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -2162,6 +2169,9 @@ exports[`Storyshots Generics / Filter default 1`] = `
             </span>
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              data-test="filter-field"
+              data-test-id="createdAt"
+              data-test-range-type="max"
             >
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -2200,6 +2210,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="multiplOptions"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2243,6 +2255,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="price"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2286,6 +2300,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="status"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2331,6 +2347,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
         >
           <div
             class="FilterOptionField-root-id"
+            data-test="filter-field"
+            data-test-id="status"
           >
             <div
               class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
@@ -2341,6 +2359,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
                 <span
                   aria-disabled="false"
                   class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                  data-test="filterOption"
+                  data-test-id="val1"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -2395,6 +2415,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
                 <span
                   aria-disabled="false"
                   class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
+                  data-test="filterOption"
+                  data-test-id="val2"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -2448,6 +2470,8 @@ exports[`Storyshots Generics / Filter default 1`] = `
                 <span
                   aria-disabled="false"
                   class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
+                  data-test="filterOption"
+                  data-test-id="val3"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -2522,6 +2546,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           <div>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
+              data-test="clear"
               tabindex="0"
               type="button"
             >
@@ -2533,6 +2558,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             </button>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+              data-test="submit"
               tabindex="0"
               type="submit"
             >
@@ -2556,6 +2582,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="createdAt"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2674,6 +2702,9 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             </div>
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              data-test="filter-field"
+              data-test-id="createdAt"
+              data-test-range-type="min"
             >
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -2708,6 +2739,9 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             </span>
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              data-test="filter-field"
+              data-test-id="createdAt"
+              data-test-range-type="max"
             >
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -2746,6 +2780,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="multiplOptions"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2789,6 +2825,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="price"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2832,6 +2870,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             <span
               aria-disabled="false"
               class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              data-test="filterGroupActive"
+              data-test-id="status"
             >
               <span
                 class="MuiIconButton-label-id"
@@ -2877,6 +2917,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
         >
           <div
             class="FilterOptionField-root-id"
+            data-test="filter-field"
+            data-test-id="status"
           >
             <div
               class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
@@ -2887,6 +2929,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                 <span
                   aria-disabled="false"
                   class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                  data-test="filterOption"
+                  data-test-id="val1"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -2941,6 +2985,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                 <span
                   aria-disabled="false"
                   class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
+                  data-test="filterOption"
+                  data-test-id="val2"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -2994,6 +3040,8 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                 <span
                   aria-disabled="false"
                   class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
+                  data-test="filterOption"
+                  data-test-id="val3"
                 >
                   <span
                     class="MuiIconButton-label-id"