import { render, fireEvent, createEvent } from '@testing-library/svelte';
import { get, writable } from 'svelte/store';
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
import Members from '../components/rooms/Members.svelte';
import ContextTest from './ContextTest.svelte';
import InputChallenge from '../components/rooms/InputChallenge.svelte';
import Stats from '../components/rooms/Stats.svelte';
import html from 'svelte-htm';
import Classement from 'src/components/rooms/Classement.svelte';
import Challenge from 'src/components/rooms/Challenge.svelte';
import ChallengesList from 'src/components/rooms/ChallengesList.svelte';
import ExerciceSelector from 'src/components/exos/ExerciceSelector.svelte';
import ExoList from 'src/components/exos/ExoList.svelte';
import RoomHead from 'src/components/rooms/RoomHead.svelte';
import ParcoursList from 'src/components/rooms/ParcoursList.svelte';
const ws = { key: 'ws', value: { send: () => {} } };
const m1 = {
	username: 'test1',
	reconnect_code: '',
	isUser: true,
	id_code: 'test',
	isAdmin: true,
	online: true,
	clientId: 'test'
};
const m3 = {
	username: 'test3',
	reconnect_code: 'reconnect3',
	isUser: false,
	id_code: 'test3',
	isAdmin: false,
	online: true,
	clientId: 'test3'
};
const m2 = {
	username: 'test2',
	reconnect_code: 'reconnect2',
	isUser: false,
	id_code: 'test2',
	isAdmin: false,
	online: false,
	clientId: 'test2'
};

const w1 = { waiter_id: 'waiter1', username: 'waiter' };

describe('Participants', () => {
	test('Status', () => {
		const room = render(ContextTest, {
			props: {
				component: Members,
				contexts: [
					{
						key: 'room',
						value: writable({
							public: true,
							members: [m1, m2, m3, w1]
						})
					},
					{
						key: 'member',
						value: writable(m3)
					},
					ws
				],
				props: {}
			}
		});

		room.getByText('En ligne :');
		room.getByText('Hors-ligne :');

		const test1 = room.getByText('test1');
		const test2 = room.getByText('test2');
		const test3 = room.getByText('test3');

		const admin = room.getByText('Administrateur');

		expect(test1.classList.contains('online')).toBeTruthy();
		expect(test1.classList.contains('offline')).toBeFalsy();
		expect(test1.classList.contains('admin')).toBeTruthy();
		expect(test1.classList.contains('member')).toBeFalsy();
		expect(test1.contains(admin)).toBeTruthy();
		expect(test1.classList.contains('bannable')).toBeFalsy();

		expect(test2.classList.contains('offline')).toBeTruthy();
		expect(test2.classList.contains('online')).toBeFalsy();
		expect(test2.classList.contains('admin')).toBeFalsy();
		expect(test2.classList.contains('member')).toBeFalsy();
		expect(test2.classList.contains('bannable')).toBeFalsy();

		expect(test3.classList.contains('online')).toBeTruthy();
		expect(test3.classList.contains('offline')).toBeFalsy();
		expect(test3.classList.contains('member')).toBeTruthy();
		expect(test3.classList.contains('admin')).toBeFalsy();
		expect(test3.classList.contains('bannable')).toBeFalsy();

		expect(room.queryByText("Liste d'attente :")).toBeNull();
		expect(room.queryByText('waiter')).toBeNull();

		room.getByText('#reconnect3');
		expect(room.queryByText('#reconnect2')).toBeNull();
		expect(room.queryByText('#', { exact: true })).toBeNull();
	});

	test('No online', () => {
		const room = render(ContextTest, {
			props: {
				component: Members,
				contexts: [
					{
						key: 'room',
						value: writable({
							public: true,
							members: [m1, m3]
						})
					},
					{
						key: 'member',
						value: writable(m3)
					},
					ws
				],
				props: {}
			}
		});

		expect(room.queryByText('Hors-ligne :')).toBeNull();
	});

	test('Admin', () => {
		const room = render(ContextTest, {
			props: {
				component: Members,
				contexts: [
					{
						key: 'room',
						value: writable({
							public: true,
							members: [m1, m2, m3, w1]
						})
					},
					{
						key: 'member',
						value: writable(m1)
					},
					ws
				],
				props: {}
			}
		});

		const test1 = room.getByText('test1');
		const test2 = room.getByText('test2');
		const test3 = room.getByText('test3');

		expect(test1.classList.contains('bannable')).toBeFalsy();
		expect(test2.classList.contains('bannable')).toBeTruthy();
		expect(test3.classList.contains('bannable')).toBeTruthy();

		room.getByText('#reconnect2');
		room.getByText('#reconnect3');
		room.getByTestId('visibilityChange');

		room.getByText("Liste d'attente :");
		const waiter1 = room.getByText('waiter');
		room.getByText('#waiter1');
		expect(waiter1.querySelector('.accept')).not.toBeNull();
		expect(waiter1.querySelector('.refuse')).not.toBeNull();
	});

	test('not admin', () => {
		const room = render(ContextTest, {
			props: {
				component: Members,
				contexts: [
					{
						key: 'room',
						value: writable({
							public: true,
							members: [m1, m2, m3, w1]
						})
					},
					{
						key: 'member',
						value: writable(m3)
					},
					ws
				],
				props: {}
			}
		});

		const test1 = room.getByText('test1');
		const test2 = room.getByText('test2');
		const test3 = room.getByText('test3');

		expect(test1.classList.contains('bannable')).toBeFalsy();
		expect(test2.classList.contains('bannable')).toBeFalsy();
		expect(test3.classList.contains('bannable')).toBeFalsy();

		expect(room.queryByText('#reconnect2')).toBeNull();

		room.getByText('#reconnect3');
		expect(room.queryByTestId('visibilityChange')).toBeNull();

		expect(room.queryByText("Liste d'attente :")).toBeNull();
		expect(room.queryByText('waiter')).toBeNull();
	});

	test('ChangeVisibility', async () => {
		const roomStore = writable({
			public: true,
			members: [m1, m2, m3, w1]
		});

		const room = render(ContextTest, {
			props: {
				component: Members,
				contexts: [
					{
						key: 'room',
						value: roomStore
					},
					{
						key: 'member',
						value: writable(m1)
					},
					{
						key: 'ws',
						value: {
							send: (t, d) => {

								if (t === 'set_visibility') {
									roomStore.update((r) => {
										r.public = d.public;
										return r;
									});
								}
							}
						}
					}
				],
				props: {}
			}
		});

		room.getByText('#reconnect2');
		room.getByText('#reconnect3');
		const visibilityChange = room.getByTestId('visibilityChange');
		room.getByTestId('public');
		expect(room.queryByTestId('private')).toBeNull();
		expect(visibilityChange.classList.contains('public')).toBeTruthy();
		expect(visibilityChange.classList.contains('private')).toBeFalsy();

		await fireEvent.click(visibilityChange);
		room.getByTestId('private');
		expect(room.queryByTestId('public')).toBeNull();
		expect(visibilityChange.classList.contains('public')).toBeFalsy();
		expect(visibilityChange.classList.contains('private')).toBeTruthy();

		await fireEvent.click(visibilityChange);
		room.getByTestId('public');
		expect(room.queryByTestId('private')).toBeNull();
		expect(visibilityChange.classList.contains('public')).toBeTruthy();
		expect(visibilityChange.classList.contains('private')).toBeFalsy();
	});
});

describe('Input challenge', () => {
	beforeEach(() => {
		vi.useFakeTimers();
	});
	afterEach(() => {
		vi.useRealTimers();
	});
	test('Challenging', async () => {
		const input = render(InputChallenge, {
			props: {
				correction: null,
				value: '',
				corrigeable: false,
				corriged: false
			}
		});

		const inputElement = input.container.querySelector('span.input');

		const hiddenInput = input.getByTestId('hiddenInput');

		expect(inputElement?.getAttribute('contenteditable')).toBe('true');

		expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
		expect(hiddenInput.classList.contains('close')).toBeTruthy();
		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');
		await fireEvent.click(inputElement);
		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');

		expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
		expect(hiddenInput.classList.contains('close')).toBeTruthy();
	});

	test('Open', async () => {
		const input = render(InputChallenge, {
			props: {
				correction: 'test',
				value: 'test',
				corrigeable: true,
				corriged: true,
				valid: true
			}
		});

		const inputElement = input.container.querySelector('span.input');

		const hiddenInput = input.getByTestId('hiddenInput');

		expect(inputElement?.getAttribute('contenteditable')).toBe('false');

		expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
		expect(hiddenInput.classList.contains('close')).toBeTruthy();
		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');
		await fireEvent.click(inputElement);
		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('flex');

		expect(hiddenInput.classList.contains('hidden')).toBeFalsy();
		expect(hiddenInput.classList.contains('close')).toBeFalsy();

		const corrInput = input.container.querySelector('input');
		expect(corrInput.value).toBe('test');
		expect(document.activeElement).toBe(corrInput);
	});

	test('close', async () => {
		const input = render(InputChallenge, {
			props: {
				correction: 'test',
				value: 'test',
				corrigeable: true,
				corriged: true,
				valid: true
			}
		});

		const inputElement = input.container.querySelector('span.input');

		const hiddenInput = input.getByTestId('hiddenInput');

		expect(inputElement?.getAttribute('contenteditable')).toBe('false');

		expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
		expect(hiddenInput.classList.contains('close')).toBeTruthy();
		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');

		await fireEvent.click(inputElement);
		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('flex');

		expect(hiddenInput.classList.contains('hidden')).toBeFalsy();
		expect(hiddenInput.classList.contains('close')).toBeFalsy();

		const test = document.createElement('div');
		document.body.appendChild(test);
		//await fireEvent.focusOut(hiddenInput, { relatedTarget: test });
		await fireEvent.click(inputElement);
		setTimeout(async () => {
			expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');
			expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
			expect(hiddenInput.classList.contains('close')).toBeTruthy();

			await fireEvent.click(inputElement);
			expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('flex');

			expect(hiddenInput.classList.contains('hidden')).toBeFalsy();
			expect(hiddenInput.classList.contains('close')).toBeFalsy();

			await fireEvent.click(document.body);
			expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');

			expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
			expect(hiddenInput.classList.contains('close')).toBeTruthy();
		}, 400);
	});

	test('Corriging', async () => {
		const correction = writable('test');
		const valid = writable(true);
		const input = render(
			html`<${InputChallenge}
				bind:correction=${correction}
				value="test"
				bind:valid=${valid}
				corrigeable=${true}
				corriged=${true}
			/>`
		);

		const inputElement = input.container.querySelector('span.input');

		await fireEvent.click(inputElement);

		const corrInput = input.container.querySelector('input');
		expect(corrInput.value).toBe('test');

		await fireEvent.input(corrInput, { target: { value: 'test2' } });
		expect(get(correction)).toBe('test2');
		expect(get(valid)).toBeFalsy();

		await fireEvent.input(corrInput, { target: { value: 'test' } });
		expect(get(correction)).toBe('test');
		expect(get(valid)).toBeTruthy();
	});

	test('Corrige from null correction', async () => {
		const correction = writable(null);
		const valid = writable(false);
		const input = render(
			html`<${InputChallenge}
				bind:correction=${correction}
				value="test"
				bind:valid=${valid}
				corrigeable=${true}
				corriged=${true}
			/>`
		);

		const inputElement = input.container.querySelector('span.input');

		await fireEvent.click(inputElement);
		const corrInput = input.container.querySelector('input');
		expect(corrInput.value).toBe('');

		await fireEvent.input(corrInput, { target: { value: 'test2' } });
		expect(get(correction)).toBe('test2');
		expect(get(valid)).toBeFalsy();

		await fireEvent.input(corrInput, { target: { value: 'test' } });
		expect(get(correction)).toBe('test');
		expect(get(valid)).toBeTruthy();
	});

	test('Change valid', async () => {
		const correction = writable(null);
		const valid = writable(false);
		const input = render(
			html`<${InputChallenge}
				bind:correction=${correction}
				value="test"
				bind:valid=${valid}
				corrigeable=${true}
				corriged=${true}
			/>`
		);

		const inputElement = input.container.querySelector('span.input');

		await fireEvent.click(inputElement);
		const validToggle = input.getByTestId('valid');
		const invalid = input.getByTestId('invalid');


		await fireEvent.mouseDown(validToggle);
		expect(get(valid)).toBeTruthy();

		await fireEvent.mouseDown(invalid);
		expect(get(valid)).toBeFalsy();

		await fireEvent.mouseDown(validToggle);
		expect(get(valid)).toBeTruthy();

		const corrInput = input.container.querySelector('input');
		await fireEvent.input(corrInput, { target: { value: 'test2' } });
		expect(get(valid)).toBeFalsy();

		await fireEvent.mouseDown(validToggle);
		expect(get(valid)).toBeTruthy();
	});

	test('Corriged not corrigeable', async () => {
		const input = render(InputChallenge, {
			props: {
				correction: 'test',
				value: 'test',
				corrigeable: false,
				corriged: true
			}
		});

		const inputElement = input.container.querySelector('span.input');
		const hiddenInput = input.getByTestId('hiddenInput');
		expect(inputElement?.getAttribute('contenteditable')).toBe('false');
		await fireEvent.click(inputElement);

		expect(window.getComputedStyle(hiddenInput.children[0] as Element).display).toBe('none');

		expect(hiddenInput.classList.contains('hidden')).toBeTruthy();
		expect(hiddenInput.classList.contains('close')).toBeTruthy();
	});
});

const createChallenge = (note, time, id) => {
	return {
		id_code: id,
		mistakes: note,
		time: time,
		isCorriged: true,
		canCorriged: true,
		validated: true
	};
};
describe('Stats', () => {
	test('Validated', () => {
		const stats = render(ContextTest, {
			props: {
				component: Stats,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							validated: true,
							memberRank: null,
							ranking: [],
							rank: null,
							tops: [],
							pb: null,
							challenges: {}
						})
					},
					{ key: 'member', value: writable(m1) }
				],
				props: {}
			}
		});

		stats.getByText('Parcours validé !');
	});
	test('Not validated', () => {
		const stats = render(ContextTest, {
			props: {
				component: Stats,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							validated: false,
							memberRank: null,
							ranking: [],
							rank: null,
							tops: [],
							pb: null,
							challenges: {}
						})
					},
					{ key: 'member', value: writable(m1) }
				],
				props: {}
			}
		});
		stats.getByText('Parcours non validé !');
	});

	test('Stats', () => {
		const stats = render(ContextTest, {
			props: {
				component: Stats,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							validated: true,
							memberRank: 1,
							ranking: [],
							rank: 1,
							tops: [],
							pb: null,
							challenges: {
								[m1.id_code]: {
									challenger: { username: 'test', id_code: m1.id_code },
									challenges: [
										createChallenge(1, 10, '1'),
										createChallenge(2, 10, '1'),
										createChallenge(3, 10, '1'),
										createChallenge(4, 10, '1'),
										createChallenge(5, 10, '1'),
										createChallenge(6, 10, '1')
									]
								}
							}
						})
					},
					{ key: 'member', value: writable(m1) }
				],
				props: {}
			}
		});

		const avg = stats.getByTestId('avg');
		expect(avg.textContent).toContain('3.5');
		const best = stats.getByTestId('max');
		expect(best.textContent).toContain('6');
		const worst = stats.getByTestId('min');
		expect(worst.textContent).toContain('1');
	});

	test('Stats no challenges', () => {
		const stats = render(ContextTest, {
			props: {
				component: Stats,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							validated: true,
							memberRank: 1,
							ranking: [],
							rank: 1,
							tops: [],
							pb: null,
							challenges: {}
						})
					},
					{ key: 'member', value: writable(m1) }
				],
				props: {}
			}
		});
		const avg = stats.getByTestId('avg');
		expect(avg.textContent).toContain('-');
		const best = stats.getByTestId('max');
		expect(best.textContent).toContain('-');
		const worst = stats.getByTestId('min');
		expect(worst.textContent).toContain('-');
	});
});

describe('Ranking', () => {
	test('No rank', () => {
		const ranking = render(Classement, {
			props: {
				tops: [
					{ name: 'test1', value: 'Moyenne 3.5' },
					{ name: 'test2', value: 'Moyenne 6.5' },
					{ name: 'test3', value: 'Moyenne 5.5' }
				]
			}
		});

		ranking.getByText((c, e) => {
			return e.textContent == '#1 - test1 - Moyenne 3.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#2 - test2 - Moyenne 6.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#3 - test3 - Moyenne 5.5';
		});
	});

	test('Top > 3', () => {
		const ranking = render(Classement, {
			props: {
				tops: [
					{ name: 'test1', value: 'Moyenne 3.5' },
					{ name: 'test2', value: 'Moyenne 6.5' },
					{ name: 'test3', value: 'Moyenne 5.5' }
				],
				rank: { rank: 10, name: 'test4', value: 'Moyenne 120' }
			}
		});

		ranking.getByText((c, e) => {
			return e.textContent == '#1 - test1 - Moyenne 3.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#2 - test2 - Moyenne 6.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#3 - test3 - Moyenne 5.5';
		});

		ranking.getByText((c, e) => {
			return e.textContent == '#10 - test4 - Moyenne 120';
		});
	});

	test('Top < 3', () => {
		const ranking = render(Classement, {
			props: {
				tops: [
					{ name: 'test1', value: 'Moyenne 3.5' },
					{ name: 'test2', value: 'Moyenne 6.5' },
					{ name: 'test3', value: 'Moyenne 5.5' }
				],
				rank: { rank: 1, name: 'test1', value: 'Moyenne 3.5' }
			}
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#1 - test1 - Moyenne 3.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#2 - test2 - Moyenne 6.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#3 - test3 - Moyenne 5.5';
		});
	});

	test('Incomplete', () => {
		const ranking = render(Classement, {
			props: {
				tops: [
					{ name: 'test1', value: 'Moyenne 3.5' },
					{ name: 'test2', value: 'Moyenne 6.5' }
				]
			}
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#1 - test1 - Moyenne 3.5';
		});
		ranking.getByText((c, e) => {
			return e.textContent == '#2 - test2 - Moyenne 6.5';
		});
		ranking.getByText('#3 -');
	});
});

describe('Challenges', () => {
	test('No challenges', () => {
		const challenges = render(ContextTest, {
			props: {
				component: ChallengesList,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							challenges: {}
						})
					},
					{ key: 'member', value: writable(m1) }
				],
				props: {}
			}
		});
		challenges.getByText('Aucun essai effectué :(');
	});

	test('Only self', async () => {
		const challenges = render(ContextTest, {
			props: {
				component: ChallengesList,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							challenges: {
								test: {
									challenger: { username: 'test', id_code: 'test' },
									challenges: [createChallenge(6, 10, '1')]
								}
							}
						})
					},
					{ key: 'member', value: writable(m1) }
				],
				props: {}
			}
		});
		const extend = challenges.getByText('Vos essais');
		await fireEvent.click(extend);

		challenges.getByText((t, e) => {

			return e.textContent == '6 fautes en 10s';
		});
	});

	test('Others', async () => {
		const challenges = render(ContextTest, {
			props: {
				component: ChallengesList,
				contexts: [
					{
						key: 'parcours',
						value: writable({
							challenges: {
								test: {
									challenger: { name: 'test', id_code: 'test' },
									challenges: [createChallenge(1, 10, '1')]
								},
								test2: {
									challenger: { name: 'test2', id_code: 'test2' },
									challenges: [createChallenge(10, 70, '1')]
								}
							}
						})
					},
					{ key: 'member', value: writable(m3) }
				],
				props: {}
			}
		});
		const extendTest1 = challenges.getByText('test');
		await fireEvent.click(extendTest1);

		challenges.getByText((t, e) => {
			return e.textContent == '1 faute en 10s';
		});

		const extendText2 = challenges.getByText('test2');
		await fireEvent.click(extendText2);
		challenges.getByText((t, e) => {

			return e.textContent == '10 fautes en 01 : 10s';
		});
		expect(
			challenges.queryByText((t, e) => {
				return e.textContent == '1 faute en 10s';
			})
		).toBeNull();

		await fireEvent.click(extendText2);
		expect(
			challenges.queryByText((t, e) => {
				return e.textContent == '1 faute en 10s';
			})
		).toBeNull();
		expect(
			challenges.queryByText((t, e) => {
				return e.textContent == '10 fautes en 01 : 10s';
			})
		).toBeNull();
	});
});

describe('Exo selector', () => {
	test('No exo', () => {
		const exoSelector = render(ContextTest, {
			props: {
				component: ExerciceSelector,
				contexts: [{ key: 'modal', value: { show: () => {} } }],
				props: { exos: writable([]) }
			}
		});
		exoSelector.getByText('Aucun exercice sélectionné');
	});

	test('Exo', async () => {
		const exoSelector = render(ContextTest, {
			props: {
				component: ExerciceSelector,
				contexts: [{ key: 'modal', value: { show: () => {} } }],
				props: { exos: writable([{ quantity: 1, name: 'test', exercice_id: '10' }]) }
			}
		});
		exoSelector.getByText('test');
		exoSelector.getByRole('spinbutton', { name: 'Nombre' });
	});

	test('open modal', async () => {
		const contexts = {
			show: (c, p, b) => {
				expect(c.toString()).toBe(ExoList.toString());
			}
		};

		const show = vi.spyOn(contexts, 'show');
		const exoSelector = render(ContextTest, {
			props: {
				component: ExerciceSelector,
				contexts: [{ key: 'modal', value: { show } }],
				props: { exos: writable([]) }
			}
		});
		const addButton = exoSelector.getByRole('button', { name: '+' });
		await fireEvent.click(addButton);
		expect(show).toHaveBeenCalled();
	});
});

describe('Exo list', () => {
	test('No auth', () => {
		const exoList = render(ContextTest, {
			props: {
				component: ExoList,
				contexts: [{ key: 'auth', value: { isAuth: writable(false) } }],
				props: { exos: writable([]) }
			}
		});
		exoList.getByPlaceholderText('Rechercher...');
		expect(exoList.queryByPlaceholderText('Selectionner')).toBeNull();
		expect(exoList.queryByRole('option', { name: 'Tous les exercices' })).toBeNull();
		expect(exoList.queryByRole('option', { name: 'Vos exercices' })).toBeNull();
	});
	test('Auth', () => {
		const exoList = render(ContextTest, {
			props: {
				component: ExoList,
				contexts: [{ key: 'auth', value: { isAuth: writable(true) } }],
				props: { exos: writable([]) }
			}
		});
		exoList.getByPlaceholderText('Rechercher...');
		exoList.getByRole('option', { name: 'Tous les exercices' });
		exoList.getByRole('option', { name: 'Vos exercices' });
	});
});

describe('Room Head', () => {
	test('Input', async () => {
		const room = writable({
			name: 'testRoom',
			id_code: 'Ouioui'
		});
		const contexts = {
			send: (t, d) => {
				expect(d.name).toBe('testRoom2');
				if (t == 'set_name') {
					room.update((r) => {
						r.name = d.name;
						return r;
					});
				}
			}
		};
		const send = vi.spyOn(contexts, 'send');

		const roomHead = render(ContextTest, {
			props: {
				component: RoomHead,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{
						key: 'room',
						value: room
					},
					{ key: 'ws', value: { send, ws: {} } }
				],
				props: {}
			}
		});

		let name = roomHead.getByText('testRoom', { exact: true });
		const id_code = roomHead.getByText('#Ouioui');
		const input = roomHead.getByRole('textbox');

		expect(input.classList.contains('hide')).toBeTruthy();
		await fireEvent.dblClick(name);
		expect(input.value).toBe('testRoom');
		expect(input.classList.contains('hide')).toBeFalsy();
		expect(document.activeElement).toBe(input);
		expect(roomHead.queryByText('testRoom')).toBeNull();

		await fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' });
		expect(input.classList.contains('hide')).toBeTruthy();
		name = roomHead.getByText('testRoom', { exact: true });
		await fireEvent.dblClick(name);
		expect(input.classList.contains('hide')).toBeFalsy();
		expect(document.activeElement).toBe(input);
		expect(roomHead.queryByText('testRoom')).toBeNull();

		await fireEvent.input(input, { target: { value: 'testRoom2' } });
		await fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
		name = roomHead.getByText('testRoom2', { exact: true });
		expect(send).toHaveBeenCalled();
		expect(input.classList.contains('hide')).toBeTruthy();

		await fireEvent.dblClick(id_code, {});
		expect(input.classList.contains('hide')).toBeTruthy();
	});

	test('Admin', () => {
		const roomHead = render(ContextTest, {
			props: {
				component: RoomHead,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{
						key: 'room',
						value: writable({
							name: 'testRoom',
							id_code: 'Ouioui'
						})
					},
					{ key: 'ws', value: { send: () => {}, ws: {} } }
				],
				props: {}
			}
		});
		roomHead.getByTestId('delete');
		roomHead.getByTestId('refresh');
		roomHead.getByTestId('leave');
	});
	test('Not admin', async () => {
		const roomHead = render(ContextTest, {
			props: {
				component: RoomHead,
				contexts: [
					{ key: 'member', value: writable(m2) },
					{
						key: 'room',
						value: writable({
							name: 'testRoom',
							id_code: 'Ouioui'
						})
					},
					{ key: 'ws', value: { send: () => {}, ws: {} } }
				],
				props: {}
			}
		});
		expect(roomHead.queryByTestId('delete')).toBeNull();
		roomHead.getByTestId('refresh');
		roomHead.getByTestId('leave');

		const name = roomHead.getByText('testRoom', { exact: true });
		const input = roomHead.getByRole('textbox');

		expect(input.classList.contains('hide')).toBeTruthy();
		await fireEvent.dblClick(name);
		expect(input.classList.contains('hide')).toBeTruthy();
	});
});

describe('ParcoursList', () => {
	test('Admin', () => {
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{key: "room", value: writable({id_code: "oui", parcours: [{name: "testParcours", best_note: null, id_code: "yes", validated: false}]})},
					{ key: 'alert', value: { alert: () => {}} }
				],
				props: { parcours: writable([]) }
			}
		});
		parcoursList.getByRole('button', { name: 'Nouveau' });
		const parcours = parcoursList.getByText('testParcours');
		expect(parcours.parentElement?.querySelector('.delete')).not.toBeNull();
		
	});
	test('Not admin', () => { 
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m2) },
					{
						key: 'room',
						value: writable({
							id_code: 'oui',
							parcours: [
								{ name: 'testParcours', best_note: null, id_code: 'yes', validated: false }
							]
						})
					},
					{ key: 'alert', value: { alert: () => {} } }
				],
				props: { parcours: writable([]) }
			}
		});
		expect(parcoursList.queryByRole('button', { name: 'Nouveau' })).toBeNull();
		const parcours = parcoursList.getByText('testParcours');
		expect(parcours.parentElement?.querySelector('.delete')).toBeNull();
	})
	test('Empty', () => {
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{key: "room", value: writable({id_code: "oui", parcours: []})},
					{ key: 'alert', value: { alert: () => {}} }
				],
				props: { parcours: writable([]) }
			}
		});
		parcoursList.getByText('Aucun parcours pour le moment');
	})

	test('With best note', () => {
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{key: "room", value: writable({id_code: "oui", parcours: [{name: "testParcours", best_note: 12, id_code: "yes", validated: false}]})},
					{ key: 'alert', value: { alert: () => {}} }
				],
				props: { parcours: writable([]) }
			}
		});
		parcoursList.getByText('Record : 12 fautes');
	})
	test('Without best note', () => {
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{key: "room", value: writable({id_code: "oui", parcours: [{name: "testParcours", best_note: null, id_code: "yes", validated: false}]})},
					{ key: 'alert', value: { alert: () => {}} }
				],
				props: { parcours: writable([]) }
			}
		});
		parcoursList.getByText('Aucun essai effectué');
	})
	test('Validated', () => { 
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{key: "room", value: writable({id_code: "oui", parcours: [{name: "testParcours", best_note: 12, id_code: "yes", validated: true}]})},
					{ key: 'alert', value: { alert: () => {}} }
				],
				props: { parcours: writable([]) }
			}
		});
		parcoursList.getByTestId('valid');
	})
	test('Not validated', () => { 
		const parcoursList = render(ContextTest, {
			props: {
				component: ParcoursList,
				contexts: [
					{ key: 'member', value: writable(m1) },
					{key: "room", value: writable({id_code: "oui", parcours: [{name: "testParcours", best_note: 12, id_code: "yes", validated: false}]})},
					{ key: 'alert', value: { alert: () => {}} }
				],
				props: { parcours: writable([]) }
			}
		});
		expect(parcoursList.queryByTestId('valid')).toBeNull();
	})
});