test(router): ✅ update router e2e test

with no valid route and default transition
codegorrilla · Dec 12, 2019 · 51f23f3 · 51f23f3
1 parent 1fb344f
commit 51f23f3
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 1 deletion.
diff --git a/packages/router/__e2e__/default.spec.js b/packages/router/__e2e__/default.spec.js
@@ -1,5 +1,12 @@
 /* eslint-disable cypress/no-unnecessary-waiting */
-const logs = ['leave-from', 'enter-from', 'leave-to', 'enter-to'];
+const logs = [
+  'leave-from',
+  'enter-from',
+  'leave-default',
+  'enter-default',
+  'leave-to',
+  'enter-to',
+];
 
 describe('Route transition', () => {
   it('works', () => {
@@ -18,6 +25,17 @@ describe('Route transition', () => {
       }
     });
 
+    // Go to default
+    cy.get('[data-test=link2]').click();
+    // Check no route
+    logs.forEach((name, i) => {
+      if (i < 4) {
+        cy.get('@logs')
+          .find(`:nth-child(${i + 1})`)
+          .should('contain', name);
+      }
+    });
+
     // Back to home
     cy.get('[data-test=link]').click();
     // Check route "to"

diff --git a/packages/router/__web__/default.html b/packages/router/__web__/default.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>default</title>
+</head>
+
+<body>
+  <div data-barba="wrapper" data-test-wrapper="next">
+    <div data-barba="container" data-barba-namespace="default" data-test-container="next">
+      <h1 data-test="title">default</h1>
+      <a data-test="link" href="index.html">Go to home</a>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/packages/router/__web__/index.html b/packages/router/__web__/index.html
@@ -14,6 +14,7 @@
     <div data-barba="container" data-barba-namespace="home" data-test-container="current">
       <h1 data-test="title">home</h1>
       <a data-test="link" href="page.html">Go to page</a>
+      <a data-test="link2" href="default.html">Go to default</a>
     </div>
   </div>
   <script src="../../core/dist/barba.umd.js"></script>

diff --git a/packages/router/__web__/page.html b/packages/router/__web__/page.html
@@ -13,6 +13,7 @@
     <div data-barba="container" data-barba-namespace="page" data-test-container="next">
       <h1 data-test="title">page</h1>
       <a data-test="link" href="index.html">Go to home</a>
+      <a data-test="link2" href="default.html">Go to default</a>
     </div>
   </div>
 </body>

diff --git a/packages/router/__web__/scripts/default.js b/packages/router/__web__/scripts/default.js
@@ -33,6 +33,22 @@ barba.init({
   debug: true,
   transitions: [
     {
+      name: 'default',
+      leave: data => {
+        console.info('leave-default', data);
+        append('leave-default');
+
+        return Promise.resolve();
+      },
+      enter: data => {
+        console.info('enter-default', data);
+        append('enter-default');
+
+        return Promise.resolve();
+      },
+    },
+    {
+      name: 'from',
       from: { route: 'home' },
       leave: data => {
         console.info('leave-from', data);
@@ -48,6 +64,7 @@ barba.init({
       },
     },
     {
+      name: 'to',
       to: { route: 'home' },
       leave: data => {
         console.info('leave-to', data);