From e4497b9ba4fd252ad49ff7e512eec8a598a002d9 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 27 Jun 2023 12:10:19 +0200
Subject: [PATCH] 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                     |  5 +++++
 .changeset/poor-hounds-move.md                      |  5 +++++
 .../construct-category-breadcrumbs.tsx              |  2 +-
 .../category-mapping/ui/category-mapping-form.tsx   |  8 +++++++-
 .../category-mapping/ui/category-mapping.tsx        |  2 +-
 apps/products-feed/src/pages/categories.tsx         | 13 ++++++++++---
 apps/products-feed/src/pages/configuration.tsx      | 11 ++++++++++-
 7 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/ninety-plums-look.md
 create mode 100644 .changeset/poor-hounds-move.md

diff --git a/.changeset/ninety-plums-look.md b/.changeset/ninety-plums-look.md
new file mode 100644
index 0000000..edc1108
--- /dev/null
+++ b/.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
diff --git a/.changeset/poor-hounds-move.md b/.changeset/poor-hounds-move.md
new file mode 100644
index 0000000..012dac3
--- /dev/null
+++ b/.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
diff --git a/apps/products-feed/src/modules/category-mapping/construct-category-breadcrumbs.tsx b/apps/products-feed/src/modules/category-mapping/construct-category-breadcrumbs.tsx
index ad59106..593159b 100644
--- a/apps/products-feed/src/modules/category-mapping/construct-category-breadcrumbs.tsx
+++ b/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;
 
diff --git a/apps/products-feed/src/modules/category-mapping/ui/category-mapping-form.tsx b/apps/products-feed/src/modules/category-mapping/ui/category-mapping-form.tsx
index 5542dfe..b7aa7f4 100644
--- a/apps/products-feed/src/modules/category-mapping/ui/category-mapping-form.tsx
+++ b/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>
diff --git a/apps/products-feed/src/modules/category-mapping/ui/category-mapping.tsx b/apps/products-feed/src/modules/category-mapping/ui/category-mapping.tsx
index 950a61c..cdf5c9b 100644
--- a/apps/products-feed/src/modules/category-mapping/ui/category-mapping.tsx
+++ b/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} />
       ))}
diff --git a/apps/products-feed/src/pages/categories.tsx b/apps/products-feed/src/pages/categories.tsx
index 85e01c9..1d4b7bf 100644
--- a/apps/products-feed/src/pages/categories.tsx
+++ b/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>
   );
 };
diff --git a/apps/products-feed/src/pages/configuration.tsx b/apps/products-feed/src/pages/configuration.tsx
index 735a7cb..c96098b 100644
--- a/apps/products-feed/src/pages/configuration.tsx
+++ b/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"}