1138 lines
30 KiB
TypeScript
1138 lines
30 KiB
TypeScript
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();
|
|
})
|
|
});
|
|
|