[FIX] allow users to use the browser-back button (#650)

* Rename index to home

* Reorganize the routing

* Remove superfluous page setting methods

* Remove unnecessary getters from store

* Must rename tests too

* Mock routing in the next-page test

* Add test for navbar

* Ensure next-page button does not appear on download page

Also remove some unnecessary cypress comands

* Remove deprecated store methods from test

No longer needed

* Remove these files as well

* Add browser-back test to e2e test

components/next-page.vue

@@ -8,7 +8,7 @@
             <p
                 class="instructions-text"
                 data-cy="instructions-nextpage"
-                v-if="!isPageAccessible(getNextPage)">
+                v-if="!isPageAccessible(nextPage)">
                 {{ uiText.instructions[currentPage] }}
             </p>
 
@@ -17,9 +17,9 @@
             <b-button
                 class="float-right"
                 data-cy="button-nextpage"
-                :disabled="!isPageAccessible(pageData[getNextPage].pageName)"
+                :disabled="!isPageAccessible(nextPage)"
                 :variant="nextPageButtonColor"
-                @click="navigateToPage(getNextPage);">
+                @click="navigateToPage(nextPage);">
                 {{ uiText.button[currentPage] }}
             </b-button>
         </b-col>
@@ -69,20 +69,29 @@
 
             ...mapGetters([
 
-                "getNextPage",
                 "isPageAccessible"
             ]),
 
             ...mapState([
 
-                "currentPage",
-                "pageData"
+                "pageOrder"
             ]),
 
-            nextPageButtonColor() {
+            currentPage() {
+                return this.$route.name;
+            },
+            nextPage() {
+                const pageIndex = this.pageOrder.indexOf(this.currentPage);
+                if (pageIndex < this.pageOrder.length - 1) {
+                    return this.pageOrder[pageIndex + 1];
+                } else {
+                    return "";
+                }
+            },
 
+            nextPageButtonColor() {
                 // Bootstrap variant color of the button leading to the next page
-                return this.isPageAccessible(this.getNextPage) ? "success" : "secondary";
+                return this.isPageAccessible(this.nextPage) ? "success" : "secondary";
             }
         },
 

components/tool-navbar.vue

@@ -34,14 +34,14 @@
                 <b-navbar-nav class="ml-auto right-nav">
 
                     <b-nav-item
-                        v-for="(navItem, _key) in pageData"
-                        :active="currentPageName === navItem.fullName"
-                        :class="getNavItemColor(navItem)"
-                        :data-cy="'menu-item-' + navItem.pageName"
-                        :disabled="!isPageAccessible(navItem.pageName)"
-                        :key="navItem.pageName"
-                        @click="navigateToPage(navItem.pageName)">
-                        {{ navItem.fullName }}
+                        v-for="(pageName) in pageOrder"
+                        :active="currentPageName === pageName"
+                        :class="getNavItemColor(pageName)"
+                        :data-cy="'menu-item-' + pageName"
+                        :disabled="!isPageAccessible(pageName)"
+                        :key="pageName"
+                        @click="navigateToPage(pageName)">
+                        {{ pageName }}
                     </b-nav-item>
                     <span class="nav-separator">|</span>
                     <b-nav-item
@@ -107,13 +107,11 @@
 
             ...mapState([
 
-                "currentPage",
-                "pageData"
+                "pageOrder"
             ]),
 
             currentPageName() {
-
-                return this.pageData[this.currentPage].fullName;
+                return this.$route.name;
             }
         },
 
@@ -122,17 +120,17 @@
                 "navigateToPage"
             ]),
 
-            getNavItemColor(p_navItemData) {
+            getNavItemColor(pageName) {
 
                 // Default color for currently unaccessible page
                 let variant = "secondary";
 
                 // The nav item color for the current page
-                if ( this.currentPageName === p_navItemData.fullName ) {
+                if ( this.currentPageName === pageName ) {
                     variant = "dark";
                 }
                 // Else, if the page is accessible
-                else if ( this.isPageAccessible(p_navItemData.pageName) ) {
+                else if ( this.isPageAccessible(pageName) ) {
                     variant = "success";
                 }
 

cypress/component/index_page.cy.js → cypress/component/home_page.cy.js

@@ -1,5 +1,5 @@
 import fileSelector from "~/components/file-selector.vue";
-import indexPage from "~/pages/index.vue";
+import homePage from "~/pages/home.vue";
 
 let store = {};
 
@@ -8,7 +8,7 @@ const stubs = {
     "file-selector": fileSelector
 };
 
-describe("The index page", () => {
+describe("The Home page", () => {
 
     // Setup
     beforeEach(() => {
@@ -27,7 +27,7 @@ describe("The index page", () => {
     it("Mounts empty and displays all UI elements", () => {
 
         // Act
-        cy.mount(indexPage, {
+        cy.mount(homePage, {
 
             mocks: { $store: store },
             stubs: stubs,
@@ -44,7 +44,7 @@ describe("The index page", () => {
     it("Correctly displays previews of the loaded data", () => {
 
         // Act
-        cy.mount(indexPage, {
+        cy.mount(homePage, {
 
             mocks: { $store: Object.assign({}, store, {
 
@@ -87,7 +87,7 @@ describe("The index page", () => {
         // Setup
         cy.fixture("examples/good/example_short.tsv").as("exampleTable");
         cy.spy(store, "dispatch").as("dispatchSpy");
-        cy.mount(indexPage, {
+        cy.mount(homePage, {
 
             mocks: { $store: store },
             stubs: stubs,
@@ -119,7 +119,7 @@ describe("The index page", () => {
         ];
         cy.fixture("examples/good/example_short.json").as("exampleDictionary");
         cy.spy(store, "dispatch").as("dispatchSpy");
-        cy.mount(indexPage, {
+        cy.mount(homePage, {
 
             mocks: { $store: store },
             stubs: stubs,

cypress/component/next-page.cy.js

@@ -19,59 +19,34 @@ describe("next page button", () => {
 
             commit: () => {},
 
-            getters: {
-
-                getNextPage: () => {
-
-                    return "mynextpage";
-                }
-            },
-
-            mutations: {
-
-                setCurrentPage: () => (p_pageName) => {
-
-                    store.state.currentPage = p_pageName;
-                }
-            },
-
             state: {
 
                 currentPage: "mypage",
                 dataTable: [],
-                pageData: {
-
-                    mypage: {
-
-                        location: "mypage",
-                        pageName: "mypage"
-                    },
-
-                    mynextpage: {
-
-                        location: "mynextpage",
-                        pageName: "mynextpage"
-                    }
-                }
+                pageOrder: ["mypage", "mynextpage"]
             }
         };
     });
 
     it("Does instruction text appear above the next page button when the button is disabled", () => {
 
-        // Setup - The next page after 'mypage' is currently inaccessible
-        store.getters.isPageAccessible = () => (p_pageName) => false;
-
         // Act - Mount the next page button with mocks
         cy.mount(nextPage, {
 
-            computed: store.getters,
+            computed: {
+                isPageAccessible: () => (p_pageName) => false
+            },
             data() {
                 return {
                     uiText: uiText
                 };
             },
-            mocks: { $store: store }
+            mocks: {
+                $store: store,
+                $route: {
+                    name: "mypage"
+                }
+            }
         });
 
         // Assert - Correct instructions are visible (since button is disabled due to next page inaccessibility)
@@ -80,19 +55,23 @@ describe("next page button", () => {
 
     it("Button is enabled when next page is accessible and vice-versa", () => {
 
-        // Setup - Mock the page accessibility getter to test effects on the next page button
-        store.getters.isPageAccessible = () => (p_pageName) => true;
-
         // Act - Mount the next page button with mocks
         cy.mount(nextPage, {
 
-            computed: store.getters,
+            computed: {
+                isPageAccessible: () => (p_pageName) => true
+            },
             data() {
                 return {
                     uiText: uiText
                 };
             },
-            mocks: { $store: store }
+            mocks: {
+                $store: store,
+                $route: {
+                    name: "mypage"
+                }
+            }
         });
 
         // Assert - Button is enabled when next page is accessible
@@ -101,19 +80,23 @@ describe("next page button", () => {
 
     it("Button is disabled when next page is not accessible", () => {
 
-        // Setup - Mock the page accessibility getter to test effects on the next page button
-        store.getters.isPageAccessible = () => (p_pageName) => false;
-
         // Act - Mount the next page button with mocks
         cy.mount(nextPage, {
 
-            computed: store.getters,
+            computed: {
+                isPageAccessible: () => (p_pageName) => false
+            },
             data() {
                 return {
                     uiText: uiText
                 };
             },
-            mocks: { $store: store }
+            mocks: {
+                $store: store,
+                $route: {
+                    name: "mypage"
+                }
+            }
         });
 
         // Assert - Button is enabled when next page is accessible
@@ -122,19 +105,23 @@ describe("next page button", () => {
 
     it("Does the label on the next page button correspond to the text for the current page?", () => {
 
-        // Setup - Mock the page accessibility getter to test effects on the next page button
-        store.getters.isPageAccessible = () => (p_pageName) => true;
-
         // Act - Mount the next page button with mocks
         cy.mount(nextPage, {
 
-            computed: store.getters,
+            computed: {
+                isPageAccessible: () => (p_pageName) => true
+            },
             data() {
                 return {
                     uiText: uiText
                 };
             },
-            mocks: { $store: store }
+            mocks: {
+                $store: store,
+                $route: {
+                    name: "mypage"
+                }
+            }
         });
 
         // Assert - Check button text corresponds to the recently set page

cypress/component/tool-navbar.cy.js

@@ -0,0 +1,43 @@
+import toolNavbar from '~/components/tool-navbar.vue';
+
+
+describe('Navbar Component', () => {
+  beforeEach(() => {
+    const $route = { name: 'home' };
+    const store = {
+      state: {
+        pageOrder: ['home', 'about', 'contact']
+      },
+      getters: {
+        isPageAccessible: () => true
+      },
+      dispatch: () => {}
+    };
+
+    cy.spy(store, "dispatch").as("dispatchSpy");
+
+    cy.mount(toolNavbar, {
+      mocks: {
+        $route,
+        $store: store
+      }
+    });
+  });
+
+  it('lists all nav items', () => {
+    cy.get('[data-cy=menu-item-home]').should('exist');
+    cy.get('[data-cy=menu-item-about]').should('exist');
+    cy.get('[data-cy=menu-item-contact]').should('exist');
+  });
+
+  it('the current page rout is highlighted with a different css style', () => {
+    cy.get('[data-cy=menu-item-home]').should('have.class', 'dark');
+    cy.get('[data-cy=menu-item-about]').should('not.have.class', 'dark');
+    cy.get('[data-cy=menu-item-contact]').should('not.have.class', 'dark');
+  });
+
+  it('navigates to a page on nav item click', () => {
+    cy.get('[data-cy=menu-item-about]').click();
+    cy.get('@dispatchSpy').should('have.been.calledWith', 'navigateToPage', 'about');
+  });
+});