fix: geo 1176 for consistency we should be capitalizing field names t…

…hroughout the admin portal (#811)

admin-frontend/e2e/announcements.spec.ts

@@ -4,7 +4,7 @@ import { AddAnnouncementPage } from './pages/announcements/add-announcement-page
 import { EditAnnouncementPage } from './pages/announcements/edit-announcement-page';
 import { AnnouncementStatus } from './types';
 
-test.describe.skip('Announcements', () => {
+test.describe('Announcements', () => {
   test.describe('add announcement', () => {
     test('save as draft', async ({ page }) => {
       const announcementsPage = await AnnouncementsPage.visit(page);

admin-frontend/e2e/employer-search.spec.ts

@@ -0,0 +1,17 @@
+import { test } from '@playwright/test';
+
+import { EmployerSearchPage } from './pages/employer-search/employer-search-page';
+import { PagePaths } from './utils';
+
+test.describe('Employer Search', () => {
+  let employerSearchPage: EmployerSearchPage;
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PagePaths.EMPLOYERS);
+    employerSearchPage = new EmployerSearchPage(page);
+    await employerSearchPage.setup();
+  });
+
+  test('search employer by name', async () => {
+    await employerSearchPage.searchEmployerByAndVerify();
+  });
+});

admin-frontend/e2e/pages/employer-search/employer-search-page.ts

@@ -0,0 +1,50 @@
+import { expect, Locator } from 'playwright/test';
+import { AdminPortalPage } from '../admin-portal-page';
+
+export class EmployerSearchPage extends AdminPortalPage {
+  searchInput: Locator;
+  calendarYearInput: Locator;
+  searchButton: Locator;
+  resetButton: Locator;
+
+  async setup(): Promise<void> {
+    this.searchInput = await this.page.getByLabel('Search by employer name');
+    this.calendarYearInput = await this.page.getByLabel('Calendar Year(s)');
+    this.searchButton = await this.page.getByRole('button', {
+      name: 'Search',
+    });
+    this.resetButton = await this.page.getByRole('button', {
+      name: 'Reset',
+    });
+
+    await expect(this.searchInput).toBeVisible();
+    await expect(this.calendarYearInput).toBeVisible();
+    await expect(this.searchButton).toBeVisible();
+    await expect(this.resetButton).toBeVisible();
+  }
+
+  async searchEmployerByAndVerify(): Promise<void> {
+    await this.searchInput.fill('');
+    const waitForResults = this.waitForResultsToLoad();
+    await this.searchButton.click();
+    const response = await waitForResults;
+    const { employers } = await response.json();
+    const table = await this.page.getByRole('table');
+    await expect(table).toBeVisible();
+
+    for (const employer of employers) {
+      const employerName = await this.page.getByText(employer.company_name);
+      const count = employers.filter((e) => e.company_name === employer.company_name).length;
+      await expect(await employerName.count()).toBe(count);
+    }
+  }
+
+  private waitForResultsToLoad() {
+    return this.page.waitForResponse(
+      (response) =>
+        response.url().includes('admin-api/v1/employers') &&
+        response.status() === 200 &&
+        response.request().method() === 'GET',
+    );
+  }
+}

admin-frontend/e2e/user-management.spec.ts

@@ -1,7 +1,7 @@
 import { test } from '@playwright/test';
-import { UserManagementPage } from './pages/user-management/user-management-page';
 import { faker } from '@faker-js/faker';
 import { PagePaths } from './utils';
+import { UserManagementPage } from './pages/user-management/user-management-page';
 
 const user = {
   name: faker.person.fullName(),

admin-frontend/e2e/utils/index.ts

@@ -8,6 +8,7 @@ export const PagePaths = {
   ANNOUNCEMENTS: `${baseURL}/announcements`,
   ADD_ANNOUNCEMENTS: `${baseURL}/add-announcement`,
   EDIT_ANNOUNCEMENTS: `${baseURL}/edit-announcement`,
+  EMPLOYERS: `${baseURL}/employers`,
   USER_MANAGEMENT: `${baseURL}/user-management`,
   ANALYTICS: `${baseURL}/analytics`,
 };

admin-frontend/src/components/AnnouncementsPage.vue

@@ -1,4 +1,6 @@
 <template>
+  <h4>Search Announcements</h4>
+
   <v-row dense class="mt-0 w-100 mb-4">
     <v-col class="py-0">
       <AnnouncementSearchFilters />
@@ -150,7 +152,7 @@ import { useConfigStore } from '../store/modules/config';
 
 const announcementSearchStore = useAnnouncementSearchStore();
 const { searchResults, isSearching, hasSearched, totalNum, pageSize } =
-storeToRefs(announcementSearchStore);
+  storeToRefs(announcementSearchStore);
 
 const configStore = useConfigStore();
 const { config } = storeToRefs(configStore);

admin-frontend/src/components/EmployersPage.vue

@@ -30,6 +30,7 @@
         :persistent-placeholder="true"
         placeholder="All"
         label="Calendar Year(s)"
+        aria-label="Calendar Year(s)"
         :single-line="true"
         multiple
         class="calendar-year flex-shrink-1 flex-grow-0"

admin-frontend/src/components/ReportSearchFilters.vue

@@ -48,7 +48,7 @@
     <v-row dense>
       <v-col sm="6" md="6" lg="4" xl="3" class="d-flex flex-column">
         <h5>
-          Submission date range
+          Submission Date Range
           <ToolTip
             id="submission-date-range-tooltip"
             text="This is a date range selection. Please select the start and end date of the range. For 1 day please click the same date twice"
@@ -77,7 +77,7 @@
       </v-col>
 
       <v-col sm="6" md="6" lg="4" xl="2" class="d-flex flex-column">
-        <h5>NAICS code</h5>
+        <h5>NAICS Code</h5>
         <v-select
           v-model="selectedNaicsCodes"
           :items="naicsCodes"
@@ -168,7 +168,7 @@
       </v-col>
 
       <v-col sm="8" md="7" lg="4" xl="3" class="d-flex flex-column">
-        <h5>Employee count</h5>
+        <h5>Employee Count</h5>
         <v-select
           v-model="selectedEmployeeCount"
           :items="employeeCountRanges"

admin-frontend/src/components/ReportsPage.vue

@@ -31,7 +31,7 @@
           :loading="isDownloadingCsv"
           @click="exportResults()"
         >
-          Export results (CSV)
+          Export Results (CSV)
         </v-btn>
       </v-col>
     </v-row>
@@ -116,13 +116,13 @@ function onAnyReportChanged(payload: ReportChangedEventPayload) {
 
 const headers = ref<any>([
   {
-    title: 'Submission date',
+    title: 'Submission Date',
     align: 'start',
     sortable: true,
     key: ReportKeys.CREATE_DATE,
   },
   {
-    title: 'Employer name',
+    title: 'Employer Name',
     align: 'start',
     sortable: true,
     key: ReportKeys.COMPANY_NAME,
@@ -134,7 +134,7 @@ const headers = ref<any>([
     key: ReportKeys.NAICS_CODE,
   },
   {
-    title: 'Employee count',
+    title: 'Employee Count',
     align: 'start',
     sortable: true,
     key: ReportKeys.EMPLOYEE_COUNT,

admin-frontend/src/components/announcements/AnnouncementForm.vue

@@ -105,7 +105,7 @@
               </v-textarea>
             </v-col>
             <v-col cols="12" md="12" sm="12">
-              <h5 class="mb-2">Time settings</h5>
+              <h5 class="mb-2">Time Settings</h5>
               <v-row dense>
                 <v-col cols="12">
                   <span

admin-frontend/src/components/announcements/AnnouncementSearchFilters.vue

@@ -52,7 +52,7 @@
     <v-row dense>
       <v-col cols="12" sm="6" md="6" lg="4" xl="3" class="d-flex flex-column">
         <h5>
-          Active On date range
+          Active On Date Range
 
           <FilterDateRangeTooltip id="active-on-tooltip" />
         </h5>
@@ -75,7 +75,7 @@
 
       <v-col cols="12" sm="6" md="6" lg="4" xl="3" class="d-flex flex-column">
         <h5>
-          Expiry date range <FilterDateRangeTooltip id="expires-on-tooltip" />
+          Expiry Date Range <FilterDateRangeTooltip id="expires-on-tooltip" />
         </h5>
         <VueDatePicker
           v-model="expiryDateRange"