-
-
Notifications
You must be signed in to change notification settings - Fork 69
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added changing background colour handling to CTA Card #1419
Conversation
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/koenig-lexical/test/e2e/cards/cta-card.test.jsOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct. The config "react-app" was referenced from the config file in "/packages/koenig-lexical/.eslintrc.cjs". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe pull request introduces a new function Changes
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/koenig-lexical/test/e2e/cards/cta-card.test.js (1)
178-194
: Enhance test robustness and consistency.While the test covers the basic functionality, consider these improvements:
- Use consistent attribute naming:
-await page.click(`[data-test-id="${color.testId}"]`); +await page.click(`[data-testid="${color.testId}"]`);
- Add verification of initial state:
await insertCard(page, {cardName: 'call-to-action'}); const firstChildSelector = '[data-kg-card="call-to-action"] > :first-child'; + +// Verify initial state +await expect(page.locator(firstChildSelector)).not.toHaveClass(/bg-(grey|green|blue|yellow|red)/);
- Consider verifying computed styles for more thorough testing:
for (const color of colors) { await page.click(`[data-testid="${color.testId}"]`); await expect(page.locator(firstChildSelector)).toHaveClass(new RegExp(color.expectedClass)); // Verify actual computed background color const computedStyle = await page.evaluate((selector) => { const element = document.querySelector(selector); return window.getComputedStyle(element).backgroundColor; }, firstChildSelector); expect(computedStyle).toBe(color.expectedRgb); // Add expectedRgb to color objects }
- Add a test for default background color:
test('default background is transparent', async function () { await focusEditor(page); await insertCard(page, {cardName: 'call-to-action'}); const firstChildSelector = '[data-kg-card="call-to-action"] > :first-child'; await expect(page.locator(firstChildSelector)).not.toHaveClass(/bg-/); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
(2 hunks)packages/koenig-lexical/test/e2e/cards/cta-card.test.js
(1 hunks)
🔇 Additional comments (2)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (2)
66-71
: LGTM! Clean implementation of background color handler.The function follows the established pattern in the codebase and correctly uses lexical's editor.update() for state management.
82-82
: LGTM! Proper integration of background color handler.The handleColorChange prop is correctly wired to the new background color handler.
ref https://linear.app/ghost/issue/PLG-317/implement-background-colour-handling-to-cta-card
Summary by CodeRabbit
New Features
Tests