chore(arpa): fix headings and color contrast issues

usdigitalresponse · Dec 18, 2024 · 0b8830c · 0b8830c
1 parent d6d0562
commit 0b8830c
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 26 deletions.
diff --git a/packages/client/src/arpa_reporter/components/DownloadButton.vue b/packages/client/src/arpa_reporter/components/DownloadButton.vue
@@ -2,7 +2,7 @@
   <a
     download
     :href="href"
-    class="btn btn-primary"
+    class="btn usdr-btn-primary"
     :class="computedClasses"
     @click="setLoadingState"
   >

diff --git a/packages/client/src/arpa_reporter/components/PageNavigation.vue b/packages/client/src/arpa_reporter/components/PageNavigation.vue
@@ -220,9 +220,9 @@ export default {
     },
     navLinkClass(to) {
       if (this.$route.path === to) {
-        return 'nav-link usdr-tab-nav-link active';
+        return 'nav-link usdr-link active';
       }
-      return 'nav-link usdr-tab-nav-link';
+      return 'nav-link usdr-link';
     },
     dateFormat(d) {
       return moment(d)

diff --git a/packages/client/src/arpa_reporter/components/StandardForm.vue b/packages/client/src/arpa_reporter/components/StandardForm.vue
@@ -59,7 +59,7 @@
       <div class="col-sm-2" />
       <div class="col-sm-10">
         <button
-          class="btn btn-primary"
+          class="btn usdr-btn-primary"
           :disabled="disabled"
           @click="validateAndSave()"
         >

diff --git a/packages/client/src/arpa_reporter/scss/index.scss b/packages/client/src/arpa_reporter/scss/index.scss
@@ -86,7 +86,7 @@ hr {
   color: $positive-default;
 }
 
-.usdr-tab-nav-link {
+.usdr-link {
   color: #305CE0;
 }
 

diff --git a/packages/client/src/arpa_reporter/views/AgenciesView.vue b/packages/client/src/arpa_reporter/views/AgenciesView.vue
@@ -5,7 +5,7 @@
     <div class="mb-4">
       <router-link
         to="/agencies/new"
-        class="btn btn-primary"
+        class="btn usdr-btn-primary"
       >
         Create New Agency
       </router-link>

diff --git a/packages/client/src/arpa_reporter/views/LoginView.spec.js b/packages/client/src/arpa_reporter/views/LoginView.spec.js
@@ -1,21 +1,143 @@
 import LoginView from '@/arpa_reporter/views/LoginView.vue';
 
-import { describe, it, expect } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import {
+  describe, it, afterEach, vi, expect,
+} from 'vitest';
+import {
+  fireEvent, render, screen, cleanup, waitFor,
+} from '@testing-library/vue';
+
+const mockPost = vi.fn();
+global.fetch = mockPost;
 
 describe('LoginView component', () => {
   const $route = {
     query: {},
   };
 
-  it('renders', () => {
-    const wrapper = shallowMount(LoginView, {
+  const mockRouter = {
+    push: vi.fn(),
+    resolve: vi.fn().mockReturnValue({
+      href: '/arpa_reporter/',
+    }),
+  };
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    mockPost.mockClear();
+  });
+
+  it('it displays expected elements and handles successful login request', async () => {
+    mockPost.mockResolvedValueOnce(
+      new Promise((resolve) => {
+        resolve({
+          ok: true,
+          success: true,
+          json: () => Promise.resolve({ message: 'Email sent to [email protected]. Check your inbox', success: true }),
+        });
+      }),
+    );
+
+    render(LoginView, {
+      global: {
+        mocks: {
+          $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
+        },
+      },
+    });
+
+    screen.getByRole('heading', { name: /ARPA Reporter Login/i, level: 1 });
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, '[email protected]');
+    await fireEvent.click(submitButton);
+
+    await waitFor(() => screen.getByText(/Email sent to [email protected]. Check your inbox/i));
+  });
+
+  it('handles login error response', async () => {
+    mockPost.mockResolvedValueOnce(
+      new Promise((resolve) => {
+        resolve({
+          ok: true,
+          success: true,
+          json: () => Promise.resolve({ message: 'User "[email protected]" not found', success: true }),
+        });
+      }),
+    );
+
+    render(LoginView, {
       global: {
         mocks: {
           $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
         },
       },
     });
-    expect(wrapper.exists()).toBe(true);
+
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, '[email protected]');
+    await fireEvent.click(submitButton);
+
+    await waitFor(() => screen.getByText(/User "[email protected]" not found/i));
+  });
+
+  it('validates email format before submission', async () => {
+    render(LoginView, {
+      global: {
+        mocks: {
+          $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
+        },
+      },
+    });
+
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, 'invalid-email');
+    await fireEvent.click(submitButton);
+
+    expect(mockPost).not.toHaveBeenCalled();
+    screen.getByText(/please enter a valid email/i);
+  });
+  it('handles login error status', async () => {
+    mockPost.mockResolvedValueOnce(
+      new Promise((resolve) => {
+        resolve({
+          ok: false,
+          success: true,
+          statusText: 'Unable to connect to the server',
+          status: 500,
+          json: () => Promise.resolve({ }),
+        });
+      }),
+    );
+
+    render(LoginView, {
+      global: {
+        mocks: {
+          $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
+        },
+      },
+    });
+
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, '[email protected]');
+    await fireEvent.click(submitButton);
+
+    await waitFor(() => screen.getByText(/login: Unable to connect to the server \(500\)/i));
   });
 });
diff --git a/packages/client/src/arpa_reporter/views/LoginView.vue b/packages/client/src/arpa_reporter/views/LoginView.vue
@@ -2,7 +2,7 @@
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
   <div class="my-3">
-    <h2>ARPA Reporter Login</h2>
+    <h1>ARPA Reporter Login</h1>
     <form @submit="login">
       <div class="form-group">
         <input
@@ -16,7 +16,7 @@
       </div>
       <div class="form-group">
         <button
-          class="btn btn-primary"
+          class="btn usdr-btn-primary"
           type="Submit"
           @click="login"
         >

diff --git a/packages/client/src/arpa_reporter/views/NewTemplateView.vue b/packages/client/src/arpa_reporter/views/NewTemplateView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Upload Period Template</h2>
+    <h1>Upload Period Template</h1>
 
     <p>
       This upload will be used as the template for period <em>{{ reportingPeriod.name }}</em>
@@ -24,15 +24,15 @@
       </div>
       <div class="form-group">
         <button
-          class="btn btn-primary"
+          class="btn usdr-btn-primary"
           type="submit"
           :disabled="uploadDisabled"
           @click.prevent="uploadTemplate"
         >
           {{ uploadButtonLabel }}
         </button>
         <a
-          class="ml-3"
+          class="ml-3 usdr-link"
           href="#"
           @click="cancelUpload"
         >Cancel</a>

diff --git a/packages/client/src/arpa_reporter/views/NewUploadView.vue b/packages/client/src/arpa_reporter/views/NewUploadView.vue
@@ -79,7 +79,7 @@ export default {
               name: 'submit',
               type: 'submit',
               label: 'Submit',
-              inputClass: ['btn', 'btn-primary'],
+              inputClass: ['btn', 'usdr-btn-primary'],
             },
             {
               type: 'button',

diff --git a/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue b/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue
@@ -5,7 +5,7 @@
     <div class="mb-4">
       <router-link
         to="/reporting_periods/new"
-        class="btn btn-primary"
+        class="btn usdr-btn-primary"
       >
         Create New Reporting Period
       </router-link>
@@ -36,14 +36,15 @@
             <router-link
               v-if="!p.certified_at"
               :to="`/new_template/${p.id}`"
+              class="usdr-link"
             >
               Upload Template
             </router-link>
           </td>
           <td>
             <span v-if="isCurrentReportingPeriod(p)">
               <button
-                class="btn btn-primary"
+                class="btn usdr-btn-primary"
                 data-toggle="modal"
                 data-target="#certify-reporting-period"
                 :disabled="certifying"
@@ -97,7 +98,7 @@
           <div class="modal-footer">
             <button
               type="button"
-              class="btn btn-primary"
+              class="btn usdr-btn-primary"
               @click="handleCertify"
             >
               Certify

diff --git a/packages/client/src/arpa_reporter/views/UploadView.vue b/packages/client/src/arpa_reporter/views/UploadView.vue
@@ -132,7 +132,7 @@
               class="float-right"
             >
               <button
-                class="btn btn-primary ml-2"
+                class="btn usdr-btn-primary ml-2"
                 :disabled="validating"
                 @click="validateUpload"
               >
@@ -178,7 +178,7 @@
                 Invalidate
               </button>
               <button
-                class="btn btn-primary ml-2"
+                class="btn usdr-btn-primary ml-2"
                 :disabled="validating"
                 @click="validateUpload"
               >
@@ -187,7 +187,7 @@
             </span>
 
             <!--
-            <button class="btn btn-primary ml-2" @click="validateUpload" :disabled="validating">
+            <button class="btn usdr-btn-primary ml-2" @click="validateUpload" :disabled="validating">
               <span v-if="validating">Validating...</span>
               <span v-else-if="upload.validated_at">Re-validate</span>
               <span v-else>Validate</span>

diff --git a/packages/client/src/arpa_reporter/views/UploadsView.vue b/packages/client/src/arpa_reporter/views/UploadsView.vue
@@ -8,7 +8,7 @@
 
         <router-link
           to="/new_upload"
-          class="btn btn-primary ml-2"
+          class="btn usdr-btn-primary ml-2"
         >
           Submit Workbook
         </router-link>

diff --git a/packages/client/src/arpa_reporter/views/UsersView.vue b/packages/client/src/arpa_reporter/views/UsersView.vue
@@ -4,7 +4,7 @@
     <div class="mb-4">
       <router-link
         to="/users/new"
-        class="btn btn-primary"
+        class="btn usdr-btn-primary"
       >
         Create New User
       </router-link>

diff --git a/packages/client/src/arpa_reporter/views/ValidationView.vue b/packages/client/src/arpa_reporter/views/ValidationView.vue
@@ -122,7 +122,7 @@ export default {
   computed: {
     revalidateBtnClass() {
       return {
-        'btn-primary': !this.commit,
+        'usdr-btn-primary': !this.commit,
         'btn-danger': this.commit,
       };
     },