feat(scene composer): adding data-testid to improve e2e test

awslabs · Feb 13, 2024 · 1e5ab86 · 1e5ab86
1 parent 3db0c9b
commit 1e5ab86
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 20 deletions.
diff --git a/packages/scene-composer/e2e/tests/local-scene/scene-composer--local-scene.spec.ts b/packages/scene-composer/e2e/tests/local-scene/scene-composer--local-scene.spec.ts
@@ -20,7 +20,6 @@ test.describe('scene-composer--local-scene', () => {
 
   test('get object by name', async ({ page }) => {
     const state = new PlaywrightHelper(page, localScene);
-    // find object named 'PalletJack'
     const palletJack = await state.getObjecByName('PalletJack');
 
     // assert expected values on object
@@ -29,18 +28,13 @@ test.describe('scene-composer--local-scene', () => {
     expect(palletJack.visible).toBeTruthy();
   });
 
-  test('select object', async ({ page }) => {
+  test('validate hierarchy interaction', async ({ page }) => {
     const state = new PlaywrightHelper(page, localScene);
-    // find object named 'PalletJack'
     const palletJack = await state.getObjecByName('PalletJack');
-
     // select object in hierarchy
-    const formattedName = palletJack.name.replace(/([A-Z])/g, ' $1').trim();
-    const handle = await page.$(`text=${formattedName}`);
-    await handle?.hover();
-    await handle?.click();
+    await page.getByTestId(palletJack.userData.componentRef).click();
 
-    // assert that the associated selectedSceneNode.ref was selected in the Inspector Panel
-    expect(page.getByTestId('cb85148b-00ca-4006-8b0f-600890eaee46')).toBeDefined();
+    // assert that the correct obj is displayed in the Inspector Panel
+    expect(page.getByTestId(`ip-${palletJack.userData.componentRef}`)).toBeDefined();
   });
 });
diff --git a/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx b/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx
@@ -94,7 +94,14 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
   return (
     <EnhancedTreeItem
       key={key}
-      labelNode={<SceneNodeLabel objectRef={key} labelText={labelText} componentTypes={componentTypes} />}
+      labelNode={
+        <SceneNodeLabel
+          dataTestid={node?.components[0].ref}
+          objectRef={key}
+          labelText={labelText}
+          componentTypes={componentTypes}
+        />
+      }
       labelText={labelText}
       onExpand={onExpandNode}
       expanded={expanded}

diff --git a/...rc/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneNodeLabel.tsx b/...rc/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneNodeLabel.tsx
@@ -10,12 +10,13 @@ import { useSceneHierarchyData } from '../../SceneHierarchyDataProvider';
 import ComponentTypeIcon from './ComponentTypeIcon';
 
 export interface SceneNodeLabelProps {
+  dataTestid: string | undefined;
   objectRef: string;
   labelText: string;
   componentTypes?: string[];
 }
 
-const SceneNodeLabel: FC<SceneNodeLabelProps> = ({ objectRef, labelText, componentTypes }) => {
+const SceneNodeLabel: FC<SceneNodeLabelProps> = ({ dataTestid, objectRef, labelText, componentTypes }) => {
   const { toggleObjectVisibility, remove, validationErrors } = useSceneHierarchyData();
   const [visible, setVisible] = useState(true);
   const error = validationErrors[objectRef];
@@ -37,7 +38,7 @@ const SceneNodeLabel: FC<SceneNodeLabelProps> = ({ objectRef, labelText, compone
   }, [objectRef]);
 
   return (
-    <span className={`tm-scene-node-label ${error ? 'error' : ''}`.trim()} title={error}>
+    <span data-testid={dataTestid} className={`tm-scene-node-label ${error ? 'error' : ''}`.trim()} title={error}>
       {componentTypeIcons}
       <p className='tm-scene-node-label-inner'>{labelText}</p>
       <span className='actions'>

diff --git a/...nels/SceneHierarchyPanel/components/SceneHierarchyTree/__tests__/SceneNodeLabel.specs.tsx b/...nels/SceneHierarchyPanel/components/SceneHierarchyTree/__tests__/SceneNodeLabel.specs.tsx
@@ -43,6 +43,7 @@ describe('SceneNodeLabel', () => {
   });
 
   const defaultParams: SceneNodeLabelProps = {
+    dataTestid: 'testid',
     objectRef: '123',
     labelText: 'Text',
     componentTypes: [KnownComponentType.ModelRef],

diff --git a/...Panel/components/SceneHierarchyTree/__tests__/__snapshots__/SceneNodeLabel.specs.tsx.snap b/...Panel/components/SceneHierarchyTree/__tests__/__snapshots__/SceneNodeLabel.specs.tsx.snap
@@ -4,6 +4,7 @@ exports[`SceneNodeLabel should allow deleting node if there's errors 1`] = `
 <div>
   <span
     class="tm-scene-node-label error"
+    data-testid="testid"
     title="There is an error"
   >
     <componenttypeicon
@@ -32,6 +33,7 @@ exports[`SceneNodeLabel should not render an icon if there is no matching type 1
 <div>
   <span
     class="tm-scene-node-label"
+    data-testid="testid"
   >
     <p
       class="tm-scene-node-label-inner"
@@ -51,6 +53,7 @@ exports[`SceneNodeLabel should render with no errors 1`] = `
 <div>
   <span
     class="tm-scene-node-label"
+    data-testid="testid"
   >
     <componenttypeicon
       type="ModelRef"

diff --git a/packages/scene-composer/src/components/panels/SceneNodeInspectorPanel.tsx b/packages/scene-composer/src/components/panels/SceneNodeInspectorPanel.tsx
@@ -131,7 +131,7 @@ export const SceneNodeInspectorPanel: React.FC = () => {
         >
           <FormField label={intl.formatMessage({ defaultMessage: 'Name', description: 'Form field label' })}>
             <TextInput
-              data-test-id={selectedSceneNode.ref}
+              data-testid={`ip-${selectedSceneNode.components[0].ref}`}
               value={selectedSceneNode.name}
               setValue={(e) => handleInputChanges({ name: e?.toString() })}
             />

diff --git a/...poser/src/components/panels/__tests__/__snapshots__/SceneNodeInspectorPanel.spec.tsx.snap b/...poser/src/components/panels/__tests__/__snapshots__/SceneNodeInspectorPanel.spec.tsx.snap
@@ -160,7 +160,7 @@ exports[`SceneNodeInspectorPanel returns expected elements. SceneNode panel cont
           >
             <div
               data-mocked="Input"
-              data-test-id="node-ref"
+              data-testid="ip-undefined"
               value="node-name"
             />
           </div>
@@ -648,7 +648,7 @@ exports[`SceneNodeInspectorPanel returns expected elements. disable rotation, hi
           >
             <div
               data-mocked="Input"
-              data-test-id="node-ref"
+              data-testid="ip-undefined"
               value="node-name"
             />
           </div>
@@ -1057,7 +1057,7 @@ exports[`SceneNodeInspectorPanel returns expected elements. disable rotation, hi
           >
             <div
               data-mocked="Input"
-              data-test-id="node-ref"
+              data-testid="ip-undefined"
               value="node-name"
             />
           </div>
@@ -1433,7 +1433,7 @@ exports[`SceneNodeInspectorPanel returns expected elements. disable scale and ro
           >
             <div
               data-mocked="Input"
-              data-test-id="node-ref"
+              data-testid="ip-undefined"
               value="node-name"
             />
           </div>
@@ -1916,7 +1916,7 @@ exports[`SceneNodeInspectorPanel returns expected elements. disable y scale when
           >
             <div
               data-mocked="Input"
-              data-test-id="node-ref"
+              data-testid="ip-undefined"
               value="node-name"
             />
           </div>

diff --git a/packages/scene-composer/src/components/three-fiber/EntityGroup/index.tsx b/packages/scene-composer/src/components/three-fiber/EntityGroup/index.tsx
@@ -155,7 +155,7 @@ const EntityGroup = ({ node }: IEntityGroupProps): JSX.Element => {
         onClick={onClick}
         onPointerEnter={onPointerEnter}
         onPointerLeave={onPointerLeave}
-        userData={{ nodeRef, componentTypes }}
+        userData={{ nodeRef, componentTypes, dataTestId: object3dRef?.current?.uuid }}
       >
         <ComponentGroup node={node} components={node.components} />
         <ChildGroup node={node} />