Skip to content

Commit

Permalink
Merge branch 'main' into feat/landing-page-link-update
Browse files Browse the repository at this point in the history
  • Loading branch information
@sukanya-rath
sukanya-rath authored May 15, 2024
2 parents 2361b27 + 4546bb5 commit 7d0f6ab
Show file tree
Hide file tree
Showing 6 changed files with 254 additions and 184 deletions.
7 changes: 7 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"playwright": "^1.43.1",
"postcss": "^8.4.32",
"prettier": "^3.1.1",
"resize-observer-polyfill": "^1.5.1",
"stylus": "^0.63.0",
"stylus-loader": "^8.0.0",
"vite": "^4.1.4",
Expand Down
111 changes: 6 additions & 105 deletions frontend/src/components/Dashboard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<template>
<ReportSelectionManager />
<v-row class="mt-3">
<v-col>
<h2 data-testid="legal-name">Welcome, {{ userInfo?.legalName }}.</h2>
Expand Down Expand Up @@ -68,53 +67,7 @@
<v-toolbar-title>Submitted Reports</v-toolbar-title>
</v-toolbar>
<v-card-text>
<div v-if="!reports.length">No generated reports yet.</div>
<div v-if="reports.length">
<v-table>
<thead>
<tr>
<th scope="col" class="font-weight-bold">Reporting Year</th>
<th scope="col" class="font-weight-bold">Submission Date</th>
<th scope="col" class="font-weight-bold text-right pr-8">
Action
</th>
</tr>
</thead>
<tbody>
<tr v-for="report in reports" :key="report.report_id">
<td :data-testid="'reporting_year-' + report.report_id">
{{ report.reporting_year }}
</td>
<td
:data-testid="'report_published_date-' + report.report_id"
>
{{ formatDateTime(report.create_date) }}
</td>
<td class="text-right">
<v-btn
:data-testid="'view-report-' + report.report_id"
prepend-icon="mdi-eye-outline"
variant="text"
color="link"
@click="viewReport(report)"
>
View
</v-btn>
<v-btn
v-if="report.is_unlocked"
:data-testid="'edit-report-' + report.report_id"
prepend-icon="mdi-eye-outline"
variant="text"
color="link"
@click="editReport(report)"
>
Edit
</v-btn>
</td>
</tr>
</tbody>
</v-table>
</div>
<ReportsTable />
</v-card-text>
</v-card>
</v-col>
Expand All @@ -138,72 +91,20 @@
</template>

<script lang="ts">
import ReportSelectionManager from './util/DasboardReportManager.vue';
import { mapActions, mapState } from 'pinia';
import ReportsTable from './util/ReportsTable.vue';
import { mapState } from 'pinia';
import { authStore } from '../store/modules/auth';
import { useCodeStore } from '../store/modules/codeStore';
import { REPORT_STATUS } from '../utils/constant';
import ApiService from '../common/apiService';
import { DateTimeFormatter, LocalDate, ZonedDateTime } from '@js-joda/core';
import { Locale } from '@js-joda/locale_en';
import {
useReportStepperStore,
ReportMode,
} from '../store/modules/reportStepper';
import { IReport } from '../common/types';
import { useConfigStore } from '../store/modules/config';
type DashboardData = {
reports: IReport[];
userInfo?: any;
};
export default {
components: { ReportSelectionManager },
data: (): DashboardData => ({
reports: [],
}),
components: { ReportsTable },
data: (): DashboardData => ({}),
computed: {
...mapState(useReportStepperStore, ['reportId']),
...mapState(authStore, ['userInfo']),
...mapState(useCodeStore, ['naicsCodes']),
...mapState(useConfigStore, ['config']),
},
async beforeMount() {
this.reset();
this.loadConfig();
this.getReports();
},
methods: {
...mapActions(useReportStepperStore, ['setReportInfo', 'reset', 'setMode']),
...mapActions(useConfigStore, ['loadConfig']),
formatDate(value, format = 'MMMM d, YYYY') {
const formatter = DateTimeFormatter.ofPattern(format).withLocale(
Locale.ENGLISH,
);
return LocalDate.parse(value).format(formatter);
},
formatDateTime(value, format = 'MMMM d, YYYY') {
const formatter = DateTimeFormatter.ofPattern(format).withLocale(
Locale.ENGLISH,
);
return ZonedDateTime.parse(value).format(formatter);
},
async getReports() {
this.reports = await ApiService.getReports({
report_status: REPORT_STATUS.PUBLISHED,
});
},
async viewReport(report: IReport) {
this.setMode(ReportMode.View);
await this.setReportInfo(report);
},
async editReport(report: IReport) {
this.setMode(ReportMode.Edit);
await this.setReportInfo(report);
await this.$router.push({ path: 'generate-report-form' });
},
},
}
};
</script>

Expand Down
88 changes: 9 additions & 79 deletions frontend/src/components/__tests__/Dashboard.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
import { expect, describe, it, vi, beforeEach } from 'vitest';

import { render, waitFor, fireEvent } from '@testing-library/vue';
import { render } from '@testing-library/vue';
import Dashboard from '../Dashboard.vue';
import { createTestingPinia } from '@pinia/testing';
import { authStore } from '../../store/modules/auth';
import { DateTimeFormatter, LocalDate } from '@js-joda/core';
import { Locale } from '@js-joda/locale_en';

const pinia = createTestingPinia();
const mockRouterPush = vi.fn();
const mockRouter = {
push: (...args) => mockRouterPush(...args),
};

vi.mock('../../common/apiService', () => ({
default: {
getReports: async () => {
return [];
},
},
}));

const wrappedRender = async () => {
return render(Dashboard, {
global: {
Expand All @@ -24,17 +30,6 @@ const wrappedRender = async () => {
});
};

const mockGetReports = vi.fn();
const mockGetReport = vi.fn();
vi.mock('../../common/apiService', () => ({
default: {
getReports: async () => {
return mockGetReports();
},
getReport: (...args) => mockGetReport(...args),
},
}));

const auth = authStore();

describe('Dashboard', () => {
Expand All @@ -44,72 +39,7 @@ describe('Dashboard', () => {
});

it('should user name', async () => {
mockGetReports.mockReturnValue([]);
const { getByTestId } = await wrappedRender();
expect(getByTestId('legal-name')).toHaveTextContent('Welcome, Test');
});

it('should display correct records', async () => {
mockGetReports.mockReturnValue([
{
report_id: 'id1',
report_start_date: '2023-01-01',
report_end_date: '2023-02-01',
reporting_year: 2023,
create_date: new Date().toISOString(),
},
]);
const { getByTestId } = await wrappedRender();
await waitFor(() => {
expect(mockGetReports).toHaveBeenCalled();
});

expect(getByTestId('reporting_year-id1')).toHaveTextContent('2023');
expect(getByTestId('report_published_date-id1')).toHaveTextContent(
LocalDate.now().format(
DateTimeFormatter.ofPattern('MMMM d, YYYY').withLocale(Locale.ENGLISH),
),
);
});
it('should open report details', async () => {
mockGetReports.mockReturnValue([
{
report_id: 'id1',
report_start_date: '2023-01-01',
report_end_date: '2023-02-01',
create_date: new Date().toISOString(),
},
]);
const { getByTestId } = await wrappedRender();
await waitFor(() => {
expect(mockGetReports).toHaveBeenCalled();
});

const viewReportButton = getByTestId('view-report-id1');
await fireEvent.click(viewReportButton);
});
it('should open report in edit mode', async () => {
mockGetReports.mockReturnValue([
{
report_id: 'id1',
report_start_date: '2023-01-01',
report_end_date: '2023-02-01',
create_date: new Date().toISOString(),
is_unlocked: true,
},
]);
const { getByTestId } = await wrappedRender();
await waitFor(() => {
expect(mockGetReports).toHaveBeenCalled();
});

const editReportButton = getByTestId('edit-report-id1');
await waitFor(() => {
expect(editReportButton).toBeInTheDocument();
});
await fireEvent.click(editReportButton);
expect(mockRouterPush).toHaveBeenCalledWith({
path: 'generate-report-form',
});
});
});
Loading

0 comments on commit 7d0f6ab

Please sign in to comment.