fix: 修复 Checkbox 相关测试

KonghaYao · Jun 15, 2024 · 97a9203 · 97a9203
1 parent fdb9bc2
commit 97a9203
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 37 deletions.
diff --git a/packages/core/src/checkbox/Checkbox.tsx b/packages/core/src/checkbox/Checkbox.tsx
@@ -1,17 +1,7 @@
-import {
- OriginComponent,
- classNames,
- computed,
- createCtx,
- extendsEvent,
- useMapper,
- type useSelect,
-} from "@cn-ui/reactive";
+import { OriginComponent, classNames, computed, extendsEvent, useMapper } from "@cn-ui/reactive";
 import type { SelectOptionsType } from "@cn-ui/reactive";
 import { type BaseFormItemType, extendsBaseFormItemProp } from "../form/BaseFormItemType";
-
-export type CheckboxGroupCtxType = ReturnType<typeof useSelect<SelectOptionsType>>;
-export const CheckboxGroupCtx = /* @__PURE__ */ createCtx<CheckboxGroupCtxType>({} as any);
+import { CheckboxGroupCtx } from "./CheckboxGroupCtx";
 
 export interface CheckboxProps extends BaseFormItemType, SelectOptionsType {
  /**
@@ -60,7 +50,7 @@ export const Checkbox = OriginComponent<CheckboxProps, HTMLInputElement, boolean
  // @ts-ignore
  indeterminate={props.indeterminate}
  type={inputType()}
- checked={isChecked()}
+ checked={!!isChecked()}
  {...extendsBaseFormItemProp(props)}
  {...extendsEvent(props)}
  oninput={(e) => {

diff --git a/packages/core/src/checkbox/CheckboxGroup.tsx b/packages/core/src/checkbox/CheckboxGroup.tsx
@@ -1,16 +1,17 @@
 import { type Atom, OriginComponent, computed, useSelect } from "@cn-ui/reactive";
 import type { SelectOptionsType } from "@cn-ui/reactive";
-import { For, createEffect } from "solid-js";
+import { For } from "solid-js";
 import { type BaseFormItemType, extendsBaseFormItemProp } from "../form/BaseFormItemType";
-import { Checkbox, CheckboxGroupCtx, type CheckboxProps } from "./Checkbox";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroupCtx } from "./CheckboxGroupCtx";
 
 export interface CheckboxGroupExpose extends ReturnType<typeof useSelect<SelectOptionsType>> {}
 export interface CheckboxGroupProps extends BaseFormItemType {
  /**
  * 生成选项
  * @tested
  */
- options: CheckboxProps[];
+ options: SelectOptionsType[];
  expose?: (expose: CheckboxGroupExpose) => void;
  /**
  * 是否支持多选
@@ -25,19 +26,10 @@ export const CheckboxGroup = OriginComponent<CheckboxGroupProps, HTMLElement, st
  multi: () => props.multiple ?? true,
  });
  selectSetting.syncIdArrayModel(props.model);
- const options = computed(() => {
- if (typeof props.options[0] === "object") {
- return props.options as CheckboxProps[];
- }
- return props.options.map((i) => ({
- value: i.toString(),
- label: i.toString(),
- }));
- });
  props.expose?.(selectSetting);
  return (
  <CheckboxGroupCtx.Provider value={selectSetting}>
- <For each={options()}>
+ <For each={props.options}>
  {(config) => {
  return <Checkbox {...extendsBaseFormItemProp(props)} {...config} />;
  }}

diff --git a/packages/core/src/checkbox/CheckboxGroupCtx.tsx b/packages/core/src/checkbox/CheckboxGroupCtx.tsx
@@ -0,0 +1,5 @@
+import { createCtx, type useSelect } from "@cn-ui/reactive";
+import type { SelectOptionsType } from "@cn-ui/reactive";
+
+export type CheckboxGroupCtxType = ReturnType<typeof useSelect<SelectOptionsType>>;
+export const CheckboxGroupCtx = /* @__PURE__ */ createCtx<CheckboxGroupCtxType>({} as any);
diff --git a/packages/core/src/checkbox/index.stories.tsx b/packages/core/src/checkbox/index.stories.tsx
@@ -6,7 +6,7 @@ import { Flex } from "../container/Flex";
 import { Checkbox, CheckboxGroup, type CheckboxGroupExpose, useControlCheckbox } from "./index";
 
 const expectCheckBox = (el: HTMLElement) => {
- return expect(el.children[0]);
+ return expect(el.querySelector("input"));
 };
 
 const meta = {
@@ -79,22 +79,26 @@ export const Group: Story = {
  const canvas = within(canvasElement);
 
  const toggleCheckbox = async (name: string, state = true) => {
- await userEvent.click(await canvas.findByText(name));
+ const el = await canvas.findByText(name);
+ await userEvent.click(el);
 
- if (state) expectCheckBox(await canvas.findByText(name)).toBeChecked();
+ if (state) expectCheckBox(el).toBeChecked();
+ if (state === false) expectCheckBox(el).not.toBeChecked();
  };
 
  await step("多选子按钮测试", async () => {
- await toggleCheckbox("苹果");
-
- expectCheckBox(await canvas.getByText("切换选中")).toBePartiallyChecked();
+ expectCheckBox(await canvas.findByText("苹果")).toBeChecked();
+ const total = canvas.getByText("切换选中");
+ expectCheckBox(total).toBePartiallyChecked();
+ await toggleCheckbox("苹果", false);
 
  await toggleCheckbox("梨子");
- expectCheckBox(await canvas.getByText("切换选中")).toBePartiallyChecked();
+ expectCheckBox(total).toBePartiallyChecked();
  await toggleCheckbox("橙子");
- expectCheckBox(await canvas.getByText("切换选中")).toBeChecked();
+ await toggleCheckbox("苹果");
+ expectCheckBox(total).toBeChecked();
  await toggleCheckbox("橙子", false);
- expectCheckBox(await canvas.getByText("切换选中")).toBePartiallyChecked();
+ expectCheckBox(total).toBePartiallyChecked();
  });
  },
 };

diff --git a/packages/core/src/form/index.stories.tsx b/packages/core/src/form/index.stories.tsx
@@ -131,7 +131,7 @@ export const Primary: Story = {
  date: "2024-06-12T16:00:00.000Z",
  "date-range": ["2024-06-03T16:00:00.000Z", "2024-06-12T16:00:00.000Z"],
  cascader: [{ value: "lucy", label: "Lucy" }],
- number: 0,
+ number: 10,
  select: "lucy",
  radio: "jack",
  });

diff --git a/packages/core/src/inputNumber/index.stories.tsx b/packages/core/src/inputNumber/index.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { atom } from "@cn-ui/reactive";
 import { expect, userEvent, within } from "@storybook/test";
-import { sleep } from "radash";
 import { Button } from "../button";
 import { InputNumber } from "./index";