I'm trying to learn how to make tests in Javascript with Jest and tried to sort of imitate some of the tutorials I found:
- https://www.youtube.com/watch?v=QzznzOlkgGw
- https://www.youtube.com/watch?v=pdx2HjFRaJY&list=PL0zVEGEvSaeF_zoW9o66wa_UCNE3a7BEr&index=3
But when I try to import a function it doesn't seem to get it. Is it because I'm missing a export
? If so, where do I put the export
? Behind the function?
Js-test-file:
import { submitHouse, updateHouse } from "./House";
import {HouseList, getAllHouses, deleteHouse} from "./HouseList";
beforeEach(() => {
this.state = {
HouseId: "", Address: "fronttestAddress", HouseNumber: "fronttestHouseNumber", City: "fronttestCity",
}
});
it('createHouse', function () {
const house = {
Address: this.state.Address,
HouseNumber: this.state.HouseNumber,
City: this.state.City
};
const houseAmount = getAllHouses.houses().length;
submitHouse(house);
const newHouseAmount = getAllHouses.houses().length;
expect(newHouseAmount).toBeGreaterThan(houseAmount);
//===================================================================
const lastHouse = HouseList.houses[getAllHouses.houses.length - 1];
deleteHouse(lastHouse.HouseId);
const deletedHouseAmount = HouseList.houses().length;
expect(deletedHouseAmount).toBeLessThan(newHouseAmount);
});
Js-file (with functions, etc. that get stuff from the database in the backend (excluded the render()
-part):
import React, {Component} from "react";
import {Card, Form, Button} from "react-bootstrap";
import axios from "axios";
export default class House extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
}
initialState = {
HouseId: "", Address: "", HouseNumber: "", City: ""
}
componentDidMount() {
const houseId = +this.props.match.params.id;
if (houseId) {
this.findHouseById(houseId);
}
}
findHouseById = (houseId) => {
axios.get("http://localhost:8080/house/" + houseId)
.then(response => {
if (response.data != null) {
this.setState({
HouseId: response.data.HouseId,
Address: response.data.Address,
HouseNumber: response.data.HouseNumber,
City: response.data.City
})
}
})
}
submitHouse = (event) => {
event.preventDefault();
const house = {
Address: this.state.Address,
HouseNumber: this.state.HouseNumber,
City: this.state.City
};
axios.post("http://localhost:8080/house", house)
.then(response => {
if (response.data != null) {
this.setState((this.initialState));
alert("House Saved!")
setTimeout(() => this.houses(), 1000);
}
})
};
updateHouse = (event) => {
event.preventDefault();
const houseId = +this.props.match.params.id;
const house = {
HouseId: this.state.HouseId,
Address: this.state.Address,
HouseNumber: this.state.HouseNumber,
City: this.state.City
};
axios.put("http://localhost:8080/house/" + houseId, house)
.then(response => {
if (response.data != null) {
this.setState((this.initialState));
setTimeout(() => this.houses(), 1000);
alert("House Updated!");
}
})
}
}
Js-HouseList-file (excluding the render()
-parts:
import React, {Component} from "react";
import {Card, Table, ButtonGroup, Button, InputGroup, FormControl} from "react-bootstrap";
import {Link} from "react-router-dom";
import axios from "axios";
export default class HouseList extends Component {
constructor(props) {
super(props);
this.state = {
urlLastId: window.location.href.substr(window.location.href.lastIndexOf('/') + 1),
houses: []
};
}
componentDidMount() {
this.getAllHouses();
}
getAllHouses() {
axios.get("http://localhost:8080/house")
.then(response => response.data)
.then((data) => {
this.setState({houses: data});
});
}
deleteHouse = (HouseId) => {
axios.delete("http://localhost:8080/house/" + HouseId)
.then(response => {
if (response.data != null) {
alert("House Deleted!")
this.setState({
houses: this.state.houses.filter(house => house.HouseId !== HouseId)
})
}
})
}
}
Also the tutorials' functions all returned something, but for example submitHouse
doesn't return anything (not sure if this has anything to do with it)...it only puts a House
in the database and with getAllHouses
I was planning on testing the functions.
Aucun commentaire:
Enregistrer un commentaire