Angular 7 & Jest & Babel Integration over Jasmine/Karma - AngularSnapshotSerializer.js in the snapshotSerializers option was not found

Steps to integrate of Jest & Babel with Angular 7+:

1. Run the following commands to install:

    # Remove Jesmin/Karma
    npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
    
    npm uninstall jasmine @types/jasmine
    
    rm ./karma.conf.js ./src/test.ts

    # Install jest    
    npm install --save jest@24.9 @angular-builders/jest@7 @types/jest@24 jest-preset-angular@8 

    # Install babel
    npm install --save-dev babel-jest babel-polyfill
    npm install --save @babel/core @babel/preset-env @babel/preset-flow @babel/preset-typescript    
 

2. On `package.json`, added the following code:

    "scripts": {
      ...
      ...
      "test": "ng test",
      "test:watch": "jest --watch",
      ...
      ...
    }
    ...
    ...   
    "jest": {
      "preset": "jest-preset-angular",
      "setupFilesAfterEnv": [
        "/setupJest.ts"
      ]
    }
 

3. Also, updated the following on the `angular.json`:

    ...
    ... 
    "test": {
       "builder": "@angular-devkit/build-angular:karma",
    ...
    ...
 

Replace with:

    ...
    ... 
    "test": {
       "builder": "@angular-builders/jest:run",
    ...
    ...
 

4. Create the `/setupJest.ts` with below content:

    import 'jest-preset-angular';   
 

5. Create the `/babel.config.js` with below content:

    module.exports = function(api) {

        const presets = [
            '@babel/preset-typescript',
             [
                "@babel/preset-env", {
                    "targets": {
                        "node": "current"
                    }
                }
            ],
            '@babel/preset-flow'
        ];

        return {
            presets,
        };
    };
 

6. And, finally tried running the `ng-test` from a terminal, however, I was stuck with the following error (see picture below):

7. Eventually, managed to fix the issue by adding the file `/src/jest.config.js` with below content:

    module.exports = {
        "transform": {
            "^.+\\.(ts|js|html)$": "ts-jest",
            "^.+\\.[t|j]sx?$": "babel-jest"
        },
        moduleFileExtensions: ['ts', 'html', 'js', 'json'],
        moduleNameMapper: {
            '^src/(.*)$': '/src/$1',
            '^app/(.*)$': '/src/app/$1',
            '^assets/(.*)$': '/src/assets/$1',
            '^environments/(.*)$': '/src/environments/$1',
        },
        transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
        snapshotSerializers: [
            'jest-preset-angular/build/AngularSnapshotSerializer.js',
            'jest-preset-angular/build/HTMLCommentSerializer.js',
        ],
    };

Thereafter, ran `ng test` again and can see the test running thru. I hope it helps!

Construct the dynamic table with specified number of columns on each row as per the size of the data in Angular

The below code is to generate a table with multiple rows with the specified number of columns on each row as per the size of the data array.

	// Filename: property-detail.component.ts
	import { Component } from '@angular/core';
	@Component({
	selector: 'app-property-detail',
	templateUrl: './property-detail.component.html'
	})
	export class PropertyDetailComponent {
	constructor() {
	this.items = this.constructArrayToMultiRows(this.getPropertyDetail(), 3);
	}
	getPropertyDetail() {
	return [
	{
	'title': 'Customer Category',
	'value': 'Bank Customer'
	},
	{
	'title': 'Customer Code',
	'value': '11111112'
	},
	{
	'title': 'Start Date',
	'value': '2015-09-01'
	},
	{
	'title': 'VAT Code',
	'field': 'vat_code',
	'value': '13313AS123'
	},
	{
	'title': 'Gender',
	'value': 'Male'
	},
	{
	'title': 'Is Legal',
	'value': 'True'
	},
	{
	'title': 'Customer Type',
	'value': '2'
	},
	];
	}
	constructArrayToMultiRows(items: any, columnsPerRow = 4) {
	const rows = [];
	let total = items.length;
	const totalRow = Math.ceil(total / columnsPerRow);
	let count = 0;
	for (let row = 0; row < totalRow; row++) {
	const columns = [];
	for (let column = 0; column < columnsPerRow && total > 0; column++) {
	columns[column] = items[count];
	count++;
	total--;
	}
	rows.push(columns);
	}
	return rows;
	}
	}

view raw Angular - Construct the dynamic table with specified number of columns hosted with ❤ by GitHub

	<!-- Then, create the file (property-detail.component.html) with below content: -->
	<table width="100%" class="table table-striped table-bordered" *ngIf="items.length > 0">
	<tbody *ngFor="let row of items">
	<tr>
	<td *ngFor="let column of row" width="20%"> {{ column.title }}: </td>
	</tr>
	<tr>
	<td *ngFor="let column of row"><strong>{{ column.value }}</strong> </td>
	</tr>
	</tbody>
	</table>

view raw property-detail.component.html hosted with ❤ by GitHub

Then, on the output, we would be able to generate a table with multiple rows with a specified number of columns.

Check if MySQL Query uses cache or not for most frequent query.

Run the following queries to check if most recent MySQL query uses cache or not.

-- Query 1
SHOW VARIABLES LIKE 'have_query_cache'; 

-- The Output Value should be Yes, if it uses cache.

-- Query 2
SHOW VARIABLES LIKE 'query_cache_size';
-- -- The Output Value should be integer value, if it uses cache.

Refer Link 1 and Link 2 for more detail.

Hope the help!