96 lines
3.2 KiB
TypeScript
96 lines
3.2 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;
|