From 0fa72a55ce82f29599a0109b836b62c2032d58c1 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Mon, 19 Mar 2018 16:34:37 +0200
Subject: [PATCH] tests: add more search tests

---
 e2e/integration/search.e2e.ts | 65 ++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/e2e/integration/search.e2e.ts b/e2e/integration/search.e2e.ts
index cfe4504e..8242d513 100644
--- a/e2e/integration/search.e2e.ts
+++ b/e2e/integration/search.e2e.ts
@@ -1,38 +1,55 @@
 describe('Search', () => {
-  before(() => {
+  const getSearchInput = () => cy.get('[role="search"] input');
+  const getSearchResults = () => cy.get('[data-role="search:results"]');
+  const getResult = i => cy.get('[role=search] [role=menuitem]').eq(i);
+
+  beforeEach(() => {
     cy.visit('e2e/standalone.html');
   });
 
-  it('should be closed by default', function() {
-    cy
-      .get('.menu-content div')
-      .filter('.search-box')
-      .should('have.length', 0);
-  });
+  it('should correctly show and hide search results box', function() {
+    getSearchResults().should('not.exist');
 
-  it('should not open for less than 3 symbols', function() {
-    cy.get('.search-input').type('in', { force: true });
-    cy
-      .get('.menu-content div')
-      .filter('.search-box')
-      .should('have.length', 0);
-  });
+    // should not open for less than 3 symbols
+    getSearchInput().type('in', { force: true });
+    getSearchResults().should('not.exist');
 
-  it('should find 3 results when typed int', function() {
-    cy.get('.search-input').type('t', { force: true });
+    getSearchInput().type('t', { force: true });
     cy
-      .get('.search-results')
-      .find('li')
+      .get('[role=search] [role=menuitem]')
       .should('have.length', 3)
       .first()
       .should('contain', 'Introduction');
+
+    getSearchInput().type('{esc}', { force: true });
+    getSearchResults().should('not.exist');
   });
 
-  it('should clear when ESQ is pressed', function() {
-    cy.get('.search-input').type('{esc}', { force: true });
-    cy
-      .get('.menu-content div')
-      .filter('.search-box')
-      .should('have.length', 0);
+  it('should support arrow navigation', function() {
+    getSearchInput().type('int', { force: true });
+
+    getSearchInput().type('{downarrow}', { force: true });
+    getResult(0).should('have.class', 'active');
+
+    getSearchInput().type('{downarrow}', { force: true });
+    getResult(1).should('have.class', 'active');
+    getResult(0).should('not.have.class', 'active');
+
+    getSearchInput().type('{uparrow}', { force: true });
+    getResult(1).should('not.have.class', 'active');
+    getResult(0).should('have.class', 'active');
+
+    getSearchInput().type('{uparrow}', { force: true });
+    getResult(0).should('have.class', 'active');
+
+    getSearchInput().type('{enter}', { force: true });
+
+    cy.contains('[role=navigation] [role=menuitem]', 'Introduction').should('have.class', 'active');
+  });
+
+  it('should mark search results', function() {
+    cy.get('[data-markjs]').should('not.exist');
+    getSearchInput().type('int', { force: true });
+    cy.get('[data-markjs]').should('exist');
   });
 });