DEV Community: Tejkumar Kempaiah

🔥 JavaScript Alerts in Cypress

Tejkumar Kempaiah — Thu, 19 Aug 2021 08:51:55 +0000

Alerts are pop up's that appear on the browser window based on a specific user action which is "Click"

There are 3 types of alerts.

Simple alerts with alert text, Ok button
Confirm alerts with alert text, Ok & Cancel button
Prompt alerts with alert text box, Ok & Cancel button

Note:

The way cypress are handled in cypress aren't the same way just like in case of Selenium.

In Selenium, Where there is a pop up alert on the screen.
The user should navigate to the alert pop to perform action.

But, In cypress simple alerts are handled by default as its one of the in-built capabilities of Cypress.

Cypress for now directly supports simple and confirm alerts.
Where as for prompt based alerts, One must use cy.window() with a then call back function along with a stub to handle it.

Example:

🔥 JavaScript Objects

Tejkumar Kempaiah — Tue, 03 Aug 2021 04:07:26 +0000

Objects are blueprint of class.
And object has states & behavior associated to it.

Object properties are declared in the form of key-value pairs, Where keys are always 'String' in nature and value can be of any supported datatype from JS(ES5, ES6).

Ex:

How to create empty object ?

Ex: {}

How to create an non-empty object ?

How make an object Immutable?

🔥 Datatypes in JavaScript

Tejkumar Kempaiah — Fri, 11 Jun 2021 02:57:06 +0000

☑️ What are Datatypes ?

It defines the category for data which will be stored in a variable

☑️ Types of Datatypes ?

a. Primitive
b. Object/Reference

☑️ Primitive Datatypes ?

The datatypes which hold only single value at a time is called Primitive Datatype

Example: number, Boolean, character, String, null, undefined

☑️ Object/Reference Datatypes ?

The non-primitive datatypes are called object based/reference data types

Ex: Arrays, Objects itself.

🔥 Objects in JavaScript

Tejkumar Kempaiah — Thu, 10 Jun 2021 15:03:26 +0000

☑️ What are Objects?

Objects are collection of property and property values
Every object has state and behavior
A real time object is mimicked in the programming world
A object can contain below things in it.

a. variable(integer, decimal, Boolean, character, string)
b. array
c. function
d. another object

☑️ How to create objects in JavaScript?

Output:

☑️ How to make an object read only?

Output:

☑️ How to make an object extensible(un expandable) but modifiable

Output:

☑️ How to expand an object property ?

Output:

☑️ How to add an Boolean object property to an Object?

Output:

☑️ Object DE structuring

Output:

🔥 Function Call in JavaScript- Part 2

Tejkumar Kempaiah — Sat, 05 Jun 2021 17:29:28 +0000

In the previous section we have learnt about introduction to function and function calls with and without returning values.

In this blog, We will learn about function returning

☑️ Arrays
☑️ Objects
☑️ Functions

☑️Functions returning arrays:

Output:

☑️Functions returning objects:

Output:

☑️Functions returning functions:

Output:

🔥 Function Call in JavaScript - Part 1

Tejkumar Kempaiah — Fri, 04 Jun 2021 06:07:51 +0000

A call to execute the statement which are present inside and method is called function call/function invoke.

Ex: Below example has a function expression by name greet() which accepts the parameters "name". greet("Tej") is the method call to execute all those statement which are in between { } which is called as function scope.

☑️ Part 1:

Part one takes about the function returning variables(char, string, number, boolean as the return data type

There are several types of function calls as mentioned below.

☑️1. The called function returning value

Output:

☑️2. The called function not returning value

Output:

☑️3. The called function returning variable as value

Output:

☑️☑️☑️ More Examples:

Output: Try it out

☑️Note: Part 1 consists of #1, #2 and #3 from the above examples.

🔥 Call back functions in JavaScript

Tejkumar Kempaiah — Thu, 03 Jun 2021 02:58:01 +0000

📌 Definition:

Call back functions are those which are passed as an argument for a parameterized function.

✨ Ex:

Lets say you have 3 tasks which needs to be done one after the another. As JavaScript is asynchronous in nature you will not have the control on the execution of the .js programs.

So to achieve it, You need to control each actions(ie, functions which perform some actions on the GUI).

Here there are 2 tasks which needs to be executed one after the another:

Output:

Now, Set a timeout for one function and then execute the program and observe the actual results.

Output:

Hence, If the expectation is to execute a function before another, Ensure to call it inside a function which is referred as "Call back" function

🔥 Parameters v/s Arguments in JavaScript

Tejkumar Kempaiah — Wed, 02 Jun 2021 04:34:26 +0000

Are both same or different?

📌 Parameters:

They are integral part of a function
Parameters are values which a function expects when its being invoked.
A function could accept parameter in the form of a variable, array, object and another function which is referred as callback functions

Example:

📌 Arguments:

They are integral part of a function at the runtime
Parameters are values which are passed to a function at the runtime.
If no arguments are passed to a function in JS, By default it takes undefined arguments.

🔥 Naming conventions of JavaScript Functions

Tejkumar Kempaiah — Tue, 01 Jun 2021 17:14:21 +0000

☑️Function names should start with a character
☑️Function names should be a verb/actions
Ex: getUser(), listUsers(), totalCars(), calculateArea()
☑️Just like in Java, functions are methods which ends with () and starts with smallCase and follow camelCasing
☑️A function can be declared in 2 ways.
☑️. Function expression
☑️. Function declaration
☑️Function can accept arugments like variables, objects, arrays and another function.
Note: Function accepting another function ---> This concept is called call back function in Javascript
☑️. A function can return or not return any type(data)
☑️. typeof keyword is used to find the recieved data type for a function
☑️. Function invoking with in same JS files
☑️. Function invoking within different JS files
☑️. One function should perform one task and the name of the function should be the purpose of that function
☑️. Functions are created with an intension of code re-usability

🔥 Happy path vs. Unhappy path

Tejkumar Kempaiah — Tue, 01 Jun 2021 15:00:06 +0000

🛠️ During product design and development:

Stakeholders focus on intended user behavior. Product owners describe this happy path with business requirements. Engineers push code to enable users to do these things. A user who demonstrates this expected behavior follows the happy path.

🧐 These are examples of happy paths:

User creates a new account
User signs in with their new credentials
User retrieves information about their account
But what happens when there’s unintended behavior, like when a user submits invalid inputs? These unhappy path scenarios are often neglected in design and development. But with enough traffic, unexpected inputs will inevitably come from both well-intentioned and malicious users.

🧐 Examples of unhappy paths:

User creates a new account without providing all required inputs
User signs in with invalid credentials
User pastes a SQL query that gets executed (maliciously or unintentionally)

💻 Conclusion:

A strong test plan covers both happy and unhappy paths. Positive test cases describe happy path scenarios, where errors result in failed tests. Negative test cases describe unhappy path scenarios, where expected errors result in passed tests.