How do I mock leaflet for jest tests? - react-leaflet

I use a custom icon in L.Icon in a CRA project. It keeps saying L is undefined when running jest tests. How would I mock leaflet to avoid this error?

I found this answer on a similar issue in leaflet itself
What I can recommend for testing is the following,
just mock leaflet using this in your test file,
that is rendering the map component:
jest.mock('leaflet')
And then you place this leaflet mock you can
find in react-leaflet into the jest mocks folder
(__mocks__/leaflet.js, download the current file from:
https://github.com/PaulLeCam/react-leaflet/blob/master/__mocks__/leaflet.js)
That should be enough in most cases.
ref: https://github.com/Leaflet/Leaflet/issues/6297#issuecomment-499809735

Related

Compiling RIDE contracts with Python or JS

Is it possible to compile RIDE contracts locally with Python or JS? I've only found a Java-based compiler, which is less than ideal for a browser app.
You can use JS library Waves-Transactions to create transactions such as Set script, Set asset script or InvokeScript.
There is a JS compiler for RIDE, you can find it here
https://www.npmjs.com/package/#waves/ride-js

How to implement interface defined in TypeScript?

I am using javascript to implement vs code plugin but have a few problems on using TreeDataProvider interface. My plugin only show the root node in the tree view but it doesn't show any children. I read the vscode tree-view-sample example and found that it uses typescript to create a class implementing TreeDataProvider interface. I wonder how I can do that in javascript. Will there be problems if I don't implement it?
TypeScript is pretty much just JavaScript + types. Just remove all the type annotations from the example code to convert it to JS.
VS Code extensions are run in a node environment so if your code is using import/export, you will also have to rewrite those to something that node can understand or use tsc or babel to down compile the js code

How to integrate Leaflet into Angular 5

I've got the standard Angular 5 build and I'm trying to include a Leaflet map. The documentation gives me an error when I follow it. I'm trying to import Leaflet through NPM and include it but I can't find documentation.
I know I need the CSS, ID tag, and imports...
I've downloaded "leaflet" into my "node_modules folder".
Now what? What is the import code for the Leaflet module that I need to put into my "app.module.ts" file?
Firstly, for better development, install through npm #types/leaflet to get leaflet types in application. After that, you need to create component with Map property (imported from leaflet) and use factory function map (also imported from leaflet). The most of examples show configuration using id, but you can pass HTMLElement.
constructor(private element: ElementRef) {}
ngAfterViewInit() {
this.map = map(this.element.nativeElement, {...options})
}
At this moment, I develop library to integrated leaflet with Angular 5 using components. First stable will be released in next week, but I have first beta release on npm here.

PlayFramework with Scala, WebJars, ReactJS and RequireJS?

I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.

Exporting a class and its methods in GWT for use in native JavaScript

I'm developing a GWT project at the moment and it's been up and running for a while. New functionality that is to be added require extensive testing, visualizing and simulating of a specific algorithm. I would like to export that specific algorithm so that I may call it directly from JavaScript and do some canvas magic.
How can I export a number of classes for direct use in JavaScript from a GWT project?
I've tried using the GWT exporter, following the Getting Started section closely.
I've noticed that my output directory contains a new generator class (TestClassExporterImpl.java) but the final JavaScript output contains no trace of my TestClass or the exported methods.
I'm sure I've made a mistake somewhere on the way or didn't understand the GWT exporter correctly.
Try to disable obfuscation, it will create the same names in Javascript as in the original Java code