@zohodesk/components 1.6.31 → 1.6.34

package/es/MultiSelect/__tests__/EmptyState.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import EmptyState from "../EmptyState";
 describe('EmptyState', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -11,5 +12,271 @@ describe('EmptyState', () => {
       options: []
     }));
     expect(asFragment()).toMatchSnapshot();
+  }); // searchString, suggestions and options are read without defaults, so every case below supplies all three
+
+  const option = {
+    id: 1,
+    value: 'Option 1'
+  };
+  test('Render with isLoading', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: true,
+      searchString: "",
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLoading and i18nKeys loadingText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: true,
+      searchString: "",
+      suggestions: [],
+      options: [],
+      i18nKeys: {
+        loadingText: 'Fetching options'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // isLoading wins over the search and empty branches
+
+  test('Render with isLoading, searchString and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: true,
+      searchString: "abc",
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with searchString and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "abc",
+      suggestions: [],
+      options: [option]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with searchString, no suggestions and searchEmptyMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "abc",
+      suggestions: [],
+      options: [option],
+      searchEmptyMessage: "No matches found"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with searchString, no suggestions and i18nKeys searchEmptyText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "abc",
+      suggestions: [],
+      options: [option],
+      i18nKeys: {
+        searchEmptyText: 'Nothing matches'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the search message falls back to the empty message when no search message is set
+
+  test('Render with searchString, no suggestions and emptyMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "abc",
+      suggestions: [],
+      options: [option],
+      emptyMessage: "No options"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with searchString, no suggestions and getCustomEmptyState', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "abc",
+      suggestions: [],
+      options: [option],
+      getCustomEmptyState: () => /*#__PURE__*/React.createElement("div", null, "Custom search empty state")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with emptyMessage and no options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [],
+      emptyMessage: "No options"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys emptyText and no options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [],
+      i18nKeys: {
+        emptyText: 'Nothing here'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomEmptyState as function and no options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [],
+      emptyMessage: "No options",
+      renderCustomEmptyState: ({
+        title
+      }) => /*#__PURE__*/React.createElement("span", null, title)
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomEmptyState as node and no options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [],
+      renderCustomEmptyState: /*#__PURE__*/React.createElement("span", null, "Custom empty state")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // options exist but none are left to suggest, so the no-more message is shown
+
+  test('Render with options and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [option]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with noMoreOptionsMessage, options and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [option],
+      noMoreOptionsMessage: "No more options"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys noMoreText, options and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [option],
+      i18nKeys: {
+        noMoreText: 'Nothing more to pick'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the no-more message falls back to the empty message when no no-more message is set
+
+  test('Render with emptyMessage, options and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [option],
+      emptyMessage: "No options"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomEmptyState as function, options and no suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "",
+      suggestions: [],
+      options: [option],
+      noMoreOptionsMessage: "No more options",
+      renderCustomEmptyState: ({
+        title
+      }) => /*#__PURE__*/React.createElement("span", null, title)
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // a search with suggestions present is not an empty search, so the no-more branch applies
+
+  test('Render with searchString and suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: "abc",
+      suggestions: [option],
+      options: [option]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      palette: "dark",
+      searchString: "",
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      dataId: "empty-state-dataId",
+      searchString: "",
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      htmlId: "empty-state-htmlId",
+      searchString: "",
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      a11y: {
+        role: 'status'
+      },
+      searchString: "",
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });