Skip to content

Instantly share code, notes, and snippets.

@fidelman

fidelman/client.js

Last active May 21, 2019 09:58
Show Gist options
  • Save fidelman/a20d7f3885bb80410cbf657db6ddd677 to your computer and use it in GitHub Desktop.
Save fidelman/a20d7f3885bb80410cbf657db6ddd677 to your computer and use it in GitHub Desktop.
Download ZIP
Snapshot testing
Raw
client.js
import {JSDOM} from 'jsdom';
const {document} = (new JSDOM(`<body></body>`)).window;
global.document = document;
// map
const map = global.document.createElement(`div`);
map.setAttribute(`id`, `map`);
global.document.body.appendChild(map);
Raw
map.jsx
import React from "react";
import PropTypes from "prop-types";
import * as leaflet from "leaflet";
class Map extends React.PureComponent {
constructor(props) {
super(props);
this._icon = leaflet.icon({
iconUrl: `img/pin.svg`,
iconSize: [30, 30]
});
}
componentDidMount() {
const {
city,
zoom,
pins = []
} = this.props;
const {
longitude,
latitude
} = city;
this._map = leaflet.map(`map`, {
center: [longitude, latitude],
zoom,
zoomControl: false,
marker: true
});
this._map.setView([longitude, latitude], zoom);
leaflet
.tileLayer(`https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png`, {
attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>`
})
.addTo(this._map);
pins.forEach((pin) => {
const offerCords = [pin.longitude, pin.latitude];
leaflet
.marker(offerCords, {icon: this._icon})
.addTo(this._map);
});
}
componentWillUnmount() {
this._map = null;
}
render() {
return <div id="map" style={{display: `flex`, width: 100 + `%`, height: 100 + `%`}}/>;
}
}
Map.propTypes = {
city: PropTypes.shape({
longitude: PropTypes.number,
latitude: PropTypes.number
}).isRequired,
zoom: PropTypes.number.isRequired,
pins: PropTypes.arrayOf(PropTypes.shape({
longitude: PropTypes.number,
latitude: PropTypes.number,
}))
};
export default Map;
Raw
map.test.js
import React from "react";
import renderer from "react-test-renderer";
import Map from "./map";
const mock = {
city: {
longitude: 52.38333,
latitude: 4.9
},
zoom: 12,
pins: [
{
longitude: 52.3909553943508,
latitude: 4.85309666406198
},
{
longitude: 52.369553943508,
latitude: 4.85309666406198
},
{
longitude: 52.3909553943508,
latitude: 4.929309666406198
},
{
longitude: 52.3809553943508,
latitude: 4.939309666406198
},
{
longitude: 52.3809553943508,
latitude: 4.929309666406198
}
]
};
it(`Map renders correctly`, () => {
const tree = renderer.create(<Map city={mock.city} zoom={mock.zoom} pins={mock.pins}/>);
expect(tree).toMatchSnapshot();
});
Raw
package.json
...
"jest": {
"setupFiles": [
"<rootDir>/client.js"
]
},
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment