test(dialog): provide basic tests

Author: GregOnNet

Diff for: packages/kit-headless/src/components/dialog/dialog.spec.tsx

@@ -4,18 +4,51 @@ import * as Dialog from './dialog';
 describe('Dialog', () => {
   it('renders an opened Dialog', () => {
     mount(
-      <Dialog.Root open={true}>
-        <h2>Hello World!</h2>
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <button>Open</button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <h2 data-test="dialog-title">Hello World!</h2>
+        </Dialog.Portal>
       </Dialog.Root>
     );
 
-    cy.get('dialog').should('contain', 'Hello World');
+    cy.get('button').contains(/open/i).click();
+
+    cy.get('[data-test=dialog-title]')
+      .should('be.visible')
+      .should('contain', 'Hello World');
+  });
+
+  it('closes on backdrop-click', () => {
+    mount(
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <button>Open</button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <h2 data-test="dialog-title">Hello World!</h2>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+
+    cy.get('button').contains(/open/i).click();
+
+    cy.get('dialog').click('top');
+
+    cy.get('dialog').should('not.be.visible');
   });
 
   it('does not show if Dialog is closed', () => {
     mount(
-      <Dialog.Root open={false}>
-        <h2>Hello World!</h2>
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <button>Open</button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <h2>Hello World!</h2>
+        </Dialog.Portal>
       </Dialog.Root>
     );