test: add e2e suite for change password and language selector

This commit is contained in:
Nicolas Meienberger 2023-06-04 21:42:34 +02:00 committed by Nicolas Meienberger
parent 70b6c20b29
commit 3937efe025
3 changed files with 51 additions and 4 deletions

View file

@ -0,0 +1,47 @@
import { test, expect } from '@playwright/test';
import { eq } from 'drizzle-orm';
import { userTable } from '@/server/db/schema';
import { loginUser } from './fixtures/fixtures';
import { clearDatabase, db } from './helpers/db';
import { testUser } from './helpers/constants';
test.beforeEach(async ({ page }) => {
await clearDatabase();
await loginUser(page);
await page.goto('/settings');
});
test('user can change their password', async ({ page }) => {
// Change password
await page.getByRole('tab', { name: 'Security' }).click();
await page.getByPlaceholder('Current password').click();
await page.getByPlaceholder('Current password').fill(testUser.password);
await page.getByPlaceholder('New password', { exact: true }).click();
await page.getByPlaceholder('New password', { exact: true }).fill('password2');
await page.getByPlaceholder('Confirm new password').click();
await page.getByPlaceholder('Confirm new password').fill('password2');
await page.getByRole('button', { name: 'Change password' }).click();
await expect(page.getByText('Password changed successfully')).toBeVisible();
// Login with new password
await page.getByPlaceholder('you@example.com').fill(testUser.email);
await page.getByPlaceholder('Your password').fill('password2');
await page.getByRole('button', { name: 'Login' }).click();
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});
test('user can change their language and it is persisted in database', async ({ page }) => {
await page.getByRole('tab', { name: 'Settings' }).click();
await page.getByRole('combobox', { name: 'Language Help translate Tipi' }).click();
await page.getByRole('option', { name: 'Français' }).click();
await expect(page.getByText('Paramètres utilisateur')).toBeVisible();
const dbUser = await db.query.userTable.findFirst({ where: eq(userTable.username, testUser.email) });
expect(dbUser?.locale).toEqual('fr-FR');
});

View file

@ -22,6 +22,7 @@ export const LanguageSelector = (props: IProps) => {
<Select value={locale} defaultValue={locale} onValueChange={onChange}>
<SelectTrigger
className="mb-3"
name="language"
label={
showLabel && (
<span>
@ -34,7 +35,7 @@ export const LanguageSelector = (props: IProps) => {
)
}
>
<SelectValue placeholder="test" />
<SelectValue placeholder="Language" />
</SelectTrigger>
<SelectContent>
{LOCALE_OPTIONS.map((option) => (

View file

@ -19,7 +19,7 @@ const SelectValue = SelectPrimitive.Value;
// Button
const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & TriggerProps>(
({ className, error, label, children, ...props }, ref) => (
<label htmlFor={props.name} aria-labelledby={props.name} className={clsx('w-100', className)}>
<label htmlFor={props.name} className={clsx('w-100', className)}>
{Boolean(label) && (
<span id={props.name} className="form-label">
{label}
@ -27,8 +27,7 @@ const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.T
)}
<SelectPrimitive.Trigger
id={props.name}
aria-label={props.name}
name={props.name}
aria-labelledby={props.name}
ref={ref}
className={clsx('d-flex w-100 align-items-center justify-content-between form-select', { 'is-invalid is-invalid-lite': error })}
{...props}