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 / 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>
@ovpv
ovpv / header.js
Created Aug 7, 2019
header Component with menu links
View header.js
import React, { Component,Fragment } from "react";
import { MenuLinks } from "../../../routes";
export default class Header extends Component {
render() {
return (
<Fragment>
{MenuLinks.map((menu, index) => (
<Link to={menu.url}>{menu.menuText}</Link>
@ovpv
ovpv / app.js
Created Aug 7, 2019
Router switch for rendering page components
View app.js
import React, { Component, Fragment } from "react";
import { Switch, Route } from "react-router-dom";
import Routes from "../routes";
import Header from "./components/header/header";
export default class App extends Component {
render() {
return (
<Fragment>
<Header />