feat: add custom render demo and test cases (#8)

vagusX · web-flow · commit ccb5fae082ee · 2022-03-01T10:41:21.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ lib
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage/
 .doc
 
diff --git a/assets/index.less b/assets/index.less
@@ -16,26 +16,21 @@
 .@{segmented-prefix-cls} {
   position: relative;
 
-  display: inline-block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  padding: 2px;
+  display: inline-flex;
+  align-items: stretch;
+  justify-items: flex-start;
 
   background-color: rgba(0, 0, 0, 0.04);
-
   border-radius: 2px;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
 
   &-item {
-    // box-sizing: border-box;
     position: relative;
-    display: inline-block;
-    height: 28px;
+    min-height: 28px;
     padding: 4px 10px;
+
     color: fade(#000, 85%);
-    line-height: 28px;
     text-align: center;
-
     cursor: pointer;
 
     &-selected {
@@ -79,10 +74,10 @@
     .segmented-item-selected();
 
     position: absolute;
-    top: 2px;
-    left: 0px;
+    top: 0;
+    left: 0;
     width: 0;
-    height: 28px;
+    height: 100%;
     padding: 4px 0;
   }
 
diff --git a/assets/style.less b/assets/style.less
@@ -1,5 +1,12 @@
 @import './index.less';
 
+// reset
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 .wrapper {
   margin-bottom: 10px;
 }
diff --git a/docs/demo/custom-render.md b/docs/demo/custom-render.md
@@ -0,0 +1,3 @@
+## custom-render
+
+<code src="../examples/custom-render.tsx">
diff --git a/docs/examples/custom-render.tsx b/docs/examples/custom-render.tsx
@@ -0,0 +1,40 @@
+import '../../assets/style.less';
+import * as React from 'react';
+import Segmented from 'rc-segmented';
+
+const options = [
+  {
+    label: (
+      <div>
+        iOS
+        <br />
+        10
+        <br />
+        11
+      </div>
+    ),
+    value: 'iOS',
+  },
+  { label: <h1>Android</h1>, value: 'Android' },
+  {
+    label: (
+      <div>
+        Web
+        <br />
+        345
+      </div>
+    ),
+    value: 'Web',
+  },
+  { label: <h1>Electron</h1>, value: 'Electron', disabled: true },
+  // debug usage
+  // { label: '', value: 'Empty' },
+];
+
+export default () => {
+  return (
+    <>
+      <Segmented options={options} />
+    </>
+  );
+};
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
@@ -1,11 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`rc-segmented render 1`] = `
+<div
+  class="rc-segmented"
+>
+  <label
+    class="rc-segmented-item rc-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      iOS
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      <div
+        id="android"
+      >
+        Android
+      </div>
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      <h2>
+        Web
+      </h2>
+    </span>
+  </label>
+</div>
+`;
+
 exports[`rc-segmented render empty segmented 1`] = `
 <div
   class="rc-segmented"
 />
 `;
 
+exports[`rc-segmented render segmented ok 1`] = `
+<div
+  class="rc-segmented"
+>
+  <label
+    class="rc-segmented-item rc-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      iOS
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      Android
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      Web
+    </span>
+  </label>
+</div>
+`;
+
 exports[`rc-segmented render segmented with CSSMotion 1`] = `
 <div
   class="rc-segmented"
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount as emount } from 'enzyme';
 import { mount } from './wrapper';
 
-import Segmented, { SegmentedValue } from '../src';
+import Segmented from '../src';
+import type { SegmentedValue } from '../src';
 
 jest.mock('rc-motion/lib/util/motion', () => {
   return {
@@ -27,13 +27,38 @@ describe('rc-segmented', () => {
       />,
     );
 
+    expect(wrapper.render()).toMatchSnapshot();
+
     expect(
       wrapper
         .find('.rc-segmented-item-input')
         .map((el) => (el.getDOMNode() as HTMLInputElement).checked),
     ).toEqual([true, false, false]);
   });
 
+  it('render', () => {
+    const wrapper = mount(
+      <Segmented
+        options={[
+          { label: 'iOS', value: 'iOS' },
+          { label: <div id="android">Android</div>, value: 'Android' },
+          { label: <h2>Web</h2>, value: 'Web' },
+        ]}
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+
+    expect(
+      wrapper
+        .find('.rc-segmented-item-input')
+        .map((el) => (el.getDOMNode() as HTMLInputElement).checked),
+    ).toEqual([true, false, false]);
+
+    expect(wrapper.find('#android').at(0).text()).toContain('Android');
+    expect(wrapper.find('h2').at(0).text()).toContain('Web');
+  });
+
   it('render segmented with defaultValue', () => {
     const wrapper = mount(
       <Segmented options={['iOS', 'Android', 'Web']} defaultValue="Web" />,
@@ -199,23 +224,6 @@ describe('rc-segmented', () => {
     ).toEqual([true, false, false]);
   });
 
-  it('render segmented with options null/undefined', () => {
-    const handleValueChange = jest.fn();
-    const wrapper = mount(
-      <Segmented
-        options={[null, undefined, ''] as any}
-        disabled
-        onChange={(e) => handleValueChange(e.target.value)}
-      />,
-    );
-    expect(wrapper.render()).toMatchSnapshot();
-    expect(
-      wrapper
-        .find('.rc-segmented-item-label')
-        .map((n) => n.getDOMNode().textContent),
-    ).toEqual(['', '', '']);
-  });
-
   it('render segmented with className and other html attribues', () => {
     const wrapper = mount(
       <Segmented
@@ -361,4 +369,21 @@ describe('rc-segmented', () => {
     // thumb should disappear
     expect(wrapper.find('.rc-segmented-thumb').length).toBe(0);
   });
+
+  it('render segmented with options null/undefined', () => {
+    const handleValueChange = jest.fn();
+    const wrapper = mount(
+      <Segmented
+        options={[null, undefined, ''] as any}
+        disabled
+        onChange={(e) => handleValueChange(e.target.value)}
+      />,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(
+      wrapper
+        .find('.rc-segmented-item-label')
+        .map((n) => n.getDOMNode().textContent),
+    ).toEqual(['', '', '']);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## custom-render`
	`2`	`+`
	`3`	`+<code src="../examples/custom-render.tsx">`