前端项目实战陆拾伍react-admin+material ui-踩坑-List需要Datagrid中Datagrid测试步骤

简介: 前端项目实战陆拾伍react-admin+material ui-踩坑-List需要Datagrid中Datagrid测试步骤
export const dataGridList = [{
    id: "1",
    name: "body",
    path: "body"
}, {
    id: "2",
    name: "basic",
    path: "basic"
},
{
    id: "3",
    name: "children",
    path: "children"
},
{
    id: "4",
    name: "bulkActionButtons",
    path: "bulkActionButtons"
},
{
    id: "5",
    name: "empty",
    path: "empty"
},
{
    id: "6",
    name: "expand",
    path: "expand"
}
]

第二步 添加路由




<CustomRoutes>
              <Route path="body/" element={<DatagridBodyList />} />
              <Route path="basic/" element={<DatagridBasicList />} />
              <Route path="children/" element={<DatagridChildrenList />} />
              <Route path="bulkActionButtons/"
 element={<DatagridBulkActionList />} />
              <Route path="empty/" element={<DatagridEmpty />} />
              <Route path="expand/" element={<DatagridEmpty />} />
            </CustomRoutes>

第三步 添加文件

import React from "react";
import { List, useRecordContext, Datagrid, TextField, EditButton, BooleanField } from 'react-admin';
const PostPanel = () => {
    const record = useRecordContext();
    return (
        <div dangerouslySetInnerHTML={{ __html: record.body }} />
    );
};
const DatagridExpandList = () => (
    <List resource="t_geyao_person">
        <Datagrid expand={<PostPanel />}>
            <TextField source="id" />
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </Datagrid>
    </List>
)
export default DatagridExpandList

第四步 运行结果

image.png

相关文章
|
2月前
|
资源调度 前端开发 JavaScript
React的测试:使用Jest和React Testing Library进行深入探索
【4月更文挑战第25天】本文探讨了使用Jest和React Testing Library进行React测试的方法。Jest是Facebook推出的JavaScript测试框架,适合React测试,提供全面的API和功能。React Testing Library侧重于组件行为,提倡按用户交互方式测试。安装这两个工具后,可通过编写测试用例(如模拟点击事件)来验证组件功能。运行Jest可执行测试并显示结果。此外,还介绍了高级测试技巧和模拟功能,强调了它们对于确保组件正确性、提升开发效率的重要性。
|
2月前
|
NoSQL 安全 测试技术
接口测试用例设计的关键步骤与技巧解析
该文介绍了接口测试的设计和实施,包括测试流程、质量目标和用例设计方法。接口测试在需求分析后进行,关注功能、性能、安全等六项质量目标。流程包括网络监听(如TcpDump, WireShark)和代理工具(Charles, BurpSuite, mitmproxy, Fiddler, AnyProxy)。设计用例时,需考虑基本功能流程、输入域测试(如边界值、特殊字符、参数类型、组合参数、幂等性)、线程安全(并发和分布式测试)以及故障注入。接口测试用例要素包括模块、标题、优先级、前置条件、请求方法等。文章强调了保证接口的幂等性和系统健壮性的测试重要性。
61 5
|
2月前
|
安全 测试技术 网络架构
【专栏】编写网络设备割接方案的七个步骤,包括明确割接目标、收集信息、制定计划、设计流程、风险评估、准备测试环境和编写文档。
【4月更文挑战第28天】本文介绍了编写网络设备割接方案的七个步骤,包括明确割接目标、收集信息、制定计划、设计流程、风险评估、准备测试环境和编写文档。通过实际案例分析,展示了如何成功完成割接,确保业务连续性和稳定性。遵循这些步骤,可提高割接成功率,为公司的网络性能和安全提供保障。
|
29天前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
21 1
|
13天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
10 0
|
17天前
|
IDE Java 测试技术
Springboot单元测试步骤
Springboot单元测试步骤
18 0
|
2月前
|
开发框架 前端开发 开发者
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
【4月更文挑战第30天】Flutter框架支持Material Design和Cupertino Design两种设计风格,助力开发者创建吸引人的移动应用。Material Design基于现实世界物理规律,提供`Scaffold`、`Card`等组件,实现纸片效果和直观体验。Cupertino Design注重简洁图标和流畅动画,借助`CupertinoTabScaffold`、`CupertinoActivityIndicator`等组件呈现苹果风格界面。Flutter的`Theme`类允许统一管理应用样式,开发者可根据需求混搭两种风格,实现跨平台的优质用户体验。
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
|
2月前
|
API 开发者
免费邮箱API发送邮件测试调试的方法和步骤
本文介绍了使用免费邮箱API如aoksend、Mailgun、SMTP2GO发送邮件的测试调试步骤:选择合适的API,获取访问密钥,配置邮件参数,编写测试代码,调试和测试,查看发送日志,以及优化改进邮件发送功能,确保其稳定运行。
|
2月前
|
安全 测试技术 API
API 渗透测试 4 个关键步骤
【5月更文挑战第17天】API渗透测试的四个关键步骤:信息收集、漏洞发现、漏洞利用和报告撰写。
|
2月前
|
安全 测试技术 持续交付
深入探索白盒测试:提升软件质量的关键步骤
【4月更文挑战第9天】在软件开发的生命周期中,确保代码的质量和性能至关重要。白盒测试,作为软件测试的一个核心分支,提供了一种通过检查内部结构、设计和逻辑来验证程序正确性的方法。本文将深入探讨白盒测试的原理、方法和最佳实践,旨在帮助开发者和测试工程师提高测试效率,从而确保软件产品的可靠性与稳定性。通过对不同白盒测试技术的比较分析,我们将揭示如何更有效地利用这些技术来发现和修复潜在的缺陷。