migrate tests to @open-wc/testing

packages/elements/css/bloch_display.css

@@ -38,7 +38,7 @@ bloch-display {
     @apply bg-green-50;
   }
 
-  &[data-grabbed]::part(sphere-border) {
+  &[data-draggable-grabbed]::part(sphere-border) {
     @apply border-purple-500;
   }
 

packages/elements/css/control_gate.css

@@ -12,7 +12,7 @@ control-gate {
     color: var(--qni-semantic-fill-color-primary);
   }
 
-  &[data-disabled]:not([data-grabbed])::part(icon) {
+  &[data-disabled]:not([data-draggable-grabbed])::part(icon) {
     color: var(--qni-semantic-fill-color-disabled);
   }
 }

packages/elements/css/measurement_gate.css

@@ -13,7 +13,7 @@ measurement-gate {
     color: var(--qni-semantic-color-intermediate);
   }
 
-  circuit-dropzone &[data-snapped]::part(icon) {
+  circuit-dropzone &[data-draggable-snapped]::part(icon) {
     @apply origin-center transform-gpu;
     @apply rotate-90 sm:rotate-0;
   }
@@ -27,7 +27,7 @@ measurement-gate {
     @apply absolute inset-0;
   }
 
-  circuit-dropzone &[data-snapped]::part(value) {
+  circuit-dropzone &[data-draggable-snapped]::part(value) {
     @apply origin-center transform-gpu;
     @apply rotate-90 sm:rotate-0;
   }
@@ -51,17 +51,17 @@ measurement-gate {
     content: '1';
   }
 
-  /* data-grabbed */
+  /* data-draggable-grabbed */
 
-  &[data-grabbed]::part(body) {
+  &[data-draggable-grabbed]::part(body) {
     background-color: var(--qni-semantic-fill-color-intermediate);
   }
 
-  &[data-grabbed]::part(icon) {
+  &[data-draggable-grabbed]::part(icon) {
     @apply text-purple-400;
   }
 
-  &[data-grabbed]::part(value)::after {
+  &[data-draggable-grabbed]::part(value)::after {
     @apply text-white;
   }
 }

packages/elements/css/qni.css

@@ -99,7 +99,7 @@
   }
 
   .qpu-operation-hoverable {
-    palette-dropzone &[data-hoverable]:not([data-grabbed]):hover::part(outline),
+    palette-dropzone &[data-hoverable]:not([data-draggable-grabbed]):hover::part(outline),
     quantum-circuit:not([data-editing]) &[data-hoverable]:not([data-active]):not([data-resizing]):hover::part(outline) {
       @apply block;
       outline: var(--qni-semantic-border-width-outline) solid var(--qni-semantic-border-color-hover);
@@ -113,26 +113,26 @@
     }
   }
 
-  /* data-grabbed */
+  /* data-draggable-grabbed */
 
   .qpu-operation-grabbable {
-    &[data-grabbed] {
+    &[data-draggable-grabbed] {
       @apply cursor-grabbing;
     }
 
-    &[data-grabbed]:not([data-snapped]) {
+    &[data-draggable-grabbed]:not([data-draggable-snapped]) {
       @apply z-40;
     }
 
-    &[data-grabbed]::part(body) {
+    &[data-draggable-grabbed]::part(body) {
       background-color: var(--qni-semantic-fill-color-intermediate);
     }
 
-    &[data-grabbed]::part(icon) {
+    &[data-draggable-grabbed]::part(icon) {
       color: var(--qni-semantic-color-icon-inverse);
     }
 
-    &[data-grabbed]::part(outline) {
+    &[data-draggable-grabbed]::part(outline) {
       @apply hidden;
     }
   }
@@ -486,7 +486,7 @@
      * - on palette
      * - while dragging
      */
-    quantum-circuit:not([data-editing]) circuit-dropzone &:not([data-grabbed]):hover::part(resize-handle),
+    quantum-circuit:not([data-editing]) circuit-dropzone &:not([data-draggable-grabbed]):hover::part(resize-handle),
     &[data-resizing]::part(resize-handle) {
       @apply visible;
     }
@@ -515,7 +515,7 @@
     }
 
     /* show trash icon */
-    circuit-dropzone &:not([data-snapped])::part(icon)::before {
+    circuit-dropzone &:not([data-draggable-snapped])::part(icon)::before {
       @apply absolute -top-2.5 -right-2.5;
       @apply h-6 w-6;
       @apply z-10;

packages/elements/css/swap_gate.css

@@ -12,7 +12,7 @@ swap-gate {
     color: var(--qni-semantic-fill-color-primary);
   }
 
-  &[data-disabled]:not([data-grabbed])::part(icon) {
+  &[data-disabled]:not([data-draggable-grabbed])::part(icon) {
     color: var(--qni-semantic-fill-color-disabled);
   }
 }

packages/elements/css/write_gate.css

@@ -16,7 +16,7 @@ write-gate {
     @apply text-zinc-200;
   }
 
-  circuit-dropzone &[data-snapped]::part(icon) {
+  circuit-dropzone &[data-draggable-snapped]::part(icon) {
     @apply origin-center transform-gpu;
     @apply rotate-90 sm:rotate-0;
   }
@@ -25,7 +25,7 @@ write-gate {
     @apply absolute inset-0;
   }
 
-  circuit-dropzone &[data-snapped]::part(value) {
+  circuit-dropzone &[data-draggable-snapped]::part(value) {
     @apply origin-center transform-gpu;
     @apply rotate-90 sm:rotate-0;
   }
@@ -71,17 +71,17 @@ write-gate {
     @apply text-4xl;
   }
 
-  /* data-grabbed */
+  /* data-draggable-grabbed */
 
-  &[data-grabbed]::part(icon) {
+  &[data-draggable-grabbed]::part(icon) {
     @apply text-purple-400;
   }
 
-  &[data-grabbed][data-value='0']::part(value)::after {
+  &[data-draggable-grabbed][data-value='0']::part(value)::after {
     @apply text-white;
   }
 
-  &[data-grabbed][data-value='1']::part(value)::after {
+  &[data-draggable-grabbed][data-value='1']::part(value)::after {
     @apply text-white;
   }
 }

packages/elements/package.json

@@ -51,9 +51,11 @@
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@github/prettier-config": "^0.0.4",
+    "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-commonjs": "^18",
     "@rollup/plugin-replace": "^3.0.1",
     "@size-limit/preset-small-lib": "^7.0.8",
+    "@web/dev-server-esbuild": "^0.3.2",
     "@web/dev-server-rollup": "^0.3.14",
     "@web/test-runner": "^0.13.25",
     "autoprefixer": "^10.4.0",

packages/elements/src/circuit-dropzone-element.ts

@@ -101,7 +101,7 @@ export class CircuitDropzoneElement extends HTMLElement {
         initOperation: () => {
           Util.notNull(this.operation)
 
-          this.operation.snapped = true
+          this.operation.snap()
         },
         snapOperation: () => {
           Util.notNull(this.operation)
@@ -124,7 +124,7 @@ export class CircuitDropzoneElement extends HTMLElement {
           this.append(event.operation)
           this.operationName = event.operation.tagName.toLocaleLowerCase()
           this.occupied = true
-          event.operation.snapped = true
+          event.operation.snap()
         },
         deleteOperation: (_context, event) => {
           if (event.type !== 'DELETE_OPERATION') return

packages/elements/src/circuit-editor-element.ts

@@ -218,7 +218,7 @@ export class CircuitEditorElement extends HTMLElement {
           const operation = event.operation
           const snapTarget = this.circuit.snapTargetAt(event.x, event.y)
 
-          operation.snapped = true
+          operation.snap()
 
           if (snapTarget.dropzone === null) {
             const stepIndex = snapTarget.stepIndex
@@ -314,7 +314,7 @@ export class CircuitEditorElement extends HTMLElement {
           if (event.type !== 'END_DRAGGING_OPERATION') return
 
           const operation = event.operation
-          if (operation.snapped) return
+          if (operation.isSnapped) return
 
           if (this.inspectorButton === undefined) return
           if (!this.inspectorButton.isInspectorShown) return
@@ -428,7 +428,7 @@ export class CircuitEditorElement extends HTMLElement {
     const el = event.target
 
     if (isDraggable(el)) {
-      el.draggable = true
+      el.enableDrag()
     } else {
       throw new DetailedError('Not a draggable element.', {el})
     }
@@ -471,7 +471,7 @@ export class CircuitEditorElement extends HTMLElement {
       !this.inspectorButton.popup.reference.contains(clickedEl) &&
       this.activeOperation !== null
     ) {
-      this.activeOperation.active = false
+      this.activeOperation.deactivate()
     }
   }