Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

E2E test for query search #3633

Merged
merged 2 commits into from
Mar 24, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 103 additions & 25 deletions client/app/components/app-header/app-header.html
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -66,38 +80,82 @@
</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>

<!-- 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>
Expand All @@ -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>

Expand All @@ -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>
Expand All @@ -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>
Expand Down
24 changes: 24 additions & 0 deletions cypress/integration/query/search_query_spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
describe("Search Query", () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once I see a failing build for this PR, I'm going to merge this so I can test #3631. But please do take a moment to review it and suggest improvements if needed.

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",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to add a not contains assertion in my test, but didn't see how to do this. 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the way to do it is to wrap the result table and:

cy.getByTestIdOrAth('QuerySearchResult').should(($resultTable) => {
  expect($resultTable).to.contain('Expected Result');
  expect($resultTable).not.to.contain('Anything else');
});

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exactly.
@arikfr your test will return ANY element in the page that contains that text. So if this query showed up in the "favorites" dropdown, this would always be true...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thanks.

I'll update the tests to do this form now.

data_source_id: 1,
query: "SELECT 1"
});

cy.visit("/");
});

it("finds queries by name", () => {
cy.getByTestId("AppHeaderSearch").type("Users{enter}");
cy.contains("Users Count");
});
});