From 8135fd695431430c26cad6110b3adc00e01e4a43 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Tue, 24 Sep 2024 12:45:29 +0300
Subject: [PATCH] chore(tests): added html snapshots

---
 jest.config.js                         |   1 +
 package-lock.json                      | 648 +++++++++++++++++++++++++
 package.json                           |   3 +
 test/__snapshots__/plugin.test.ts.snap | 115 +++++
 test/plugin.test.ts                    |  80 ++-
 5 files changed, 842 insertions(+), 5 deletions(-)
 create mode 100644 test/__snapshots__/plugin.test.ts.snap

diff --git a/jest.config.js b/jest.config.js
index 7fd613d..9e3ffee 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,4 +6,5 @@ module.exports = {
     },
     transformIgnorePatterns: [],
     testEnvironment: 'jsdom',
+    snapshotSerializers: ['jest-serializer-html'],
 };
diff --git a/package-lock.json b/package-lock.json
index 00cf0b7..9359077 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "devDependencies": {
         "@diplodoc/lint": "^1.2.0",
+        "@diplodoc/transform": "^4.31.3",
         "@diplodoc/tsconfig": "^1.0.2",
         "@types/github-slugger": "^1.3.0",
         "@types/jest": "^29.5.2",
@@ -20,8 +21,10 @@
         "github-slugger": "^1.5.0",
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-serializer-html": "^7.1.0",
         "markdown-it": "^13.0.2",
         "npm-run-all": "^4.1.5",
+        "ts-dedent": "^2.2.0",
         "ts-jest": "^29.1.0",
         "typescript": "^5.0.2"
       },
@@ -791,6 +794,15 @@
         "postcss-selector-parser": "^6.0.13"
       }
     },
+    "node_modules/@diplodoc/cut-extension": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@diplodoc/cut-extension/-/cut-extension-0.2.5.tgz",
+      "integrity": "sha512-Pg1NJiXhsbSHVFkblyQNY9c5f+yu1T8R4lZRVVa2YhjV4DY5s8ypccgO6KLYW9wcypmqWp4UU1RY1JWy41iA/Q==",
+      "dev": true,
+      "peerDependencies": {
+        "@diplodoc/utils": "1.0.0"
+      }
+    },
     "node_modules/@diplodoc/lint": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@diplodoc/lint/-/lint-1.2.0.tgz",
@@ -822,6 +834,126 @@
         "svgo": "bin/svgo"
       }
     },
+    "node_modules/@diplodoc/tabs-extension": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@diplodoc/tabs-extension/-/tabs-extension-3.3.2.tgz",
+      "integrity": "sha512-aCfesaBWfNOlfKTidGA78pdhAJc63oQTb3zLUolr3xDkj8dadW3hE6YlXFDdTo0tpPrmKhVfm+7O0UGKFzrf1A==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@diplodoc/transform": {
+      "version": "4.31.3",
+      "resolved": "https://registry.npmjs.org/@diplodoc/transform/-/transform-4.31.3.tgz",
+      "integrity": "sha512-s2TXuDfoXNZaYq+HIxEoit25fyzg2mB4AbUIQw5iwhp7scEtG2eykxInQHy3kB/MjOO686cJ/DrCvrvJOg7T1A==",
+      "dev": true,
+      "dependencies": {
+        "@diplodoc/cut-extension": "^0.2.5",
+        "@diplodoc/tabs-extension": "^3.3.2",
+        "chalk": "^4.1.2",
+        "cheerio": "^1.0.0",
+        "css": "^3.0.0",
+        "cssfilter": "0.0.10",
+        "get-root-node-polyfill": "1.0.0",
+        "github-slugger": "^1.5.0",
+        "js-yaml": "^4.1.0",
+        "lodash": "4.17.21",
+        "markdown-it": "^13.0.2",
+        "markdown-it-attrs": "^4.2.0",
+        "markdown-it-deflist": "2.1.0",
+        "markdown-it-meta": "0.0.1",
+        "markdown-it-sup": "1.0.0",
+        "markdownlint": "^0.32.1",
+        "markdownlint-rule-helpers": "0.17.2",
+        "sanitize-html": "^2.11.0",
+        "slugify": "1.6.5",
+        "svgo": "^3.2.0"
+      },
+      "peerDependencies": {
+        "highlight.js": "^10.0.3 || ^11"
+      },
+      "peerDependenciesMeta": {
+        "highlight.js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@diplodoc/transform/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@diplodoc/transform/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@diplodoc/transform/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@diplodoc/transform/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@diplodoc/transform/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@diplodoc/transform/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@diplodoc/tsconfig": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@diplodoc/tsconfig/-/tsconfig-1.0.2.tgz",
@@ -829,6 +961,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@diplodoc/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@diplodoc/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-rGDVyqZyJ4GUjuUIYeMG7w6w5mb1dLF/nkloWEyxqZWy/POO4GiHAG83d4wK6U3gTFGTe+BXabQzdIKZwNVCTw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -3301,6 +3440,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true,
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3773,6 +3924,88 @@
         "node": ">=10"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "dev": true,
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/cheerio/node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -4162,6 +4395,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.6.0"
+      }
+    },
     "node_modules/css-functions-list": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
@@ -4229,6 +4473,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true
+    },
     "node_modules/csso": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
@@ -4450,6 +4700,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dedent": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz",
@@ -4581,6 +4840,15 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/diffable-html": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/diffable-html/-/diffable-html-4.1.0.tgz",
+      "integrity": "sha512-++kyNek+YBLH8cLXS+iTj/Hiy2s5qkRJEJ8kgu/WHbFrVY2vz9xPFUT+fii2zGF0m1CaojDlQJjkfrCt7YWM1g==",
+      "dev": true,
+      "dependencies": {
+        "htmlparser2": "^3.9.2"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4736,6 +5004,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz",
+      "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==",
+      "dev": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/encoding-sniffer/node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -6192,6 +6485,12 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-root-node-polyfill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-root-node-polyfill/-/get-root-node-polyfill-1.0.0.tgz",
+      "integrity": "sha512-AzucsG1DdepagLF8tkxfjUqn3cCQ63MgH/tBWwPSy0BIDt8iLFZYDwnTxA08d+zdgL8l2dkPdZDe+Qkd+RMl9Q==",
+      "dev": true
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -6563,6 +6862,82 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/htmlparser2/node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "node_modules/htmlparser2/node_modules/domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "dev": true
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -8746,6 +9121,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/jest-serializer-html": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/jest-serializer-html/-/jest-serializer-html-7.1.0.tgz",
+      "integrity": "sha512-xYL2qC7kmoYHJo8MYqJkzrl/Fdlx+fat4U1AqYg+kafqwcKPiMkOcjWHPKhueuNEgr+uemhGc+jqXYiwCyRyLA==",
+      "dev": true,
+      "dependencies": {
+        "diffable-html": "^4.1.0"
+      }
+    },
     "node_modules/jest-snapshot": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.7.0.tgz",
@@ -9817,6 +10201,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -10091,6 +10481,95 @@
         "markdown-it": "bin/markdown-it.js"
       }
     },
+    "node_modules/markdown-it-attrs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.2.0.tgz",
+      "integrity": "sha512-m7svtUBythvcGFFZAv9VjMEvs8UbHri2sojJ3juJumoOzv8sdkx9a7W3KxiHbXxAbvL3Xauak8TMwCnvigVPKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "markdown-it": ">= 9.0.0"
+      }
+    },
+    "node_modules/markdown-it-deflist": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz",
+      "integrity": "sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==",
+      "dev": true
+    },
+    "node_modules/markdown-it-meta": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-meta/-/markdown-it-meta-0.0.1.tgz",
+      "integrity": "sha512-sCQG7mHJM3i4l6MztgzxE8t3aTQB5CSCO0wq8k6CEaqud40eryWXqPesq5AyztbYgwnxJcNIsmFsKDRkrl6Zuw==",
+      "dev": true,
+      "dependencies": {
+        "js-yaml": "^3.8.1"
+      }
+    },
+    "node_modules/markdown-it-meta/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/markdown-it-meta/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha512-E32m0nV9iyhRR7CrhnzL5msqic7rL1juWre6TQNxsnApg7Uf+F97JOKxUijg5YwXz86lZ0mqfOnutoryyNdntQ==",
+      "dev": true
+    },
+    "node_modules/markdownlint": {
+      "version": "0.32.1",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.32.1.tgz",
+      "integrity": "sha512-3sx9xpi4xlHlokGyHO9k0g3gJbNY4DI6oNEeEYq5gQ4W7UkiJ90VDAnuDl2U+yyXOUa6BX+0gf69ZlTUGIBp6A==",
+      "dev": true,
+      "dependencies": {
+        "markdown-it": "13.0.2",
+        "markdownlint-micromark": "0.1.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/DavidAnson"
+      }
+    },
+    "node_modules/markdownlint-micromark": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.7.tgz",
+      "integrity": "sha512-BbRPTC72fl5vlSKv37v/xIENSRDYL/7X/XoFzZ740FGEbs9vZerLrIkFRY0rv7slQKxDczToYuMmqQFN61fi4Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/markdownlint-rule-helpers": {
+      "version": "0.17.2",
+      "resolved": "https://registry.npmjs.org/markdownlint-rule-helpers/-/markdownlint-rule-helpers-0.17.2.tgz",
+      "integrity": "sha512-XaeoW2NYSlWxMCZM2B3H7YTG6nlaLfkEZWMBhr4hSPlq9MuY2sy83+Xr89jXOqZMZYjvi5nBCGoFh7hHoPKZmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -10862,6 +11341,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "dev": true
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -10875,6 +11360,31 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+      "dev": true,
+      "dependencies": {
+        "domhandler": "^5.0.2",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "dev": true,
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parse5/node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -11507,6 +12017,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -11810,6 +12334,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-2.1.1.tgz",
@@ -11845,6 +12389,63 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sanitize-html": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.13.0.tgz",
+      "integrity": "sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==",
+      "dev": true,
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/sass": {
       "version": "1.77.8",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
@@ -12039,6 +12640,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/slugify": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.5.tgz",
+      "integrity": "sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -12059,6 +12669,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-resolve": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+      "dev": true,
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -12149,6 +12770,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -12916,6 +13546,15 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/ts-jest": {
       "version": "29.2.4",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.4.tgz",
@@ -13171,6 +13810,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.19.8.tgz",
+      "integrity": "sha512-U8uCCl2x9TK3WANvmBavymRzxbfFYG+tAu+fgx3zxQy3qdagQqBLwJVrdyO1TBfUXvfKveMKJZhpvUYoOjM+4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.18.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.18.2.tgz",
diff --git a/package.json b/package.json
index 2382c49..4bdba9e 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "@diplodoc/lint": "^1.2.0",
+    "@diplodoc/transform": "^4.31.3",
     "@diplodoc/tsconfig": "^1.0.2",
     "@types/github-slugger": "^1.3.0",
     "@types/jest": "^29.5.2",
@@ -55,8 +56,10 @@
     "github-slugger": "^1.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-serializer-html": "^7.1.0",
     "markdown-it": "^13.0.2",
     "npm-run-all": "^4.1.5",
+    "ts-dedent": "^2.2.0",
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.2"
   }
diff --git a/test/__snapshots__/plugin.test.ts.snap b/test/__snapshots__/plugin.test.ts.snap
new file mode 100644
index 0000000..18d1053
--- /dev/null
+++ b/test/__snapshots__/plugin.test.ts.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugin html snapshots should render common tabs 1`] = `
+<div class="yfm-tabs"
+     data-diplodoc-group="defaultTabsGroup-4fzzzxjy"
+>
+  <div class="yfm-tab-list"
+       role="tablist"
+  >
+    <div data-diplodoc-id="tab-1"
+         data-diplodoc-key="tab%201"
+         class="yfm-tab yfm-tab-group active"
+         role="tab"
+         aria-controls="zk00000y"
+         aria-selected="true"
+         tabindex="0"
+         data-diplodoc-is-active="true"
+    >
+      Tab 1
+    </div>
+    <div data-diplodoc-id="tab-2"
+         data-diplodoc-key="tab%202"
+         class="yfm-tab yfm-tab-group"
+         role="tab"
+         aria-controls="ofvc1cad"
+         aria-selected="false"
+         tabindex="-1"
+         data-diplodoc-is-active="false"
+    >
+      Tab 2
+    </div>
+  </div>
+  <div id="zk00000y"
+       class="yfm-tab-panel active"
+       role="tabpanel"
+       aria-labelledby="tab-1"
+       data-title="Tab 1"
+  >
+    <p>
+      Content of tab 1
+    </p>
+  </div>
+  <div id="ofvc1cad"
+       class="yfm-tab-panel"
+       role="tabpanel"
+       aria-labelledby="tab-2"
+       data-title="Tab 2"
+  >
+    <p>
+      Content of tab 2
+    </p>
+  </div>
+</div>
+`;
+
+exports[`plugin html snapshots should render radio tabs 1`] = `
+<div class="yfm-tabs yfm-tabs-vertical"
+     data-diplodoc-group="defaultTabsGroup-7ptgcyuj"
+>
+  <div data-diplodoc-id="radio-1"
+       data-diplodoc-key="radio%201"
+       class="yfm-tab yfm-tab-group yfm-vertical-tab"
+       role="tab"
+       aria-controls="gfzybi81"
+       aria-selected="false"
+       tabindex="0"
+       data-diplodoc-is-active="false"
+       data-diplodoc-vertical-tab="true"
+  >
+    <input class="radio"
+           type="radio"
+    >
+    <label>
+      Radio 1
+    </label>
+  </div>
+  <div id="gfzybi81"
+       class="yfm-tab-panel"
+       role="tabpanel"
+       aria-labelledby="radio-1"
+       data-title="Radio 1"
+  >
+    <p>
+      Content of radio 1
+    </p>
+  </div>
+  <div data-diplodoc-id="radio-2"
+       data-diplodoc-key="radio%202"
+       class="yfm-tab yfm-tab-group yfm-vertical-tab"
+       role="tab"
+       aria-controls="4gfir17c"
+       aria-selected="false"
+       tabindex="-1"
+       data-diplodoc-is-active="false"
+       data-diplodoc-vertical-tab="true"
+  >
+    <input class="radio"
+           type="radio"
+    >
+    <label>
+      Radio 2
+    </label>
+  </div>
+  <div id="4gfir17c"
+       class="yfm-tab-panel"
+       role="tabpanel"
+       aria-labelledby="radio-2"
+       data-title="Radio 2"
+  >
+    <p>
+      Content of radio 2
+    </p>
+  </div>
+</div>
+`;
diff --git a/test/plugin.test.ts b/test/plugin.test.ts
index ab526cf..3bc5879 100644
--- a/test/plugin.test.ts
+++ b/test/plugin.test.ts
@@ -1,6 +1,9 @@
-import type Token from 'markdown-it/lib/token';
+import type MarkdownIt from 'markdown-it';
 
-import {PluginOptions, transform} from '../src/plugin/transform';
+import dedent from 'ts-dedent';
+import transform from '@diplodoc/transform';
+
+import * as tabsExtension from '../src/plugin/transform';
 
 import {callPlugin, tokenize} from './utils';
 import {base, escaped, nestedTokenTypes, simpleTab, vertical} from './data/tabs';
@@ -49,20 +52,32 @@ const defaultVerticalContent = [
     'After tabs',
 ];
 
-const convertAttrsToObject = ({attrs}: Token) =>
+const convertAttrsToObject = ({attrs}: MarkdownIt.Token) =>
     attrs?.reduce((acc: Record<string, string>, [name, value]) => {
         acc[name] = value;
 
         return acc;
     }, {}) || {};
 
-function makeTransform(params?: {transformOptions?: Partial<PluginOptions>; content?: string[]}) {
+function makeTransform(params?: {
+    transformOptions?: Partial<tabsExtension.PluginOptions>;
+    content?: string[];
+}) {
     return callPlugin(
-        transform({bundle: false, ...params?.transformOptions}),
+        tabsExtension.transform({bundle: false, ...params?.transformOptions}),
         tokenize(params?.content || defaultContent),
     );
 }
 
+function html(text: string, opts?: tabsExtension.PluginOptions) {
+    const {result} = transform(text, {
+        needToSanitizeHtml: false,
+        plugins: [tabsExtension.transform({bundle: false, ...opts})],
+    });
+
+    return result.html;
+}
+
 describe('plugin', () => {
     test('should convert vertical tabs to correct new token array', () => {
         // ACT
@@ -461,4 +476,59 @@ describe('plugin', () => {
             expect(attrsObject1['data-diplodoc-key']).toEqual('c%2b%2b');
         });
     });
+
+    describe('html snapshots', () => {
+        beforeAll(() => {
+            let i = 0;
+            const values = [
+                0.123456789, 0.987654321, 0.678912345, 0.214365879, 0.456789123, 0.123789456,
+            ];
+
+            jest.spyOn(global.Math, 'random').mockImplementation(() => values[i++ % values.length]);
+        });
+
+        afterAll(() => {
+            jest.spyOn(global.Math, 'random').mockRestore();
+        });
+
+        it('should render common tabs', () => {
+            expect(
+                html(
+                    dedent`
+                    {% list tabs %}
+
+                    - Tab 1
+
+                      Content of tab 1
+
+                    - Tab 2
+
+                      Content of tab 2
+
+                    {% endlist %}
+                `,
+                ),
+            ).toMatchSnapshot();
+        });
+
+        it('should render radio tabs', () => {
+            expect(
+                html(
+                    dedent`
+                    {% list tabs radio %}
+
+                    - Radio 1
+
+                      Content of radio 1
+
+                    - Radio 2
+
+                      Content of radio 2
+
+                    {% endlist %}
+                `,
+                ),
+            ).toMatchSnapshot();
+        });
+    });
 });