How to use this module on my Ionic project? - ionic-framework

I am just starting using Ionic framework recently. I have been trying to import this vcard module.
https://github.com/Heymdall/vcard
I am able to use it in normal javascript environment, but so far I am not able to use it in my .ts file.
What I have done are:
Adding the module using
npm install vcard-parser --save
npm install ajv#>=5.0.0 --save
Import it inside .ts file
import * as v from 'vcard-parser'
Then this is the result from console.log(v)
Object {}
proto
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function ()
valueOf
:
function valueOf()
defineGetter
:
function defineGetter()
defineSetter
:
function defineSetter()
lookupGetter
:
function lookupGetter()
lookupSetter
:
function lookupSetter()
get proto
:
function proto()
set proto
:
function proto()
I don't know how to use the module, such as calling function "parse" or "generate".
Could anybody please help me with an example please?

So their documentation on the install is not quite correct.
npm install vcard-parser
should change to
npm install vcard-parser --save
To save it to your package.json
I not 100% but it does not look like the code conforms to the component -> module pattern ( might be wrong here, just looks a bit different )
For most ionic/angular extentions/components you want to import it in your app.module.ts using the name declared in the package.json.
for example ionic-network would be
import { Network } from '#ionic-native/network';
Because in the package.json it is declared as a dependency as
"#ionic-native/network": "^4.1.0",
You can also import for a specific page and add it to the constructor.
Here is a post from the official documentation on installing 3rd party libraries

Based on how is vcard-parser tested, it should be like this:
declare var require: any;
var vCard = require('vcard-parser').vCard;
vCard.parse(raw);

Related

Cant find setup() on userEvent

I am trying to use the user-event utility in testing library as described here :
https://testing-library.com/docs/user-event/intro
Unfortunatley when I try and call the setup function
userEvent.setup()
My IDE says that it cannot be found :
Why is this happening?
My import in my file looks like this :
import userEvent from '#testing-library/user-event'
And my package dependencies look like this :
"#testing-library/dom": "^8.11.3",
"#testing-library/jest-dom": "5.7.0",
"#testing-library/react": "^12.1.2",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "^13.5.0",
The userEvent.setup() API is added in v14.0.0
There is a note in the doc user-event/intro
These docs describe user-event#14.

How can I import AggregatorV3Interface

I'm trying to import AggregatorV3 but the file is nowhere to be found here is my code;
I'm sorry in advance i'm still a beginner programmer.
//SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;
import "#chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
contract Lottery {
address payable[] public players; //to keep track of all players, payable array
uint256 public usdEntryFee;
AggregatorV3Intefrace internal ethUsdPriceFeed;
constructor(address _priceFeedAddress) public {
usdEntryFree = 50 * (10**18);
ethUsdPriceFeed = AggregatorV3Interface(_priceFeedAddress); //we need to pass the address of aggv3 in constructor
}
function enter() public payable {
//payable since we want them to pay in eth
//50 $ minimum
players.push(msg.sender);
}
function getEntranceFee() public view returns (uint256) {}
function startLottery() public {}
function endLottery() public {}
}
here is my Yaml file:
dependencies:
- smartcontractkit/chainlink-brownie-contracts#1.1.1
compiler:
solc:
remappings:
- '#chainlink=smartcontractkit/chainlink-brownie-contracts#1.1.1'
here is the error:
(base) marc#Marcs-MacBook-Pro smartcontract-lottery % brownie compile
Brownie v1.17.2 - Python development framework for Ethereum
Compiling contracts...
Solc version: 0.8.11
Optimizer: Enabled Runs: 200
EVM Version: Istanbul
CompilerError: solc returned the following errors:
ParserError: Source "/Users/marc/.brownie/packages/smartcontractkit/chainlink-brownie-contracts#1.1.1/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol" not found: File not found.
--> contracts/Lottery.sol:4:1:
|
4 | import "#chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
I tried changing
compiler:
solc:
remappings:
- '#chainlink=smartcontractkit/chainlink-brownie-contracts#1.1.1'
to #0.2.1
I also tried changing solidity version to a newer version and it's not working
Thanks in advance!
I solved it by doing:
npm install #chainlink/contracts --save
and in the yaml file doing:
I solved it by replacing
import "#chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
with
import "#chainlink/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol";
My mistake, cheers!
import "#chainlink/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol";
use v0.6 instead of v0.8
Hi I was also stuck in a similar problem. Make sure that the brownie-config.yaml file is not inside the test folder and is kept seperately. Hope this helps.
check the below image to see how I saved my brownie-config.yaml file

h is not defined error while running test cases in preact

I have a preact application which uses #testing-library/preact library for test cases. When I try to run a test for a component it throws an error stating that h is not defined. The app works without the import statement in the components but the test cases doesn't work. I get the it is required for converting jsx to h() calls. But is there any way to avoid it so that I don't have to import it in every component in the app ? PS: I tried to configure babel with this plugic babel-plugin-jsx-pragmatic for automatic import but it didn't work. This is my .babelrc file.
{
"plugins": [
["plugin-transform-react-jsx", {
"runtime": "automatic",
"importSource": "preact"
}]
]
}

how to use email logger packer in laravel?

I am using
juniorb2ss/laravel-email-logger
package in
Laravel 5.2
For email logging, i have read its documentation but there is not much about implementation.
I have install it but need suggestion to use. should i explicitly put message into db or this package will do on it self?
Package link is
https://github.com/juniorb2ss/laravel-email-logger
Thanks in advance
You should use
https://github.com/shvetsgroup/laravel-email-database-log
and for laravel 5.2 after installing please change in file:
Path :
vendor\shvetsgroup\laravel-email-database-log\src\ShvetsGroup\LaravelEmailDatabaseLog\LaravelEmailDatabaseLogServiceProvider.php
use Illuminate\Contracts\Events\Dispatcher as DispatcherContract;
Replace public function boot() with public function boot(DispatcherContract $events)
Replace parent::boot(); with parent::boot($events);
and if don't want to use migrations please comment following line:
$this->loadMigrationsFrom(__DIR__ . '/../../database/migrations');

How can I use my webpack's html-loader imports in Jest tests?

I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.
Here is an example:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl'; line it breaks saying:
/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
^
SyntaxError: Unexpected token <
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
My Jest config from package.json is as follows:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
It seems that the webpack html-loader is not working correctly with Jest but I can't find any solution on how to fix this.
Does anyone know how I can make these html-loader imports work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my .js file so i can omit the import template from x part.
PS: This is not a react project, just plain webpack, babel, es6.
I encountered this specific problem recently and creating your own transform preprocesser will solve it. This was my set up:
package.json
"jest": {
"moduleFileExtensions": [
"js",
"html"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
}
}
NOTE: babel-jest is normally included by default, but if you specify a custom transform preprocessor, you seem to have to include it manually.
test/utils/htmlLoader.js:
const htmlLoader = require('html-loader');
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src);
}
}
A bit late to the party, but wanted to add that there is also this html-loader-jest npm package out there to do this if you wanted to go that route.
Once you npm install it you will add it to your jest configuration with
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html?$": "html-loader-jest"
}
For Jest > 28.x.x with html-loader:
Create a custom transformer as documented here.
jest/html-loader.js
const htmlLoader = require("html-loader");
module.exports = {
process(sourceText) {
return {
code: `module.exports = ${htmlLoader(sourceText)};`,
};
},
};
Add it to your jest config.
jest.config.js
...
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.html$": "<rootDir>/jest/html-loader.js",
},
...
It will fix the error : Invalid return value: process() or/and processAsync() method of code transformer found at "<PATH>" should return an object or a Promise resolving to an object.
Maybe your own preprocessor file will be the solution:
ScriptPreprocessor
Custom-preprocessors
scriptpreprocessor: The path to a module that provides a synchronous function from pre-processing source files. For example, if you wanted to be able to use a new language feature in your modules or tests that isn't yet supported by node (like, for example, ES6 classes), you might plug in one of many transpilers that compile ES6 to ES5 here.
I created my own preprocessor when I had a problems with my tests after added transform-decorators-legacy to my webpack module loaders.
html-loader-jest doesn't work for me. My workaround for this:
"transform": {
'\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}
htmlTemplateMock.html is empty file
For Jest 28+ you can use jest-html-loader to make Jest work with code that requires HTML files.
npm install --save-dev jest-html-loader
In your jest config, add it as a transformer for .HTML files:
"transform": {
"^.+\\.html?$": "jest-html-loader"
},