fix(scene): fix Scene Hierarchy Tree item for node with no components

awslabs · Mar 6, 2024 · e341fa5 · e341fa5
1 parent 00c1707
commit e341fa5
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 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,7 @@ test.describe('scene-composer--local-scene', () => {
 
   test('get object by name', async ({ page }) => {
     const state = new PlaywrightHelper(page, localScene);
-    const palletJack = await state.getObjecByName('PalletJack');
+    const palletJack = await state.getObjectByName('PalletJack');
 
     // assert expected values on object
     expect(palletJack.isObject3D).toBeTruthy();
@@ -30,7 +30,7 @@ test.describe('scene-composer--local-scene', () => {
 
   test('validate hierarchy interaction', async ({ page }) => {
     const state = new PlaywrightHelper(page, localScene);
-    const palletJack = await state.getObjecByName('PalletJack');
+    const palletJack = await state.getObjectByName('PalletJack');
     // select object in hierarchy
     await page.getByTestId(palletJack.userData.componentRef).click();
 

diff --git a/packages/scene-composer/e2e/tests/utils/sceneHelpers.ts b/packages/scene-composer/e2e/tests/utils/sceneHelpers.ts
@@ -35,15 +35,15 @@ export class PlaywrightHelper {
     this.localScene = localScene;
   }
 
-  async goto(localScene: string) {
+  async goto(localScene: string): Promise<void> {
     await this.page.goto(localScene);
   }
 
-  async getFrame(localFrame: string) {
+  async getFrame(localFrame: string): Promise<Locator> {
     return this.page.locator(localFrame);
   }
 
-  async getSceneId(frame: Locator) {
+  async getSceneId(frame: Locator): Promise<string> {
     const sceneId: string = await frame.evaluate(async () => {
       return await new Promise((res, rej) => {
         const timer = setTimeout(
@@ -64,14 +64,14 @@ export class PlaywrightHelper {
     return sceneId;
   }
 
-  async tmScene(frame: Locator, sceneId: string) {
+  async tmScene(frame: Locator, sceneId: string): Promise<Scene> {
     const sceneResult = await frame.evaluate((_element: HTMLElement, sceneId: string) => {
       return Promise.resolve<Scene>(window['__twinmaker_tests'][sceneId].scene);
     }, sceneId);
     return sceneResult;
   }
 
-  async getScene() {
+  async getScene(): Promise<{ frame: Locator; sceneId: string; scene: Scene }> {
     await this.page.goto(this.localScene);
     const frame = this.page.locator('#root');
     const sceneId = await this.getSceneId(frame);
@@ -107,7 +107,7 @@ export class PlaywrightHelper {
   }
 
   // map harness functions here
-  async getObjecByName(name: string) {
+  async getObjectByName(name: string) {
     return await this.playwrightState('getObjecByName', name);
   }
 }
diff --git a/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx b/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx
@@ -96,7 +96,7 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
       key={key}
       labelNode={
         <SceneNodeLabel
-          dataTestid={node?.components[0].ref}
+          dataTestid={node?.components && node.components.length > 0 ? node?.components[0].ref : undefined}
           objectRef={key}
           labelText={labelText}
           componentTypes={componentTypes}

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