feat: microfrontend stats page

apps/container/package.json

@@ -13,39 +13,36 @@
     "lint:fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
-    "@amcharts/amcharts5": "^5.4.1",
-    "@mdi/font": "^7.2.96",
-    "@tanstack/query-core": "^5.0.0-rc.4",
-    "@tanstack/vue-query": "5.0.0-rc.4",
-    "@types/react": "^18.2.24",
-    "@types/react-dom": "^18.2.8",
-    "axios": "^1.5.1",
-    "core-js": "3.32.2",
-    "element-plus": "2.3.14",
-    "msw": "^1.3.2",
+    "@amcharts/amcharts5": "^5.5.2",
+    "@mdi/font": "^7.3.67",
+    "@tanstack/query-core": "^5.0.5",
+    "@tanstack/vue-query": "5.4.1",
+    "axios": "^1.6.0",
+    "core-js": "3.33.1",
+    "element-plus": "2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "services": "*",
     "stores": "*",
     "utils": "*",
-    "vue": "3.3.4",
-    "dayjs": "^1.11.9",
+    "vue": "3.3.7",
+    "dayjs": "^1.11.10",
     "lodash.debounce": "^4.0.8",
     "vue-router": "4.2.5",
     "vue-zustand": "^0.6.0",
-    "vuetify": "3.3.20",
+    "vuetify": "3.3.23",
     "highcharts": "^11.1.0",
     "highcharts-vue": "^1.4.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-methods": "^7.22.5",
-    "@babel/preset-env": "^7.22.20",
-    "@testing-library/jest-dom": "^6.1.3",
+    "@babel/preset-env": "^7.23.2",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/user-event": "^14.5.1",
     "@testing-library/vue": "^7.0.0",
-    "@types/lodash.debounce": "^4.0.7",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
+    "@types/lodash.debounce": "^4.0.8",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitest/coverage-v8": "^0.34.6",
     "@vue/cli-plugin-babel": "5.0.8",
@@ -55,19 +52,18 @@
     "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-typescript": "12.0.0",
     "@vue/test-utils": "2.4.1",
-    "eslint": "8.50.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-vue": "9.17.0",
+    "eslint-plugin-vue": "9.18.1",
     "husky": "8.0.3",
     "jsdom": "^22.1.0",
-    "lint-staged": "14.0.1",
-    "prettier": "3.0.3",
-    "sass": "1.68.0",
-    "sass-loader": "13.3.2",
+    "lint-staged": "15.0.2",
     "typescript": "5.2.2",
     "vitest": "^0.34.6",
-    "types": "*"
+    "msw": "^2.0.1",
+    "sass": "1.69.5",
+    "sass-loader": "13.3.2",
+    "types": "*",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

apps/container/src/components/ConceptsHorizontalChart.vue

@@ -14,8 +14,7 @@
         class="grading-segment"
         :class="grade.count < untrustableThreshold ? 'unthrustable' : ''"
         :style="{
-          background:
-            conceptsColor[grade.conceito],
+          background: conceptsColor[grade.conceito],
           width: `${grades[grade.conceito]}%`,
         }"
       >
@@ -47,10 +46,7 @@ const orderedDistribution = computed(() => {
 });
 
 const grades = computed(() =>
-  transformConceptDataToObject(
-    props.gradeData.distribution,
-    props.gradeData.count,
-  ),
+  transformConceptDataToObject(props.gradeData.distribution),
 );
 </script>
 

apps/container/src/components/SubjectReview.vue

@@ -200,7 +200,6 @@ const generalGrades = computed(() => {
   if (!subjectData.value?.data) return {};
   return transformConceptDataToObject(
     subjectData.value.data.general.distribution,
-    subjectData.value.data.general.count,
   );
 });
 

apps/container/src/components/TeacherReview.vue

@@ -130,16 +130,12 @@ const grades = computed(() => {
   if (selectedSubject.value === 'Todas as matérias') {
     return transformConceptDataToObject(
       teacherData.value.data.general.distribution,
-      teacherData.value.data.general.count,
     );
   }
   const data = teacherData.value.data.specific
     .filter((subject) => subject._id)
     .find((subject) => subject._id.name === selectedSubject.value);
-  return transformConceptDataToObject(
-    data?.distribution || [],
-    data?.count || 1,
-  );
+  return transformConceptDataToObject(data?.distribution || []);
 });
 
 const demandsAttendance = computed(() => {

apps/container/src/mocks/handlers.ts

@@ -1,14 +1,10 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { user } from './users';
 import { enrollments } from './enrollments';
 
 const baseUrl = 'https://api.ufabcnext.com/v1';
 
 export const handlers = [
-  rest.get(`${baseUrl}/users/info`, (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(user)),
-  ),
-  rest.get(`${baseUrl}/enrollments`, (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(enrollments)),
-  ),
+  http.get(`${baseUrl}/users/info`, () => HttpResponse.json(user)),
+  http.get(`${baseUrl}/enrollments`, () => HttpResponse.json(enrollments)),
 ];

apps/container/src/test-utils.ts

@@ -5,7 +5,7 @@ import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
 import { render } from '@testing-library/vue';
 
-import { VueQueryPlugin } from '@tanstack/vue-query';
+import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query';
 export { default as userEvent } from '@testing-library/user-event';
 
 const vuetify = createVuetify({
@@ -23,11 +23,13 @@ const customRender: typeof render = (component, options) => {
         [
           VueQueryPlugin,
           {
-            defaultOptions: {
-              queries: {
-                retry: false,
+            queryClient: new QueryClient({
+              defaultOptions: {
+                queries: {
+                  retry: false,
+                },
               },
-            },
+            }),
           },
         ],
       ],

apps/container/src/views/History/HistoryView.test.ts

@@ -7,7 +7,7 @@ import {
 import { HistoryView } from '.';
 import { enrollments } from '@/mocks/enrollments';
 import { server } from '@/mocks/server';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 describe('<CenteredLoading />', () => {
   test('render a loading before show subjects table', async () => {
@@ -19,11 +19,7 @@ describe('<CenteredLoading />', () => {
     expect(screen.getByText(/disciplinas cursadas/i)).toBeInTheDocument();
   });
   test('show install extension warning if 0 enrollments', async () => {
-    server.use(
-      rest.get(`*/enrollments`, (_req, res, ctx) =>
-        res(ctx.status(200), ctx.json([])),
-      ),
-    );
+    server.use(http.get(`*/enrollments`, () => HttpResponse.json([])));
     render(HistoryView);
     expect(screen.getByLabelText('Carregando')).toBeInTheDocument();
     expect(
@@ -32,22 +28,17 @@ describe('<CenteredLoading />', () => {
   });
   test('show install extension warning if only 1 enrollment', async () => {
     server.use(
-      rest.get(`*/enrollments`, (_req, res, ctx) =>
-        res(ctx.status(200), ctx.json([enrollments[0]])),
-      ),
+      http.get(`*/enrollments`, () => HttpResponse.json([enrollments[0]])),
     );
     render(HistoryView);
     expect(screen.getByLabelText('Carregando')).toBeInTheDocument();
     expect(await screen.findByText(/disciplina cursada/i)).toBeInTheDocument();
   });
-  test('show alert error if only one 5xx request happens', async () => {
+  test('show alert error if 5xx request happens', async () => {
     server.use(
-      rest.get(`*/users/info`, (_req, res, ctx) => res(ctx.status(500))),
+      http.get(`*/users/info`, () => HttpResponse.json(null, { status: 500 })),
     );
-    render(HistoryView, {
-      // disable retry
-
-    });
+    render(HistoryView);
     expect(
       await screen.findByText(enrollments[0].disciplina),
     ).toBeInTheDocument();
@@ -57,19 +48,6 @@ describe('<CenteredLoading />', () => {
       ),
     ).toBeInTheDocument();
   });
-  test('show alert errors if 5xx request happens', async () => {
-    server.use(
-      rest.get(`*/enrollments`, (_req, res, ctx) => res(ctx.status(500))),
-      rest.get(`*/users/info`, (_req, res, ctx) => res(ctx.status(500))),
-    );
-    render(HistoryView);
-    await waitForElementToBeRemoved(screen.queryByLabelText('Carregando'));
-    expect(
-      await screen.findAllByText(
-        /Não foi possível buscar as informações, tente novamente mais tarde/i,
-      ),
-    ).toHaveLength(2);
-  });
   test('open extension dialog when click on extension button then close it', async () => {
     const user = userEvent.setup();
 

apps/container/src/views/History/HistoryView.vue

@@ -351,14 +351,12 @@ const {
   queryKey: ['enrollments', 'list'],
   queryFn: Enrollments.list,
   select: (response) => response.data,
-  retry: false,
 });
 
 const { data: user, isError: isErrorUser } = useQuery({
   queryKey: ['users', 'info'],
   queryFn: Users.info,
   select: (response) => response.data,
-  retry: false,
 });
 
 const enrollmentByDate = computed(() => {