feat: change html structure and add e2e tests

Endava · Mar 31, 2023 · a9a1d11 · a9a1d11
1 parent 816ae3e
commit a9a1d11
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 19 deletions.
diff --git a/packages/bee-q/src/components/dialog/__tests__/bq-dialog.e2e.ts b/packages/bee-q/src/components/dialog/__tests__/bq-dialog.e2e.ts
@@ -19,12 +19,53 @@ describe('bq-dialog', () => {
     expect(element.shadowRoot).not.toBeNull();
   });
 
-  it('should display text', async () => {
+  it('should display title', async () => {
     const page = await newE2EPage();
-    await page.setContent('<bq-dialog></bq-dialog>');
+    await page.setContent('<bq-dialog><h3 slot="title">Dialog Title</h3></bq-dialog>');
+
+    const element = await page.find('bq-dialog');
+
+    expect(element).toEqualText('Dialog Title');
+  });
+
+  it('should display content', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<bq-dialog><p slot="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></bq-dialog>',
+    );
 
-    const element = await page.find('bq-dialog >>> p');
+    const element = await page.find('bq-dialog');
 
-    expect(element).toEqualText('My name is Stencil');
+    expect(element).toEqualText('Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
   });
+
+  // it('closes dialog when clicking on the close button', async () => {
+  //   const page = await newE2EPage();
+  //   await page.setContent('<bq-dialog></bq-dialog>');
+
+  //   const dialogClosedEvent = await page.spyOnEvent('bqClick');
+
+  //   const element = await page.find('bq-dialog >>> [part="button-close"]');
+
+  //   await element.click();
+
+  //   expect(dialogClosedEvent).toHaveReceivedEventTimes(1);
+  // });
+
+  // it('should render footer with at least one button', async () => {
+  //   const page = await newE2EPage();
+  //   await page.setContent(`
+  //   <bq-dialog><footer slot="buttons">
+  //       <bq-button appearance="primary" size="small" type="button" variant="ghost" class="hydrated">
+  //         Primary button
+  //       </bq-button>
+  //       <bq-button appearance="primary" size="small" type="button" variant="standard"> Primary button </bq-button>
+  //     </footer>
+  //   </bq-dialog>
+  // `);
+
+  //   const element = await page.find('bq-dialog');
+
+  //   expect(element).toContain('bq-button');
+  // });
 });
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -6,7 +6,7 @@ import { DIALOG_SIZE, DIALOG_FOOTER_VARIANT, TDialogSize, TDialogFooterVariant }
 /**
  * @part base - The component wrapper container inside the shadow DOM
  * @part container - The `<div>` container that holds the dialog content
- * @part icon-close - The icon that close the dialog on click
+ * @part button-close - The button that close the dialog on click
  */
 
 @Component({
@@ -125,16 +125,17 @@ export class BqDialog {
                 <slot name="content" />
               </div>
             </div>
-            <bq-button class="cursor-auto" appearance="text" size="small">
-              <bq-icon
-                class="cursor-pointer"
-                name="x"
-                role="img"
-                title="Close"
-                part="icon-close"
+            <div>
+              <bq-button
+                class="cursor-auto"
+                appearance="text"
+                size="small"
                 onClick={this.handleCloseClick}
-              />
-            </bq-button>
+                part="button-close"
+              >
+                <bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
+              </bq-button>
+            </div>
           </header>
           <footer
             class={{

diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
@@ -38,11 +38,11 @@ Type: `Promise<void>`
 
 ## Shadow Parts
 
-| Part           | Description                                           |
-| -------------- | ----------------------------------------------------- |
-| `"base"`       | The component wrapper container inside the shadow DOM |
-| `"container"`  | The `<div>` container that holds the dialog content   |
-| `"icon-close"` | The icon that close the dialog on click               |
+| Part             | Description                                           |
+| ---------------- | ----------------------------------------------------- |
+| `"base"`         | The component wrapper container inside the shadow DOM |
+| `"button-close"` | The button that close the dialog on click             |
+| `"container"`    | The `<div>` container that holds the dialog content   |
 
 
 ## Dependencies