✅ update demo and test case

2024-12-02 12:09:14 +08:00 · 2019-10-22 21:33:19 +08:00 · 2019-10-22 21:33:19 +08:00 · 0604a09590
commit 0604a09590
parent b882b8dd2f
5 changed files with 288 additions and 93 deletions
--- a/components/input/tests/Search.test.js
+++ b/components/input/tests/Search.test.js
@ -166,4 +166,16 @@ describe('Input.Search', () => {
    expect(wrapper.render()).toMatchSnapshot();
    expect(wrapperWithEnterButton.render()).toMatchSnapshot();
  });
+
+  it('should support addonAfter and suffix for loading', () => {
+    const wrapper = mount(<Search loading suffix="suffix" addonAfter="addonAfter" />);
+    const wrapperWithEnterButton = mount(<Search loading enterButton suffix="suffix" addonAfter="addonAfter" />);
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapperWithEnterButton.render()).toMatchSnapshot();
+  })
+
+  it('should support invalid addonAfter and suffix', () => {
+    const wrapper = mount(<Search suffix={[]} addonAfter={[]} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  })
 });
--- a/components/input/tests/snapshots/Search.test.js.snap
+++ b/components/input/tests/snapshots/Search.test.js.snap
@ -98,6 +98,109 @@ exports[`Input.Search should support addonAfter 2`] = `
 </span>
 `;

+exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
+<span
+  class="ant-input-search ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-search ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        suffix
+        <i
+          aria-label="icon: loading"
+          class="anticon anticon-loading ant-input-search-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="anticon-spin"
+            data-icon="loading"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+            />
+          </svg>
+        </i>
+      </span>
+    </span>
+    <span
+      class="ant-input-group-addon"
+    >
+      addonAfter
+    </span>
+  </span>
+</span>
+`;
+
+exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
+<span
+  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        suffix
+      </span>
+    </span>
+    <span
+      class="ant-input-group-addon"
+    >
+      <button
+        class="ant-btn ant-input-search-button ant-btn-primary"
+        type="button"
+      >
+        <i
+          aria-label="icon: loading"
+          class="anticon anticon-loading"
+        >
+          <svg
+            aria-hidden="true"
+            class="anticon-spin"
+            data-icon="loading"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+            />
+          </svg>
+        </i>
+      </button>
+      addonAfter
+    </span>
+  </span>
+</span>
+`;
+
 exports[`Input.Search should support custom Button 1`] = `
 <span
  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
@ -151,6 +254,150 @@ exports[`Input.Search should support custom button 1`] = `
 </span>
 `;

+exports[`Input.Search should support invalid addonAfter and suffix 1`] = `
+<span
+  class="ant-input-search ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-search ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <i
+          aria-label="icon: search"
+          class="anticon anticon-search ant-input-search-icon"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="search"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+            />
+          </svg>
+        </i>
+      </span>
+    </span>
+    <span
+      class="ant-input-group-addon"
+    />
+  </span>
+</span>
+`;
+
+exports[`Input.Search should support invalid addonAfter and suffix for loading 1`] = `
+<span
+  class="ant-input-search ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-search ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <i
+          aria-label="icon: loading"
+          class="anticon anticon-loading ant-input-search-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="anticon-spin"
+            data-icon="loading"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+            />
+          </svg>
+        </i>
+      </span>
+    </span>
+    <span
+      class="ant-input-group-addon"
+    />
+  </span>
+</span>
+`;
+
+exports[`Input.Search should support invalid addonAfter and suffix for loading 2`] = `
+<span
+  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      />
+    </span>
+    <span
+      class="ant-input-group-addon"
+    >
+      <button
+        class="ant-btn ant-input-search-button ant-btn-primary"
+        type="button"
+      >
+        <i
+          aria-label="icon: loading"
+          class="anticon anticon-loading"
+        >
+          <svg
+            aria-hidden="true"
+            class="anticon-spin"
+            data-icon="loading"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+            />
+          </svg>
+        </i>
+      </button>
+    </span>
+  </span>
+</span>
+`;
+
 exports[`Input.Search should support loading 1`] = `
 <span
  class="ant-input-search ant-input-affix-wrapper"
--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/components/input/tests/snapshots/demo.test.js.snap
@ -234,6 +234,34 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
    class="ant-typography"
  >
    Ant Design
+    <div
+      aria-label="Copy"
+      class="ant-typography-copy"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
+    >
+      <i
+        aria-label="icon: copy"
+        class="anticon anticon-copy"
+        role="button"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="copy"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+          />
+        </svg>
+      </i>
+    </div>
  </span>
  <span
    class="ant-input-affix-wrapper"
@ -1848,42 +1876,6 @@ exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] =
  </span>
  <br />
  <br />
-  <span
-    class="ant-input-search ant-input-affix-wrapper"
-  >
-    <input
-      class="ant-input"
-      placeholder="input search loading with suffix"
-      type="text"
-      value=""
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      suffix
-      <i
-        aria-label="icon: loading"
-        class="anticon anticon-loading ant-input-search-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="anticon-spin"
-          data-icon="loading"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-          />
-        </svg>
-      </i>
-    </span>
-  </span>
-  <br />
-  <br />
  <span
    class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
  >
@ -1926,51 +1918,6 @@ exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] =
      </span>
    </span>
  </span>
-  <br />
-  <br />
-  <span
-    class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
-  >
-    <span
-      class="ant-input-wrapper ant-input-group"
-    >
-      <input
-        class="ant-input"
-        placeholder="input search loading with enterButton and addonAfter"
-        type="text"
-        value=""
-      />
-      <span
-        class="ant-input-group-addon"
-      >
-        <button
-          class="ant-btn ant-input-search-button ant-btn-primary"
-          type="button"
-        >
-          <i
-            aria-label="icon: loading"
-            class="anticon anticon-loading"
-          >
-            <svg
-              aria-hidden="true"
-              class="anticon-spin"
-              data-icon="loading"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="0 0 1024 1024"
-              width="1em"
-            >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
-          </i>
-        </button>
-        addonAfter
-      </span>
-    </span>
-  </span>
 </div>
 `;

--- a/components/input/tests/snapshots/index.test.js.snap
+++ b/components/input/tests/snapshots/index.test.js.snap
@ -258,7 +258,7 @@ exports[`Input.Search should support suffix 1`] = `
    prefixCls="ant-input"
    suffix={
      Array [
-        "suffix",
+        null,
        <Icon
          className="ant-input-search-icon"
          onClick={[Function]}
@ -282,7 +282,6 @@ exports[`Input.Search should support suffix 1`] = `
      <span
        className="ant-input-suffix"
      >
-        suffix
        <Icon
          className="ant-input-search-icon"
          key="searchIcon"
--- a/components/input/demo/search-input-loading.md
+++ b/components/input/demo/search-input-loading.md
@ -23,17 +23,7 @@ ReactDOM.render(
    <Search placeholder="input search loading deault" loading />
    <br />
    <br />
-    <Search placeholder="input search loading with suffix" loading />
-    <br />
-    <br />
    <Search placeholder="input search loading with enterButton" loading enterButton />
-    <br />
-    <br />
-    <Search
-      placeholder="input search loading with enterButton and addonAfter"
-      loading
-      enterButton
-    />
  </div>,
  mountNode,
 );