build: add vue file with test

packages/editor-ui/src/views/Test.vue

@@ -0,0 +1,99 @@
+<template>
+	<div :class="$style.container">
+		<div :class="$style.logoContainer">
+			<Logo />
+		</div>
+		<div v-if="subtitle" :class="$style.textContainer">
+			<n8n-text size="large">{{ subtitle }}</n8n-text>
+		</div>
+		<div :class="$style.formContainer">
+			<n8n-form-box
+				v-bind="form"
+				data-test-id="auth-form"
+				:buttonLoading="formLoading"
+				@secondaryClick="onSecondaryClick"
+				@submit="onSubmit"
+				@input="onInput"
+			>
+				<SSOLogin v-if="withSso" />
+			</n8n-form-box>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import Logo from '@/components/Logo.vue';
+import SSOLogin from '@/components/SSOLogin.vue';
+
+export default defineComponent({
+	name: 'Test',
+	components: {
+		Logo,
+		SSOLogin,
+	},
+	props: {
+		form: {},
+		formLoading: {
+			type: Boolean,
+			default: false,
+		},
+		subtitle: {
+			type: String,
+		},
+		withSso: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		onInput(e: { name: string; value: string }) {
+			this.$emit('input', e);
+		},
+		onSubmit(values: { [key: string]: string }) {
+			this.$emit('submit', values);
+		},
+		onSecondaryClick() {
+			this.$emit('secondaryClick');
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+body {
+	background-color: var(--color-background-light);
+}
+
+.container {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	padding-top: var(--spacing-2xl);
+
+	> * {
+		margin-bottom: var(--spacing-l);
+		width: 352px;
+	}
+}
+
+.logoContainer {
+	display: flex;
+	justify-content: center;
+}
+
+.textContainer {
+	text-align: center;
+}
+
+.formContainer {
+	padding-bottom: var(--spacing-xl);
+}
+</style>
+
+<style lang="scss">
+.el-checkbox__label span {
+	font-size: var(--font-size-2xs) !important;
+}
+</style>

packages/editor-ui/src/views/__tests__/Test.test.ts

@@ -0,0 +1,49 @@
+import { PiniaVuePlugin } from 'pinia';
+import { render } from '@testing-library/vue';
+import { createTestingPinia } from '@pinia/testing';
+import { merge } from 'lodash-es';
+import AuthView from '@/views/Test.vue';
+
+const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
+	render(
+		AuthView,
+		merge(
+			{
+				pinia: createTestingPinia(),
+				stubs: {
+					SSOLogin: {
+						template: '<div data-test-id="sso-login"></div>',
+					},
+				},
+			},
+			renderOptions,
+		),
+		(vue) => {
+			vue.use(PiniaVuePlugin);
+		},
+	);
+
+describe('AuthView', () => {
+	it('should render with subtitle', () => {
+		const { getByText } = renderComponent({
+			props: {
+				subtitle: 'Some text',
+			},
+		});
+		expect(getByText('Some text')).toBeInTheDocument();
+	});
+
+	it('should render without SSO component', () => {
+		const { queryByTestId } = renderComponent();
+		expect(queryByTestId('sso-login')).not.toBeInTheDocument();
+	});
+
+	it('should render with SSO component', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				withSso: true,
+			},
+		});
+		expect(getByTestId('sso-login')).toBeInTheDocument();
+	});
+});