Hubert / Navigation test machine

cypress/integration/api.deriv.com.spec.js

@@ -1,27 +1,23 @@
 /// <reference types="cypress" />
-
-import { testsModel, testsMobileModel } from "./cypressStates";
-import { itTests } from "./itVisitsAndRunsPathTests";
-
 context("Deriv API full run", () => {
-  const testPlans = testsModel('home').getShortestPathPlans();
+  const testPlans = cy.testsModel('home').getShortestPathPlans();
   testPlans.forEach((plan) => {
     describe(plan.description, () => {
-      plan.paths.forEach(itTests('/'));
+      plan.paths.forEach(cy.itTests('/'));
     });
   });
 });
 
 context("Deriv API mobile", () => {
-  const testPlans = testsMobileModel('home').getShortestPathPlans();
+  const testPlans = cy.testsMobileModel('home').getShortestPathPlans();
   beforeEach(() => {
     // run these tests as if in a mobile browser
     // and ensure our responsive UI is correct
     cy.viewport('iphone-x')
   })
   testPlans.forEach((plan) => {
     describe(plan.description, () => {
-      plan.paths.forEach(itTests('/'));
+      plan.paths.forEach(cy.itTests('/'));
     });
   });
 });

cypress/integration/hamburger.spec.js

@@ -0,0 +1,13 @@
+context("Deriv API mobile", () => {
+const testPlans = cy.hamburgerTestModel().getSimplePathPlans();
+    beforeEach(() => {
+        // run these tests as if in a mobile browser
+        // and ensure our responsive UI is correct
+        cy.viewport('iphone-x')
+    })
+    testPlans.forEach((plan) => {
+        describe(plan.description, () => {
+        plan.paths.forEach(cy.itTests('/'));
+        });
+    });
+});

cypress/integration/homeslider.spec.js

@@ -1,25 +1,22 @@
-import { homeSliderTestsModel } from './cypressStates'
-import { itTests } from "./itVisitsAndRunsPathTests";
-
 context("Homepage slider", () => {
-const testPlans = homeSliderTestsModel().getSimplePathPlans();
+const testPlans = cy.homeSliderTestsModel().getSimplePathPlans();
     testPlans.forEach((plan) => {
         describe(plan.description, () => {
-        plan.paths.forEach(itTests('/'));
+        plan.paths.forEach(cy.itTests('/'));
         });
     });
 });
 
 context("Deriv API mobile", () => {
-const testPlans = homeSliderTestsModel().getShortestPathPlans();
+const testPlans = cy.homeSliderTestsModel().getSimplePathPlans();
     beforeEach(() => {
         // run these tests as if in a mobile browser
         // and ensure our responsive UI is correct
         cy.viewport('iphone-x')
     })
     testPlans.forEach((plan) => {
         describe(plan.description, () => {
-        plan.paths.forEach(itTests('/'));
+        plan.paths.forEach(cy.itTests('/'));
         });
     });
 });

cypress/integration/snapshots.homeslider.test.js

@@ -1,11 +1,8 @@
-import { homeSliderTestsModel, homeSliderMobileTestsModel } from "./cypressStates";
-import { itTests } from "./itVisitsAndRunsPathTests";
-
 context("Snapshots", () => {
-const testPlans = homeSliderTestsModel().getSimplePathPlans();
+const testPlans = cy.homeSliderTestsModel().getSimplePathPlans();
     testPlans.forEach((plan) => {
             describe(plan.description, () => {
-            plan.paths.forEach(itTests('/'));
+            plan.paths.forEach(cy.itTests('/'));
             afterEach(() => {
                 cy.get("[aria-label='slider-component']").matchImageSnapshot();
             });
@@ -14,15 +11,15 @@ const testPlans = homeSliderTestsModel().getSimplePathPlans();
 });
 
 context("Snapshots mobile", () => {
-const testPlans = homeSliderTestsModel().getShortestPathPlans();
+const testPlans = cy.homeSliderTestsModel().getShortestPathPlans();
     beforeEach(() => {
         // run these tests as if in a mobile browser
         // and ensure our responsive UI is correct
         cy.viewport('iphone-x')
     })
     testPlans.forEach((plan) => {
             describe(plan.description, () => {
-            plan.paths.forEach(itTests('/'));
+            plan.paths.forEach(cy.itTests('/'));
             afterEach(() => {
                 cy.get("[aria-label='slider-component']").matchImageSnapshot();
             });

cypress/integration/snapshots.test.js

@@ -1,11 +1,8 @@
-import { testsModel } from "./cypressStates";
-import { itTests } from "./itVisitsAndRunsPathTests";
-
 context("Snapshots", () => {
-  const testPlans = testsModel('home').getShortestPathPlans();
+  const testPlans = cy.testsModel('home').getShortestPathPlans();
   testPlans.forEach((plan) => {
     describe(plan.description, () => {
-      plan.paths.forEach(itTests('/'));
+      plan.paths.forEach(cy.itTests('/'));
       afterEach(() => {
         cy.matchImageSnapshot();
       });

cypress/support/index.js

@@ -14,7 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
+import './machine_blueprints/commands.js';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/integration/cypressStates.js → cypress/support/machine_blueprints/commands.js

@@ -1,6 +1,7 @@
 import { createTestModel } from "./createTestModel.js";
 import { derivApiMachine } from "./derivApiMachine";
 import { homeSliderMachine } from "./homeSliderMachine.js";
+import { hamburgerMachine } from "./hamburgerMachine.js"
 
 const cypressStates = {
   home: () => {
@@ -163,6 +164,100 @@ const homeSliderEvents = {
   },
 }
 
-export const testsModel = (initialState) => createTestModel(derivApiMachine(initialState), cypressStates, cypressEvents);
-export const testsMobileModel = (initialState) => createTestModel(derivApiMachine(initialState), cypressMobileStates, cypressMobileEvents);
-export const homeSliderTestsModel = () => createTestModel(homeSliderMachine(), homeSliderStates, homeSliderEvents);
+const hamburgerStates = {
+  open_hamburger: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/api playground/i).should('be.visible')
+  },
+  documentation_closed: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/quickstart/i).should('not.be.visible')
+  },
+  documentation_open: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/quickstart/i).should('be.visible')
+  },
+  quickstart: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/quickstart/i).should('be.visible')
+  },
+  app_registration: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/app registration/i).should('be.visible')
+  },
+  api_guide: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/api guide/i).should('be.visible')
+  },
+  faq: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/faq/i).should('be.visible')
+  },
+  json_schemas: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/json schemas/i).should('be.visible')
+  },
+  bug_bounty: () => {
+    cy.get(`[aria-label="hamburger-dropdown"] .menu-wrapper > :nth-child(2)`).contains(/bug bounty/i).should('be.visible')
+  },
+  api_playground: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/home/i).should('be.visible')
+  },
+  closed_hamburger: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/api playground/i).should('not.be.visible')
+  }
+}
+
+const hamburgerEvents = {
+  CLICK_HAMBURGER: () => {
+    cy.get(`[role="menu"]`).click();
+    cy.wait(500);
+  },
+  CLICK_HOME: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/home/i).click()
+  },
+  TOGGLE_DOCUMENTATION: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+  },
+  CLICK_QUICKSTART: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+    cy.wait(250)
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/quickstart/i).click()
+  },
+  CLICK_APP_REGISTRATION: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+    cy.wait(250)
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/app registration/i).click()
+  },
+  CLICK_API_GUIDE: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+    cy.wait(250)
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/api guide/i).click()
+  },
+  CLICK_FAQ: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+    cy.wait(250)
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/faq/i).click()
+  },
+  CLICK_JSON_SCHEMAS: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+    cy.wait(250)
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/json schemas/i).click()
+  },
+  CLICK_BUG_BOUNTY: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/documentation/i).click()
+    cy.wait(250)
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/bug bounty/i).click()
+  },
+  CLICK_PLAYGROUND: () => {
+    cy.get(`[aria-label="hamburger-dropdown"]`).contains(/api playground/i).click()
+  },
+  CLOSE_HAMBURGER: () => {
+    cy.get(`.desktop\:hidden[role="menu"]`).click();
+    cy.wait(500);
+  },
+}
+
+const itVisitsAndRunsPathTests = (url) => (path) => {
+  it(path.description, function () {
+    cy.visit(url).then(path.test);
+  });
+};
+
+cy.itTests = (appAddress) => itVisitsAndRunsPathTests(appAddress);
+cy.testsModel = (initialState) => createTestModel(derivApiMachine(initialState), cypressStates, cypressEvents);
+cy.testsMobileModel = (initialState) => createTestModel(derivApiMachine(initialState), cypressMobileStates, cypressMobileEvents);
+cy.homeSliderTestsModel = () => createTestModel(homeSliderMachine(), homeSliderStates, homeSliderEvents);
+cy.hamburgerTestModel = () => createTestModel(hamburgerMachine(), hamburgerStates, hamburgerEvents);

cypress/integration/createTestModel.js → cypress/support/machine_blueprints/createTestModel.js

@@ -1,4 +1,4 @@
-import { createMachine } from 'xstate';
+import { createMachine } from "xstate";
 import { createModel } from "@xstate/test";
 
 function addTests(state, tests) {
@@ -18,7 +18,7 @@ function addTests(state, tests) {
     }, {})
   };
 }
-export const createTestModel = (machine, stateTests, eventTests) => {
+  export const createTestModel = (machine, stateTests, eventTests) => {
   const modelMachine = createMachine(addTests(machine, stateTests));
   const model = createModel(modelMachine, { events: eventTests });
   return model;

cypress/support/machine_blueprints/hamburgerMachine.js

@@ -0,0 +1,107 @@
+import { assign, sendParent } from "xstate";
+
+export const hamburgerMachine = () => ({
+    id: 'navigation',
+    initial: 'closed_hamburger',
+    context: { 
+        highlight: 'home',
+        is_documentation_open: false,
+    },
+    on: {
+        CLICK_HAMBURGER: 'open_hamburger',
+    },
+    states: {
+        open_hamburger: {
+            initial: 'home_active',
+            on: { CLICK_HOME: 'home_active' },
+            states: {
+                home_active: {
+                    onEntry: () => {
+                        sendParent('CLOSE_HAMBURGER')
+                        assign({ highlight: 'home'})
+                    },
+                    on: {
+                        CLICK_HAMBURGER: { target: 'closed_hamburger' },
+                        CLOSE_HAMBURGER: 'closed_hamburger',
+                        CLICK_HOME: 'home_active',
+                        TOGGLE_DOCUMENTATION: 'open_documentation',
+                        CLICK_APP_REGISTRATION: 'closed_hamburger',
+                        CLICK_API_GUIDE: 'closed_hamburger',
+                        CLICK_FAQ: 'closed_hamburger',
+                        CLICK_JSON_SCHEMAS: 'closed_hamburger',
+                        CLICK_BUG_BOUNTY: 'closed_hamburger',
+                        CLICK_API_PLAYGROUND: 'closed_hamburger',
+                    }
+                },
+                documentation_closed: {
+                    onEntry: () => { 
+                        assign({ is_documentation_open: false })
+                    },
+                    actions: { set_highlight: assign({ highlight: 'quickstart' })},
+                    on: {
+                       TOGGLE_DOCUMENTATION: 'documentation_open'
+                    },
+                },
+                documentation_open: {
+                    onEntry: () => { 
+                        assign({ is_documentation_open: true })
+                    },
+                    on: {
+                        CLICK_QUICKSTART: 'quickstart',
+                        CLICK_APP_REGISTRATION: 'app_registration',
+                        CLICK_API_GUIDE: 'api_guide',
+                        CLICK_FAQ: 'faq',
+                        CLICK_JSON_SCHEMAS: 'json_schemas',
+                        CLICK_BUG_BOUNTY: 'bug_bounty',
+                    },
+                    states: {
+                        quickstart: {
+                            onEntry: () => { 
+                                assign({ highlight: 'quickstart' })
+                            },
+                            on: { CLICK_APP_REGISTRATION: 'app_registration' },
+                        },
+                        app_registration: {
+                            onEntry: () => { 
+                                assign({ highlight: 'app_registration' })
+                            },
+                            on: { CLICK_API_GUIDE: 'api_guide' },
+                        },
+                        api_guide: {
+                            onEntry: () => { 
+                                assign({ highlight: 'api_guide' })
+                            },
+                            on: { CLICK_FAQ: 'faq' },
+                        },
+                        faq: {
+                            onEntry: () => { 
+                                assign({ highlight: 'faq' })
+                            },
+                            on: { CLICK_JSON_SCHEMAS: 'json_schemas' },
+                        },
+                        json_schemas: {
+                            onEntry: () => { 
+                                assign({ highlight: 'json_schemas' })
+                            },
+                            on: { CLICK_BUG_BOUNTY: 'bug_bounty' },
+                        },
+                        bug_bounty: {
+                            onEntry: () => { 
+                                assign({ highlight: 'bug_bounty' })
+                            },
+                            on: { CLICK_API_PLAYGROUND: 'api_playground' },
+                        },
+                    }
+                },
+                api_playground: {
+                    on: { CLOSE_HAMBURGER: 'closed_hamburger' }
+                },
+            },
+        },
+        closed_hamburger: {
+            on: {
+                CLICK_HAMBURGER: 'open_hamburger',
+            },
+        },
+    },
+});

src/Components/NavigationBar/NavigationBar.tsx

@@ -33,8 +33,9 @@ export const NavigationBar: Component = () => {
         </div>
       </div>
       <header class="h-[73px] w-4/5 mobile:h-[48px] mobile:pl-4 mobile:w-full mobile:flex">
-        <section class="flex items-center">
+        <section aria-label="hamburger-dropdown" class="flex items-center">
           <img
+            role='menu'
             class="desktop:hidden mobile:mr-2.5"
             src={showMobileNav() ? closeSVGUrl : hamburgerMenuUrl}
             alt="Deriv Logo"