feat: look-same image compare library added

package.json

@@ -27,15 +27,16 @@
     "@nestjs/jwt": "^7.1.0",
     "@nestjs/passport": "^7.1.0",
     "@nestjs/platform-express": "^7.4.2",
-    "@nestjs/platform-socket.io": "^7.4.2",
-    "@nestjs/swagger": "^4.5.12",
+    "@nestjs/platform-socket.io": "^7.6.17",
+    "@nestjs/swagger": "^4.8.0",
     "@nestjs/websockets": "^7.4.2",
     "@prisma/client": "2.12.1",
     "bcryptjs": "^2.4.3",
     "cache-manager": "^3.4.0",
     "class-transformer": "^0.3.1",
     "class-validator": "^0.12.2",
     "fs-extra": "^9.0.1",
+    "looks-same": "^7.3.0",
     "passport": "^0.4.1",
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",

prisma/migrations/20210605124856-image-compare-config-as-json/README.md

@@ -0,0 +1,45 @@
+# Migration `20210605124856-image-compare-config-as-json`
+
+This migration has been generated by Pavel Strunkin at 6/5/2021, 3:48:56 PM.
+You can check out the [state of the schema](./schema.prisma) after the migration.
+
+## Database Steps
+
+```sql
+ALTER TABLE "Project" DROP COLUMN "diffDimensionsFeature",
+DROP COLUMN "ignoreAntialiasing",
+DROP COLUMN "threshold",
+ADD COLUMN     "imageComparisonConfig" TEXT NOT NULL DEFAULT E'{ "threshold": 0.1, "ignoreAntialiasing": true, "allowDiffDimensions": false }'
+```
+
+## Changes
+
+```diff
+diff --git schema.prisma schema.prisma
+migration 20210517203552-add-custom-tags..20210605124856-image-compare-config-as-json
+--- datamodel.dml
++++ datamodel.dml
+@@ -3,9 +3,9 @@
+ }
+ datasource db {
+   provider = "postgresql"
+-  url = "***"
++  url = "***"
+ }
+ model Build {
+   id         String    @id @default(uuid())
+@@ -35,12 +35,10 @@
+   updatedAt             DateTime        @updatedAt
+   createdAt             DateTime        @default(now())
+   // config
+   autoApproveFeature    Boolean         @default(false)
+-  diffDimensionsFeature Boolean         @default(false)
+-  ignoreAntialiasing    Boolean         @default(true)
+-  threshold             Float           @default(0.1)
+   imageComparison       ImageComparison @default(pixelmatch)
++  imageComparisonConfig String          @default("{ \"threshold\": 0.1, \"ignoreAntialiasing\": true, \"allowDiffDimensions\": false }")
+   @@unique([name])
+ }
+```
+
+

prisma/migrations/20210605124856-image-compare-config-as-json/schema.prisma

@@ -0,0 +1,135 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url = "***"
+}
+
+model Build {
+  id         String    @id @default(uuid())
+  ciBuildId  String?
+  number     Int?
+  branchName String?
+  status     String?
+  testRuns   TestRun[]
+  projectId  String
+  project    Project   @relation(fields: [projectId], references: [id])
+  updatedAt  DateTime  @updatedAt
+  createdAt  DateTime  @default(now())
+  user       User?     @relation(fields: [userId], references: [id])
+  userId     String?
+  isRunning  Boolean?
+
+  @@unique([projectId, ciBuildId])
+}
+
+model Project {
+  id                    String          @id @default(uuid())
+  name                  String
+  mainBranchName        String          @default("master")
+  builds                Build[]
+  buildsCounter         Int             @default(0)
+  testVariations        TestVariation[]
+  updatedAt             DateTime        @updatedAt
+  createdAt             DateTime        @default(now())
+  // config
+  autoApproveFeature    Boolean         @default(false)
+  imageComparison       ImageComparison @default(pixelmatch)
+  imageComparisonConfig String          @default("{ \"threshold\": 0.1, \"ignoreAntialiasing\": true, \"allowDiffDimensions\": false }")
+
+  @@unique([name])
+}
+
+model TestRun {
+  id                    String         @id @default(uuid())
+  imageName             String
+  diffName              String?
+  diffPercent           Float?
+  diffTollerancePercent Float          @default(0)
+  pixelMisMatchCount    Int?
+  status                TestStatus
+  buildId               String
+  build                 Build          @relation(fields: [buildId], references: [id])
+  testVariationId       String?
+  testVariation         TestVariation? @relation(fields: [testVariationId], references: [id])
+  merge                 Boolean        @default(false)
+  updatedAt             DateTime       @updatedAt
+  createdAt             DateTime       @default(now())
+  // Test variation data
+  name                  String         @default("")
+  browser               String?
+  device                String?
+  os                    String?
+  viewport              String?
+  customTags            String?        @default("")
+  baselineName          String?
+  comment               String?
+  baseline              Baseline?
+  branchName            String         @default("master")
+  baselineBranchName    String?
+  ignoreAreas           String         @default("[]")
+  tempIgnoreAreas       String         @default("[]")
+}
+
+model TestVariation {
+  id           String     @id @default(uuid())
+  name         String
+  branchName   String     @default("master")
+  browser      String     @default("")
+  device       String     @default("")
+  os           String     @default("")
+  viewport     String     @default("")
+  customTags   String     @default("")
+  baselineName String?
+  ignoreAreas  String     @default("[]")
+  projectId    String
+  project      Project    @relation(fields: [projectId], references: [id])
+  testRuns     TestRun[]
+  baselines    Baseline[]
+  comment      String?
+  updatedAt    DateTime   @updatedAt
+  createdAt    DateTime   @default(now())
+
+  @@unique([projectId, name, browser, device, os, viewport, customTags, branchName])
+}
+
+model Baseline {
+  id              String        @id @default(uuid())
+  baselineName    String
+  testVariationId String
+  testVariation   TestVariation @relation(fields: [testVariationId], references: [id])
+  testRunId       String?
+  testRun         TestRun?      @relation(fields: [testRunId], references: [id])
+  updatedAt       DateTime      @updatedAt
+  createdAt       DateTime      @default(now())
+}
+
+model User {
+  id        String   @id @default(uuid())
+  email     String   @unique
+  password  String
+  firstName String?
+  lastName  String?
+  apiKey    String   @unique
+  isActive  Boolean  @default(true)
+  builds    Build[]
+  updatedAt DateTime @updatedAt
+  createdAt DateTime @default(now())
+}
+
+enum TestStatus {
+  failed
+  new
+  ok
+  unresolved
+  approved
+  autoApproved
+}
+
+enum ImageComparison {
+  pixelmatch
+  lookSame
+  odiff
+}

prisma/migrations/20210605124856-image-compare-config-as-json/steps.json

@@ -0,0 +1,52 @@
+{
+  "version": "0.3.14-fixed",
+  "steps": [
+    {
+      "tag": "CreateField",
+      "model": "Project",
+      "field": "imageComparisonConfig",
+      "type": "String",
+      "arity": "Required"
+    },
+    {
+      "tag": "CreateDirective",
+      "location": {
+        "path": {
+          "tag": "Field",
+          "model": "Project",
+          "field": "imageComparisonConfig"
+        },
+        "directive": "default"
+      }
+    },
+    {
+      "tag": "CreateArgument",
+      "location": {
+        "tag": "Directive",
+        "path": {
+          "tag": "Field",
+          "model": "Project",
+          "field": "imageComparisonConfig"
+        },
+        "directive": "default"
+      },
+      "argument": "",
+      "value": "\"{ \\\"threshold\\\": 0.1, \\\"ignoreAntialiasing\\\": true, \\\"allowDiffDimensions\\\": false }\""
+    },
+    {
+      "tag": "DeleteField",
+      "model": "Project",
+      "field": "diffDimensionsFeature"
+    },
+    {
+      "tag": "DeleteField",
+      "model": "Project",
+      "field": "ignoreAntialiasing"
+    },
+    {
+      "tag": "DeleteField",
+      "model": "Project",
+      "field": "threshold"
+    }
+  ]
+}

prisma/migrations/migrate.lock

@@ -17,4 +17,5 @@
 20210228121726-test-run--nullable-test-variation-id
 20210405171118-github_243-set-empty-test-variation-tags-instead-of-null
 20210425191116-github_215_project_config
-20210517203552-add-custom-tags
+20210517203552-add-custom-tags
+20210605124856-image-compare-config-as-json

prisma/schema.prisma

@@ -36,10 +36,8 @@ model Project {
   createdAt             DateTime        @default(now())
   // config
   autoApproveFeature    Boolean         @default(false)
-  diffDimensionsFeature Boolean         @default(false)
-  ignoreAntialiasing    Boolean         @default(true)
-  threshold             Float           @default(0.1)
   imageComparison       ImageComparison @default(pixelmatch)
+  imageComparisonConfig String          @default("{ \"threshold\": 0.1, \"ignoreAntialiasing\": true, \"allowDiffDimensions\": false }")
 
   @@unique([name])
 }

src/_data_/index.ts

@@ -8,9 +8,7 @@ export const TEST_PROJECT: Project = {
   createdAt: new Date(),
   updatedAt: new Date(),
   autoApproveFeature: true,
-  diffDimensionsFeature: true,
-  ignoreAntialiasing: true,
-  threshold: 0.1,
+  imageComparisonConfig: '{ "threshold": 0.1, "ignoreAntialiasing": true, "allowDiffDimensions": false }',
   imageComparison: ImageComparison.pixelmatch,
 };
 

src/compare/compare.module.ts

@@ -1,9 +1,10 @@
 import { Module } from '@nestjs/common';
 import { CompareService } from './compare.service';
-import { PixelmatchService } from './libs/pixelmatch.service';
+import { LookSameService } from './libs/looks-same/looks-same.service';
+import { PixelmatchService } from './libs/pixelmatch/pixelmatch.service';
 
 @Module({
-  providers: [CompareService, PixelmatchService],
+  providers: [CompareService, PixelmatchService, LookSameService],
   exports: [CompareService],
 })
 export class CompareModule {}

src/compare/compare.service.spec.ts

@@ -2,14 +2,15 @@ import { Test, TestingModule } from '@nestjs/testing';
 import { PrismaService } from '../prisma/prisma.service';
 import { StaticService } from '../shared/static/static.service';
 import { CompareService } from './compare.service';
-import { PixelmatchService } from './libs/pixelmatch.service';
+import { LookSameService } from './libs/looks-same/looks-same.service';
+import { PixelmatchService } from './libs/pixelmatch/pixelmatch.service';
 
 describe('CompareService', () => {
   let service: CompareService;
 
   beforeEach(async () => {
     const module: TestingModule = await Test.createTestingModule({
-      providers: [CompareService, PixelmatchService, StaticService, PrismaService],
+      providers: [CompareService, PixelmatchService, LookSameService, StaticService, PrismaService],
     }).compile();
 
     service = module.get<CompareService>(CompareService);

src/compare/compare.service.ts

@@ -1,35 +1,38 @@
 import { ImageComparison, Project } from '.prisma/client';
 import { Injectable } from '@nestjs/common';
-import { PixelmatchService } from './libs/pixelmatch.service';
-import { ImageComparator, ImageCompareConfig, ImageCompareInput } from './libs/image-comparator.interface';
+import { PixelmatchService } from './libs/pixelmatch/pixelmatch.service';
+import { ImageComparator } from './libs/image-comparator.interface';
+import { ImageCompareInput } from "./libs/ImageCompareInput";
 import { PrismaService } from '../prisma/prisma.service';
 import { DiffResult } from '../test-runs/diffResult';
+import { LookSameService } from './libs/looks-same/looks-same.service';
 
 @Injectable()
 export class CompareService {
-  constructor(private pixelmatchService: PixelmatchService, private prismaService: PrismaService) {}
+  constructor(
+    private pixelmatchService: PixelmatchService,
+    private lookSameService: LookSameService,
+    private prismaService: PrismaService
+  ) {}
 
   async getDiff({ projectId, data }: { projectId: string; data: ImageCompareInput }): Promise<DiffResult> {
     const project: Project = await this.prismaService.project.findUnique({ where: { id: projectId } });
-    return this.getComparator(project.imageComparison).getDiff(data, this.getConfig(project));
+    const comparator = this.getComparator(project.imageComparison);
+    const config = comparator.parseConfig(project.imageComparisonConfig);
+    return comparator.getDiff(data, config);
   }
 
   getComparator(imageComparison: ImageComparison): ImageComparator {
     switch (imageComparison) {
       case ImageComparison.pixelmatch: {
         return this.pixelmatchService;
       }
+      case ImageComparison.lookSame: {
+        return this.lookSameService;
+      }
       default: {
         return this.pixelmatchService;
       }
     }
   }
-
-  getConfig(project: Project): ImageCompareConfig {
-    return {
-      allowDiffDimensions: project.diffDimensionsFeature,
-      ignoreAntialiasing: project.ignoreAntialiasing,
-      threshold: project.threshold,
-    };
-  }
 }

src/compare/libs/ImageCompareInput.ts

@@ -0,0 +1,10 @@
+import { IgnoreAreaDto } from 'src/test-runs/dto/ignore-area.dto';
+
+
+export interface ImageCompareInput {
+  baseline: string;
+  image: string;
+  diffTollerancePercent: number;
+  ignoreAreas: IgnoreAreaDto[];
+  saveDiffAsFile: boolean;
+}