test: reviews page (#177)

apps/container/src/components/CommentsList/CommentList.test.ts

@@ -0,0 +1,81 @@
+import { render, screen } from '@/test-utils';
+import { CommentsList } from '.';
+import { comments } from '@/mocks/reviews';
+import { server } from '@/mocks/server';
+import { HttpResponse, http } from 'msw';
+
+describe('<CommentsList />', () => {
+  test('render Comments List', async () => {
+    render(CommentsList, {
+      props: {
+        teacherId: '111',
+        selectedSubject: 'Todas as matérias',
+      },
+    });
+    expect(
+      await screen.findByText(RegExp(comments.data[0].comment, 'i')),
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByText(RegExp(comments.data[0].subject.name, 'i'))[0],
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(RegExp(comments.data[1].comment, 'i')),
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByText(RegExp(comments.data[1].subject.name, 'i'))[0],
+    ).toBeInTheDocument();
+  });
+  test('render empty Comments List', async () => {
+    server.use(
+      http.get(`*/comments/*`, () =>
+        HttpResponse.json({
+          data: [],
+          total: 0,
+        }),
+      ),
+    );
+    render(CommentsList, {
+      props: {
+        teacherId: '111',
+        selectedSubject: 'Todas as matérias',
+      },
+    });
+    expect(
+      await screen.findByText(
+        /Infelizmente, nenhum comentário foi encontrado/i,
+      ),
+    ).toBeInTheDocument();
+  });
+  test('show toaster when Fetching Teacher Data Error', async () => {
+    server.use(
+      http.get(`*/reviews/teachers/*`, () =>
+        HttpResponse.json(null, { status: 500 }),
+      ),
+    );
+
+    render(CommentsList, {
+      props: {
+        teacherId: '111',
+        selectedSubject: 'Todas as matérias',
+      },
+    });
+    expect(
+      await screen.findByText('Erro ao carregar o(a) professor(a)'),
+    ).toBeInTheDocument();
+  });
+  test('show toaster when Fetching Comments Error', async () => {
+    server.use(
+      http.get(`*/comments/*`, () => HttpResponse.json(null, { status: 500 })),
+    );
+    render(CommentsList, {
+      props: {
+        teacherId: '111',
+        selectedSubject: 'Todas as matérias',
+      },
+    });
+
+    expect(
+      await screen.findByText('Erro ao carregar comentários'),
+    ).toBeInTheDocument();
+  });
+});

apps/container/src/components/ConceptsHorizontalChart/ConceptsHorizontalChart.test.ts

@@ -0,0 +1,39 @@
+import { render, screen } from '@/test-utils';
+import { ConceptsHorizontalChart } from '.';
+import { subjectInfo } from '@/mocks/reviews';
+
+describe('<ConceptsHorizontalChart />', () => {
+  test('render Concepts Horizontal Chart with regular found teacher', async () => {
+    render(ConceptsHorizontalChart, {
+      props: {
+        gradeData: subjectInfo.specific[2],
+      },
+    });
+
+    const tooltipTextPercentage = `${
+      subjectInfo.specific[2].distribution[0].conceito
+    }: ${(
+      (100 * subjectInfo.specific[2].distribution[0].count) /
+      subjectInfo.specific[2].count
+    ).toFixed(1)}%`;
+
+    const tooltipTextAmount = `${subjectInfo.specific[2].distribution[0].count} notas`;
+    expect(
+      await screen.findByText(RegExp(tooltipTextPercentage, 'i')),
+    ).toBeInTheDocument();
+    expect(
+      await screen.getByText(RegExp(tooltipTextAmount, 'i')),
+    ).toBeInTheDocument();
+  });
+
+  test('render Concepts Horizontal Chart with untrustable threshold ', async () => {
+    render(ConceptsHorizontalChart, {
+      props: {
+        gradeData: subjectInfo.specific[1],
+      },
+    });
+    expect(
+      await screen.findByText('Dados sem muitas amostras'),
+    ).toBeInTheDocument();
+  });
+});

apps/container/src/components/ConceptsHorizontalChart/ConceptsHorizontalChart.vue

@@ -6,9 +6,10 @@
       :key="grade.conceito"
       :hide-after="0"
       :content="`
-        ${grade.conceito}: ${grades[grade.conceito].toFixed(1)}% (${
-          grade.count
-        } notas)`"
+        ${grade.conceito}: ${(
+          (100 * grades[grade.conceito]) /
+          gradeData.count
+        ).toFixed(1)}% (${grade.count} notas)`"
     >
       <span
         class="grading-segment"

apps/container/src/components/ConceptsPieChart/ConceptsPieChart.test.ts

@@ -0,0 +1,21 @@
+import { render, screen } from '@/test-utils';
+import { ConceptsPieChart } from '.';
+import { concepts } from '@/mocks/reviews';
+
+const total = Object.values(concepts).reduce((acc, curr) => acc + curr, 0);
+
+describe('<ConceptsPieChart />', () => {
+  test('render Concepts Pie Highchart', async () => {
+    render(ConceptsPieChart, {
+      props: {
+        grades: concepts,
+      },
+    });
+
+    Object.values(concepts).forEach((concept) => {
+      expect(
+        screen.getByText(RegExp(((100 * concept) / total).toFixed(1), 'i')),
+      ).toBeInTheDocument();
+    });
+  });
+});

apps/container/src/components/FeedbackAlert/FeedbackAlert.vue

@@ -30,6 +30,7 @@ const props = defineProps({
 
 onMounted(() => {
   ElMessage({
+    showClose: true,
     message: props.text,
     type: props.type,
     duration: props.duration,

apps/container/src/components/PendingReviewEnrollment/PendingReviewEnrollment.test.ts

@@ -0,0 +1,39 @@
+import { render, screen } from '@/test-utils';
+import { PendingReviewEnrollment } from '.';
+import { enrollments } from '@/mocks/enrollments';
+
+describe('<PendingReviewEnrollment />', () => {
+  test('render the Pending Review Enrollment with a theorical only subject', async () => {
+    render(PendingReviewEnrollment, {
+      props: {
+        enrollment: enrollments[1],
+      },
+    });
+    expect(
+      await screen.findByText(enrollments[1].disciplina),
+    ).toBeInTheDocument();
+    expect(screen.getByText('teoria')).toBeInTheDocument();
+  });
+  test('render the Pending Review Enrollment with a pratical only subject', async () => {
+    render(PendingReviewEnrollment, {
+      props: {
+        enrollment: enrollments[30],
+      },
+    });
+    expect(
+      await screen.findByText(enrollments[30].disciplina),
+    ).toBeInTheDocument();
+    expect(screen.getByText('prática')).toBeInTheDocument();
+  });
+  test('render the Pending Review Enrollment with a theorical and pratical subject', async () => {
+    render(PendingReviewEnrollment, {
+      props: {
+        enrollment: enrollments[0],
+      },
+    });
+    expect(
+      await screen.findByText(enrollments[0].disciplina),
+    ).toBeInTheDocument();
+    expect(screen.getByText('teoria e prática')).toBeInTheDocument();
+  });
+});

apps/container/src/components/PendingReviewEnrollment/PendingReviewEnrollment.vue

@@ -64,7 +64,7 @@ import { Enrollment } from 'types';
 const showDialog = ref(false);
 
 const conceptStyle = computed(() => ({
-  backgroundColor: conceptsColor[props.enrollment.conceito ?? ''],
+  backgroundColor: conceptsColor[props.enrollment.conceito],
   height: '54px',
   width: '54px',
   fontSize: '34px',

apps/container/src/components/PendingReviewEnrollmentList/PendingReviewEnrollmentList.test.ts

@@ -0,0 +1,40 @@
+import { render, screen, userEvent } from '@/test-utils';
+import { PendingReviewEnrollmentList } from '.';
+import { enrollments } from '@/mocks/enrollments';
+import { server } from '@/mocks/server';
+import { HttpResponse, http } from 'msw';
+
+describe('<PendingReviewEnrollmentList />', () => {
+  test('render Pending Review Enrollments List with a reviewable subjects', async () => {
+    render(PendingReviewEnrollmentList);
+    expect(
+      await screen.findByText(/Seus professores para avaliar/i),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(enrollments[26].subject.name),
+    ).toBeInTheDocument();
+    expect(screen.getByText('teoria')).toBeInTheDocument();
+    expect(screen.getByText(enrollments[27].subject.name)).toBeInTheDocument();
+    expect(screen.getByText('prática')).toBeInTheDocument();
+    expect(screen.getByText(enrollments[28].subject.name)).toBeInTheDocument();
+    expect(screen.getByText('teoria e prática')).toBeInTheDocument();
+  });
+  test('render Pending Review Enrollments List with error', async () => {
+    server.use(
+      http.get(`*/enrollments`, () => HttpResponse.json(null, { status: 500 })),
+    );
+    render(PendingReviewEnrollmentList);
+    expect(
+      await screen.findByText('Erro ao buscar suas disciplinas cursadas'),
+    ).toBeInTheDocument();
+  });
+  test('open Review Dialog when click on Enrollment and close when click on clos', async () => {
+    render(PendingReviewEnrollmentList);
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: RegExp(enrollments[26].subject.name, 'i'),
+      }),
+    );
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+  });
+});