Fix wallet sync integration test

.changeset/old-carrots-complain.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"@ledgerhq/react-ui": minor
+---
+
+Fix border-radius in our react DS for the Button

apps/ledger-live-desktop/jest.config.js

@@ -61,6 +61,7 @@ module.exports = {
       moduleNameMapper: {
         ...defaultConfig.moduleNameMapper,
         "~/(.*)": "<rootDir>/src/$1",
+        "styled-components": require.resolve("styled-components"),
         "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
           "<rootDir>/fileMock.js",
         electron: "<rootDir>/tests/mocks/electron.ts",

apps/ledger-live-desktop/src/renderer/components/ButtonV3.tsx

@@ -5,8 +5,6 @@ import { useTrack } from "~/renderer/analytics/segment";
 import styled from "styled-components";
 
 export const Base = styled(BaseButton)<{ big?: boolean }>`
-  border-radius: 44px;
-
   font-size: ${p => (p.big ? "14px" : "12px")};
   height: 40px;
   line-height: 40px;

apps/ledger-live-desktop/src/renderer/screens/market/index.tsx

@@ -24,8 +24,6 @@ const SearchContainer = styled(Flex).attrs({ flexShrink: "1" })`
 `;
 
 export const Button = styled(BaseButton)<{ big?: boolean }>`
-  border-radius: 44px;
-
   ${p =>
     p.Icon
       ? `

apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/WalletSync/__tests__/walletSync.test.tsx

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { describe, it, expect } from "@jest/globals";
+
+import React from "react";
+import { render, screen, waitFor } from "tests/testUtils";
+import "@testing-library/jest-dom";
+import { WalletSyncPages } from "../setupTests/shared";
+
+describe("Rendering", () => {
+  it("should loads and displays WalletSync Row", async () => {
+    render(<WalletSyncPages />);
+    expect(screen.getByRole("button", { name: "Manage" })).toBeTruthy();
+  });
+
+  it("should open drawer and display Wallet Sync Activation flow", async () => {
+    const { user } = render(<WalletSyncPages />);
+    const button = screen.getByRole("button", { name: "Manage" });
+
+    await user.click(button);
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Create a backup" })).toBeDefined(),
+    );
+
+    expect(screen.getByRole("button", { name: "Synchronize" })).toBeDefined();
+  });
+});

libs/ui/packages/react/src/components/cta/Button/index.tsx

@@ -162,7 +162,7 @@ export const Base = baseStyled.button.attrs((p: BaseProps) => ({
 }))<BaseProps>`
   background-color: transparent;
   border-color: transparent;
-  border-radius: ${p => p.theme.space[13]}px;
+  border-radius: 44px;
   border-style: solid;
   border-width: ${p => (p.outline || p.variant === "shade" ? 1 : 0)}px;
   font-weight: 600;