test: sign up page

apps/container/src/mocks/handlers.ts

@@ -17,7 +17,6 @@ const baseUrl = 'https://api.ufabcnext.com/v1';
 
 export const handlers = [
   http.get(`${baseUrl}/users/info`, () => HttpResponse.json(user)),
-  http.delete(`${baseUrl}/users/me/delete`, () => HttpResponse.json({})),
   http.get(`${baseUrl}/enrollments`, () => HttpResponse.json(enrollments)),
   http.get(`${baseUrl}/stats/usage`, () => HttpResponse.json(usage)),
   http.get(`${baseUrl}/stats/disciplinas/courses`, () =>
@@ -44,6 +43,9 @@ export const handlers = [
   http.get(`${baseUrl}/historiesGraduations`, () =>
     HttpResponse.json(historiesGraduations),
   ),
+  http.delete(`${baseUrl}/users/me/delete`, () => HttpResponse.json({})),
   http.post(`${baseUrl}/account/confirm`, () => HttpResponse.json({})),
   http.post(`${baseUrl}/users/me/recover`, () => HttpResponse.json({})),
+  http.post(`${baseUrl}/users/me/resend`, () => HttpResponse.json({})),
+  http.put(`${baseUrl}/users/complete`, () => HttpResponse.json({})),
 ];

apps/container/src/mocks/users.ts

@@ -12,7 +12,7 @@ export const user: User = {
     picture: 'picture',
     google: 'google',
   },
-  ra: 123,
+  ra: 11201810622,
   email: '[email protected]',
 };
 

apps/container/src/router/index.ts

@@ -81,7 +81,7 @@ const routes: Array<RouteRecordRaw> = [
     component: SignUpView,
     meta: {
       title: 'Cadastro',
-      confirmed: false,
+      // confirmed: false,
     },
     props: true,
   },
@@ -171,7 +171,7 @@ router.beforeEach(async (to, _from, next) => {
     } else if (process.env.VUE_APP_MF_ENV !== 'local') {
       return (window.location.pathname = '/');
     }
-    next('/reviews')
+    next('/reviews');
   }
   if (notAllowAuth) {
     if (userToken) return next('/reviews');

apps/container/src/views/SignUp/SignUpView.test.ts

@@ -0,0 +1,258 @@
+import { render, screen, userEvent, waitFor } from '@/test-utils';
+import { SignUpView } from '.';
+import { user as mockedUser } from '@/mocks/users';
+import * as vuetify from 'vuetify';
+import { server } from '@/mocks/server';
+import { HttpResponse, http } from 'msw';
+import { useAuth } from '@/stores/useAuth';
+
+describe('<SignUpView />', () => {
+  const originalUseAuthValue = useAuth.getState();
+  beforeEach(() => {
+    useAuth.setState({
+      ...originalUseAuthValue,
+      token: 'token',
+      user: mockedUser,
+    });
+  });
+  afterEach(() => {
+    useAuth.setState(originalUseAuthValue);
+  });
+  test('render sign up page', () => {
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+    expect(
+      screen.getByText(/Usar outra conta do google\/facebook/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByAltText(/Pessoa meditando na frente do computador/),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/O que você faz na UFABC\?/)).toBeInTheDocument();
+  });
+  test('logout when click to change account', async () => {
+    const user = await userEvent.setup();
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+    expect(useAuth.getState().token).not.toBeNull();
+    expect(useAuth.getState().user).not.toBeNull();
+    await user.click(screen.getByText(/Usar outra conta do google\/facebook/i));
+    await waitFor(() => {
+      expect(useAuth.getState().token).toBeNull();
+      expect(useAuth.getState().user).toBeNull();
+    });
+  });
+  test('render sm and down screen', async () => {
+    vi.spyOn(vuetify, 'useDisplay').mockImplementation(
+      () =>
+        ({
+          smAndDown: true,
+        }) as unknown as ReturnType<typeof vuetify.useDisplay>,
+    );
+
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+
+    expect(
+      screen.getByAltText(/Pessoa meditando na frente do computador/),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/O que você faz na UFABC\?/)).toBeInTheDocument();
+  });
+  test('fill form as teacher', async () => {
+    const user = await userEvent.setup();
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+
+    await user.click(screen.getByText(/Professor/i));
+
+    expect(screen.getByText(/Estamos trabalhando nisso!/i)).toBeInTheDocument();
+  });
+  test('fill form as student', async () => {
+    const user = await userEvent.setup();
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+
+    await user.click(screen.getByText(/Aluno/));
+
+    expect(
+      screen.getByText(/Falta pouco para completar o seu cadastro/i),
+    ).toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu email institucional' }),
+      mockedUser.email.replace(/(.*)@.*/, '$1'),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Confirme seu RA' }),
+      '123456789',
+    );
+
+    expect(
+      await screen.findByText(/Os campos RA devem ser iguais/),
+    ).toBeInTheDocument();
+  });
+  test('fill form as student', async () => {
+    const user = await userEvent.setup();
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+
+    await user.click(screen.getByText(/Aluno/));
+
+    expect(
+      screen.getByText(/Falta pouco para completar o seu cadastro/i),
+    ).toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu email institucional' }),
+      mockedUser.email.replace(/(.*)@.*/, '$1'),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Confirme seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.click(screen.getByRole('checkbox'));
+
+    expect(screen.getByText(/Enviar/i)).toBeEnabled();
+    await user.click(screen.getByText(/Enviar/i));
+
+    expect(
+      await screen.findByText(/Enviamos um email de confirmação para/),
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText(mockedUser.email)).toBeInTheDocument();
+
+    await user.click(
+      await screen.findByLabelText(/Reenviar email de confirmação/),
+    );
+
+    expect(
+      await screen.findByText(/Email reenviado com sucesso/),
+    ).toBeInTheDocument();
+  });
+  test('fill form as student but get error when submit form', async () => {
+    server.use(
+      http.put('*/users/complete', () =>
+        HttpResponse.json({ error: 'Erro ao se cadastrar' }, { status: 500 }),
+      ),
+    );
+
+    const user = await userEvent.setup();
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+
+    await user.click(screen.getByText(/Aluno/));
+
+    expect(
+      screen.getByText(/Falta pouco para completar o seu cadastro/i),
+    ).toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu email institucional' }),
+      mockedUser.email.replace(/(.*)@.*/, '$1'),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Confirme seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.click(screen.getByRole('checkbox'));
+
+    expect(screen.getByText(/Enviar/i)).toBeEnabled();
+    await user.click(screen.getByText(/Enviar/i));
+
+    expect(await screen.findByText(/Erro ao se cadastrar/)).toBeInTheDocument();
+  });
+  test('fill form as student and get error to resend email', async () => {
+    server.use(
+      http.post('*/users/me/resend', () =>
+        HttpResponse.json({ error: 'Erro ao reenviar email' }, { status: 500 }),
+      ),
+    );
+
+    const user = await userEvent.setup();
+    render(SignUpView, {
+      global: {
+        stubs: ['router-link'],
+      },
+    });
+
+    await user.click(screen.getByText(/Aluno/));
+
+    expect(
+      screen.getByText(/Falta pouco para completar o seu cadastro/i),
+    ).toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu email institucional' }),
+      mockedUser.email.replace(/(.*)@.*/, '$1'),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Insira seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.type(
+      screen.getByRole('textbox', { name: 'Confirme seu RA' }),
+      String(mockedUser.ra),
+    );
+
+    await user.click(screen.getByRole('checkbox'));
+
+    expect(screen.getByText(/Enviar/i)).toBeEnabled();
+    await user.click(screen.getByText(/Enviar/i));
+
+    expect(
+      await screen.findByText(/Enviamos um email de confirmação para/),
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText(mockedUser.email)).toBeInTheDocument();
+
+    await user.click(
+      await screen.findByLabelText(/Reenviar email de confirmação/),
+    );
+
+    expect(
+      await screen.findByText(/Erro ao reenviar email/),
+    ).toBeInTheDocument();
+  });
+});

apps/container/src/views/SignUp/SignUpView.vue

@@ -3,7 +3,7 @@
     <v-container class="container pt-md-10">
       <v-row class="d-flex mb-5 flex-grow-0">
         <v-col xs="12" class="d-flex align-center justify-space-between">
-          <img height="32" src="@/assets/logo.svg" />
+          <img height="32" src="@/assets/logo.svg" alt="logo do UFABC Next" />
           <v-btn
             v-if="!smAndDown"
             @click="handleLogout"
@@ -21,6 +21,7 @@
             src="@/assets/signup.svg"
             class="w-100"
             style="max-width: 400px"
+            alt="Pessoa meditando na frente do computador"
           />
         </v-col>
         <v-col
@@ -157,7 +158,7 @@
               Professor(a), estamos construindo algumas ferramentas especiais
               para você, por enquanto você pode verificar sua distribuição de
               notas por disciplinas
-              <router-link to="/reviews">aqui </router-link>
+              <router-link to="/reviews">aqui</router-link>
             </p>
           </div>
           <div
@@ -208,6 +209,7 @@
                     enableResendEmail ? 'ufabcnext-yellow' : 'next-light-gray'
                   "
                   :loading="isPendingResendEmail"
+                  aria-label="Reenviar email de confirmação"
                 >
                   <v-icon class="mr-2">{{
                     enableResendEmail ? 'mdi-email' : 'mdi-check-circle'
@@ -355,7 +357,7 @@ const validationSchema = toTypedSchema(
     }),
 );
 
-const { handleSubmit, meta } = useForm({
+const { handleSubmit, meta, setValues } = useForm({
   validationSchema,
 });
 
@@ -400,10 +402,14 @@ watch(
   () => {
     if (user.value?.ra && user.value?.email) {
       step.value = 3;
-      email.value.value = user.value.email.replace('@aluno.ufabc.edu.br', '');
-      ra.value.value = user.value.ra.toString();
-      raConfirm.value.value = user.value.ra.toString();
-      check.value.value = true;
+      setValues({
+        email: user.value.email.replace('@aluno.ufabc.edu.br', ''),
+        ra: {
+          ra: user.value.ra.toString(),
+          confirm: user.value.ra.toString(),
+        },
+        check: true,
+      });
     }
   },
 );