Mocks: Testing Reactjs Components

Posted in Testing on January 14, 2021 by rowej83.

Have recently been learning how to test Reactjs components via unit testing using jest and @testing-library/react which come prebundled with any new Reactjs app created with CRA (Create-react-app CLI).

Mocking functions with jest

Many times components have eventHandlers (onclick, onchange, onblur etc) passed down to them via props and with tests these event handlers are usually mocked out.

Mocking ajax/fetch/axios calls in tests.

Since almost every app has a remote request that they make, learning to mock async calls seemed very important. For this, a package called MSW ( model service worker) can be used to intercept ajax calls to external remote sources to keep them local so that tests are less flaky and quicker.

My package.json for the example that I’m running:

{
  "name": "unit-testing-sandbox",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "axios": "0.21.1",
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3"
  },
  "devDependencies": {
    "typescript": "3.8.3",
    "@testing-library/jest-dom": "5.11.9",
    "@testing-library/react": "11.2.3",
    "@testing-library/user-event": "12.6.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "msw": "0.25.0",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

{

"name": "unit-testing-sandbox",

"version": "1.0.0",

"description": "",

"keywords": [],

"main": "src/index.js",

"dependencies": {

"axios": "0.21.1",

"react": "17.0.0",

"react-dom": "17.0.0",

"react-scripts": "3.4.3"

"devDependencies": {

"typescript": "3.8.3",

"@testing-library/jest-dom": "5.11.9",

"@testing-library/react": "11.2.3",

"@testing-library/user-event": "12.6.0",

"jest-environment-jsdom-sixteen": "^1.0.3",

"msw": "0.25.0",

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jest-environment-jsdom-sixteen",

"eject": "react-scripts eject"

"browserslist": [

">0.2%",

"not dead",

"not ie <= 11",

"not op_mini all"

]

}

Notice the inclusion of jest-enviroment-jsdom-sixteen. Further more, it’s use here:

"test": "react-scripts test --env=jest-environment-jsdom-sixteen"

1	"test": "react-scripts test --env=jest-environment-jsdom-sixteen"

I added this to suppress some errors about not using act() during async calls. It can be further explained here: https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

To use MSW we have to setup a server with endpoints that it will intercept. Might want to break your endpoints in to a separate file but for this example I kept them all in the same server.js under the mock directory.

// src/mocks/server.js
import { rest,setupWorker } from "msw";
import { setupServer } from "msw/node";

const handlers = [
  rest.get("https://jsonplaceholder.typicode.com/todos/1", (req, res, ctx) => {

    return  res(ctx.json({ title: "the mocked title" }));
  })
];

const server = setupServer(...handlers);

export { server, rest };

// src/mocks/server.js

import { rest,setupWorker } from "msw";

import { setupServer } from "msw/node";

const handlers = [

rest.get("https://jsonplaceholder.typicode.com/todos/1", (req, res, ctx) => {

return res(ctx.json({ title: "the mocked title" }));

})

];

const server = setupServer(...handlers);

export { server, rest };

What above will do is intercept any call to “https://jsonplaceholder.typicode.com/todos/1” and instead return a json object of

{title:"the mocked title"}

1	{title:"the mocked title"}

Also, we want our server to setup and tear down for each and every test and for that we create a setupTests.js within the /src folder:

import "@testing-library/jest-dom/extend-expect";
import { server } from "./mocks/server";

// Establish API mocking before all tests.
beforeAll(() => server.listen());

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers());

// Clean up after the tests are finished.
afterAll(() => server.close());

import "@testing-library/jest-dom/extend-expect";

import { server } from "./mocks/server";

// Establish API mocking before all tests.

beforeAll(() => server.listen());

// Reset any request handlers that we may add during the tests,

// so they don't affect other tests.

afterEach(() => server.resetHandlers());

// Clean up after the tests are finished.

afterAll(() => server.close());

The testing library should automatically see this setupTests.js file and run it during testing.

So the actual component we are going to test is called Todo.js

import React from "react";
import axios from "axios";

export default function Todo({ownersName}) {
    const [counter, setCounter] = React.useState(0);
    const [title, setTitle] = React.useState(false);
    axios.defaults.withCredentials = true;
    React.useEffect(() => {

        async function fetchData() {
            axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) => {
                setTitle(res.data.title);
            }).catch(e => {
                console.log(e.message)
            });
        }

        fetchData();

    }, []);

    return (
        <div>
            {/**
             Title is retrieved on load via async call to a rest api.
             the h2(with the title) will only render once a value for title is set
             */}
            {title && <h2 data-testid="title">{title}</h2>}
            <p data-testid={"ownersName"}>{ownersName}</p>
            <p data-testid={"counter"}>{counter}</p>

            <button
                data-testid="increaseTodo"
                onClick={() => {
                    setCounter(counter + 1);
                }}
            >
                Increase this Todo's counter by 1
            </button>
        </div>
    );
}

import React from "react";

import axios from "axios";

export default function Todo({ownersName}) {

const [counter, setCounter] = React.useState(0);

const [title, setTitle] = React.useState(false);

axios.defaults.withCredentials = true;

React.useEffect(() => {

async function fetchData() {

axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) => {

setTitle(res.data.title);

}).catch(e => {

console.log(e.message)

});

}

fetchData();

}, []);

return (

<div>

{/**

Title is retrieved on load via async call to a rest api.

the h2(with the title) will only render once a value for title is set

*/}

{title && <h2 data-testid="title">{title}</h2>}

<p data-testid={"ownersName"}>{ownersName}</p>

<p data-testid={"counter"}>{counter}</p>

<button

data-testid="increaseTodo"

onClick={() => {

setCounter(counter + 1);

}}

Increase this Todo's counter by 1

</button>

</div>

);

}

The ajax call is actually within the useEffect that gets called once on the initial rendering of the component.

Here is our testing file for Todo component. Todo.test.js

import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import Todo from "./Todo";

it("msw intercepts the axios on effect ", async () => {

  render(<Todo ownersName={"jason"} />);
  await waitFor(()=>expect(screen.getByTestId("title").textContent).toBe("the mocked title"));

});

import React from "react";

import { render, screen, fireEvent, waitFor } from "@testing-library/react";

import Todo from "./Todo";

it("msw intercepts the axios on effect ", async () => {

render(<Todo ownersName={"jason"} />);

await waitFor(()=>expect(screen.getByTestId("title").textContent).toBe("the mocked title"));

});

The actual test we are interested in is “msw intercepts the axios on effect” as this is the one that will check if the ajax call was intercept and replaced with our mocked return data that we get from MSW.

First we render the component which will trigger the intitial useEffect call which then triggers the ajax call to ultimately update our title state.

The line below enables us to “wait”(async) for the ajax call to complete and for the state to be updated before we check to see if the mocked data was in fact returned via MSW.

await waitFor(()=>expect( screen.getByTestId("title").textContent).toBe("the mocked title"));

1	await waitFor(()=>expect( screen.getByTestId("title").textContent).toBe("the mocked title"));

Our tests pass as MSW does infact return the mocked title of “the mocked title” which is what our test is looking for.

Mocking 3rd party libraries or modules

We can use jest to mock a library so our tests are easier to write without going in to the complexity of incorporating the libraries that maybe used. For example:

//SomeComponent.test.js

import React from 'react';
import { render, screen, act } from '@testing-library/react';
import { useGetLocation } from 'react-get-location';

jest.mock('react-get-location"); 
// this will make 
// jest return a mocked function for every exported function in this module.

test('it shows current location', () => {

  let setReturnValue;
  function useMockGetLocation() {
    const state = React.useState([]);
    setReturnValue = state[1];
    return state[0];
  }
  useGetLocation.mockImplemention(useMockGetLocation);

});

//SomeComponent.test.js

import React from 'react';

import { render, screen, act } from '@testing-library/react';

import { useGetLocation } from 'react-get-location';

jest.mock('react-get-location");

// this will make

// jest return a mocked function for every exported function in this module.

test('it shows current location', () => {

let setReturnValue;

function useMockGetLocation() {

const state = React.useState([]);

setReturnValue = state[1];

return state[0];

}

useGetLocation.mockImplemention(useMockGetLocation);

});

We mocked the useGetLocation function that is from the ‘react-get-location’ library and made it so we return a custom state hook to be used in our tests instead of the normal non-mocked version of useGetLocation

(video lesson 184 )

Notes for webpack configs to output single files for js and css bundles and more

Posted in Development, Javascript on December 10, 2020 by rowej83.

I often use a site to build webpack configs https://createapp.dev/ and I normally like to have my js and css compiled to one file each within /dist

Out of the box, it handles the entry/output for the .js but a little bit needs to be added to do the same for the .css

Here is an example webpack.config.js

const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  watch:true,
  entry: ['./src/styles.scss',
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: 'src/index.html' }],
    }),
    new MiniCssExtractPlugin({filename:'./css/styles.css'}),
   
  ]
};

module.exports = config;

const webpack = require('webpack');

const path = require('path');

const CopyPlugin = require('copy-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {

watch:true,

entry: ['./src/styles.scss',

'react-hot-loader/patch',

'./src/index.js'

output: {

path: path.resolve(__dirname, 'dist'),

filename: './js/bundle.js'

module: {

rules: [

{

test: /\.(js|jsx)$/,

use: 'babel-loader',

exclude: /node_modules/

{

test: /\.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader'

]

{

test: /\.scss$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader',

'sass-loader'

]

{

test: /\.svg$/,

use: 'file-loader'

{

test: /\.png$/,

use: [

{

loader: 'url-loader',

options: {

mimetype: 'image/png'

}

]

}

]

resolve: {

extensions: [

'.js',

'.jsx'

alias: {

'react-dom': '@hot-loader/react-dom'

}

devServer: {

contentBase: './dist'

plugins: [

new CopyPlugin({

patterns: [{ from: 'src/index.html' }],

}),

new MiniCssExtractPlugin({filename:'./css/styles.css'}),

]

};

module.exports = config;

Some important parts added to have the css compile to a single file. First is that the scss file(s) need to be added as an entry:

entry: ['./src/styles.scss', 'react-hot-loader/patch', './src/index.js' ]

1	entry: ['./src/styles.scss', 'react-hot-loader/patch', './src/index.js' ]

Secondly, the MiniCssExtractPlugin needs to have an object with the destination css file name added to it as you see here:

new MiniCssExtractPlugin({filename:'./css/styles.css'})

1	new MiniCssExtractPlugin({filename:'./css/styles.css'})

To process es6+ features like async/await

We must add the below dependency:

npm install @babel/plugin-transform-runtime -D

1	npm install @babel/plugin-transform-runtime -D

Finally, alter the .babelrc to look like :

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/transform-runtime"]  // <= Add it here
  ]  
}

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

"plugins": [

["@babel/transform-runtime"] // <= Add it here

]

}

Reactjs using recoil.js for state management notes

Posted in Development, Javascript, Reactjs on November 23, 2020 by rowej83.

Recoil.js is being designed by facebook apparently to replace redux so I figured I’d take a look.

My sample Codesandbox

Atoms – most basic for of state that can be shared amongst components and or selectors. It requires a “key” which must be unique and to initialize with a value(s) use default.

const marginTopState= atom({
  key: 'marginTopState',
  default: 10,
});

const marginTopState= atom({

key: 'marginTopState',

default: 10,

});

useRecoilState – Used to read and write an atom from a component.

Selectors – a pure function that will basically just return a computed value based on atom(s) and/or other selectors. By default, selectors are not writable and so can not alter the atoms/selections within it; only use it to provide its produced computed value. (get)

const marginTopComputedState = selector({
  key: 'marginTopComputedState',
  get: ({get}) => {
    const marginTopValue = get(marginTopState);
    const unit = 'px';
    // would use template literals here but my code highlighting 
    // plugin I used for the site breaks :(
    return marginTopValue+unit; 
  },
});

const marginTopComputedState = selector({

key: 'marginTopComputedState',

get: ({get}) => {

const marginTopValue = get(marginTopState);

const unit = 'px';

// would use template literals here but my code highlighting

// plugin I used for the site breaks :(

return marginTopValue+unit;

});

useRecoilValue – used to get/use the computed value from a selector.

const computedMarginTopLabel = useRecoilValue(marginTopComputedState);

1	const computedMarginTopLabel = useRecoilValue(marginTopComputedState);

Creating “n” amount of atoms

Sometimes we need an unknown amount of state atoms in an app. One way is to create a function that will returned a memorized atom based on an ID. We memorize it that way if it is the same ID we use the already made atom and return that instead of regenerating the atom.

For example:

export const itemWithID = 
  memoize(id => atom({
     key: "item"+id,   // done this way because tilde strings breaks my code highlighting plugin :(
     default: ""
}))

export const itemWithID =

memoize(id => atom({

key: "item"+id, // done this way because tilde strings breaks my code highlighting plugin :(

default: ""

}))

Then we can use it in components like below:

function SomeComponent({id}){
  const [itemState, setItemState] = useRecoilState(itemWithID(id));
  return ...
}

function SomeComponent({id}){

const [itemState, setItemState] = useRecoilState(itemWithID(id));

return ...

}

Various onFocus animations using Fluent Forms

Posted in CSS, Design, Development, PHP, WordPress on August 25, 2020 by rowej83.

*Note – I’ve noticed the dark theme on this website can make the onFocus effects harder to see. If that is the case, try viewing this blog post with the “light” theme.

Fluent Forms onFocus Examples

To be used with Text or TextArea type inputs in Fluent Form. Every example needsto add the class “animated_form_element” under the Advanced Options for each of the text/textarea’ “Element Class” field such as below:

For each set of animations, hit the reveal button to show the code that has to be added to your Fluent Form’s Custom CSS/JS sections. That section can be found under “Settings & Integrations tab -> Custom CSS/JS”

Underline

Drop In Underline Example:

Show Examples Code

Required CSS:

/* Design specific options. Bottom border used for examples */

.fluentform .ff-el-form-control {
	border-top: 0px!important;
	border-left: 0px!important;
	border-right: 0px!important;
	border-bottom: blue solid 1px!important;
}

.fluentform .ff-el-form-control {
	border-radius: 0px!important;
}


/* Need to remove the error message out of document flow. 
  For this design, we used a bottom:5px but could be top etc..
*/

.fluentform .ff-el-is-error .text-danger {
	position: absolute;
	bottom: 5px;
	z-index: 10;
}

/* Animation code below */
.dropin_underline{
	position: relative;
}

.dropin_underline::before {
	content: "";
	position: absolute;
	bottom: 10px;
	height: 2px;
	width: 100%;
	left: 0;
	opacity: 0;
	background-color: blue;
	z-index: 2;
	display: block;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
	-o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
	transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}

.dropin_underline_activate::before {
	bottom: 0;
	opacity: 1;
}

/* Design specific options. Bottom border used for examples */

.fluentform .ff-el-form-control {

border-top: 0px!important;

border-left: 0px!important;

border-right: 0px!important;

border-bottom: blue solid 1px!important;

}

.fluentform .ff-el-form-control {

border-radius: 0px!important;

}

/* Need to remove the error message out of document flow.

For this design, we used a bottom:5px but could be top etc..

.fluentform .ff-el-is-error .text-danger {

position: absolute;

bottom: 5px;

z-index: 10;

}

/* Animation code below */

.dropin_underline{

position: relative;

}

.dropin_underline::before {

content: "";

position: absolute;

bottom: 10px;

height: 2px;

width: 100%;

left: 0;

opacity: 0;

background-color: blue;

z-index: 2;

display: block;

-webkit-transition: .3s;

-o-transition: .3s;

transition: .3s;

-webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);

-o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);

transition-timing-function: cubic-bezier(.58, .3, .005, 1);

}

.dropin_underline_activate::before {

bottom: 0;

opacity: 1;

}

Required Javascript:

jQuery(".animated_form_element").parent().addClass("dropin_underline");
jQuery(".animated_form_element").each(function () {
	if (jQuery(this).val()) {
		jQuery(this).parent().addClass("activate");
	}
});
jQuery(".animated_form_element").focus(function () {
	jQuery(this).parent().addClass("dropin_underline_activate");
	jQuery(this).next('.text-danger').css("display", "none");
});
 
 
jQuery(".animated_form_element").blur(function () {
	if (!jQuery(this).val()) {
		jQuery(this).parent().removeClass("dropin_underline_activate");
	}
});
 
jQuery(".ff-el-input--content").click(function () {
	jQuery(this).children('.text-danger').css("display", "none");
	jQuery(this).children('.animated_form_element').focus();
});

jQuery(".animated_form_element").parent().addClass("dropin_underline");

jQuery(".animated_form_element").each(function () {

if (jQuery(this).val()) {

jQuery(this).parent().addClass("activate");

}

});

jQuery(".animated_form_element").focus(function () {

jQuery(this).parent().addClass("dropin_underline_activate");

jQuery(this).next('.text-danger').css("display", "none");

});

jQuery(".animated_form_element").blur(function () {

if (!jQuery(this).val()) {

jQuery(this).parent().removeClass("dropin_underline_activate");

}

});

jQuery(".ff-el-input--content").click(function () {

jQuery(this).children('.text-danger').css("display", "none");

jQuery(this).children('.animated_form_element').focus();

});

Left To Right

Adding on focus animations to a Fluent Form

Posted in Development, WordPress on August 21, 2020 by rowej83.

Fluent Forms is a popular WordPress plugin that allows you to make forms easily. One thing I didn’t like is that there is no onFocus options for animations etc. With inspiration from a different post about hyper link hover animations ( found here ) for Divi menu modules, I added on focus animation for my Fluent Form. I created this small tutorial to show how I did it.

Here is an example of what the outcome looks like:

Fluent Forms animated on focus

To do this, you first have to add the class “animated_form_element” under the Advanced Options for each of the text/textarea’ “Element Class” field such as below:

Next, we need to add some custom css and javascript to our form. We add it by going to the form’s “Settings & Integrations tab -> Custom CSS/JS” section.

For the CSS, it really depends on the look you are going for but for this example I wanted a bottom border to be shown on the input/textarea field regardless if it has focus or not. I also removed the default border radius on the input field as well. Here is the customer css to accomplish those things.

.fluentform .ff-el-form-control{
   border-top:0px!important;
   border-left:0px!important;
   border-right:0px!important;
   border-bottom:rgb(116, 175, 205) solid 1px!important;
   border-radius:0px!important;
}

.fluentform .ff-el-form-control{

border-top:0px!important;

border-left:0px!important;

border-right:0px!important;

border-bottom:rgb(116, 175, 205) solid 1px!important;

border-radius:0px!important;

}

I use !important to be sure it overrides Fluent Forms default styles.

Next, let’s add the styles needed for the actual animation itself as well as modifying how the “This field is required.” is shown:

.animatedStyleName {
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.animatedStyleName::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	right: 100%;
	bottom: 0;
	background: rgb(116, 175, 205);
	height: 2px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}

.activate::before {
	right: 0;
}

.fluentform .ff-el-form-control {
	border-radius: 0px!important;
}

.fluentform .ff-el-is-error .text-danger {
	position: absolute;
	bottom: 5px;
}

.animatedStyleName {

position: relative;

overflow: hidden;

transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-o-transition: all 0.3s;

}

.animatedStyleName::before {

content: "";

position: absolute;

z-index: 2;

left: 0;

right: 100%;

bottom: 0;

background: rgb(116, 175, 205);

height: 2px;

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

}

.activate::before {

right: 0;

}

.fluentform .ff-el-form-control {

border-radius: 0px!important;

}

.fluentform .ff-el-is-error .text-danger {

position: absolute;

bottom: 5px;

}

The error message for “This field is required” aka .text-danger is made switched to absolute positioning and in this case has been set 5px from the bottom of the input fields container. Really, this could be different based on how you want the field to show on the form. You could use top instead for example. However, the .text-danger must be made absolute as we need it out of the document flow so it won’t create visual bugs with extra space in between the inputs border bottom and the border bottom that is used to create the animation.

Finally, we need to add some custom javascript to the form as well:

jQuery(".animated_form_element").parent().addClass("animatedStyleName");
jQuery(".animated_form_element").each(function () {
	if (jQuery(this).val()) {
		jQuery(this).parent().addClass("activate");
	}
});
jQuery(".animated_form_element").focus(function () {
	jQuery(this).parent().addClass("activate");
	jQuery(this).next('.text-danger').css("display", "none");
});
 
 
jQuery(".animated_form_element").blur(function () {
	if (!jQuery(this).val()) {
		jQuery(this).parent().removeClass("activate");
	}
});
 
jQuery(".ff-el-input--content").click(function () {
	jQuery(this).children('.text-danger').css("display", "none");
	jQuery(this).children('.animated_form_element').focus();
});

jQuery(".animated_form_element").parent().addClass("animatedStyleName");

jQuery(".animated_form_element").each(function () {

if (jQuery(this).val()) {

jQuery(this).parent().addClass("activate");

}

});

jQuery(".animated_form_element").focus(function () {

jQuery(this).parent().addClass("activate");

jQuery(this).next('.text-danger').css("display", "none");

});

jQuery(".animated_form_element").blur(function () {

if (!jQuery(this).val()) {

jQuery(this).parent().removeClass("activate");

}

});

jQuery(".ff-el-input--content").click(function () {

jQuery(this).children('.text-danger').css("display", "none");

jQuery(this).children('.animated_form_element').focus();

});

And that’s it for this example really.

You may notice I named the actual animation class name “animatedStyleName” which is generic. I did this because really you could take many of the different animations listed in the divi-menu-effects.css you can download from this site and replace the rules of animatedStyleName to do different types of animations. You have to subscribe to his newsletter in order to get the previously mentioned .css file that has the different animations. Some of the animation examples on that site require more work than what I described but I plan on writing an extension of this tutorial if it seems people might want it.

Can download the Fluent Form export example here . You may have to right click -> “save link as” for it to work.

Live example:

Online Journal

My online journal about design and development related topics and what I've learned.

Mocks: Testing Reactjs Components

Mocking functions with jest

Mocking ajax/fetch/axios calls in tests.

Mocking 3rd party libraries or modules

Notes for webpack configs to output single files for js and css bundles and more

Reactjs using recoil.js for state management notes

Various onFocus animations using Fluent Forms

Fluent Forms onFocus Examples

Underline

Drop In Underline Example:

Left To Right

Adding on focus animations to a Fluent Form