update integration tests

svelte-plugins · Apr 1, 2021 · 2ec7212 · 2ec7212
1 parent 03be90e
commit 2ec7212
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 91 deletions.
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
@@ -13,113 +13,134 @@
   <div id="overlay"></div>
 {/if}
 
-<div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
-  <div class="container">
+<header>
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
     <button id="obstructions" class="badge" data-testid="toggle-obstructions" class:on={enableObstructionDetection} on:click={handleClick}>
       Obstructions: {status}
     </button>
     <p class="badge"><b>Hint:</b> Open dev console to see debug output.</p>
   </div>
-  <div class="flex justify-between">
-    <div class="w-1/2 mr-4 h-64 block"></div>
-    <div class="w-1/2 flex flex-col space-y-2">
-      <div class="w-full h-3 block"></div>
+</header>
+
+<main>
+  <div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between">
+      <div class="w-1/2 mr-4 h-64 block"></div>
+      <div class="w-1/2 flex flex-col space-y-2">
+        <div class="w-full h-3 block"></div>
+        <div class="w-full h-2 block"></div>
+        <div class="w-full h-2 block"></div>
+        <div class="w-full h-2 block"></div>
+        <div class="w-full h-2 block"></div>
+        <div class="w-full h-2 block"></div>
+        <div class="w-3/4 h-2 block"></div>
+      </div>
+    </div>
+    <div class="flex flex-col space-y-2">
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
       <div class="w-full h-2 block"></div>
       <div class="w-full h-2 block"></div>
+      <div class="w-1/5 h-2 block"></div>
+    </div>
+    <div class="flex">
+      <div class="flex-1 h-64 block" data-testid="top">
+        <ContainerExample enableObstructionDetection={enableObstructionDetection} />
+      </div>
+    </div>
+    <div class="flex flex-col w-4/6 space-y-2">
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-3/5 h-2 block"></div>
+    </div>
+    <div class="flex items-stretch h-48">
+      <div class="flex-1 mr-4 block"></div>
+      <div class="flex-1 block"></div>
+      <div class="flex-1 ml-4 block"></div>
+    </div>
+    <div class="flex flex-col w-4/6 space-y-2">
       <div class="w-full h-2 block"></div>
       <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-3/5 h-2 block"></div>
+    </div>
+    <div class="flex">
+      <div class="flex-1 h-64 block" data-testid="middle">
+        <ContainerExample enableObstructionDetection={enableObstructionDetection}>
+          Hello World!
+        </ContainerExample>
+      </div>
+    </div>
+    <div class="flex flex-col space-y-2">
       <div class="w-full h-2 block"></div>
       <div class="w-3/4 h-2 block"></div>
+      <div class="w-2/3 h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-4/5 h-2 block"></div>
+      <div class="w-3/5 h-2 block"></div>
+      <div class="w-full h-2 block"></div>
     </div>
-  </div>
-  <div class="flex flex-col space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-1/5 h-2 block"></div>
-  </div>
-  <div class="flex">
-    <div class="flex-1 h-64 block" data-testid="top">
-      <ContainerExample enableObstructionDetection={enableObstructionDetection} />
+    <div class="flex items-stretch h-48">
+      <div class="flex-1 mr-2 block"></div>
+      <div class="flex-1 ml-2 block"></div>
     </div>
-  </div>
-  <div class="flex flex-col w-4/6 space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-3/5 h-2 block"></div>
-  </div>
-  <div class="flex items-stretch h-48">
-    <div class="flex-1 mr-4 block"></div>
-    <div class="flex-1 block"></div>
-    <div class="flex-1 ml-4 block"></div>
-  </div>
-  <div class="flex flex-col w-4/6 space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-3/5 h-2 block"></div>
-  </div>
-  <div class="flex">
-    <div class="flex-1 h-64 block" data-testid="middle">
-      <ContainerExample enableObstructionDetection={enableObstructionDetection}>
-        Hello World!
-      </ContainerExample>
+    <div class="flex items-stretch h-48">
+      <div class="flex-1 mr-4 block"></div>
+      <div class="flex-1 block" data-testid="bottom">
+        <ContainerExample />
+      </div>
+      <div class="flex-1 ml-4 block"></div>
     </div>
-  </div>
-  <div class="flex flex-col space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-3/4 h-2 block"></div>
-    <div class="w-2/3 h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-4/5 h-2 block"></div>
-    <div class="w-3/5 h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-  </div>
-  <div class="flex items-stretch h-48">
-    <div class="flex-1 mr-2 block"></div>
-    <div class="flex-1 ml-2 block"></div>
-  </div>
-  <div class="flex items-stretch h-48">
-    <div class="flex-1 mr-4 block"></div>
-    <div class="flex-1 block" data-testid="bottom">
-      <ContainerExample />
+    <div class="flex flex-col space-y-2">
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+    </div>
+    <div class="flex flex-col w-4/6 space-y-2">
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-3/5 h-2 block"></div>
+    </div>
+    <div class="flex items-stretch h-48">
+      <div class="flex-1 mr-4 block"></div>
+      <div class="flex-1 block"></div>
+      <div class="flex-1 ml-4 block"></div>
+    </div>
+    <div class="flex">
+      <div class="flex-1 h-64 block"></div>
+    </div>
+    <div class="flex flex-col w-4/6 space-y-2">
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-full h-2 block"></div>
+      <div class="w-3/5 h-2 block"></div>
     </div>
-    <div class="flex-1 ml-4 block"></div>
-  </div>
-  <div class="flex flex-col space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-  </div>
-  <div class="flex flex-col w-4/6 space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-3/5 h-2 block"></div>
-  </div>
-  <div class="flex items-stretch h-48">
-    <div class="flex-1 mr-4 block"></div>
-    <div class="flex-1 block"></div>
-    <div class="flex-1 ml-4 block"></div>
-  </div>
-  <div class="flex">
-    <div class="flex-1 h-64 block"></div>
-  </div>
-  <div class="flex flex-col w-4/6 space-y-2">
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-full h-2 block"></div>
-    <div class="w-3/5 h-2 block"></div>
   </div>
-</div>
+</main>
 
 <style>
+  header {
+    background-color: #fff;
+    box-shadow: 0 1px 8px rgba(0,0,0, .2);
+    left: 0;
+    padding: 8px 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 90;
+  }
+
+  main {
+    position: relative;
+    top: 40px;
+  }
+
   .badge {
     background-color: #ffeaad;
     border-radius: 4px;

diff --git a/tests/integration/obstructions.spec.js b/tests/integration/obstructions.spec.js
@@ -14,7 +14,7 @@ describe('obstructions.spec.js', () => {
 
     cy.wait(1000);
 
-    cy.scrollTo(0, 780, { duration: 800 });
+    cy.scrollTo(0, 760, { duration: 800 });
 
     cy.findByTestId('middle').contains(firstRule);
 

diff --git a/tests/integration/rules.spec.js b/tests/integration/rules.spec.js
@@ -38,7 +38,7 @@ describe('rules.spec.js', () => {
 
     cy.findByTestId('middle').contains(secondRule);
 
-    cy.scrollTo(0, 480, { duration: 1000 });
+    cy.scrollTo(0, 400, { duration: 1000 });
 
     cy.wait(3000);