fix: show "select a test to run" correctly

vitest-dev · Aug 2, 2024 · f9b3593 · f9b3593
1 parent 1e04d3c
commit f9b3593
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts
@@ -44,6 +44,7 @@ class IframeOrchestrator {
 
     if (config.browser.ui) {
       container.className = 'absolute origin-top mt-[8px]'
+      container.parentElement!.setAttribute('data-ready', 'true')
       container.textContent = ''
     }
     const { width, height } = config.browser.viewport

diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue
@@ -112,19 +112,36 @@ const marginLeft = computed(() => {
         <span v-if="scale < 1">({{ (scale * 100).toFixed(0) }}%)</span>
       </span>
     </div>
-    <div relative>
+    <div id="tester-container" relative>
       <div
         id="tester-ui"
-        class="absolute origin-top mt-[8px]"
+        class="flex h-full justify-center items-center font-light op70"
         :style="{
-          marginLeft,
-          width: `${viewport[0]}px`,
-          height: `${viewport[1]}px`,
-          transform: `scale(${scale})`,
+          '--viewport-width': `${viewport[0]}px`,
+          '--viewport-height': `${viewport[1]}px`,
+          '--tester-transform': `scale(${scale})`,
+          '--tester-margin-left': marginLeft,
         }"
       >
         Select a test to run
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+#tester-container:not([data-ready]) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-ready] #tester-ui {
+  width: var(--viewport-width);
+  height: var(--viewport-height);
+  transform: var(--tester-transform);
+  margin-left: var(--tester-margin-left);
+}
+</style>
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -53,6 +53,7 @@ export const config: UserConfig = {
       transformers: [
         transformerDirectives(),
       ],
+      safelist: 'absolute origin-top mt-[8px]'.split(' '),
     }),
     Components({
       dirs: ['client/components'],