set up a basic puppeteer test
This commit is contained in:
Abi Raja
parent
e3a4cfa7ab
commit
72d412fa52
3
frontend/.gitignore
vendored
3
frontend/.gitignore
vendored
@ -25,3 +25,6 @@ dist-ssr
|
|||||||
|
|
||||||
# Env files
|
# Env files
|
||||||
.env*
|
.env*
|
||||||
|
|
||||||
|
# QA files
|
||||||
|
qa/**/*
|
||||||
|
|||||||
8
frontend/jest.config.js
Normal file
8
frontend/jest.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
preset: "ts-jest",
|
||||||
|
testEnvironment: "node",
|
||||||
|
transform: {
|
||||||
|
"^.+\\.tsx?$": "ts-jest",
|
||||||
|
},
|
||||||
|
testTimeout: 30000,
|
||||||
|
};
|
||||||
@ -10,7 +10,7 @@
|
|||||||
"build-hosted": "tsc && vite build --mode prod",
|
"build-hosted": "tsc && vite build --mode prod",
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"test": "vitest"
|
"test": "jest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/lang-html": "^6.4.6",
|
"@codemirror/lang-html": "^6.4.6",
|
||||||
@ -49,7 +49,9 @@
|
|||||||
"webm-duration-fix": "^1.0.4"
|
"webm-duration-fix": "^1.0.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@types/jest": "^29.5.12",
|
||||||
"@types/node": "^20.9.0",
|
"@types/node": "^20.9.0",
|
||||||
|
"@types/puppeteer": "^7.0.4",
|
||||||
"@types/react": "^18.2.15",
|
"@types/react": "^18.2.15",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@types/react-dom": "^18.2.7",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||||
@ -59,8 +61,11 @@
|
|||||||
"eslint": "^8.45.0",
|
"eslint": "^8.45.0",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.3",
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"jest": "^29.7.0",
|
||||||
"postcss": "^8.4.31",
|
"postcss": "^8.4.31",
|
||||||
|
"puppeteer": "^22.6.4",
|
||||||
"tailwindcss": "^3.3.5",
|
"tailwindcss": "^3.3.5",
|
||||||
|
"ts-jest": "^29.1.2",
|
||||||
"typescript": "^5.0.2",
|
"typescript": "^5.0.2",
|
||||||
"vite": "^4.4.5",
|
"vite": "^4.4.5",
|
||||||
"vite-plugin-html": "^3.2.0",
|
"vite-plugin-html": "^3.2.0",
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import { expect, test } from "vitest";
|
|
||||||
import { extractHistoryTree, renderHistory } from "./utils";
|
import { extractHistoryTree, renderHistory } from "./utils";
|
||||||
import type { History } from "./history_types";
|
import type { History } from "./history_types";
|
||||||
|
|
||||||
@ -84,6 +83,7 @@ const basicBadHistory: History = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
describe("History Utils", () => {
|
||||||
test("should correctly extract the history tree", () => {
|
test("should correctly extract the history tree", () => {
|
||||||
expect(extractHistoryTree(basicLinearHistory, 2)).toEqual([
|
expect(extractHistoryTree(basicLinearHistory, 2)).toEqual([
|
||||||
"<html>1. create</html>",
|
"<html>1. create</html>",
|
||||||
@ -228,3 +228,4 @@ test("should correctly render the history tree", () => {
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|||||||
95
frontend/src/tests/qa.test.ts
Normal file
95
frontend/src/tests/qa.test.ts
Normal 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
2120
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user