Add unit tests for FieldValuesWidget, tweak placeholder text

frontend/src/metabase/components/FieldValuesWidget.jsx

@@ -10,6 +10,7 @@ import { MetabaseApi } from "metabase/services";
 import { addRemappings, fetchFieldValues } from "metabase/redux/metadata";
 import { defer } from "metabase/lib/promise";
 import { debounce } from "underscore";
+import { stripId } from "metabase/lib/formatting";
 
 const MAX_SEARCH_RESULTS = 100;
 
@@ -18,8 +19,7 @@ const mapDispatchToProps = {
   fetchFieldValues,
 };
 
-@connect(null, mapDispatchToProps)
-export default class FieldValuesWidget extends Component {
+export class FieldValuesWidget extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -154,8 +154,10 @@ export default class FieldValuesWidget extends Component {
       if (this.hasList()) {
         placeholder = t`Search the list`;
       } else if (this.isSearchable()) {
-        placeholder = t`Search by ${searchField.display_name}`;
-        if (field.isID()) {
+        const searchFieldName =
+          stripId(searchField.display_name) || searchField.display_name;
+        placeholder = t`Search by ${searchFieldName}`;
+        if (field.isID() && field !== searchField) {
           placeholder += t` or enter an ID`;
         }
       } else {
@@ -261,3 +263,5 @@ export default class FieldValuesWidget extends Component {
     );
   }
 }
+
+export default connect(null, mapDispatchToProps)(FieldValuesWidget);

frontend/src/metabase/lib/formatting.js

@@ -449,7 +449,7 @@ export function duration(milliseconds: number) {
 
 // Removes trailing "id" from field names
 export function stripId(name: string) {
-  return name && name.replace(/ id$/i, "");
+  return name && name.replace(/ id$/i, "").trim();
 }
 
 export function slugify(name: string) {

frontend/src/metabase/selectors/metadata.js

@@ -98,6 +98,7 @@ export const getMetadata = createSelector(
     );
     hydrate(meta.tables, "breakout_options", t => getBreakouts(t.fields));
 
+    hydrate(meta.fields, "values", f => getFieldValues(f));
     hydrate(meta.fields, "remapping", f => new Map(getRemappings(f)));
 
     hydrateLookup(meta.databases, "tables", "id");

frontend/test/__support__/sample_dataset_fixture.js

@@ -946,6 +946,7 @@ export const state = {
           human_readable_values: {},
           field_id: 21,
         },
+        has_field_values: "list",
       },
       "22": {
         description: "The date the product was added to our catalog.",

frontend/test/components/FieldValuesWidget.unit.spec.js

+import React from "react";
+import { mount } from "enzyme";
+
+import {
+  StaticMetadataProvider,
+  metadata,
+  PRODUCT_CATEGORY_FIELD_ID,
+} from "../__support__/sample_dataset_fixture";
+import { delay } from "metabase/lib/promise";
+
+import { FieldValuesWidget } from "../../src/metabase/components/FieldValuesWidget";
+import TokenField from "../../src/metabase/components/TokenField";
+
+const mock = (object, properties) =>
+  Object.assign(Object.create(object), properties);
+
+const mountFieldValuesWidget = props =>
+  mount(
+    <FieldValuesWidget
+      value={[]}
+      onChange={() => {}}
+      fetchFieldValues={() => {}}
+      {...props}
+    />,
+  );
+
+describe("FieldValuesWidget", () => {
+  describe("has_field_values = none", () => {
+    const props = {
+      field: mock(metadata.field(PRODUCT_CATEGORY_FIELD_ID), {
+        has_field_values: "none",
+      }),
+    };
+    it("should not call fetchFieldValues", () => {
+      const fetchFieldValues = jest.fn();
+      const component = mountFieldValuesWidget({ ...props, fetchFieldValues });
+      expect(fetchFieldValues).not.toHaveBeenCalled();
+    });
+    it("should have 'Enter some text' as the placeholder text", () => {
+      const component = mountFieldValuesWidget({ ...props });
+      expect(component.find(TokenField).props().placeholder).toEqual(
+        "Enter some text",
+      );
+    });
+  });
+  describe("has_field_values = list", () => {
+    const props = {
+      field: metadata.field(PRODUCT_CATEGORY_FIELD_ID),
+    };
+    it("should call fetchFieldValues", () => {
+      const fetchFieldValues = jest.fn();
+      const component = mountFieldValuesWidget({ ...props, fetchFieldValues });
+      expect(fetchFieldValues).toHaveBeenCalledWith(PRODUCT_CATEGORY_FIELD_ID);
+    });
+    it("should have 'Search the list' as the placeholder text", () => {
+      const component = mountFieldValuesWidget({ ...props });
+      expect(component.find(TokenField).props().placeholder).toEqual(
+        "Search the list",
+      );
+    });
+  });
+  describe("has_field_values = search", () => {
+    const props = {
+      field: mock(metadata.field(PRODUCT_CATEGORY_FIELD_ID), {
+        has_field_values: "search",
+      }),
+      searchField: metadata
+        .field(PRODUCT_CATEGORY_FIELD_ID)
+        .filterSearchField(),
+    };
+    it("should not call fetchFieldValues", () => {
+      const fetchFieldValues = jest.fn();
+      const component = mountFieldValuesWidget({ ...props, fetchFieldValues });
+      expect(fetchFieldValues).not.toHaveBeenCalled();
+    });
+    it("should have 'Search by Category' as the placeholder text", () => {
+      const component = mountFieldValuesWidget({ ...props });
+      expect(component.find(TokenField).props().placeholder).toEqual(
+        "Search by Category",
+      );
+    });
+  });
+});