diff --git a/package-lock.json b/package-lock.json index 37c40c0e..899ea0bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^7.39.0", + "@gravity-ui/uikit": "^7.44.0", "@storybook/addon-a11y": "^8.4.7", "@storybook/addon-actions": "^8.4.7", "@storybook/addon-docs": "^8.4.7", @@ -76,7 +76,7 @@ "typescript": "^5.7.3" }, "peerDependencies": { - "@gravity-ui/uikit": "^7.39.0", + "@gravity-ui/uikit": "^7.44.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } @@ -137,6 +137,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz", "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==", "dev": true, + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.0", @@ -1916,6 +1917,7 @@ "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=6.9.0" } @@ -2153,6 +2155,7 @@ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", "dev": true, + "peer": true, "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", @@ -2406,6 +2409,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": "^14 || ^16 || >=18" }, @@ -2428,6 +2432,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": "^14 || ^16 || >=18" } @@ -3359,9 +3364,9 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "7.39.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.39.0.tgz", - "integrity": "sha512-mMFoxvdA5L4/P7oIw9hYF/GMBvCWc9V0u0NWLj600tJ/tV+MDYUgjTdi3U1YRzjK79Antr+4r+rvBt9cgxwnpQ==", + "version": "7.48.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.48.0.tgz", + "integrity": "sha512-ihkIGYvyqMEf7zY3biWXDm5jVsRg7dsMLp8d3IisegFayBeewNbK23iAjcqnNNuevg9A/P368gY5/KPtLOG71g==", "dev": true, "license": "MIT", "dependencies": { @@ -3383,8 +3388,14 @@ "use-sync-external-store": "^1.6.0" }, "peerDependencies": { + "@types/react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, "node_modules/@gulp-sourcemaps/identity-map": { @@ -5740,6 +5751,7 @@ "integrity": "sha512-ut3zfiTLORMxhr6y/GBxkHmzcGuVpwJYX4qyXWuBKkpw/0g0S5iO1/wW7RnLnZbAi8wS/n0atRZoaZlXWBkeJg==", "dev": true, "hasInstallScript": true, + "peer": true, "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.17" @@ -5998,6 +6010,7 @@ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -6278,6 +6291,7 @@ "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz", "integrity": "sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==", "dev": true, + "peer": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" @@ -6432,6 +6446,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz", "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==", "dev": true, + "peer": true, "dependencies": { "undici-types": "~6.20.0" } @@ -6459,6 +6474,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", "dev": true, + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -6469,6 +6485,7 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz", "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==", "dev": true, + "peer": true, "peerDependencies": { "@types/react": "^18.0.0" } @@ -6568,6 +6585,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.19.1.tgz", "integrity": "sha512-67gbfv8rAwawjYx3fYArwldTQKoYfezNUT4D5ioWetr/xCrxXxvleo3uuiFuKfejipvq+og7mjz3b0G2bVyUCw==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.19.1", "@typescript-eslint/types": "8.19.1", @@ -7342,6 +7360,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -7407,6 +7426,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -7904,6 +7924,7 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz", "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==", "dev": true, + "peer": true, "engines": { "node": ">=4" } @@ -8471,6 +8492,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -10480,6 +10502,7 @@ "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==", "dev": true, "hasInstallScript": true, + "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -10581,6 +10604,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -10636,6 +10660,7 @@ "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", "dev": true, + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -10729,6 +10754,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz", "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.8", @@ -14866,6 +14892,7 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "dev": true, + "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -14906,6 +14933,7 @@ "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.7.0.tgz", "integrity": "sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==", "dev": true, + "peer": true, "dependencies": { "@jest/environment": "^29.7.0", "@jest/expect": "^29.7.0", @@ -15529,6 +15557,7 @@ "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz", "integrity": "sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==", "dev": true, + "peer": true, "dependencies": { "@jest/environment": "^29.7.0", "@jest/fake-timers": "^29.7.0", @@ -16133,6 +16162,7 @@ "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.7.0.tgz", "integrity": "sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==", "dev": true, + "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/environment": "^29.7.0", @@ -17675,6 +17705,7 @@ "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz", "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==", "dev": true, + "peer": true, "dependencies": { "argparse": "^2.0.1", "entities": "~3.0.1", @@ -19584,6 +19615,7 @@ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.51.0.tgz", "integrity": "sha512-442pTfGM0xxfCYxuBa/Pu6B2OqxqqaYq39JS8QDMGThUvIOCd6s0ANDog3uwA0cHavVlnTQzGCN7Id2YekDSXA==", "dev": true, + "peer": true, "dependencies": { "playwright-core": "1.51.0" }, @@ -19664,6 +19696,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", @@ -19839,6 +19872,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -19876,6 +19910,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", "dev": true, + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -20146,6 +20181,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "devOptional": true, + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -20188,6 +20224,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dev": true, + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -20395,7 +20432,8 @@ "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", @@ -21038,6 +21076,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -21548,6 +21587,7 @@ "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.7.tgz", "integrity": "sha512-RP/nMJxiWyFc8EVMH5gp20ID032Wvk+Yr3lmKidoegto5Iy+2dVQnUoElZb2zpbVXNHWakGuAkfI0dY1Hfp/vw==", "dev": true, + "peer": true, "dependencies": { "@storybook/core": "8.4.7" }, @@ -21903,6 +21943,7 @@ "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz", "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==", "dev": true, + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^2.3.1", "@csstools/css-tokenizer": "^2.2.0", @@ -23122,6 +23163,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -23658,6 +23700,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.0.tgz", "integrity": "sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w==", "dev": true, + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", diff --git a/package.json b/package.json index 0bea769b..180aec94 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^7.39.0", + "@gravity-ui/uikit": "^7.44.0", "@storybook/addon-a11y": "^8.4.7", "@storybook/addon-actions": "^8.4.7", "@storybook/addon-docs": "^8.4.7", @@ -119,7 +119,7 @@ "typescript": "^5.7.3" }, "peerDependencies": { - "@gravity-ui/uikit": "^7.39.0", + "@gravity-ui/uikit": "^7.44.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss index 32d7b7ec..74ddd458 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.scss +++ b/src/components/ChangelogDialog/ChangelogDialog.scss @@ -4,10 +4,17 @@ $block: '.#{variables.$ns}changelog-dialog'; $maxItemsHeight: 70vh; #{$block} { - --gc-changelog-dialog-width: 732px; + --gc-changelog-dialog-max-height: #{$maxItemsHeight}; --gc-changelog-dialog-meta-width: 80px; - --g-dialog-width: var(--gc-changelog-dialog-width, 732px); + // `--gc-changelog-dialog-width` is deprecated in favor of `--gc-changelog-dialog-max-width` + &__modal { + --g-modal-width: 100%; + --g-modal-max-width: var( + --gc-changelog-dialog-max-width, + var(--gc-changelog-dialog-width, 732px) + ); + } &__full-list-link-icon { margin-inline-start: var(--g-spacing-1); @@ -15,7 +22,7 @@ $maxItemsHeight: 70vh; } &__items-container { - max-height: $maxItemsHeight; + max-height: var(--gc-changelog-dialog-max-height); overflow-y: auto; margin-block-end: var(--g-spacing-5); diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx index f1fcd2e2..580e6215 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.tsx +++ b/src/components/ChangelogDialog/ChangelogDialog.tsx @@ -64,6 +64,7 @@ export function ChangelogDialog(props: ChangelogDialogProps) { return ( ``` + +### CSS API + +| Name | Description | Default | +| :--------------------------------- | :---------------------------------------------------- | :------ | +| `--gc-changelog-dialog-max-width` | Maximum dialog width | `732px` | +| `--gc-changelog-dialog-max-height` | Maximum height of the list of versions | `70vh` | +| `--gc-changelog-dialog-meta-width` | Width of the item meta column (date, "New" label) | `80px` | +| ~~`--gc-changelog-dialog-width`~~ | **Deprecated**, use `--gc-changelog-dialog-max-width` | — | diff --git a/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx b/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx new file mode 100644 index 00000000..41d8771b --- /dev/null +++ b/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx @@ -0,0 +1,134 @@ +import userEvent from '@testing-library/user-event'; + +import {act, render, screen} from '../../../../test-utils/utils'; +import {ChangelogDialog} from '../ChangelogDialog'; +import type {ChangelogItem} from '../types'; + +const items: ChangelogItem[] = [ + { + date: '2022-07-03', + isNew: true, + title: 'New navigation', + description: 'Navigation description', + storyId: 'storyId', + link: 'https://example.com', + }, + { + date: '2022-06-15', + title: 'Minor fixes', + description: 'Fixes description', + }, +]; + +test('Renders the list of versions', () => { + render(); + + expect(screen.getByRole('dialog', {name: 'Changelog'})).toBeInTheDocument(); + expect(screen.getByRole('heading', {name: 'New navigation'})).toBeInTheDocument(); + expect(screen.getByRole('heading', {name: 'Minor fixes'})).toBeInTheDocument(); + expect(screen.getByText('Navigation description')).toBeInTheDocument(); + expect(screen.getByText('New')).toBeInTheDocument(); +}); + +test('Renders nothing when closed', () => { + render(); + + expect(screen.queryByRole('heading', {name: 'New navigation'})).not.toBeInTheDocument(); +}); + +test('Renders placeholder when there are no versions', () => { + render(); + + expect(screen.getByText('No data')).toBeInTheDocument(); +}); + +test('Renders link to the full changelog when fullListLink is set', () => { + render( + , + ); + + expect(screen.getByRole('link', {name: 'View full changelog'})).toHaveAttribute( + 'href', + 'https://example.com/changelog', + ); +}); + +test('Hides versions while loading', () => { + render(); + + expect(screen.queryByRole('heading', {name: 'New navigation'})).not.toBeInTheDocument(); + expect(screen.queryByText('No data')).not.toBeInTheDocument(); +}); + +test('Shows error instead of versions and calls onRetryClick', async () => { + const handleRetryClick = jest.fn(); + + render( + , + ); + + expect(screen.getByText('Unable load changelog')).toBeInTheDocument(); + expect(screen.queryByRole('heading', {name: 'New navigation'})).not.toBeInTheDocument(); + + const user = userEvent.setup(); + await act(() => user.click(screen.getByRole('button', {name: 'Retry'}))); + + expect(handleRetryClick).toBeCalled(); +}); + +test('Shows custom error title and description', () => { + render( + , + ); + + expect(screen.getByText('Error title')).toBeInTheDocument(); + expect(screen.getByText('Error description')).toBeInTheDocument(); +}); + +test('Calls onStoryClick and onLinkClick', async () => { + const handleStoryClick = jest.fn(); + const handleLinkClick = jest.fn(); + + render( + , + ); + + const user = userEvent.setup(); + + await act(() => user.click(screen.getByRole('button', {name: 'View story'}))); + expect(handleStoryClick).toBeCalledWith('storyId'); + + await act(() => user.click(screen.getByRole('link', {name: 'Read more'}))); + expect(handleLinkClick).toBeCalledWith('https://example.com'); +}); + +test('Applies className to the element the size CSS variables are set on', () => { + const {baseElement} = render( + , + ); + + // eslint-disable-next-line testing-library/no-node-access + expect(baseElement.querySelector('.gc-changelog-dialog')).toHaveClass('custom-class'); +}); diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss index 5ced6537..e03e2fc8 100644 --- a/src/components/ChangelogDialog/components/Item/Item.scss +++ b/src/components/ChangelogDialog/components/Item/Item.scss @@ -41,9 +41,6 @@ $block: '.#{variables.$ns}changelog-dialog-item'; &__button { margin-block-start: var(--g-spacing-4); - } - - &__button + &__button { - margin-inline-start: var(--g-spacing-4); + margin-inline-end: var(--g-spacing-4); } }