Skip to content

Commit

Permalink
Refactored code
Browse files Browse the repository at this point in the history
  • Loading branch information
VampireAotD committed Nov 12, 2023
1 parent 8d22780 commit 879cfaf
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 53 deletions.
2 changes: 1 addition & 1 deletion src/resources/js/Components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const year = computed(() => {

<template>
<footer
class="border-t-2 border-gray-300 dark:border-red-500 bg-white shadow dark:bg-gray-800"
class="mt-auto border-t-2 border-gray-300 dark:border-red-500 bg-white shadow dark:bg-gray-800"
>
<div
class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between"
Expand Down
2 changes: 1 addition & 1 deletion src/resources/js/Layouts/AuthenticatedLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const showingNavigationDropdown = ref(false);

<template>
<div>
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900">
<nav
class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700"
>
Expand Down
54 changes: 5 additions & 49 deletions src/resources/js/Pages/Invitation/Create.vue
Original file line number Diff line number Diff line change
@@ -1,63 +1,19 @@
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { Head } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import InputError from '@/Components/InputError.vue';
import TextInput from '@/Components/TextInput.vue';
const form = useForm({
email: '',
});
const submit = () => {
form.post(route('invitation.send'), {
onSuccess: () => {
form.reset();
},
});
};
import InvitationForm from '@/Pages/Invitation/Partials/InvitationForm.vue';
</script>

<template>
<AuthenticatedLayout>
<Head title="Create invitation to Anilibrary" />

<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="py-12 sm:pt-12">
<div class="max-w-7xl mx-auto sm:px-8 lg:px-24">
<div
class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
>
<form
class="p-6 text-gray-900 dark:text-gray-100"
@submit.prevent="submit"
>
<div>
<InputLabel for="email" value="Email" />

<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
required
autofocus
autocomplete="email"
/>

<InputError class="mt-2" :message="form.errors.email" />
</div>

<div class="flex justify-end mt-4">
<PrimaryButton
class="ml-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
>
Send invitation
</PrimaryButton>
</div>
</form>
<InvitationForm />
</div>
</div>
</div>
Expand Down
51 changes: 51 additions & 0 deletions src/resources/js/Pages/Invitation/Partials/InvitationForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script setup lang="ts">
import PrimaryButton from '@/Components/PrimaryButton.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import { useForm } from '@inertiajs/vue3';
const form = useForm({
email: '',
});
const submit = () => {
form.post(route('invitation.send'), {
onSuccess: () => {
form.reset();
},
});
};
</script>

<template>
<form class="p-6 text-gray-900 dark:text-gray-100" @submit.prevent="submit">
<div>
<InputLabel for="email" value="Email" />

<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
required
autofocus
autocomplete="email"
/>

<InputError class="mt-2" :message="form.errors.email" />
</div>

<div class="flex justify-end mt-4">
<PrimaryButton
class="ml-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
>
Send invitation
</PrimaryButton>
</div>
</form>
</template>

<style scoped></style>
22 changes: 22 additions & 0 deletions src/resources/js/tests/Components/Footer.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import Footer from '@/Components/Footer.vue';

describe('Footer test (Footer.vue)', () => {
it('Renders correctly', () => {
const wrapper = mount(Footer, {
global: {
mocks: {
route: vitest.fn().mockReturnValue('dashboard'),
},
},
});

expect(wrapper.exists()).toBeTruthy();
expect(wrapper.find('footer').exists()).toBeTruthy();

const dashboardLink = wrapper.findComponent({ name: 'Link' });
expect(dashboardLink.exists()).toBeTruthy();
expect(dashboardLink.text()).toContain('Anilibrary');
});
});
5 changes: 3 additions & 2 deletions src/resources/js/tests/Components/TelegramLoginWidget.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {

it('Creates login widget with redirect props', async () => {
const url = '/redirect-url';

global.route = vitest.fn().mockReturnValue(url);

const wrapper = mount(TelegramLoginWidget, {
Expand All @@ -51,9 +50,10 @@ describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {

const script = div.querySelector('script');
expect(script!.getAttribute('data-auth-url')).toBe(url);
expect(script!.hasAttribute('data-onauth')).toBeFalsy();
});

it('Calls the callback on authentication', async () => {
it('Creates login widget with callback props', async () => {
const callbackMock = vitest.fn();
window.onTelegramAuth = callbackMock;

Expand All @@ -70,5 +70,6 @@ describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {

const script = div.querySelector('script');
expect(script!.getAttribute('data-onauth')).toBe('onTelegramAuth(user)');
expect(script!.hasAttribute('data-auth-url')).toBeFalsy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { mount } from '@vue/test-utils';
import InvitationForm from '@/Pages/Invitation/Partials/InvitationForm.vue';
import { describe, expect, it, vitest } from 'vitest';

describe('InvitationForm test (InvitationForm.vue)', () => {
it('Renders correctly', () => {
const wrapper = mount(InvitationForm);

expect(wrapper.find('form').exists()).toBeTruthy();
expect(wrapper.find('label').exists()).toBeTruthy();
expect(wrapper.find('input').exists()).toBeTruthy();
expect(wrapper.find('button').exists()).toBeTruthy();
});

it('Creates invitation', async () => {
global.route = vitest.fn();
const wrapper = mount(InvitationForm);

wrapper.vm.form.post = vitest.fn();
wrapper.vm.form.reset = vitest.fn();
wrapper.vm.form.email = 'test@example.com';
await wrapper.find('form').trigger('submit.prevent');

expect(wrapper.vm.form.post).toHaveBeenCalled();
});

it('Disables button during form processing', async () => {
const wrapper = mount(InvitationForm);

wrapper.vm.form.processing = true;
await wrapper.vm.$nextTick();

expect(wrapper.find('button').element.disabled).toBeTruthy();
});
});

0 comments on commit 879cfaf

Please sign in to comment.