Skip to content

Instantly share code, notes, and snippets.

Avatar
👀
waiting for the right opportunity

Vishnuprasad Venugopal ovpv

👀
waiting for the right opportunity
View GitHub Profile
@ovpv
ovpv / App.spec.tsx
Created Dec 15, 2020
Jest Mock: Test file where moment js method mock is defined and used in expect statement
View App.spec.tsx
import { shallow, configure } from "enzyme";
import React from "react";
import App from "../App";
import Adapter from 'enzyme-adapter-react-16';
//define mock for moment lib
const diff = jest.fn();
const momentObj = () => ({
diff
})
@ovpv
ovpv / App.tsx
Last active Dec 15, 2020
Jest Mock: App file where moment js is used
View App.tsx
import React, { useState } from "react";
import "./styles.css";
import moment from "moment";
export default function App() {
const [date, setDate] = useState("");
const [age, setAge] = useState(0);
const calculateAge = () => {
console.log('diff called');
const calcAge = moment().diff(date, "years");
@ovpv
ovpv / alert-demo.ts
Created Jan 1, 2020
Using setMessage method in alert component
View alert-demo.ts
import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
alert: any;
@ovpv
ovpv / home.page.ts
Created Mar 29, 2019
home page ts file after calling pdf download and view service
View home.page.ts
import { File } from "@ionic-native/file/ngx";
import {
FileTransfer,
FileTransferObject
} from "@ionic-native/file-transfer/ngx";
import { FileOpener } from "@ionic-native/file-opener/ngx";
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root"
@ovpv
ovpv / app.module.ts
Created Mar 29, 2019
app.module file after including all packages and services required for app
View app.module.ts
import { PdfViewerService } from "./services/pdf-viewer.service";
import { FileOpener } from "@ionic-native/file-opener/ngx";
import { File } from "@ionic-native/file/ngx";
import { FileTransfer } from "@ionic-native/file-transfer/ngx";
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouteReuseStrategy } from "@angular/router";
import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
@ovpv
ovpv / App.js
Last active Sep 29, 2019
App.js file in React Native which contains the KeyboardAvoidingView component to avoid keyboard overlapping the input fields
View App.js
import {KeyboardAvoidingView, ScrollView, Platform} from 'react-native';
export default class App extends Component{
render(){
return(
<SafeAreaView>
<KeyboardAvoidingView behavior={Platform.Os == "ios" ? "padding" : "height" } enabled>
<ScrollView>
/* add your Screen Ui Components here */
</ScrollView>
@ovpv
ovpv / app.scss
Created Sep 2, 2019
css classes for showing password strength in meter component
View app.scss
.progress{
height: 10px;
width: 0%;
background-color: transparent;
}
.progress.low{
background-color: red;
color:red;
width: 10%;
@ovpv
ovpv / meter.js
Created Sep 2, 2019
Meter component to show the password strength
View meter.js
class Meter extends React.Component{
constructor(){
super();
this.state={
status: "low"
}
}
componentDidUpdate(prevprops,state){
this.changeStatus(this.props.value);
}
@ovpv
ovpv / password.js
Created Sep 2, 2019
Password component definition
View password.js
class Password extends React.Component{
constructor(){
super();
this.state = {
value: 0,
password:""
}
}
updatePasswordvalue = (ev) => {
this.setState({
@ovpv
ovpv / app.js
Created Sep 2, 2019
app defined for password meter strength
View app.js
/*
Password component and Meter components defined here
*/
class Application extends React.Component {
render() {
return (
<div class="container">
<h2 className="text-center mt-5">Password Meter</h2>
<div className="d-md-flex justify-content-center mt-5"><Password meter={true} /></div>