mardi 19 mai 2020

Can't import functions from javascript-file to javascript-test-file

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:

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