From e712c19bbe76ba1f120db0c0a1b5faf1d6d41935 Mon Sep 17 00:00:00 2001
From: Arik Fraimovich <arik@arikfr.com>
Date: Sun, 24 Mar 2019 15:20:08 +0200
Subject: [PATCH] E2E test for query search (#3633)

* Apply prettier to app-header.html.
* Add: E2E test for query search
---
 .../app/components/app-header/app-header.html | 128 ++++++++++++++----
 .../integration/query/search_query_spec.js    |  24 ++++
 2 files changed, 127 insertions(+), 25 deletions(-)
 create mode 100644 cypress/integration/query/search_query_spec.js

diff --git a/client/app/components/app-header/app-header.html b/client/app/components/app-header/app-header.html
index f4dbb6e8dd..1850572591 100644
--- a/client/app/components/app-header/app-header.html
+++ b/client/app/components/app-header/app-header.html
@@ -1,20 +1,30 @@
 <nav class="navbar navbar-default app-header" role="navigation">
   <div class="container">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle" ng-click="isNavOpen = !isNavOpen">
+      <button
+        type="button"
+        class="navbar-toggle"
+        ng-click="isNavOpen = !isNavOpen"
+      >
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- REDASH LOGO -->
-      <a class="navbar-brand" ng-href="{{$ctrl.basePath}}"><img ng-src="{{$ctrl.logoUrl}}"/></a>
+      <a class="navbar-brand" ng-href="{{ $ctrl.basePath }}"
+        ><img ng-src="{{ $ctrl.logoUrl }}"
+      /></a>
     </div>
     <div class="collapse navbar-collapse" uib-collapse="!isNavOpen">
       <!-- Main Left Nav-->
 
       <ul class="nav navbar-nav nav__main">
-        <li class="dropdown btn-group" ng-show="$ctrl.showDashboardsMenu" uib-dropdown>
+        <li
+          class="dropdown btn-group"
+          ng-show="$ctrl.showDashboardsMenu"
+          uib-dropdown
+        >
           <a class="btn" href="dashboards">Dashboards</a>
           <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
             <span class="caret caret--nav"></span>
@@ -37,7 +47,11 @@
             </li>
           </ul>
         </li>
-        <li class="dropdown btn-group" ng-show="$ctrl.showQueriesMenu" uib-dropdown>
+        <li
+          class="dropdown btn-group"
+          ng-show="$ctrl.showQueriesMenu"
+          uib-dropdown
+        >
           <a class="btn" href="queries">Queries</a>
           <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
             <span class="caret caret--nav"></span>
@@ -66,13 +80,37 @@
       </ul>
 
       <!-- Add New Button -->
-      <div class="btn-group navbar-btn navbar-left btn__new hidden-xs" uib-dropdown is-open="status.isopen">
-        <button id="create-button" data-test="CreateButton" type="button" class="btn btn-primary btn--create" uib-dropdown-toggle ng-disabled="disabled">
+      <div
+        class="btn-group navbar-btn navbar-left btn__new hidden-xs"
+        uib-dropdown
+        is-open="status.isopen"
+      >
+        <button
+          id="create-button"
+          data-test="CreateButton"
+          type="button"
+          class="btn btn-primary btn--create"
+          uib-dropdown-toggle
+          ng-disabled="disabled"
+        >
           Create <span class="caret caret--nav"></span>
         </button>
-        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="create-button">
-          <li role="menuitem" ng-show="$ctrl.showNewQueryMenu"><a href="queries/new">Query</a></li>
-          <li role="menuitem"><a ng-show="$ctrl.currentUser.hasPermission('create_dashboard')" ng-click="$ctrl.newDashboard()">Dashboard</a></li>
+        <ul
+          class="dropdown-menu"
+          uib-dropdown-menu
+          role="menu"
+          aria-labelledby="create-button"
+        >
+          <li role="menuitem" ng-show="$ctrl.showNewQueryMenu">
+            <a href="queries/new">Query</a>
+          </li>
+          <li role="menuitem">
+            <a
+              ng-show="$ctrl.currentUser.hasPermission('create_dashboard')"
+              ng-click="$ctrl.newDashboard()"
+              >Dashboard</a
+            >
+          </li>
           <li role="menuitem"><a href="alerts/new">Alert</a></li>
         </ul>
       </div>
@@ -80,24 +118,44 @@
       <!-- Profile -->
       <ul class="nav navbar-nav navbar-right">
         <li>
-          <help-trigger type="'HOME'" class-name="'navbar-link-ANGULAR_REMOVE_ME'"></help-trigger>
+          <help-trigger
+            type="'HOME'"
+            class-name="'navbar-link-ANGULAR_REMOVE_ME'"
+          ></help-trigger>
         </li>
         <li ng-show="$ctrl.currentUser.isAdmin">
-          <a href="data_sources" title="Settings"><i class="fa fa-sliders" aria-hidden="true"></i></a>
+          <a href="data_sources" title="Settings"
+            ><i class="fa fa-sliders" aria-hidden="true"></i
+          ></a>
         </li>
         <!--<li ng-show="$ctrl.showSettingsMenu">-->
-          <!--<a href="users" title="Settings"><i class="fa fa-cog"></i></a>-->
+        <!--<a href="users" title="Settings"><i class="fa fa-cog"></i></a>-->
         <!--</li>-->
         <li class="dropdown" uib-dropdown>
-          <a href="#" class="dropdown-toggle dropdown--profile" uib-dropdown-toggle data-test="ProfileDropdown">
-            <img ng-src="{{ $ctrl.currentUser.profile_image_url }}" class="profile__image--navbar" width="20"/>
-            <span class="dropdown--profile__username" ng-bind="$ctrl.currentUser.name"></span> <span
-            class="caret caret--nav"></span></a>
+          <a
+            href="#"
+            class="dropdown-toggle dropdown--profile"
+            uib-dropdown-toggle
+            data-test="ProfileDropdown"
+          >
+            <img
+              ng-src="{{ $ctrl.currentUser.profile_image_url }}"
+              class="profile__image--navbar"
+              width="20"/>
+            <span
+              class="dropdown--profile__username"
+              ng-bind="$ctrl.currentUser.name"
+            ></span>
+            <span class="caret caret--nav"></span
+          ></a>
           <ul class="dropdown-menu dropdown-menu--profile">
             <li>
               <a ng-href="users/me">Edit Profile</a>
             </li>
-            <li class="divider" ng-if="$ctrl.currentUser.hasPermission('super_admin')">
+            <li
+              class="divider"
+              ng-if="$ctrl.currentUser.hasPermission('super_admin')"
+            ></li>
 
             <li ng-show="$ctrl.currentUser.isAdmin">
               <a href="data_sources" title="Data Sources">Data Sources</a>
@@ -115,9 +173,14 @@
               <a href="destinations" title="Settings">Alert Destinations</a>
             </li>
 
-            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')" class="divider"></li>
+            <li
+              ng-if="$ctrl.currentUser.hasPermission('super_admin')"
+              class="divider"
+            ></li>
 
-            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')"><a href="admin/status">System Status</a></li>
+            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')">
+              <a href="admin/status">System Status</a>
+            </li>
 
             <li class="divider"></li>
 
@@ -127,11 +190,14 @@
 
             <li class="divider"></li>
             <li class="dropdown-menu__version">
-              Version: {{$ctrl.backendVersion}}
+              Version: {{ $ctrl.backendVersion }}
               <span ng-if="$ctrl.frontendVersion !== $ctrl.backendVersion">
-                ({{$ctrl.frontendVersion.substring(0, 8)}})
+                ({{ $ctrl.frontendVersion.substring(0, 8) }})
               </span>
-              <span class="update-available" ng-if="$ctrl.currentUser.hasPermission('super_admin') && $ctrl.newVersionAvailable">
+              <span
+                class="update-available"
+                ng-if="$ctrl.currentUser.hasPermission('super_admin') && $ctrl.newVersionAvailable"
+              >
                 <a href="https://version.redash.io/" target="_blank">
                   <i class="fa fa-arrow-circle-down"></i>
                 </a>
@@ -142,11 +208,23 @@
       </ul>
 
       <!-- Search -->
-      <form class="navbar-form navbar-right" role="search" ng-submit="$ctrl.searchQueries()">
+      <form
+        class="navbar-form navbar-right"
+        role="search"
+        ng-submit="$ctrl.searchQueries()"
+      >
         <div class="input-group menu-search">
-          <input type="text" ng-model="$ctrl.searchTerm" class="form-control navbar__search__input" placeholder="Search queries...">
+          <input
+            type="text"
+            ng-model="$ctrl.searchTerm"
+            class="form-control navbar__search__input"
+            placeholder="Search queries..."
+            data-test="AppHeaderSearch"
+          />
           <span class="input-group-btn">
-            <button type="submit" class="btn btn-default"><span class="zmdi zmdi-search"></span></button>
+            <button type="submit" class="btn btn-default">
+              <span class="zmdi zmdi-search"></span>
+            </button>
           </span>
         </div>
       </form>
diff --git a/cypress/integration/query/search_query_spec.js b/cypress/integration/query/search_query_spec.js
new file mode 100644
index 0000000000..9244bfcf26
--- /dev/null
+++ b/cypress/integration/query/search_query_spec.js
@@ -0,0 +1,24 @@
+describe("Search Query", () => {
+  beforeEach(() => {
+    cy.login();
+
+    cy.request("POST", "api/queries", {
+      name: "Users Count",
+      data_source_id: 1,
+      query: "SELECT 1"
+    });
+
+    cy.request("POST", "api/queries", {
+      name: "Dashboards Count",
+      data_source_id: 1,
+      query: "SELECT 1"
+    });
+
+    cy.visit("/");
+  });
+
+  it("finds queries by name", () => {
+    cy.getByTestId("AppHeaderSearch").type("Users{enter}");
+    cy.contains("Users Count");
+  });
+});