Page Editor data test ids (#8736)

* rename PageEditor sidebar -> ModListingPanel * rename dir * Page Editor data test ids * pr feedback * pr feedback
pixiebrix · Jul 1, 2024 · 35c8a20 · 35c8a20
1 parent 22c1d0d
commit 35c8a20
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/src/pageEditor/modListingPanel/ModListingPanel.tsx b/src/pageEditor/modListingPanel/ModListingPanel.tsx
@@ -67,7 +67,10 @@ const ModListingPanel: React.VFC = () => {
   };
 
   return (
-    <div className={cx(styles.root, "flex-shrink-0")}>
+    <div
+      className={cx(styles.root, "flex-shrink-0")}
+      data-testid="modListingPanel"
+    >
       {/* Expanded sidebar: Actions list (+ always visible Home button) */}
 
       <div className={styles.header}>

diff --git a/src/pageEditor/panes/EditorPane.tsx b/src/pageEditor/panes/EditorPane.tsx
@@ -101,6 +101,7 @@ const EditorPane: React.VFC = () => {
         validateOnMount={false}
         validateOnChange={false}
         validateOnBlur={false}
+        data-testid="editorPane"
       >
         {({ values }) => <EditorPaneContent modComponentFormState={values} />}
       </Formik>

diff --git a/src/pageEditor/panes/ModEditorPane.tsx b/src/pageEditor/panes/ModEditorPane.tsx
@@ -83,7 +83,7 @@ const ModEditorPane: React.VFC = () => {
   }
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-testid="modEditorPane">
       <EditorTabLayout key={layoutKey} tabs={tabItems} />
     </div>
   );

diff --git a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
diff --git a/src/pageEditor/tabs/editTab/EditTab.tsx b/src/pageEditor/tabs/editTab/EditTab.tsx
@@ -76,7 +76,7 @@ const EditTab: React.FC<{
   return (
     <Tab.Pane eventKey={eventKey} className={styles.tabPane}>
       <div className={styles.paneContent}>
-        <div className={styles.nodePanel}>
+        <div className={styles.nodePanel} data-testid="brickActionsPanel">
           <div className={styles.nodeHeader}>
             <span
               className={cx(styles.nodeHeaderTitle, {
@@ -111,7 +111,10 @@ const EditTab: React.FC<{
             <EditorNodeLayout />
           </div>
         </div>
-        <div className={styles.configPanel}>
+        <div
+          className={styles.configPanel}
+          data-testid="brickConfigurationPanel"
+        >
           <ErrorBoundary
             key={
               // Pass in the activeNodeId as the render key for error boundary so
@@ -131,7 +134,7 @@ const EditTab: React.FC<{
             )}
           </ErrorBoundary>
         </div>
-        <div className={styles.collapseWrapper}>
+        <div className={styles.collapseWrapper} data-testid="dataPanel">
           <button
             className={cx(styles.toggle, {
               [styles.active ?? ""]: isDataPanelExpanded,