tremble7681/mechanic-pwa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pwa): аренда и штрафы видны прямо на главном экране

Browse Source 
Две статьи, которые водитель проверяет каждый день: за них он платит и из-за них
ему звонят. Стоят под итогом, нажатие ведёт сразу к оплате этой статьи — чаще
всего человек за тем и открыл приложение, а заход в шторку это лишний шаг.

Остальные статьи (депозит, повреждения, прочее) на экран не выносим: они редкие,
им хватает шторки, иначе экран снова превращается в столбик из шести строк и
выписка уезжает за нижний край телефона.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tremble7681
2026-08-18 17:02:13 +10:00
co-authored by Claude Opus 5
parent 2d4b66d51f
commit 6becdd036c
2 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
driver-pwa/frontend/src/pages/BalancePage.test.tsx
+32 -10
View File
@@ -1,7 +1,7 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router-dom";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// Ответ как у настоящего водителя: статьи 1С, итог отдельным числом.
@@ -34,7 +34,12 @@ function wrap() {
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
return render(
<QueryClientProvider client={qc}>
<MemoryRouter><BalancePage /></MemoryRouter>
<MemoryRouter>
<Routes>
<Route path="/" element={<BalancePage />} />
<Route path="/topup" element={<p>экран пополнения</p>} />
</Routes>
</MemoryRouter>
</QueryClientProvider>
);
}
@@ -63,22 +68,39 @@ describe("главный экран", () => {
expect(calls[calls.length - 1][2]).toBe("fines");
});
it("категории живут в шторке «Пополнить», а не на экране", async () => {
it("аренда и штрафы видны сразу, остальные статьи — нет", async () => {
wrap();
await screen.findByText("−8 976,25 ₽");
expect(screen.queryByText("Долг аренда")).not.toBeInTheDocument();
await userEvent.click(screen.getByRole("button", { name: /Пополнить/ }));
expect(await screen.findByRole("dialog", { name: "Куда пополнить" })).toBeInTheDocument();
// Эти две водитель проверяет каждый день — они на экране.
expect(screen.getByText("Долг аренда")).toBeInTheDocument();
// «Страховка» платежом не закрывается — в списке выбора ей делать нечего.
expect(screen.getByText("Долг по штрафам")).toBeInTheDocument();
expect(screen.getByText("−3 050 ₽")).toBeInTheDocument();
// Редкие статьи на экран не лезут: для них есть шторка.
expect(screen.queryByText("Страховка")).not.toBeInTheDocument();
});
it("нажатие на строку долга ведёт сразу к оплате этой статьи", async () => {
wrap();
await userEvent.click(await screen.findByRole("button", { name: /Долг по штрафам/ }));
expect(await screen.findByText("экран пополнения")).toBeInTheDocument();
});
it("категории для выбора живут в шторке «Пополнить»", async () => {
wrap();
await screen.findByText("−8 976,25 ₽");
await userEvent.click(screen.getByRole("button", { name: /^Пополнить$/ }));
const sheet = await screen.findByRole("dialog", { name: "Куда пополнить" });
const inSheet = within(sheet);
expect(inSheet.getByText("Долг аренда")).toBeInTheDocument();
expect(inSheet.getByText("Долг по штрафам")).toBeInTheDocument();
// «Страховка» платежом не закрывается — в списке выбора ей делать нечего.
expect(inSheet.queryByText("Страховка")).not.toBeInTheDocument();
});
it("шторка закрывается тапом мимо", async () => {
wrap();
await screen.findByText("−8 976,25 ₽");
await userEvent.click(screen.getByRole("button", { name: /Пополнить/ }));
await userEvent.click(screen.getByRole("button", { name: /^Пополнить$/ }));
await userEvent.click(await screen.findByRole("button", { name: "Закрыть" }));
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});