Getting started with Cypress: Installation and Version check for angular projects

Cypress is used to test web applications just like a real user with automated end-to-end tests.

Cypress is a fast, easy, and reliable E2E testing framework that can test anything that runs in the browser.

To check the Cypress version in your project follow these steps:

Open a terminal or command prompt in your project directory.

Check the current Cypress version (if it's already installed) by running the following command:

npx cypress --version

If Cypress is not installed, or you want to upgrade to the latest version, you can do so by running:

npm install cypress --save -dev

This will install Cypress as a dev dependency in your project.

After installation, you can open Cypress by running:

cmd > npx cypress open 

This command will open the Cypress Test Runner, where you can write and run your tests.

Additionally, you can also add some scripts to your package.json file for easier access to Cypress commands. Open package.json and add the following lines inside the "scripts" section:

"scripts": { 

   "cypress:open" : "cypress open", 

   "cypress:run" : "cypress run" 

 } 

Now, you can run Cypress using:

cmd > npm run cypress:open 

or for running tests headlessly:

cmd > npm run cypress:run 

That's it! Now you have Cypress installed in your project, and you can start writing and executing your tests.

for more information check the official site, Cypress.

Read More

Exploring Regular Expressions in JavaScript: Mastering String Manipulation Techniques

A Deep Dive into regular expressions in JavaScript

Regular expressions, often referred to as regex, are powerful tools used for pattern matching and manipulation of strings. 

In JavaScript, regular expressions are represented by objects of the RegExp class. 

They provide a concise and flexible way to search, match, replace, and validate strings based on specific patterns.

Creating Regular Expressions:

Regular expressions can be created using either the constructor syntax or the literal syntax. 

Here's an example of both:

Constructor Syntax:

let regex = new RegExp("pattern");

Literal Syntax:

let regex = /pattern/;

In the above examples, "pattern" represents the regular expression pattern you want to match.

Methods and Properties of Regular Expressions:

1. test(): This method checks if a pattern matches a string and returns true or false.

let regex = /hello/;

console.log(regex.test("hello world"));  // Output: true

2. exec(): This method searches a string for a match and returns an array containing information about the match. If no match is found, it returns null.

let regex = /world/;

console.log(regex.exec("hello world"));  // Output: ["world"]

3. match(): This method searches a string for one or more matches using a pattern and returns an array of all matched substrings.

let regex = /lo/;

console.log("hello world".match(regex));  // Output: ["lo"]

4. search(): This method searches a string for a specified pattern and returns the index of the first match. If no match is found, it returns -1.

let regex = /world/;

console.log("hello world".search(regex));  // Output: 6

5. replace(): This method searches a string for a specified pattern and replaces it with a new string.

let regex = /world/;

console.log("hello world".replace(regex, "universe"));  // Output: "hello universe"

split(): This method splits a string into an array of substrings based on a specified pattern.

let regex = /,/;

console.log("apple,banana,orange".split(regex));  // Output: ["apple", "banana", "orange"]

Common Symbols and Modifiers:

Regular expressions in JavaScript use various symbols and modifiers to define patterns. 

Here are some commonly used ones:

'.': Matches any single character except a newline.

[]: Defines a character set and matches any single character within it.

^: Matches the start of a string.

$: Matches the end of a string.

*: Matches zero or more occurrences of the preceding element.

+: Matches one or more occurrences of the preceding element.

?: Matches zero or one occurrence of the preceding element.

|: Acts as an OR operator, allowing multiple alternatives.

\: Escapes a special character or indicates a special sequence.

Example:

Let's say we want to check if a string contains a valid email address. We can use the following regular expression:

let emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

let email = "example@example.com";

console.log(emailRegex.test(email));  // Output: true

email = "invalid.email";

console.log(emailRegex.test(email));  // Output: false

In the above example, 

the regular expression is used to validate an email address. It ensures that the email address is in the correct format, containing a username, @ symbol, domain name, and domain extension.

'^': This symbol represents the start of the string. It ensures that the email address begins with the following pattern.

'\w+': '\w' matches any word character (alphanumeric and underscore), and + indicates that there must be one or more occurrences of the preceding pattern. This represents the username part of the email address.

([\.-]?\w+)*: This part allows for optional dots or hyphens ([\.-]?) followed by one or more word characters (\w+). 

The * indicates that this group can occur zero or more times. 

This handles the case of a dot or hyphens before the @ symbol in the username part of the email address.

@: This symbol matches the literal "@" character.

\w+: This part matches one or more word characters, representing the domain name.

([\.-]?\w+)*: Similar to point 3, this allows for optional dots or hyphens followed by one or more word characters. It handles the case of a dot or hyphens before the domain name.

(\.\w{2,3})+: This part matches the domain extension, which consists of a dot followed by two or three-word characters. The + indicates that this group can occur one or more times, allowing for subdomains.

$: This symbol represents the end of the string. It ensures that the email address ends with the preceding pattern.

In summary, the regular expression ^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$ checks for the following conditions in an email address:

Starts with one or more word characters for the username.

Allows optional dots or hyphens followed by one or more word characters in the username.

Contains the "@" symbol.

Followed by one or more word characters for the domain name.

Allows optional dots or hyphens followed by one or more word characters in the domain name.

Ends with a valid domain extension consisting of a dot followed by two or three-word characters.

By using the test() method of the regular expression object, we can check if a given string matches this pattern and thus determine if it is a valid email address

another Example:

validationPattern = /^(0|[1-9][0-9]*)$/;

Let's break down the regular expression:

/: The forward slashes at the beginning and end of the regular expression delimit the pattern.

^: This symbol represents the start of the input string.

(0|[1-9][0-9]*): This group is used to define two alternative patterns:

0: Matches the digit 0 exactly once.

[1-9][0-9]*: Matches any digit from 1 to 9 once, followed by zero or more digits from 0 to 9.

$: This symbol represents the end of the input string.

With this regular expression, the pattern will correctly validate whether the input string is either a single zero or a sequence of digits starting from 1 to 9 without leading zeros.

another Example:

Matching Dates:

let dateRegex = /^\d{2}-\d{2}-\d{4}$/;

console.log(dateRegex.test("05-12-2023"));  // Output: true

console.log(dateRegex.test("2023-12-05"));  // Output: false

In the above example, the regular expression \d{2}-\d{2}-\d{4} matches a date string in the format

 "dd-mm-yyyy". 

It consists of two digits for the day, followed by a hyphen, two digits for the month, another hyphen, and finally, four digits for the year.

another Example:

Extracting numbers from a string:

let numberRegex = /\d+/g;

let text = "I have 3 apples and 5 oranges.";

console.log(text.match(numberRegex));  // Output: ["3", "5"]

In the above example, the regular expression \d+ matches one or more consecutive digits. The g modifier is used to find all occurrences of the pattern in the given string. 

The match() method returns an array of all the matched numbers.

another Example:

Removing White Spaces:

let whitespaceRegex = /\s+/g;

let sentence = "   Hello    world!    ";

console.log(sentence.replace(whitespaceRegex, " "));  // Output: "Hello world!"

Here, the regular expression \s+ matches one or more consecutive whitespace characters. 

The g modifier is used to replace all occurrences of whitespace with a single space.

another Example:

Validating URL:

let urlRegex = /^(http|https):\/\/[a-z0-9]+([\.-][a-z0-9]+)*\.[a-z]{2,}(:\d{1,5})?(\/.*)?$/;

console.log(urlRegex.test("https://www.example.com"));  // Output: true

console.log(urlRegex.test("http://example"));  // Output: false

The above regular expression validates the format of a URL. 

It checks if the string starts with "http://" or "https://", followed by the domain name consisting of lowercase letters or digits. It allows optional subdomains separated by dots. 

The TLD (top-level domain) should consist of at least two lowercase letters. It also handles optional ports and paths.

Regular expressions provide a powerful and flexible way to work with patterns in JavaScript. 

They can be used for a wide range of tasks, including validation, searching, and manipulation of strings.

It's worth noting that regular expressions can be complex, and understanding the various symbols and modifiers takes time and practice.

Read More

JavaScript Commenting : Exploring the Different Types of Code Comments

In JavaScript, there are different ways to add comments to your code. Comments are used to add explanatory notes or to

disable certain sections of code temporarily. 

The following are the different types of commenting in JavaScript:

Single-Line Comments:

Single-line comments start with "//" and extend until the end of the line. They are used to add comments on a single

line.

example:

// This is a single-line comment

var number = 42; // Assigning a value to the variable

Multi-Line Comments:

Multi-line comments start with "/*" and end with "*/". They can span across multiple lines and are useful for adding

comments on multiple lines or commenting out blocks of code.

example:

/*

This is a

multi-line comment

*/

var name = "zaheer";

/* Commenting out a block of code temporarily

if (condition) {

// code block

}

*/

Documentation Comments (JSDoc):

Documentation comments follow a specific format known as JSDoc. They are used to generate documentation from code and

typically include descriptions, annotations, and tags. While these comments don't affect the behavior of the code

directly, they provide information for tools and libraries that can generate documentation.

example:

/**

* Calculates the sum of two numbers.

* @param {number} a - The first number.

* @param {number} b - The second number.

* @returns {number} The sum of the two numbers.

*/

function add(a, b) {

return a + b;

}

note:

JavaScript also recognizes the HTML comment opening sequence "<!--" and the HTML closing sequence "-->" is not recognized by JavaScript so it should be written as " //-->"

It's important to use comments effectively to improve code readability, document important details, and make it easier

for others to understand and maintain the code. However, excessive or unnecessary commenting should be avoided to keep

the code clean and concise.

Read More

Getting Started with Angular Testing: An Introduction for Developers

Hello, Developers!

Angular testing is a process of writing and executing tests for Angular applications. 

Angular provides a robust testing framework that allows developers to write unit tests, integration tests, and end-to-end (E2E) tests to ensure the correctness and reliability of their applications.

we can do Angular testing using the Jasmine testing framework, which is integrated into the Angular testing ecosystem. 

Jasmine provides a clean syntax for writing tests and offers a wide range of built-in matchers and assertion functions.

Here are the different types of tests you can perform in Angular:

1. Unit Tests:

 Unit tests focus on testing individual components, services, directives, and pipes in isolation. They verify that each unit of code behaves as expected. 

 In Angular, unit tests are written using the TestBed and ComponentFixture utilities, which allow you to create and test components in a controlled environment.

2. Integration Tests: 

  Integration tests test the interaction between different components, services, and modules. 

  These tests ensure that different parts of the application work together correctly. 

  Integration tests are typically written using TestBed to create the application's root module and configure the necessary dependencies.

3. End-to-End (E2E) Tests: 

   E2E tests simulate user interactions and test the entire application from start to finish. 

   They ensure that all components, services, and external dependencies work together as expected. 

   Angular provides the Protractor testing framework for E2E testing, which is built on top of WebDriverJS and explicitly designed for Angular applications.

To run tests in Angular, you can use Angular CLI's built-in testing capabilities. The CLI provides commands to generate test files and run tests in different modes (such as watch mode for continuous testing during development). Additionally, you can integrate your tests with Continuous Integration (CI) pipelines to automate the testing process.

note:

When writing tests in Angular, it's important to cover different scenarios and edge cases to ensure thorough test coverage. This helps catch bugs early and maintain the stability of your application.

Read More

How to configure Git to use Notepad or any editor of your choice as the default text editor

Open a command prompt or terminal window

Type the following command to set Notepad as the default text editor for Git:

GIT command

git config --global core.editor notepad

This will set Notepad as the default text editor for all Git repositories on your system.

Now when you need to edit a commit message or any other text file in Git, Git will open the Notepad editor for you to make changes.

Note:

that Notepad may not be the best choice for a text editor for programming, as it lacks many features that are helpful for coding.

You may want to consider using a more advanced text editor, such as Visual Studio Code, Atom, Sublime Text, or Notepad++, depending on your preferences.

To use a different text editor with Git, just replace "notepad" with the name of your preferred text editor in the command above.

Read More

javascript quick Cheat sheet

Variables:

JAVA SCRIPT

// Declare a variable with let
let x = 5;

// Declare a constant with const
const y = 10;

// Declare a variable without assigning a value
let z;

Data types:

JAVA SCRIPT

 // Number
let a = 5;
let b = 3.14;

// String
let c = "Hello";
let d = 'World';

// Boolean
let e = true;
let f = false;

// Undefined
let g;

// Null
let h = null;

// Object
let i = { name: "John", age: 30 };

// Array
let j = [1, 2, 3, 4];

Operators:

JAVA SCRIPT 

 // Arithmetic operators
let a = 5 + 2; // 7
let b = 5 - 2; // 3
let c = 5 * 2; // 10
let d = 5 / 2; // 2.5
let e = 5 % 2; // 1

// Comparison operators
let f = 5 == 5; // true
let g = 5 === '5'; // false
let h = 5 != 5; // false
let i = 5 !== '5'; // true
let j = 5 > 2; // true
let k = 5 < 2; // false
let l = 5 >= 5; // true
let m = 5 <= 2; // false

// Logical operators
let n = true && false; // false
let o = true || false; // true
let p = !true; // false  
 

Conditional statements:

JAVA SCRIPT 

 // If statement
let a = 5;
if (a > 2) {
console.log("a is greater than 2");
}

// If-else statement
let b = 1;
if (b > 2) {
console.log("b is greater than 2");
} else {
console.log("b is less than or equal to 2");
}

// If-else if-else statement
let c = 0;
if (c > 0) {
console.log("c is positive");
} else if (c < 0) {
console.log("c is negative");
} else {
console.log("c is zero");
} 

Loops:

JAVASCRIPT

// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}

// While loop
let j = 0;
while (j < 5) {
console.log(j);
j++;
}

// Do-while loop
let k = 0;
do {
console.log(k);
k++;
} while (k < 5);

// For-in loop (used to loop over properties of an object)
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(key + ": " + person[key]);
}

// For-of loop (used to loop over elements of an array)
let arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
}

Functions:

JAVASCRIPT 

// Function declaration
function add(a, b) {
  return a + b;
}

// Function expression
let multiply = function(a, b) {
  return a * b;
};

//

Read More

interpolation in angular

Interpolation in angular is a technique used to dynamically generate content based on data or variables. It is a way of injecting data into templates using a special syntax. 

In Angular, interpolation is achieved by wrapping a variable or expression 

in double curly braces {{ }}.

For example:

If you have a variable name defined in your component, you can display its value in the template using interpolation as follows:

<p>Hello, {{name}}!</p>

If the value of the name is "zaheer", the above code will render as:

<p>Hello, John!</p>

Angular supports expressions inside the double curly braces as well. This means you can perform arithmetic operations or call functions and display their results in the template using interpolation. For example:

Interpolation is a powerful feature of Angular that makes it easy to create dynamic and responsive applications.

Examples of how interpolation can be used in Angular:

Displaying Component Properties:

One common use case for interpolation is to display component properties in the template. 

Let's say we have a component with a property called message. 

We can use interpolation to display the value of the message in the template like this:

<p>{{ message }}</p>

Performing String Concatenation:

Interpolation can also be used to concatenate strings in the template. For example, 

let's say we have two properties in our component, firstName, and lastName. 

We can use interpolation to combine these two properties into a single string in the template like this:

<p>{{ firstName + ' ' + lastName }}</p>

Evaluating Expressions:

In addition to displaying properties and concatenating strings, interpolation can also be used to evaluate expressions in the template. 

For example:

Let's say we have a component with a property called count. 

We can use interpolation to display the result of an expression that doubles the value of the count like this:

<p>{{ count * 2 }}</p>

Conditionally Displaying Content:

Interpolation can also be used to conditionally display content in the template using the ternary operator. For example, let's say we have a component with a property called isLoggedIn. We can use interpolation to display a different message depending on whether the user is logged in or not like this:

<p>{{ isLoggedIn ? 'Welcome back!' : 
'Please log in.' }}</p>

Using Template Variables:

In addition to displaying component properties and evaluating expressions, interpolation can also be used with template variables. Template variables allow you to reference elements in your template and perform actions on them. 

For example:

Let's say we have an input element in our template and we want to reference its value in our component. We can use a template variable to achieve this:

<input #myInput type="text">

<p>{{ myInput.value }}</p>

In the above example, we've created a template variable called myInput that references the input element. We can then use interpolation to display the value of the input element's value property in the template.

Displaying Arrays:

Interpolation can also be used to display arrays in the template. Let's say we have an array of numbers in our component. 

We can use interpolation to display each number in the array using the *ngFor directive:

<ul> <li *ngFor="let number of numbers">

{{ number }}</li>

</ul>

In the above example, we're using the *ngFor directive to loop over the numbers array and 

display each number in a list item using interpolation.

Using Pipes:

You can use pipes with interpolation to format and transform data before displaying it in the template. For example: 

Let's say we have a component with a property called price that contains a number. We can use the currency pipe to format the price as a currency value in the template like this:

<p>{{ price | currency }}</p>

Read More