问题描述
我是刚开始编写测试用例的新手，我试图为我的仪表板页面编写测试用例，但我收到无法读取未定义的属性'clientHeight'错误，请查看我的所有dashboard.js下面的页面和我的测试用例文件。请帮助我 在此行出现错误：
var t = window.innerHeight - document.getElementsByClassName('nep-header')[0].clientHeight - 20 + "p
我的Dashboard.js页面：
import { CompanyDashboard,DeleteCompanyDashboard } from "../../APICall/CompanyDashboard";
import React from "react";import { GetimageUrl } from "../../Common/UtilityFunctions";
import { Table,Modal,Button,Message } from "@makNowledgeservices/neptune";
import './Dashboard.css';
import { dateFormatConversionForSorting } from '../../Common/UtilityFunctions';
import { setTimeout } from "timers";
import Loader from '../../Components/Loader/Loader';
var successMessage = false;
var errorMessage = false;
var showing = true;
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.showing = true;
setTimeout(() => {
var divsToHide = document.getElementsByClassName("nep-table-empty"); //divsToHide is an array
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.visibility = "hidden"; // or
divsToHide[i].style.display = "none"; // depending on what you're doing
}
},10);
this.state = {
visible: false,DeleteCompStr: "",DeleteCompID: 0,columnDefs: [
{
title: "Company",render: "Companyname",fixed: "left",width: 320,sorter: order => (a,b) => {
if (order === 'asc') return a.Companyname.localeCompare(b.Companyname)
return b.Companyname.localeCompare(a.Companyname)
}
},{
title: 'Year End',width: 95,render: d => this.renderMethod(d.financeYearEndMonth + " " + d.financeYearEnd),b) => {
if (order === 'asc') return dateFormatConversionForSorting(a.financeYearEndMonth + " " + a.financeYearEnd).localeCompare(dateFormatConversionForSorting(b.financeYearEndMonth + " " + b.financeYearEnd))
return dateFormatConversionForSorting(b.financeYearEndMonth + " " + b.financeYearEnd).localeCompare(dateFormatConversionForSorting(a.financeYearEndMonth + " " + a.financeYearEnd))
}
},{
title: 'LTM Financials',render: d => this.renderMethod(d.ltmMonth + " " + d.ltmYear),b) => {
if (order === 'asc') return dateFormatConversionForSorting(a.ltmMonth + " " + a.ltmYear).localeCompare(dateFormatConversionForSorting(b.ltmMonth + " " + b.ltmYear))
return dateFormatConversionForSorting(b.ltmMonth + " " + b.ltmYear).localeCompare(dateFormatConversionForSorting(a.ltmMonth + " " + a.ltmYear))
}
},{
title: "AccuRate",render: s => this.StatusIndicator(s.accurate),},{
title: "Financial Trends",render: s => this.StatusIndicator(s.finTrend),{
title: "Newsflow Trends",width: 115,render: (s) => (
<div style={{ cursor: "default" }}>
{this.StatusIndicator(s.newsflow)}
<a className="tooltip" style={{ float: "right" }}
onClick={this.show.bind(this,s)}
><i style={{ cursor: "pointer" }} className="icon-Delete" name="delete"
onMouSEOver={({ target }) => target.style.color = '#021155'}
onMouSEOut={({ target }) => target.style.color = '#75787B'} /></a>
</div>
),}
],companyCount: '',rowData: [],res: ""
}
this.show = this.show.bind(this)
}
show(selRowVal) {
this.setState({
visible: true,})
this.DeleteCompID = selRowVal.id;
this.DeleteCompStr = selRowVal.Companyname;
}
handleOk = () => {
DeleteCompanyDashboard("DeleteCompany/" + this.DeleteCompID).then(responce => {
if (responce.data === true) {
if (successMessage === false) {
successMessage = true;
Message.success(this.DeleteCompStr + ' Company has been deleted successfully',7,{
onClose: () => {
successMessage = false;
}
});
}
}
else {
if (errorMessage === false) {
errorMessage = true;
Message.error('Server error',{
onClose: () => {
errorMessage = false;
}
});
}
}
this.componentDidMount();
this.setState({
visible: false,});
});
}
handleCancel = () => {
this.setState({
visible: false,})
}
renderMethod(params) {
return params.substring(3);
}
handleRemove(selectedValue) {
this.show();
}
StatusIndicator(params) {
switch (params) {
case 'Positive':
return <span style={{ color: '#388E3C' }}><img className="indicaterGap" src={GetimageUrl(params)}></img>{params}</span>
break;
case 'Negative':
return <span style={{ color: '#C62828' }}><img className="indicaterGap" src={GetimageUrl(params)}></img>{params}</span>
break;
case 'Stable':
return <span style={{ color: '#C68700' }}><img className="indicaterGap" src={GetimageUrl(params)}></img>{params}</span>
break;
case 'Neutral':
return <span style={{ color: '#C68700' }}><img className="indicaterGap" src={GetimageUrl(params)}></img>{params}</span>
break;
default:
return <span style={{ color: '#55565A' }}>{params}</span>
break;
}
}
componentDidMount() {
CompanyDashboard("GetCompany").then(responce => {
this.showing = false;
this.setState({
rowData: responce.data,companyCount: responce.data.length === 0 || undefined ? 0 : responce.data.length
});
});
this.tableHeight();
}
componentDidUpdate(prevProps,prevstate) {
if (prevstate.companyCount !== this.state.companyCount) {
CompanyDashboard("GetCompany").then(responce => {
this.setState({ rowData: responce.data,companyCount: responce.data.length === 0 || undefined ? 0 : responce.data.length });
});
}
this.tableHeight();
}
tableHeight() {
var t = window.innerHeight - document.getElementsByClassName('nep-header')[0].clientHeight - 20 + "px"
var ele = document.getElementById("pr");
ele.style.height = t.toString();
}
rowClicked(e) {
setTimeout(() => {
let selectedCompany = this.state.rowData.filter(x => x.cik == e.cik);
selectedCompany = selectedCompany.map(function (obj) {
let val = obj.Companyname;
delete obj['Companyname']
obj.companyname = val;
return obj
}
);
sessionStorage.setItem("selectedCompany",JSON.stringify(selectedCompany));
const { from } = {
from: { pathname: "/company" }
};
this.props.history.push(from);
},300)
}
handleClick = (value = this.state.value) => {
value += Math.random() * 12
if (value >= 100) {
value = 100
this.setState({ value })
} else {
this.setState({ value },() => {
setTimeout(this.handleClick,320)
})
}
}
render() {
return (
<div id="pr" className="tableSpace">
<label>Companies <span className="tableSpan">({this.state.companyCount})</span></label>
<div style={{ display: (this.showing ? 'block' : 'none') }} >
<Loader />
</div>
<Table
keygen="cik"
striped
bordered
fixed="both"
className="tableClass"
bordered fixed="both"
width={1024}
columns={this.state.columnDefs}
data={this.state.rowData}
onRowClick={this.rowClicked.bind(this)}
/>
<Modal
visible={this.state.visible}
width={500}
title=" Delete Company"
onClose={this.handleCancel}
maskCloseAble={false}
footer={[
<Button key="cancel" className="nep-button nep-button-secondary" onClick={this.handleCancel}>
Cancel
</Button>,<Button key="ok" type="primary" onClick={this.handleOk}>
Delete
</Button>,]} >
The company <b>{this.DeleteCompStr}</b> will be permanently deleted and this action cannot be undone. <br /> Are you sure you want to proceed ?
</Modal>
</div>
);}}export default Dashboard;`
import React from 'react'
import { render,cleanup } from '@testing-library/react';
import Dashboard from "../Components/Dashboard/Dashboard"
import axios from "axios";
import { shallow } from 'enzyme'
import { Table } from "@makNowledgeservices/neptune";
afterEach(cleanup);
jest.mock('axios');
it("should render initial layout",() => {
const component = shallow(<Dashboard />);
expect(component.getElements()).toMatchSnapshot();
});
it("test to render Dashboard component",async () => {
axios.post.mockResolvedValue({ data: [{ Companyname: "xyz",accurate: "Positive",}],status: 200,statusText: "OK" });
await render(<Dashboard />,Table);
var result = render(<Dashboard />);
expect(result).toBeTruthy();
});
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）