write e2e tests for breadcrumb

apps/generate-ui-v2-e2e/src/e2e/cwd-breadcrumb.cy.ts

@@ -0,0 +1,77 @@
+import { GeneratorSchema } from '@nx-console/shared/generate-ui-types';
+import { schema } from '../support/test-schema';
+import { visitGenerateUi } from '../support/visit-generate-ui';
+
+const schemaWithCwd: GeneratorSchema = {
+  ...schema,
+  context: {
+    prefillValues: {
+      cwd: 'packages/nested',
+    },
+  },
+};
+describe('cwd-breadcrumb component', () => {
+  beforeEach(() => {
+    visitGenerateUi(schemaWithCwd);
+  });
+
+  it('should display the current working directory', () => {
+    shouldContainOriginalPath();
+  });
+
+  it('should navigate to directory when clicking on breadcrumb item', () => {
+    cy.get("[data-cy='cwd-breadcrumb-segment-0']").click();
+    cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'packages');
+    cy.get("[data-cy='cwd-breadcrumb']").should('not.contain', 'nested');
+  });
+
+  it('should use inline edit with buttons to edit path', () => {
+    cy.get("[data-cy='inline-edit-button']").click();
+    cy.get("[data-cy='inline-edit-field']").type(
+      '{selectall}{backspace}packages/hello'
+    );
+    cy.get("[data-cy='inline-edit-confirm']").click();
+    shouldContainModifiedPath();
+  });
+
+  it('should use inline edit with enter key to edit path', () => {
+    cy.get("[data-cy='inline-edit-button']").click();
+    cy.get("[data-cy='inline-edit-field']").type(
+      '{selectall}{backspace}packages/hello{enter}'
+    );
+    shouldContainModifiedPath();
+  });
+
+  it('should use inline edit with buttons to cancel edit', () => {
+    cy.get("[data-cy='inline-edit-button']").click();
+    cy.get("[data-cy='inline-edit-field']").type(
+      '{selectall}{backspace}packages/hello'
+    );
+    cy.get("[data-cy='inline-edit-cancel']").click();
+    shouldContainOriginalPath();
+    cy.get("[data-cy='cwd-breadcrumb']").should('not.contain', 'hello');
+  });
+
+  it('should use inline edit with escape key to cancel edit', () => {
+    cy.get("[data-cy='inline-edit-button']").click();
+    cy.get("[data-cy='inline-edit-field']").type(
+      '{selectall}{backspace}packages/hello{esc}'
+    );
+    shouldContainOriginalPath();
+    cy.get("[data-cy='cwd-breadcrumb']").should('not.contain', 'hello');
+  });
+});
+
+function shouldContainOriginalPath() {
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'Working Directory');
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', '{workspaceRoot}');
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'packages');
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'nested');
+}
+
+function shouldContainModifiedPath() {
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'Working Directory');
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', '{workspaceRoot}');
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'packages');
+  cy.get("[data-cy='cwd-breadcrumb']").should('contain', 'hello');
+}

apps/generate-ui-v2/src/components/cwd-breadcrumb.ts

@@ -61,6 +61,7 @@ export class CwdBreadcrumb extends GeneratorContextContext(
     const pathArray = this.path.split('/');
     return html`
       <div
+        data-cy="cwd-breadcrumb"
         class="text-mutedForeground flex flex-wrap items-center rounded py-2 text-sm leading-none"
       >
         <span class="pr-2"> Working Directory: </span>
@@ -72,11 +73,24 @@ export class CwdBreadcrumb extends GeneratorContextContext(
         </span>
         <span class="mx-2">/</span>
         ${this.isEditable
-          ? this.renderInlineEdit()
+          ? html`
+              ${this.renderInlineEdit()}
+              <icon-element
+                @click="${this.toggleEdit}"
+                icon="close"
+                data-cy="inline-edit-cancel"
+              ></icon-element>
+              <icon-element
+                @click="${this.confirmEdit}"
+                icon="check"
+                data-cy="inline-edit-confirm"
+              ></icon-element>
+            `
           : html`
               ${pathArray.map(
                 (part, index) => html`
                   <span
+                    data-cy="cwd-breadcrumb-segment-${index}"
                     class="${index !== pathArray.length - 1
                       ? 'underline cursor-pointer hover:text-primary'
                       : ''}"
@@ -94,6 +108,7 @@ export class CwdBreadcrumb extends GeneratorContextContext(
                 appearance="icon"
                 text="edit"
                 class="self-center"
+                data-cy="inline-edit-button"
               ></button-element>
             `}
       </div>
@@ -102,26 +117,22 @@ export class CwdBreadcrumb extends GeneratorContextContext(
 
   renderInlineEdit() {
     if (this.editor === 'vscode') {
-      return html`
-        <vscode-text-field
-          type="text"
-          .value="${this.path}"
-          @keydown="${this.handleInlineEditKeydown}"
-        >
-        </vscode-text-field>
-        <icon-element @click="${this.toggleEdit}" icon="close"></icon-element>
-        <icon-element @click="${this.confirmEdit}" icon="check"></icon-element>
-      `;
+      return html` <vscode-text-field
+        type="text"
+        .value="${this.path}"
+        @keydown="${this.handleInlineEditKeydown}"
+        data-cy="inline-edit-field"
+      >
+      </vscode-text-field>`;
     } else {
       return html`
         <input
           class="${intellijFieldColors} ${intellijFocusRing} ${intellijFieldPadding} rounded"
           type="text"
           .value="${this.path}"
           @keydown="${this.handleInlineEditKeydown}"
+          data-cy="inline-edit-field"
         />
-        <icon-element @click="${this.toggleEdit}" icon="close"></icon-element>
-        <icon-element @click="${this.confirmEdit}" icon="check"></icon-element>
       `;
     }
   }