naming fixes and added test file

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -46,8 +46,8 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
     });
   };
 
-  onSearchFilter = evt => {
-    this.props.alertList.setSearchState(evt.target.value);
+  onSearchQueryChange = evt => {
+    this.props.alertList.setSearchQuery(evt.target.value);
   };
 
   render() {
@@ -65,7 +65,7 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
                   className="gf-form-input width-13"
                   placeholder="Search alert"
                   value={alertList.search}
-                  onChange={this.onSearchFilter}
+                  onChange={this.onSearchQueryChange}
                 />
                 <i className="gf-form-input-icon fa fa-search" />
               </label>
@@ -89,9 +89,9 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
 
           <section>
             <ol className="alert-rule-list">
-              {alertList
-                .searchFilter()
-                .map(rule => <AlertRuleItem rule={rule} key={rule.id} search={alertList.search} />)}
+              {alertList.filteredRules.map(rule => (
+                <AlertRuleItem rule={rule} key={rule.id} search={alertList.search} />
+              ))}
             </ol>
           </section>
         </div>

public/app/stores/AlertListStore/AlertListStore.jest.ts

@@ -0,0 +1,65 @@
+import { AlertListStore } from './AlertListStore';
+import { backendSrv } from 'test/mocks/common';
+import moment from 'moment';
+
+function getRule(name, state, info) {
+  return {
+    id: 11,
+    dashboardId: 58,
+    panelId: 3,
+    name: name,
+    state: state,
+    newStateDate: moment()
+      .subtract(5, 'minutes')
+      .format(),
+    evalData: {},
+    executionError: '',
+    dashboardUri: 'db/mygool',
+    stateText: state,
+    stateIcon: 'fa',
+    stateClass: 'asd',
+    stateAge: '10m',
+    info: info,
+  };
+}
+
+describe('AlertListStore', () => {
+  let store;
+
+  beforeAll(() => {
+    store = AlertListStore.create(
+      {
+        rules: [
+          getRule('Europe', 'OK', 'backend-01'),
+          getRule('Google', 'ALERTING', 'backend-02'),
+          getRule('Amazon', 'PAUSED', 'backend-03'),
+          getRule('West-Europe', 'PAUSED', 'backend-03'),
+        ],
+        search: '',
+      },
+      {
+        backendSrv: backendSrv,
+      }
+    );
+  });
+
+  it('search should filter list on name', () => {
+    store.setSearchQuery('urope');
+    expect(store.filteredRules).toHaveLength(2);
+  });
+
+  it('search should filter list on state', () => {
+    store.setSearchQuery('ale');
+    expect(store.filteredRules).toHaveLength(1);
+  });
+
+  it('search should filter list on info', () => {
+    store.setSearchQuery('-0');
+    expect(store.filteredRules).toHaveLength(4);
+  });
+
+  it('search should be equal', () => {
+    store.setSearchQuery('alert');
+    expect(store.search).toBe('alert');
+  });
+});

public/app/stores/AlertListStore/AlertListStore.ts

@@ -12,7 +12,7 @@ export const AlertListStore = types
     search: types.optional(types.string, ''),
   })
   .views(self => ({
-    searchFilter() {
+    get filteredRules() {
       let regex = new RegExp(self.search, 'i');
       return self.rules.filter(alert => {
         return regex.test(alert.name) || regex.test(alert.stateText) || regex.test(alert.info);
@@ -40,7 +40,7 @@ export const AlertListStore = types
         self.rules.push(AlertRule.create(rule));
       }
     }),
-    setSearchState(evt) {
-      self.search = evt;
+    setSearchQuery(query: string) {
+      self.search = query;
     },
   }));