ovpv

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

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

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

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

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

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

.progress{
  height: 10px;
  width: 0%;
  background-color: transparent;
}

.progress.low{
  background-color: red;  
  color:red;
  width: 10%;

ovpv

class Meter extends React.Component{
  constructor(){
    super();
    this.state={
      status: "low"
    }
  }
  componentDidUpdate(prevprops,state){
    this.changeStatus(this.props.value);
  }

ovpv

class Password extends React.Component{
  constructor(){
    super();
    this.state = {
      value: 0,
      password:""
    }
  }
  updatePasswordvalue = (ev) => {
    this.setState({

ovpv

/*
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>