Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set up a basic puppeteer test

Browse Source
This commit is contained in:
Abi Raja 2024-05-17 16:22:45 -04:00
parent e3a4cfa7ab
commit 72d412fa52
6 changed files with 2350 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/.gitignore vendored
View File

@ -25,3 +25,6 @@ dist-ssr
# Env files
.env*
# QA files
qa/**/*

8
frontend/jest.config.js Normal file
View File

@ -0,0 +1,8 @@
export default {
preset: "ts-jest",
testEnvironment: "node",
transform: {
"^.+\\.tsx?$": "ts-jest",
},
testTimeout: 30000,
};

7
frontend/package.json
View File

@ -10,7 +10,7 @@
"build-hosted": "tsc && vite build --mode prod",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"test": "vitest"
"test": "jest"
},
"dependencies": {
"@codemirror/lang-html": "^6.4.6",
@ -49,7 +49,9 @@
"webm-duration-fix": "^1.0.4"
},
"devDependencies": {
"@types/jest": "^29.5.12",
"@types/node": "^20.9.0",
"@types/puppeteer": "^7.0.4",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
@ -59,8 +61,11 @@
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"jest": "^29.7.0",
"postcss": "^8.4.31",
"puppeteer": "^22.6.4",
"tailwindcss": "^3.3.5",
"ts-jest": "^29.1.2",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vite-plugin-html": "^3.2.0",

275
frontend/src/components/history/utils.test.ts
View File

@ -1,4 +1,3 @@
import { expect, test } from "vitest";
import { extractHistoryTree, renderHistory } from "./utils";
import type { History } from "./history_types";
@ -84,147 +83,149 @@ const basicBadHistory: History = [
},
];
test("should correctly extract the history tree", () => {
expect(extractHistoryTree(basicLinearHistory, 2)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text red",
"<html>3. edit with better icons and red text</html>",
]);
describe("History Utils", () => {
test("should correctly extract the history tree", () => {
expect(extractHistoryTree(basicLinearHistory, 2)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text red",
"<html>3. edit with better icons and red text</html>",
]);
expect(extractHistoryTree(basicLinearHistory, 0)).toEqual([
"<html>1. create</html>",
]);
expect(extractHistoryTree(basicLinearHistory, 0)).toEqual([
"<html>1. create</html>",
]);
// Test branching
expect(extractHistoryTree(basicBranchingHistory, 3)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text green",
"<html>4. edit with better icons and green text</html>",
]);
// Test branching
expect(extractHistoryTree(basicBranchingHistory, 3)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text green",
"<html>4. edit with better icons and green text</html>",
]);
expect(extractHistoryTree(longerBranchingHistory, 4)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text green",
"<html>4. edit with better icons and green text</html>",
"make text bold",
"<html>5. edit with better icons and green, bold text</html>",
]);
expect(extractHistoryTree(longerBranchingHistory, 4)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text green",
"<html>4. edit with better icons and green text</html>",
"make text bold",
"<html>5. edit with better icons and green, bold text</html>",
]);
expect(extractHistoryTree(longerBranchingHistory, 2)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text red",
"<html>3. edit with better icons and red text</html>",
]);
expect(extractHistoryTree(longerBranchingHistory, 2)).toEqual([
"<html>1. create</html>",
"use better icons",
"<html>2. edit with better icons</html>",
"make text red",
"<html>3. edit with better icons and red text</html>",
]);
// Errors
// Errors
// Bad index
expect(() => extractHistoryTree(basicLinearHistory, 100)).toThrow();
expect(() => extractHistoryTree(basicLinearHistory, -2)).toThrow();
// Bad index
expect(() => extractHistoryTree(basicLinearHistory, 100)).toThrow();
expect(() => extractHistoryTree(basicLinearHistory, -2)).toThrow();
// Bad tree
expect(() => extractHistoryTree(basicBadHistory, 1)).toThrow();
});
test("should correctly render the history tree", () => {
expect(renderHistory(basicLinearHistory, 2)).toEqual([
{
isActive: false,
parentVersion: null,
summary: "Create",
type: "Create",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: true,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
]);
// Current version is the first version
expect(renderHistory(basicLinearHistory, 0)).toEqual([
{
isActive: true,
parentVersion: null,
summary: "Create",
type: "Create",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: false,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
]);
// Render a history with code
expect(renderHistory(basicLinearHistoryWithCode, 0)).toEqual([
{
isActive: true,
parentVersion: null,
summary: "Imported from code",
type: "Imported from code",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: false,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
]);
// Render a non-linear history
expect(renderHistory(basicBranchingHistory, 3)).toEqual([
{
isActive: false,
parentVersion: null,
summary: "Create",
type: "Create",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: false,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
{
isActive: true,
parentVersion: "v2",
summary: "make text green",
type: "Edit",
},
]);
// Bad tree
expect(() => extractHistoryTree(basicBadHistory, 1)).toThrow();
});
test("should correctly render the history tree", () => {
expect(renderHistory(basicLinearHistory, 2)).toEqual([
{
isActive: false,
parentVersion: null,
summary: "Create",
type: "Create",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: true,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
]);
// Current version is the first version
expect(renderHistory(basicLinearHistory, 0)).toEqual([
{
isActive: true,
parentVersion: null,
summary: "Create",
type: "Create",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: false,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
]);
// Render a history with code
expect(renderHistory(basicLinearHistoryWithCode, 0)).toEqual([
{
isActive: true,
parentVersion: null,
summary: "Imported from code",
type: "Imported from code",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: false,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
]);
// Render a non-linear history
expect(renderHistory(basicBranchingHistory, 3)).toEqual([
{
isActive: false,
parentVersion: null,
summary: "Create",
type: "Create",
},
{
isActive: false,
parentVersion: null,
summary: "use better icons",
type: "Edit",
},
{
isActive: false,
parentVersion: null,
summary: "make text red",
type: "Edit",
},
{
isActive: true,
parentVersion: "v2",
summary: "make text green",
type: "Edit",
},
]);
});
});

95
frontend/src/tests/qa.test.ts Normal file
View File

@ -0,0 +1,95 @@
import puppeteer, { Browser, Page, ElementHandle } from "puppeteer";
import { Stack } from "../lib/stacks";
const REPO_PATH = "/Users/abi/Documents/GitHub/screenshot-to-code/frontend";
const DOWNLOAD_PATH = `${REPO_PATH}/qa`;
const SCREENSHOTS_PATH = `${REPO_PATH}/qa/results`;
const IMAGE_PATH = DOWNLOAD_PATH + "/ui_table.png";
describe("Simple Puppeteer Test", () => {
let browser: Browser;
let page: Page;
beforeAll(async () => {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
await page.goto("http://localhost:5173/");
// Set screen size
await page.setViewport({ width: 1080, height: 1024 });
// TODO: Does this need to be moved?
const client = await page.createCDPSession();
// Set download behavior path
await client.send("Page.setDownloadBehavior", {
behavior: "allow",
downloadPath: DOWNLOAD_PATH,
});
});
afterAll(async () => {
await browser.close();
});
const stacks = Object.values(Stack).slice(0, 1);
stacks.forEach((stack) => {
it(`should load the homepage and check the title for stack: ${stack}`, async () => {
const codeGenerationModel = "claude_3_sonnet";
// Set up local storage
const setting = {
openAiApiKey: null,
openAiBaseURL: null,
screenshotOneApiKey: null,
isImageGenerationEnabled: false,
editorTheme: "cobalt",
generatedCodeConfig: stack,
codeGenerationModel: codeGenerationModel,
isTermOfServiceAccepted: false,
accessCode: null,
};
await page.evaluate((setting) => {
localStorage.setItem("setting", JSON.stringify(setting));
}, setting);
// Reload the page to apply the local storage
await page.reload();
// Generate from image
const fileInput = (await page.$(
".file-input"
)) as ElementHandle<HTMLInputElement>;
// Replace with the path to your image
const imagePath = IMAGE_PATH;
if (!fileInput) {
throw new Error("File input element not found");
}
// Upload file
await fileInput.uploadFile(imagePath);
// Screenshot of the uploaded image
await page.screenshot({
path: `${SCREENSHOTS_PATH}/${codeGenerationModel}_${stack}_image_uploaded.png`,
});
console.log("starting image code generation for stack: ", stack);
// Click the generate button and wait for the code to be generated
await page.waitForNetworkIdle();
await page.waitForFunction(() => document.body.innerText.includes("v1"), {
timeout: 30000,
});
await page.screenshot({
path: `${SCREENSHOTS_PATH}/${codeGenerationModel}_${stack}_image_generation_results.png`,
});
console.log(`done with image code generation for stack: ${stack}`);
});
});
});

2120
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff