90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
TYPES, Input, Click, Location,
|
|
} from 'App/types/session/event';
|
|
import { CodeBlock, CopyButton } from 'UI';
|
|
import { Segmented } from 'antd';
|
|
|
|
interface Props {
|
|
events: Input[] | Click[] | Location[];
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
function UnitStepsModal({ events, width, height }: Props) {
|
|
const [eventStr, setEventStr] = React.useState('');
|
|
const [activeFramework, setActiveFramework] = React.useState('puppeteer');
|
|
|
|
React.useEffect(() => {
|
|
const userEventTypes = [TYPES.LOCATION, TYPES.CLICK, TYPES.INPUT];
|
|
const puppeteerEvents = {
|
|
[TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
|
|
[TYPES.CLICK]: (event: Click) => `await page.locator('${
|
|
event.selector.length ? event.selector : event.label
|
|
}').click()`,
|
|
[TYPES.INPUT]: (event: Input) => `await page.locator('${event.label}').type('Test Input')`,
|
|
screen: () => `await page.setViewport({width: ${width}, height: ${height})`,
|
|
};
|
|
const cypressEvents = {
|
|
[TYPES.LOCATION]: (event: Location) => `cy.visit('${event.url}')`,
|
|
[TYPES.CLICK]: (event: Click) => `cy.get('${
|
|
event.selector.length ? event.selector : event.label
|
|
}').click()`,
|
|
[TYPES.INPUT]: (event: Input) => `cy.get('${event.label}').type('Test Input')`,
|
|
screen: () => `cy.viewport(${width}, ${height})`,
|
|
};
|
|
const playWrightEvents = {
|
|
[TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
|
|
[TYPES.CLICK]: (event: Click) => (event.selector.length
|
|
? `await page.locator('${event.selector}').click()`
|
|
: `await page.getByText('${event.label}').click()`),
|
|
[TYPES.INPUT]: (event: Input) => `await page.getByLabel('${event.label}').fill('Test Input')`,
|
|
screen: () => `await page.setViewport({width: ${width}, height: ${height})`,
|
|
};
|
|
|
|
const collections = {
|
|
puppeteer: puppeteerEvents,
|
|
cypress: cypressEvents,
|
|
playwright: playWrightEvents,
|
|
};
|
|
|
|
// @ts-ignore
|
|
const usedCollection = collections[activeFramework];
|
|
|
|
let finalScript = '';
|
|
events.forEach((ev) => {
|
|
if (userEventTypes.includes(ev.type)) {
|
|
finalScript += usedCollection[ev.type](ev);
|
|
finalScript += '\n';
|
|
}
|
|
});
|
|
setEventStr(finalScript);
|
|
}, [events, activeFramework]);
|
|
|
|
return (
|
|
<div className="bg-white h-full flex flex-col items-start gap-2">
|
|
<div className="flex items-center gap-4">
|
|
<Segmented
|
|
options={[
|
|
{ label: 'Puppeteer', value: 'puppeteer' },
|
|
{ label: 'Cypress', value: 'cypress' },
|
|
{ label: 'Playwright', value: 'playwright' },
|
|
]}
|
|
value={activeFramework}
|
|
onChange={(value) => setActiveFramework(value)}
|
|
/>
|
|
<CopyButton
|
|
size="middle"
|
|
variant="default"
|
|
content={eventStr}
|
|
className="capitalize font-medium text-neutral-400"
|
|
/>
|
|
</div>
|
|
<div className="w-full">
|
|
<CodeBlock code={eventStr} language="javascript" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UnitStepsModal;
|