Add E2E tests using Cypress

src/app/components/BtnMenu.tsx

@@ -3,17 +3,18 @@ import type { Octicon } from '.'
 import { Btn } from '.'
 import { useFocus } from '../hooks'
 
-type BtnMenuProps = {
+interface BtnMenuProps extends JSX.HTMLAttributes<HTMLDivElement> {
 	icon?: keyof typeof Octicon,
 	label?: string,
 	relative?: boolean,
 	tooltip?: string,
 	children: ComponentChildren,
 }
-export function BtnMenu({ icon, label, relative, tooltip, children }: BtnMenuProps) {
+export function BtnMenu(props: BtnMenuProps) {
+	const { icon, label, relative, tooltip, children } = props
 	const [active, setActive] = useFocus()
 
-	return <div class={`btn-menu${relative === false ? ' no-relative' : ''}`}>
+	return <div class={`btn-menu${relative === false ? ' no-relative' : ''}`} {...props}>
 		<Btn {...{icon, label, tooltip}} onClick={setActive} />
 		{active && <div class="btn-group">
 			{children}

src/app/components/Header.tsx

@@ -27,9 +27,9 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 
 	return <header>
 		<div class="title">
-			<Link class="home-link" href="/" aria-label={loc('home')}>{Icons.home}</Link>
+			<Link class="home-link" href="/" aria-label={loc('home')} data-cy="home-link">{Icons.home}</Link>
 			<h1>{title}</h1>
-			{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')}>
+			{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')} data-cy="generator-switcher">
 				{config.generators
 					.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))
 					.map(g =>
@@ -39,7 +39,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 		</div>
 		<nav>
 			<ul>
-				<li>
+				<li data-cy="language-switcher">
 					<BtnMenu icon="globe" tooltip={loc('language')}>
 						{config.languages.map(({ code, name }) =>
 							<Btn label={name} active={code === language}
@@ -47,7 +47,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 						)}
 					</BtnMenu>
 				</li>
-				<li>
+				<li data-cy="theme-switcher">
 					<BtnMenu icon={Themes[theme]} tooltip={loc('theme')}>
 						{Object.entries(Themes).map(([th, icon]) =>
 							<Btn icon={icon} label={loc(`theme.${th}`)} active={th === theme}

src/app/components/generator/SourcePanel.tsx

@@ -25,7 +25,7 @@ const FORMATS: Record<string, {
 }> = {
 	json: {
 		parse: json.parse,
-		stringify: (v, i) => json.stringify(v, null, i),
+		stringify: (v, i) => json.stringify(v, null, i) + '\n',
 	},
 	yaml: {
 		parse: yaml.load,
@@ -57,7 +57,7 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 
 	const getOutput = useCallback((model: DataModel, blockStates: BlockStateRegistry) => {
 		const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, { blockStates })
-		return FORMATS[format].stringify(data, INDENT[indent]) + '\n'
+		return FORMATS[format].stringify(data, INDENT[indent])
 	}, [indent, format])
 
 	useEffect(() => {
@@ -136,7 +136,7 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 
 	return <> 
 		<div class="controls">
-			<BtnMenu icon="gear" tooltip={loc('output_settings')}>
+			<BtnMenu icon="gear" tooltip={loc('output_settings')} data-cy="source-controls">
 				{Object.entries(INDENT).map(([key]) =>
 					<Btn label={loc(`indentation.${key}`)} active={indent === key}
 						onClick={() => changeIndent(key)}/>
@@ -147,7 +147,7 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 						onClick={() => changeFormat(key)} />)}
 			</BtnMenu>
 		</div>
-		<textarea ref={source} class="source" onBlur={onImport} spellcheck={false} autocorrect="off" placeholder={loc('source_placeholder')}></textarea>
+		<textarea ref={source} class="source" onBlur={onImport} spellcheck={false} autocorrect="off" placeholder={loc('source_placeholder')} data-cy="import-area"></textarea>
 		<a ref={download} style="display: none;"></a>
 	</>
 }

src/app/components/generator/Tree.tsx

@@ -25,7 +25,7 @@ export function Tree({ lang, version, model, blockStates, onError }: TreePanelPr
 		setState(state => state + 1)
 	})
 
-	return <div class="tree">
+	return <div class="tree" data-cy="tree">
 		<FullNode {...{model, lang, version, blockStates}}/>
 	</div>
 }