Add test-ids to product feed (#669)

* add test-ids to product feed

* add dynamic google form

* Update .changeset/poor-hounds-move.md

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>

---------

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>

.changeset/ninety-plums-look.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-products-feed": minor
+---
+
+Added test-id attributes to several meaningful elements. Now quering in automated tests are more stable

.changeset/poor-hounds-move.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-products-feed": minor
+---
+
+Make Google Categories mapping lazy loaded, so the page loads immediately and forms add with a delay. Previously the page was stuck due to large chunk size

apps/products-feed/src/modules/category-mapping/construct-category-breadcrumbs.tsx

@@ -11,7 +11,7 @@ export const CategoryBreadcrumbs = (props: { category: CategoryWithMappingFragme
   const breadcrumbs = constructCategoryBreadcrumbs(props.category);
 
   return (
-    <Box display={"flex"} marginBottom={1}>
+    <Box display={"flex"} marginBottom={1} data-testid={"category-breadcrumb"}>
       {breadcrumbs.map((category, index) => {
         const isLast = index === breadcrumbs.length - 1;
 

apps/products-feed/src/modules/category-mapping/ui/category-mapping-form.tsx

@@ -59,6 +59,7 @@ export const CategoryMappingForm = ({
           render={({ field: { value, onChange } }) => {
             return (
               <select
+                data-testid={"google-category-select"}
                 style={{ width: "100%" }}
                 value={value}
                 onChange={(event) => {
@@ -75,7 +76,12 @@ export const CategoryMappingForm = ({
             );
           }}
         />
-        <Button type="submit" variant="primary" disabled={isLoading || !formState.isDirty}>
+        <Button
+          data-testid={"google-category-submit"}
+          type="submit"
+          variant="primary"
+          disabled={isLoading || !formState.isDirty}
+        >
           Save
         </Button>
       </Box>

apps/products-feed/src/modules/category-mapping/ui/category-mapping.tsx

@@ -16,7 +16,7 @@ export const CategoryMapping = () => {
   }
 
   return (
-    <Box>
+    <Box data-testid="categories-mapping-container">
       {categories!.map((category) => (
         <CategoryMappingForm category={category} key={category.id} marginBottom={5} />
       ))}

apps/products-feed/src/pages/categories.tsx

@@ -1,7 +1,14 @@
 import { NextPage } from "next";
-import { CategoryMapping } from "../modules/category-mapping/ui/category-mapping";
 import { Breadcrumbs } from "@saleor/apps-ui";
-import { Box } from "@saleor/macaw-ui/next";
+import { Box, Text } from "@saleor/macaw-ui/next";
+import dynamic from "next/dynamic";
+
+const DynamicCategoryMapping = dynamic(
+  () => import("../modules/category-mapping/ui/category-mapping").then((m) => m.CategoryMapping),
+  {
+    loading: () => <Text>Loading...</Text>,
+  }
+);
 
 const CategoriesPage: NextPage = () => {
   return (
@@ -10,7 +17,7 @@ const CategoriesPage: NextPage = () => {
         <Breadcrumbs.Item href={"/"}>Configuration</Breadcrumbs.Item>
         <Breadcrumbs.Item>Categories Mapping</Breadcrumbs.Item>
       </Breadcrumbs>
-      <CategoryMapping />
+      <DynamicCategoryMapping />
     </Box>
   );
 };

apps/products-feed/src/pages/configuration.tsx

@@ -18,7 +18,13 @@ const ConfigurationPage: NextPage = () => {
   return (
     <Box>
       <Box __marginBottom="100px">
-        <Text variant={"hero"} size={"medium"} as={"h1"} marginBottom={5}>
+        <Text
+          variant={"hero"}
+          size={"medium"}
+          as={"h1"}
+          marginBottom={5}
+          data-testid={"root-heading"}
+        >
           Configuration
         </Text>
         <Paragraph>
@@ -39,6 +45,7 @@ const ConfigurationPage: NextPage = () => {
         </Text>
       </Box>
       <AppSection
+        data-testid={"s3-configuration-section"}
         __marginBottom="100px"
         includePadding
         heading={"AWS S3 Bucket"}
@@ -69,6 +76,7 @@ const ConfigurationPage: NextPage = () => {
         }
       />
       <AppSection
+        data-testid={"channels-configuration-section"}
         __marginBottom="100px"
         includePadding
         heading={"Channels configuration"}
@@ -112,6 +120,7 @@ const ConfigurationPage: NextPage = () => {
         }
       />
       <AppSection
+        data-testid={"categories-mapping-section"}
         __marginBottom="100px"
         includePadding
         heading={"Categories mapping"}