mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-04 09:13:08 +00:00
Implement initial project structure and features for Automaker application, including environment setup, auto mode services, and session management. Update port configurations to 3007 and add new UI components for enhanced user interaction.
This commit is contained in:
Cody Seibert
299
app/tests/gemini-integration.spec.ts
Normal file
299
app/tests/gemini-integration.spec.ts
Normal file
@@ -0,0 +1,299 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("Gemini SDK Integration", () => {
|
||||
test.describe("Step 1: Configure Gemini API Key", () => {
|
||||
test("can navigate to settings and see Gemini API key input", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
|
||||
// Navigate to settings
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Verify settings view is displayed
|
||||
await expect(page.getByTestId("settings-view")).toBeVisible();
|
||||
|
||||
// Verify Google/Gemini API key input exists
|
||||
await expect(page.getByTestId("google-api-key-input")).toBeVisible();
|
||||
await expect(
|
||||
page.getByText("Google API Key (Gemini)", { exact: true })
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("can enter and save Gemini API key", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Enter a test API key
|
||||
const testApiKey = "AIzaSyTestKey123456";
|
||||
await page.getByTestId("google-api-key-input").fill(testApiKey);
|
||||
|
||||
// Save the settings
|
||||
await page.getByTestId("save-settings").click();
|
||||
|
||||
// Verify saved confirmation
|
||||
await expect(page.getByText("Saved!")).toBeVisible();
|
||||
|
||||
// Reload and verify persistence
|
||||
await page.reload();
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Toggle visibility to check the value
|
||||
await page.getByTestId("toggle-google-visibility").click();
|
||||
await expect(page.getByTestId("google-api-key-input")).toHaveValue(
|
||||
testApiKey
|
||||
);
|
||||
});
|
||||
|
||||
test("Gemini API key input is password type by default for security", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Verify password type for security
|
||||
await expect(page.getByTestId("google-api-key-input")).toHaveAttribute(
|
||||
"type",
|
||||
"password"
|
||||
);
|
||||
});
|
||||
|
||||
test("can toggle Gemini API key visibility", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Initially password type
|
||||
await expect(page.getByTestId("google-api-key-input")).toHaveAttribute(
|
||||
"type",
|
||||
"password"
|
||||
);
|
||||
|
||||
// Toggle to show
|
||||
await page.getByTestId("toggle-google-visibility").click();
|
||||
await expect(page.getByTestId("google-api-key-input")).toHaveAttribute(
|
||||
"type",
|
||||
"text"
|
||||
);
|
||||
|
||||
// Toggle back to hide
|
||||
await page.getByTestId("toggle-google-visibility").click();
|
||||
await expect(page.getByTestId("google-api-key-input")).toHaveAttribute(
|
||||
"type",
|
||||
"password"
|
||||
);
|
||||
});
|
||||
|
||||
test("shows checkmark icon when API key is configured", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Enter API key
|
||||
await page.getByTestId("google-api-key-input").fill("AIzaSyTest123");
|
||||
await page.getByTestId("save-settings").click();
|
||||
|
||||
// Reload to trigger the checkmark display
|
||||
await page.reload();
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// The checkmark icon should be visible next to the label
|
||||
// Find the label container and verify checkmark is present
|
||||
const labelContainer = page.locator(".flex.items-center.gap-2").filter({
|
||||
hasText: "Google API Key (Gemini)",
|
||||
});
|
||||
await expect(
|
||||
labelContainer.locator('svg[class*="text-green-500"]')
|
||||
).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Step 2: Send image/design prompt", () => {
|
||||
test("test connection button exists for Gemini", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Verify test connection button exists
|
||||
await expect(page.getByTestId("test-gemini-connection")).toBeVisible();
|
||||
});
|
||||
|
||||
test("test connection button is disabled without API key", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Clear any existing API key
|
||||
await page.getByTestId("google-api-key-input").clear();
|
||||
|
||||
// Verify button is disabled
|
||||
await expect(page.getByTestId("test-gemini-connection")).toBeDisabled();
|
||||
});
|
||||
|
||||
test("test connection button is enabled with API key", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Enter API key
|
||||
await page.getByTestId("google-api-key-input").fill("AIzaSyTestKey123");
|
||||
|
||||
// Verify button is enabled
|
||||
await expect(page.getByTestId("test-gemini-connection")).toBeEnabled();
|
||||
});
|
||||
|
||||
test("clicking test connection shows loading state", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Enter API key
|
||||
await page.getByTestId("google-api-key-input").fill("AIzaSyInvalidKey");
|
||||
|
||||
// Click test connection
|
||||
await page.getByTestId("test-gemini-connection").click();
|
||||
|
||||
// Should show loading state (Testing...)
|
||||
await expect(page.getByText("Testing...")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Step 3: Verify response received", () => {
|
||||
test("shows error message for invalid API key", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Enter an invalid API key
|
||||
await page.getByTestId("google-api-key-input").fill("invalid-key-123");
|
||||
|
||||
// Click test connection
|
||||
await page.getByTestId("test-gemini-connection").click();
|
||||
|
||||
// Wait for result (should show error)
|
||||
await expect(
|
||||
page.getByTestId("gemini-test-connection-result")
|
||||
).toBeVisible({ timeout: 15000 });
|
||||
|
||||
// The result should indicate an error (red styling or error message)
|
||||
const resultElement = page.getByTestId("gemini-test-connection-result");
|
||||
await expect(resultElement).toBeVisible();
|
||||
});
|
||||
|
||||
test("Gemini API endpoint exists and responds", async ({ request }) => {
|
||||
// Test the API endpoint directly
|
||||
const response = await request.post("/api/gemini/test", {
|
||||
data: {
|
||||
apiKey: "test-invalid-key",
|
||||
},
|
||||
});
|
||||
|
||||
// Should return a response (even if error)
|
||||
expect(response.status()).toBeLessThanOrEqual(500);
|
||||
|
||||
const data = await response.json();
|
||||
// Should have success or error property
|
||||
expect(data).toHaveProperty("success");
|
||||
expect(typeof data.success).toBe("boolean");
|
||||
});
|
||||
|
||||
test("Gemini API endpoint handles missing API key", async ({ request }) => {
|
||||
// Test the API endpoint without API key
|
||||
const response = await request.post("/api/gemini/test", {
|
||||
data: {},
|
||||
});
|
||||
|
||||
// Should return 400 for missing API key
|
||||
expect(response.status()).toBe(400);
|
||||
|
||||
const data = await response.json();
|
||||
expect(data.success).toBe(false);
|
||||
expect(data.error).toContain("No API key");
|
||||
});
|
||||
|
||||
test("Gemini API endpoint handles image data structure", async ({
|
||||
request,
|
||||
}) => {
|
||||
// Test that the API can accept image data format
|
||||
const response = await request.post("/api/gemini/test", {
|
||||
data: {
|
||||
apiKey: "test-key",
|
||||
imageData: "iVBORw0KGgoAAAANSUhEUg==", // Minimal base64
|
||||
mimeType: "image/png",
|
||||
prompt: "Describe this image",
|
||||
},
|
||||
});
|
||||
|
||||
// Should process the request (even if API key is invalid)
|
||||
expect(response.status()).toBeLessThanOrEqual(500);
|
||||
|
||||
const data = await response.json();
|
||||
expect(data).toHaveProperty("success");
|
||||
});
|
||||
|
||||
test("result message displays in UI after test", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Enter API key
|
||||
await page.getByTestId("google-api-key-input").fill("test-api-key-123");
|
||||
|
||||
// Click test connection
|
||||
await page.getByTestId("test-gemini-connection").click();
|
||||
|
||||
// Wait for result message to appear
|
||||
await expect(
|
||||
page.getByTestId("gemini-test-connection-message")
|
||||
).toBeVisible({ timeout: 15000 });
|
||||
});
|
||||
|
||||
test("shows link to Google AI Studio for API key", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.getByTestId("settings-button").click();
|
||||
|
||||
// Should show link to get API key
|
||||
const link = page.locator('a[href*="makersuite.google.com"]');
|
||||
await expect(link).toBeVisible();
|
||||
await expect(link).toHaveAttribute("target", "_blank");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Gemini API Route Tests", () => {
|
||||
test("API route supports text-only prompts", async ({ request }) => {
|
||||
const response = await request.post("/api/gemini/test", {
|
||||
data: {
|
||||
apiKey: "test-key",
|
||||
prompt: "Hello, this is a test prompt",
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
// Should process without crashing (actual API key validation happens remotely)
|
||||
expect(data).toHaveProperty("success");
|
||||
});
|
||||
|
||||
test("API route supports custom prompts with images", async ({
|
||||
request,
|
||||
}) => {
|
||||
const response = await request.post("/api/gemini/test", {
|
||||
data: {
|
||||
apiKey: "test-key",
|
||||
imageData: "base64encodeddata",
|
||||
mimeType: "image/jpeg",
|
||||
prompt: "What design patterns do you see in this UI mockup?",
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
expect(data).toHaveProperty("success");
|
||||
});
|
||||
|
||||
test("API route returns proper error structure", async ({ request }) => {
|
||||
const response = await request.post("/api/gemini/test", {
|
||||
data: {},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
expect(data).toHaveProperty("success");
|
||||
expect(data).toHaveProperty("error");
|
||||
expect(typeof data.error).toBe("string");
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user