test: onboarding test with existing key (#8116)

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -107,9 +107,7 @@ export const ConnectSdkDialog = ({
                             project={project}
                             sdkType={sdk.type}
                             onEnvSelect={setEnvironment}
-                            onApiKey={(apiKey) => {
-                                setApiKey(apiKey);
-                            }}
+                            onApiKey={setApiKey}
                         />
                     ) : null}
                     {isTestConnectionStage ? (

frontend/src/component/onboarding/Onboarding.test.tsx

@@ -0,0 +1,68 @@
+import { render } from 'utils/testRenderer';
+import { ConnectSdkDialog } from './ConnectSdkDialog';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { resizeScreen } from 'utils/resizeScreen';
+
+const server = testServerSetup();
+
+const setupApi = () => {
+    testServerRoute(server, '/api/admin/projects/default/api-tokens', {
+        tokens: [
+            {
+                environment: 'development',
+                type: 'client',
+                secret: 'default:development.5c4150866d',
+            },
+        ],
+    });
+
+    testServerRoute(server, '/api/admin/ui-config', {
+        versionInfo: {
+            current: { oss: 'irrelevant', enterprise: 'some value' },
+        },
+    });
+};
+
+test('Onboarding for SDK with existing key', async () => {
+    setupApi();
+    // on smaller screens we don't show concepts definitions
+    resizeScreen(2000);
+
+    render(
+        <ConnectSdkDialog
+            project='default'
+            onClose={() => {}}
+            open={true}
+            environments={['development', 'productions']}
+            feature='featureA'
+        />,
+    );
+
+    screen.getByText('1/3 - Choose SDK');
+    screen.getByText('Select SDK');
+    screen.getByText('SDKs and Unleash');
+
+    const node = screen.getAllByText('Select')[0];
+
+    fireEvent.click(node);
+
+    screen.getByText('2/3 - Generate API Key');
+    screen.getByText('API Key');
+    screen.getByText('Flags live in projects');
+    screen.getByText('development');
+
+    await screen.findByText('The API key secret');
+    await screen.findByText('5c4150866d');
+
+    const next = screen.getByText('Next');
+
+    await waitFor(() => {
+        expect(next).toBeEnabled();
+    });
+
+    fireEvent.click(next);
+
+    await screen.findByText('npm install unleash-client');
+    await screen.findByText('Connection status');
+});

frontend/src/component/onboarding/SelectSdk.tsx

@@ -73,7 +73,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 </SecondarySectionHeader>
                 <SdkListSection>
                     {serverSdks.map((sdk) => (
-                        <SdkTile>
+                        <SdkTile key={sdk.name}>
                             <StyledAvatar src={formatAssetPath(sdk.icon)} />
                             <SdkTileContent>
                                 <b>{sdk.name}</b>{' '}

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.test.tsx

@@ -3,26 +3,7 @@ import { screen } from '@testing-library/react';
 import { useDefaultColumnVisibility } from './useDefaultColumnVisibility';
 import { render } from 'utils/testRenderer';
 import { ThemeProvider } from 'themes/ThemeProvider';
-import mediaQuery from 'css-mediaquery';
-
-const createMatchMedia = (width: number) => {
-    return (query: string) => {
-        return {
-            matches: mediaQuery.match(query, { width }),
-            media: '',
-            addListener: () => {},
-            removeListener: () => {},
-            onchange: () => {},
-            addEventListener: () => {},
-            removeEventListener: () => {},
-            dispatchEvent: () => true,
-        };
-    };
-};
-
-const resizeScreen = (width: number) => {
-    window.matchMedia = createMatchMedia(width);
-};
+import { resizeScreen } from 'utils/resizeScreen';
 
 const columnIds = [
     'select',

frontend/src/utils/resizeScreen.ts

@@ -0,0 +1,20 @@
+import mediaQuery from 'css-mediaquery';
+
+const createMatchMedia = (width: number) => {
+    return (query: string) => {
+        return {
+            matches: mediaQuery.match(query, { width }),
+            media: '',
+            addListener: () => {},
+            removeListener: () => {},
+            onchange: () => {},
+            addEventListener: () => {},
+            removeEventListener: () => {},
+            dispatchEvent: () => true,
+        };
+    };
+};
+
+export const resizeScreen = (width: number) => {
+    window.matchMedia = createMatchMedia(width);
+};