Can someone please help me how to use mathjs in ionic 2?
I just don't get it imported to use, really don't know what to do.
In ionic 1 it was easy to load the library and use it, but not so in ionic 2.
Thanks!
try this
npm install mathjs --save
npm install #types/mathjs --save-dev
in Component:
import * as math from 'mathjs'; // don't named as Math, this will conflict with Math in JS
in some method:
let rs = math.eval('cos(45 deg)');
or you could using CDN:
add this line into index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.9.1/math.min.js"></script>
in Component:
// other import ....;
declare const math: any;
in some method:
let rs = math.eval('cos(45 deg)');
Related
This is a question that was asked by #dbendaou over on the Ember Discord
What is the best way to access ENV from config/envirnoment in an addon?
I was thinking about getOwner(this).lookup('config:environment') but it doesn't work
neither does import ENV from '../config/environment'; 😅
From addons, specifically, since your context doesn't define the environment, you need a slightly different API:
import { getOwner } from '#ember/application';
// ....
export default class MyAddonComponent extends Component {
get env() {
getOwner(this).resolveRegistration('config:environment')
}
}
import ENV from '../config/environment' is an alias for import ENV from '<app-name>/config/environment'; which, addons can't know what the <app-name> is.
Maybe related, because this has come up a number of times in the discord, is that this would also be how you get access to environment variables at runtime.
environment.js is a build-time file, so it has access to the node environment your app builds in and it outputs a JSON object for your app to consume.
For example:
// <your-app>/config/environment.js
const MY_ENV_VAR = process.env;
module.exports = function (environment) {
let ENV = {
// ...
MY_ENV_VAR,
};
return ENV;
}
Then, your addon can access MY_ENV_VAR via resolveRegistration. and apps can access it via the import.
Apps:
import ENV from '<app-name>/config/environment'
// ...
ENV.MY_ENV_VAR
Addons:
getOwner(this).resolveRegistration('config:environment').MY_ENV_VAR;
I am having an issue trying to load the most basic custom mapping in React Native Web. The custom styles are loading just fine in the App, but not Web. Using the latest version with the babel loader hack as proposed here. I am using the default mapping as proposed in the UI Kitten docs for v5.x
My code looks like this:
import * as eva from '#eva-design/eva'
import * as mapping from '../styles/mapping.json'
import { myTheme } from '../styles/light-theme'
export default function App(): React.ReactElement {
return <>
<ApplicationProvider {...eva} theme={myTheme} customMapping={mapping}>
...
</ApplicationProvider>
</>
}
I tried replicating with a blank repo and it was working fine, so one line at a time I figured out that my import was not correct (not readable by babel?).
Instead of:
import * as mapping from '../styles/mapping.json'
Should be:
import {default as mapping} from '../styles/mapping.json'
The correct way is suggested in the UIKitten docs, so I don't think it will happen to many, but may help others as it's not an obvious thing if someone is working with the App emulator for the most time and not checking the Web until later.
This is the way I use the custom mapping with ts file: custom-mapping.ts
export const customMapping: any = {
components: {
CircleButton: {
meta:{...},
appearances: {...}
}
}
}
and import it like this:
...
import {customMapping} from '../custom-mapping';
<ApplicationProvider
...
customMapping={{...eva.mapping, ...customMapping}}
>
{children}
</ApplicationProvider>
I am using this tutorial to install React for the front with an API built in Django.
https://sweetcode.io/how-use-djang-react-ap/
My repository for this projects so far is here:
https://github.com/AlexMercedCoder/DjangoReactCRM
When I npm run dev I get a syntax error in App.js, I've played with it and can't seem to figure it out. The error I get is.
ERROR in ./frontend/src/components/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError:
C:\Users\alexm\projects\DjangoReactCRM\drcrm\frontend\src
\components\App.js: Unexpected token, expected "," (29:6)
27 |
28 | wrapper ? ReactDOM.render(<app>, wrapper) : null;
> 29 | </app>
App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
state = {
data: ''
};
componentDidMount() {
fetch("/api")
.then(response => {
return response.json();
})
.then(data => this.setState({ data: JSON.stringify(data)}));
}
render(){
return (
<p>Jason data = {this.state.data}</p>
)
}
}
wrapper ? ReactDOM.render(<app>, wrapper) : null;
</app>
First, the <app> component is closed outside the ternary operator, so you'd have to use <app></ app> or even simpler <app />.
wrapper ? ReactDOM.render(<app></app>, wrapper) : null;
or
wrapper ? ReactDOM.render(<app/>, wrapper) : null;
Then, all React components must start with a capital letter
to differentiate default DOM component from those created with React, so you have to use this notation.
wrapper ? ReactDOM.render(<App />, wrapper) : null;
Finally, I do not see the utility of the ternary operator at the end of your code. Normally, the second argument when we call reactDOM.render(X, Y) must represent the DOM element in which we will render our main React component (in this case, <App />).
By default, when we create a React project with create-react-app, we don't have to deal with these settings and the DOM element is automatically defined as <div id='root'></div> (check inside the <body> in public/index.html inside your project root).
So call document.getElementById('root') to get the DOM element and simply put the result as second argument.
ReactDOM.render(<App />, document.getElementById('root'));
If it persist, I suggest you to simply create another React project with create-react-app and copy/paste only the code you need.
To get more informations: Click here
I hope it can help you.
** I apologize if my explanations are not clear or if I made some mistakes.
There are three problems in your component.
I'm guessing wrapper was supposed to be document.getElementById("root") ? Even then the ternary condition doesn't make sense. It should be something like:
ReactDOM.render(
<App />,
document.getElementById("root")
)
You defined the component as App, yet in ReactDOM.render you are using app
You have </app> at the end of the file. It doesn't do anything in this case.
I have a global property/variable with my app urls:
Vue.prototype.$apiUrls = {
root: 'http://localhost:8080/',
api: 'api/v1/'
// etc.
}
I use it inside my components as axios request:
axios.get(`${this.$apiUrls.root}${this.$apiUrls.api}/users/`)
Now I want to test my component's code, I've mocked axios already, but still I receive an error:
TypeError: Cannot read property '$apiUrls' of undefined
I've tried to define/mock this property inside each test and/or in JEST's setup file, like e.g.
global.$apiUrls = {...}
// or
Vue.prototype.$apiUrls = {...}
// or
Object.defineProperties(Vue.prototype, {$apiUrls: {...}})
I've also tried mocking it to window or this (yeah, thats silly), but with no success - I still receive that error - please help.
There is two ways to achieve this. One is using the Config option, as mentioned by #Aldarund. You can read about it here.
If you are using Jest, I recommend doing this in the jest.init.js file:
import { config } from '#vue/test-utils'
config.mocks['$apiUrls'] = {
'some/endpoint'
}
Then add this to the jest section of your package.json:
"setupFiles": [
"<rootDir>/jest.init.js"
]
Now it is globally mocked. If you want to do this on a per test basis, you can use the mocks mounting option:
const wrapper = shallowMount(Foo, {
mocks: {
$apiUrls: 'some/endpoint'
}
})
Hopefully this helps!
If you are interested I am compiling a collection of simple guides on how to test Vue components here. It's under development, but feel free to ask make an issue if you need help with other related things to testing Vue components.
I don't think the answers above work anymore (in 2020).
Here's what worked for me:
For vue-test-utils 1.x.x (Vue 2)
Create a new file, name it eg. jest.init.js
Give it the following content:
import { config } from "#vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock
Add this to your jest.config.js (actually write "rootDir", don't replace anything with a real path)
module.exports = {
setupFiles: ["<rootDir>/jest.init.js"]
}
These files will be only ran before jest runs unit tests.
Note that I'm importing {config}, not the default export. I don't know why the default didn't work for me. Even the documentation for vue test utils doesn't import the default export anymore
Also make sure you're not trying to import from the old vue-test-utils package. (The new one is #vue/test-utils)
For #vue/test-utils 2.x.x (vue-test-utils-next) (Vue 3)
Follow steps like for 1.x.x above, but in step two, do this instead:
import { config } from "#vue/test-utils"; //2.0.0-beta.5
config.global.mocks = {
yourGlobalProperty: label => label
};
You can do it with vue-test-utils beta 15 and later.
Here docs
And some example would be:
import VueTestUtils from '#vue/test-utils'
VueTestUtils.config.mocks['$apiUrls'] = {
...
}
Can you run browser based unit tests for Dart on drone.io? my last failed build is here. I tried sudo start xvfb but I'm not sure how to point that to my index.html file that launches my unit tests, anyone know how to do this? I should say that I am in no way interested in any actual DOM testing but my library imports 'dart:html' so I can't run it in the basic dart vm only configuration.
Update: Modified the build script to download content_shell. Also updated the path to content_shell in the hop task createUnitTestTask().
I use the hop pub package to do headless testing for drone. You can refer to the simplot library for a relatively simple example. But the steps are basically to add the following to your pubspec.yaml as developer dependencies:
hop: '>=0.27.0'
unittest: '>=0.9.0 <0.10.0'
Create a tool directory in your project root and add a file hop_runner.dart. Mine looks something like this:
library dumprendertree;
import 'package:hop/hop.dart';
import 'dart:io';
import 'dart:async';
main(List<String> args) {
addTask('test', createUnitTestTask());
runHop(args);
}
Task createUnitTestTask() {
return new Task((TaskContext tcontext) {
tcontext.info("Running Unit Tests....");
var result = Process.run('./content_shell',
['--dump-render-tree','test/simplot_tests.html'])
.then((ProcessResult process) {
tcontext.info(process.stdout);
});
return result;
});
}
You can see where it is calling my simplot_tests.html file in the test directory.
Then my drone script is:
$DART_SDK/../chromium/download_contentshell.sh
unzip content_shell-linux-x64-release.zip
mv drt*/* .
pub get
sudo start xvfb
dart --checked tool/hop_runner.dart test
The simplot_tests.html file looks like the following:
<!DOCTYPE html>
<html>
<head>
<title>Unit Tests for Simplot Library</title>
</head>
<body>
<script type="text/javascript" src="packages/unittest/test_controller.js"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
<script type="application/dart" src="simplot_tests.dart"></script>
</body>
</html>
And finally, the dart file looks something like this:
import 'package:simplot/simplot.dart';
import 'package:unittest/unittest.dart';
import 'package:unittest/html_enhanced_config.dart';
import 'dart:html';
import 'dart:math';
part 'tests/logarithmic_tests.dart';
part 'tests/time_stamp_tests.dart';
part 'tests/axis_configure_tests.dart';
part 'tests/create_single_plot.dart';
part 'tests/create_multiple_plots.dart';
part '../lib/src/axis_config.dart';
void main() {
print('Running unit tests for simplot library.');
useHtmlEnhancedConfiguration();
group('All Tests:', (){
test('test of logarithmic functions', () => logarithmicTests());
test('test of time stamp', () => timeStampTests());
test('test of axis configuration', () => axisConfigTests());
test('test of creating a single plot', () => createSinglePlot());
test('test of creating multiple plots', () => createMultiplePlots());
});
}
Hopefully, that should get you started.
This is my Drone script for the xml2json library
pub install
sudo start xvfb
content_shell --args --dump-render-tree test/xml2json.html | sed -n 2p | grep PASS
It uses standard HTML based unit testing, ie includes htmlconfiguration().
The grep is just to check for pass/fail, you may not need this.