firefox-devtools · jasonLaster · Jun 7, 2017 · Jun 7, 2017 · Jun 7, 2017 · Jun 7, 2017
diff --git a/src/actions/tests/ui.js b/src/actions/tests/ui.js
@@ -9,7 +9,9 @@ const {
   getPaneCollapse,
   getSymbolSearchState,
   getSymbolSearchType,
-  getHighlightedLineRange
+  getHighlightedLineRange,
+  getSearchResults,
+  getSymbolSearchResults
 } = selectors;
 
 describe("ui", () => {
@@ -42,6 +44,24 @@ describe("ui", () => {
     expect(getFrameworkGroupingState(getState())).toBe(!currentState);
   });
 
+  it("should update search results", () => {
+    const { dispatch, getState } = createStore();
+    expect(getSearchResults(getState())).toEqual({ index: -1, count: 0 });
+
+    const results = { count: 3, index: 2 };
+    dispatch(actions.updateSearchResults(results));
+    expect(getSearchResults(getState())).toEqual(results);
+  });
+
+  fit("should update symbol search results", () => {
+    const { dispatch, getState } = createStore();
+    expect(getSymbolSearchResults(getState())).toEqual([]);
+
+    const results = [{ foo: "foo" }];
+    dispatch(actions.updateSymbolSearchResults(results));
+    expect(getSymbolSearchResults(getState())).toEqual(results);
+  });
+
   it("should close file search", () => {
     const { dispatch, getState } = createStore();
     expect(getFileSearchState(getState())).toBe(false);

diff --git a/src/actions/ui.js b/src/actions/ui.js
@@ -79,6 +79,20 @@ export function setFileSearchQuery(query: string) {
   };
 }
 
+export function updateSearchResults(results: Object) {
+  return {
+    type: "UPDATE_SEARCH_RESULTS",
+    results
+  };
+}
+
+export function updateSymbolSearchResults(results: Array<*>) {
+  return {
+    type: "UPDATE_SYMBOL_SEARCH_RESULTS",
+    results
+  };
+}
+
 export function toggleFileSearchModifier(modifier: string) {
   return { type: "TOGGLE_FILE_SEARCH_MODIFIER", modifier };
 }

diff --git a/src/components/Editor/SearchBar.js b/src/components/Editor/SearchBar.js
@@ -11,6 +11,8 @@ import {
   getFileSearchState,
   getFileSearchQueryState,
   getFileSearchModifierState,
+  getSearchResults,
+  getSymbolSearchResults,
   getSymbolSearchState,
   getSymbolSearchType,
   getSelectedSource,
@@ -34,7 +36,7 @@ import { SourceEditor } from "devtools-source-editor";
 import type { SourceRecord } from "../../reducers/sources";
 import type { FileSearchModifiers, SymbolSearchType } from "../../reducers/ui";
 import type { SelectSourceOptions } from "../../actions/sources";
-import type { SearchResults } from ".";
+import type { SearchResults } from "../../reducers/ui";
 import type { SymbolDeclarations } from "../../utils/parser/getSymbols";
 import type { Location as BabelLocation } from "babel-traverse";
 import _SearchInput from "../shared/SearchInput";
@@ -84,7 +86,6 @@ type ToggleSymbolSearchOpts = {
 };
 
 type SearchBarState = {
-  symbolSearchResults: Array<any>,
   selectedResultIndex: number,
   count: number,
   index: number
@@ -98,6 +99,7 @@ class SearchBar extends Component {
   props: {
     editor?: SourceEditor,
     symbols: SymbolDeclarations,
+    symbolSearchResults: Array<*>,
     selectSource: (string, ?SelectSourceOptions) => any,
     selectedSource?: SourceRecord,
     highlightLineRange: ({ start: number, end: number }) => any,
@@ -113,13 +115,13 @@ class SearchBar extends Component {
     setSelectedSymbolType: SymbolSearchType => any,
     query: string,
     setFileSearchQuery: string => any,
-    updateSearchResults: ({ count: number, index?: number }) => any
+    updateSearchResults: ({ count: number, index?: number }) => any,
+    updateSymbolSearchResults: ({ count: number, index?: number }) => any
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      symbolSearchResults: [],
       selectedResultIndex: 0,
       count: 0,
       index: -1
@@ -360,6 +362,7 @@ class SearchBar extends Component {
     const {
       selectedSource,
       updateSearchResults,
+      updateSymbolSearchResults,
       selectedSymbolType,
       symbols
     } = this.props;
@@ -373,7 +376,7 @@ class SearchBar extends Component {
     });
 
     updateSearchResults({ count: symbolSearchResults.length });
-    return this.setState({ symbolSearchResults });
+    updateSymbolSearchResults(symbolSearchResults);
   }
 
   doSearch(query: string) {
@@ -423,8 +426,8 @@ class SearchBar extends Component {
   }
 
   traverseSymbolResults(rev: boolean) {
-    const { symbolSearchResults, selectedResultIndex } = this.state;
-    const searchResults = symbolSearchResults;
+    const { selectedResultIndex } = this.state;
+    const searchResults = this.props.symbolSearchResults;
     const resultCount = searchResults.length;
 
     if (rev) {
@@ -543,8 +546,7 @@ class SearchBar extends Component {
   }
 
   onKeyDown(e: SyntheticKeyboardEvent) {
-    const { symbolSearchOn } = this.props;
-    const { symbolSearchResults } = this.state;
+    const { symbolSearchOn, symbolSearchResults } = this.props;
     if (!symbolSearchOn || this.props.query == "") {
       return;
     }
@@ -571,14 +573,15 @@ class SearchBar extends Component {
 
   // Renderers
   buildSummaryMsg() {
-    if (this.props.symbolSearchOn) {
-      if (this.state.symbolSearchResults.length > 1) {
+    const { symbolSearchOn, symbolSearchResults } = this.props;
+    if (symbolSearchOn) {
+      if (symbolSearchResults.length > 1) {
         return L10N.getFormatStr(
           "editor.searchResults",
           this.state.selectedResultIndex + 1,
-          this.state.symbolSearchResults.length
+          symbolSearchResults.length
         );
-      } else if (this.state.symbolSearchResults.length === 1) {
+      } else if (symbolSearchResults.length === 1) {
         return L10N.getFormatStr("editor.singleResult");
       }
     }
@@ -698,8 +701,8 @@ class SearchBar extends Component {
   }
 
   renderResults() {
-    const { symbolSearchResults, selectedResultIndex } = this.state;
-    const { query, symbolSearchOn } = this.props;
+    const { selectedResultIndex } = this.state;
+    const { query, symbolSearchResults, symbolSearchOn } = this.props;
     if (query == "" || !symbolSearchOn || !symbolSearchResults.length) {
       return;
     }
@@ -764,6 +767,8 @@ export default connect(
       query: getFileSearchQueryState(state),
       modifiers: getFileSearchModifierState(state),
       symbolSearchOn: getSymbolSearchState(state),
+      symbolSearchResults: getSymbolSearchResults(state),
+      searchResults: getSearchResults(state),
       symbols: _getFormattedSymbols(state),
       selectedSymbolType: getSymbolSearchType(state)
     };

diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
@@ -86,13 +86,7 @@ const cssVars = {
   footerHeight: "var(--editor-footer-height)"
 };
 
-export type SearchResults = {
-  index: number,
-  count: number
-};
-
 type EditorState = {
-  searchResults: SearchResults,
   highlightedLineRange: ?Object,
   selectedToken: ?HTMLElement
 };
@@ -113,10 +107,6 @@ class Editor extends PureComponent {
     this.lastJumpLine = null;
 
     this.state = {
-      searchResults: {
-        index: -1,
-        count: 0
-      },
       highlightedLineRange: null,
       selectedToken: null
     };
@@ -139,7 +129,6 @@ class Editor extends PureComponent {
       this
     );
     self.toggleConditionalPanel = this.toggleConditionalPanel.bind(this);
-    self.updateSearchResults = this.updateSearchResults.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -433,10 +422,6 @@ class Editor extends PureComponent {
     });
   }
 
-  updateSearchResults({ count, index = -1 }: { count: number, index: number }) {
-    this.setState({ searchResults: { count, index } });
-  }
-
   onGutterClick(cm, line, gutter, ev) {
     const { selectedSource } = this.props;
 
@@ -834,8 +819,6 @@ class Editor extends PureComponent {
       horizontal
     } = this.props;
 
-    const { searchResults } = this.state;
-
     return dom.div(
       {
         className: classnames("editor-wrapper", { "coverage-on": coverageOn })
@@ -846,9 +829,7 @@ class Editor extends PureComponent {
         selectedSource,
         highlightLineRange,
         clearHighlightLineRange,
-        sourceText,
-        searchResults,
-        updateSearchResults: this.updateSearchResults
+        sourceText
       }),
       dom.div({
         className: "editor-mount devtools-monospace",

diff --git a/src/components/Editor/tests/Editor.js b/src/components/Editor/tests/Editor.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Editor from "../index";
+import * as I from "immutable";
+
+const EditorComponent = React.createFactory(Editor.WrappedComponent);
+
+function generateDefaults(overrides) {
+  return {
+    breakpoints: I.Map(),
+    addBreakpoint: jest.fn(),
+    disableBreakpoint: jest.fn(),
+    enableBreakpoint: jest.fn(),
+    removeBreakpoint: jest.fn(),
+    setBreakpointCondition: jest.fn(),
+    getExpression: jest.fn(),
+    addExpression: jest.fn(),
+    query: "",
+    searchModifiers: I.Record({
+      caseSensitive: false,
+      regexMatch: false,
+      wholeWord: false
+    })(),
+    clearSelection: jest.fn
+  };
+}
+
+function render(overrides = {}) {
+  const props = generateDefaults(overrides);
+  const component = shallow(new EditorComponent(props));
+  return { component, props };
+}
+
+describe("Editor", () => {
+  it("should render", async () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Editor/tests/SearchBar.js b/src/components/Editor/tests/SearchBar.js
@@ -0,0 +1,39 @@
+import { createFactory } from "react";
+import { shallow } from "enzyme";
+import SearchBar from "../SearchBar";
+
+const SearchBarComponent = createFactory(SearchBar.WrappedComponent);
+
+function generateDefaults() {
+  return {
+    query: "",
+    searchOn: true,
+    symbolSearchOn: true,
+    searchResults: {},
+    selectedSymbolType: "functions",
+    symbolSearchResults: [],
+    selectedResultIndex: 0
+  };
+}
+
+function render(overrides = {}) {
+  const defaults = generateDefaults();
+  const props = { ...defaults, ...overrides };
+  const component = shallow(new SearchBarComponent(props));
+  return { component, props };
+}
+
+describe("SearchBar", () => {
+  it("should render", () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should have a result list with symbolSearchResults", () => {
+    const symbolSearchResults = [1, 2, 3];
+    const query = "query";
+    const { component } = render({ symbolSearchResults, query });
+    const resultList = component.find("ResultList");
+    expect(resultList.prop("items")).toBe(symbolSearchResults);
+  });
+});