diff --git a/CHANGELOG.md b/CHANGELOG.md index 2267b17..6924925 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ ### 0.0.3 * added other views to see individual tested master masked and isolated -* adedd hover to easy toggle on tested and master image +* added hover to easy toggle on tested and master image * change icon on primary sidebar ### 1.0.0 * fix size aspect ratio @@ -15,8 +15,8 @@ * added clear function * tree view by project ### 1.0.2 -* projects and itens are sorted -* fix duplicated itens on tree +* projects and items are sorted +* fix duplicated items on tree ### 1.0.3 * automatic refresh when detect new failures ### 1.0.4 @@ -38,6 +38,8 @@ * fix error that was loading incorrect project to failures ### 1.1.2 * fix error that was not loading project to all failures +### 2.0.0 +* implement a new visual style, use a windows simulator and center the image, remove the slider All notable changes to the "golden-diff" extension will be documented in this file. diff --git a/README.md b/README.md index e933c01..b49e3a1 100644 --- a/README.md +++ b/README.md @@ -17,20 +17,45 @@ Once there are test failures on your project, there will be a slider that reveal Imagine you've made some alterations, and suddenly, the tests begin to fail: -![image](https://raw.githubusercontent.com/jeilsonaraujo/golden_diff/main/readme_resources/1%20-%20test%20fails.gif) +### Test fails +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/1_test%20fails.gif?raw=true) +### Locate the failure in list With the Golden Diff extension, pinpointing errors becomes effortless. Simply navigate to the extension to quickly identify failures, compare expected versus generated outcomes, and save valuable time troubleshooting. +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/2_locate_golden_failure.gif?raw=true) - -![image](https://raw.githubusercontent.com/jeilsonaraujo/golden_diff/main/readme_resources/2%20-%20find%20the%20fail.gif) +### Open the failure and see what happens +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/3_open_failure.gif?raw=true) +### Compare the generated images Here, you can explore the various types of golden tests available, offering insight into what's happening behind the scenes. Golden Diff consolidates this information, streamlining your workflow and saving you precious time: -![image](https://raw.githubusercontent.com/jeilsonaraujo/golden_diff/main/readme_resources/3%20-%20see%20what%20happens.gif) +### Failure vs Expected +The Failure image will have a red shadow and the Expected image will show a green shadow to effort the difference. + +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/4_failure_vs_expect.gif?raw=true) + +### Isolated image + +The isolated mode will present any discrepancies found between the expected image and what was actually detected. + +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/5_isolated.gif?raw=true) + +### Master Image + +The master image will showcase both the expected and failure images overlaid, making it effortless to discern the differences. + +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/6_masked.gif?raw=true) + +### Find the test easily + +Tap on the window title to copy the image name and locate using the search vscode resource + +![image](https://github.com/Jeilson-Dev/golden_diff/blob/main/readme_resources/docs/7_find_test.gif?raw=true) ## Some contributions @@ -78,8 +103,9 @@ Here, you can explore the various types of golden tests available, offering insi * fix error to get projects ### 1.1.2 * fix error to get projects +### 2.0.0 +* implement a new visual ---- Golden retriever icons created by Freepik - Flaticon
Clear icons created by LAFS - Flaticon
Dog icons created by Freepik - Flaticon
diff --git a/package-lock.json b/package-lock.json index c4cd139..4502b3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "golden-diff", - "version": "1.1.2", + "version": "2.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "golden-diff", - "version": "1.1.2", + "version": "2.0.0", "dependencies": { "image-size": "^1.0.2" }, diff --git a/package.json b/package.json index 19c6ca5..010cf27 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "type": "git", "url": "https://github.com/jeilsonaraujo/golden_diff.git" }, - "version": "1.1.2", + "version": "2.0.0", "engines": { "vscode": "^1.77.0" }, diff --git a/src/failure/src/failure_css.ts b/src/failure/src/failure_css.ts new file mode 100644 index 0000000..a403020 --- /dev/null +++ b/src/failure/src/failure_css.ts @@ -0,0 +1,175 @@ +import * as vscode from 'vscode'; +import { GoldenFailureItem } from '../golden_failure_item'; + +export class FailureCSS { + static css(panel: vscode.WebviewPanel, item: GoldenFailureItem) { + return ` + .diff-inspector { + height: 100%; + + } + + .legend-container { + padding-top: 20px; + display: flex; + width: 100%; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: auto; + + } + + .legend { + cursor: default; + padding-left: 14px; + padding-right: 14px; + padding-top: 8px; + padding-bottom: 8px; + height: 36; + width: fit-content; + margin: 4px; + color: white; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 14px; + border-radius: 14px; + box-shadow: 5px 4px 15px #727272; + } + .browser-frame { + margin-top: 30px; + width: ${item.width}px; + display: block; + margin-left: auto; + margin-right: auto; + transition: 0.2s ease-in; + border-radius: 8px 8px 4px 4px; + box-shadow: 0px 0px 25px 8px #f62424; + } + + .browser-frame-header { + display: flex; + height: 40px; + width:${item.width}px; + padding: 1px; + align-items: center; + background-color: #1E1E1E; + border-radius: 8px 8px 0px 0px; + } + + .browser-frame-content { + display: flex; + justify-content: center; + height: ${item.height}px; + width: ${item.width}px; + background-repeat: no-repeat; + background-size: ${item.width}px ${item.height}px; + background-image:url('${panel.webview.asWebviewUri(vscode.Uri.file(item.imageFailure!))}'); + margin-left: auto; + margin-right: auto; + display: flex; + border-top: transparent; + border: 1px solid #D1D1D1; + border-radius: 0px 0px 4px 4px; + } + + .content-flex { + display: flex; + justify-content: start; + } + + .browser-frame-header-action-buttons { + height: 14px; + width: 14px; + margin-left: 8px; + border-radius: 50%; + } + + .minimise-button { + background-color: #FEBB2E; + } + + .minimise-button:hover { + background-color: #ffcc5f; + } + + .maximise-button { + background-color: #29C840; + } + + .maximise-button:hover { + background-color: #33d44c; + } + .close-button { + background-color: #FE5F57; + } + .close-button:hover { + background-color: #ff766f; + } + .window-title { + cursor: default; + font-size: 16px; + margin-left: auto; + margin-right: auto; + color: white; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + } + .golden-image-title { + cursor: default; + overflow: hidden; + word-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 1; + line-clamp: 1; + -webkit-box-orient: vertical; + width: ${item.width * 0.35}px; + margin-left: auto; + margin-right: auto; + text-align: center; + border: none; + padding-left: 20px; + background-color: #1E1E1E; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + } + .golden-image-title-icon { + font-size: 14px; + color: #a0a0a0; + background-position: 0px 2px; + transition: 0.2s ease-in; + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDE0MzEgOC45NDQ0Mkw3LjY2NTc1IDEwLjExMTFMMTAuMzA3OSA2LjYxMTA4IiBzdHJva2U9IiM5NDk0OTQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjA4MzQgNC4wODMzN0g1LjYzODkzQzQuNzc5ODIgNC4wODMzNyA0LjA4MzM3IDQuNzc5ODIgNC4wODMzNyA1LjYzODkzVjExLjA4MzRDNC4wODMzNyAxMS45NDI1IDQuNzc5ODIgMTIuNjM4OSA1LjYzODkzIDEyLjYzODlIMTEuMDgzNEMxMS45NDI1IDEyLjYzODkgMTIuNjM4OSAxMS45NDI1IDEyLjYzODkgMTEuMDgzNFY1LjYzODkzQzEyLjYzODkgNC43Nzk4MiAxMS45NDI1IDQuMDgzMzcgMTEuMDgzNCA0LjA4MzM3WiIgc3Ryb2tlPSIjOTQ5NDk0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yLjE3ODU4IDkuMzMxNzlMMS4zNzgyNCAzLjk0NjQ2QzEuMjUyMjQgMy4wOTYzNSAxLjgzODY5IDIuMzA1MzUgMi42ODgwMiAyLjE3OTM1TDguMDczMzYgMS4zNzkwMkM4Ljc5OTAyIDEuMjcwOTEgOS40ODExMyAxLjY4MjM1IDkuNzQ0MDIgMi4zMzQxMyIgc3Ryb2tlPSIjOTQ5NDk0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); + background-repeat: no-repeat; + } + .golden-image-title-icon:hover { + font-size: 14px; + color: white; + background-position: 0px 2px; + transition: 0.2s ease-in; + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNNi40MTQzMSA4Ljk0NDQyTDcuNjY1NzUgMTAuMTExMUwxMC4zMDc5IDYuNjExMDgiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMS4wODM0IDQuMDgzMzdINS42Mzg5M0M0Ljc3OTgyIDQuMDgzMzcgNC4wODMzNyA0Ljc3OTgyIDQuMDgzMzcgNS42Mzg5M1YxMS4wODM0QzQuMDgzMzcgMTEuOTQyNSA0Ljc3OTgyIDEyLjYzODkgNS42Mzg5MyAxMi42Mzg5SDExLjA4MzRDMTEuOTQyNSAxMi42Mzg5IDEyLjYzODkgMTEuOTQyNSAxMi42Mzg5IDExLjA4MzRWNS42Mzg5M0MxMi42Mzg5IDQuNzc5ODIgMTEuOTQyNSA0LjA4MzM3IDExLjA4MzQgNC4wODMzN1oiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgICAgIDxwYXRoIGQ9Ik0yLjE3ODU4IDkuMzMxNzlMMS4zNzgyNCAzLjk0NjQ2QzEuMjUyMjQgMy4wOTYzNSAxLjgzODY5IDIuMzA1MzUgMi42ODgwMiAyLjE3OTM1TDguMDczMzYgMS4zNzkwMkM4Ljc5OTAyIDEuMjcwOTEgOS40ODExMyAxLjY4MjM1IDkuNzQ0MDIgMi4zMzQxMyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICAgICAgPC9zdmc+"); + background-repeat: no-repeat; + } + .copy-button-icon { + height: auto; + margin-left: 14px; + } + .status-image-name-copied { + visibility: hidden; + transition: 0.4s ease-in; + font-size: 14px; + margin-left: 10px; + color: white; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + + } + .golden-failure { + height: 100%; + width: 100%; + margin: auto; + transition: 0.2s ease-in; + } + + .hidden { + visibility: hidden; + }`; + + + } +} diff --git a/src/failure/src/failure_html.ts b/src/failure/src/failure_html.ts new file mode 100644 index 0000000..b7a0423 --- /dev/null +++ b/src/failure/src/failure_html.ts @@ -0,0 +1,84 @@ +import { GoldenFailureItem } from "../golden_failure_item"; +import { FailureCSS } from "./failure_css"; + +import * as vscode from 'vscode'; +export class FailureHtml { + static html(item: GoldenFailureItem, panel: vscode.WebviewPanel) { + return ` + + + + + + + +
+
+
+
+
+
+
+
+
${item.label}
+
Copied!
+
+
+
+ +
+ +
+
+
Master
+
Isolated
+
Masked
+
+ + `; + + + } + +} \ No newline at end of file diff --git a/src/failure/src/old.ts b/src/failure/src/old.ts new file mode 100644 index 0000000..76d76a3 --- /dev/null +++ b/src/failure/src/old.ts @@ -0,0 +1,215 @@ +// panel.webview.html = ` +// +// +// +// +// + +// + +// +//

${item.label}

+ +//
+// +// +// +// +// + + + +//
+ +//
+//
+//
+//
+//
+//
+// +//
+ +//
+//
+//
+//
+//
+ +//
+//
+//
+//
+//
+ +//
+//
+//
+//
+//
+ +//
+//
+//
+//
+//
+ +// + +// + +// `; \ No newline at end of file diff --git a/src/failure/tree_failures_view.ts b/src/failure/tree_failures_view.ts index 66355f6..da26a14 100644 --- a/src/failure/tree_failures_view.ts +++ b/src/failure/tree_failures_view.ts @@ -1,10 +1,10 @@ import path from 'path'; import * as vscode from 'vscode'; +import { GoldenFailureItem } from './golden_failure_item'; +import { FailureHtml } from './src/failure_html'; const sizeOf = require('image-size'); const fs = require('fs'); -import { GoldenFailureItem } from './golden_failure_item'; - export namespace failuresNameSpace { export class TreeFailureView implements vscode.TreeDataProvider { @@ -212,198 +212,7 @@ export namespace failuresNameSpace { */ itemClicked(item: GoldenFailureItem) { const panel = vscode.window.createWebviewPanel(item.label!, item.label!, vscode.ViewColumn.Active, { enableScripts: true }); - panel.webview.html = ` - - - - - - - - - -

${item.label}

- -
- - - - - - - - -
- -
-
-
-
-
-
- -
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- - - - - - `; + panel.webview.html = FailureHtml.html(item, panel); } } } \ No newline at end of file