feat: establish frontend foundation

src/shared/ui/StateView.test.tsx

@@ -0,0 +1,36 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { theme } from "../../app/theme";
+import { StateView } from "./StateView";
+
+describe("StateView", () => {
+	afterEach(cleanup);
+
+	it("renders an accessible loading state with a loader", () => {
+		render(
+			<MantineProvider theme={theme}>
+				<StateView loading text="Пожалуйста, подождите." title="Загрузка" />
+			</MantineProvider>,
+		);
+
+		const status = screen.getByRole("status");
+		expect(status).toHaveTextContent("Загрузка");
+		expect(screen.getByLabelText("Загрузка")).toBeInTheDocument();
+	});
+
+	it("renders an accessible error state", () => {
+		render(
+			<MantineProvider theme={theme}>
+				<StateView
+					error
+					text="Попробуйте обновить страницу позже."
+					title="Что-то пошло не так"
+				/>
+				,
+			</MantineProvider>,
+		);
+
+		expect(screen.getByRole("alert")).toHaveTextContent("Что-то пошло не так");
+	});
+});