QA: openFieldDetail tutarlılığı + role-span robustluğu + test kapsamı (+15)

frontend/src/lib/pages/account.js

@@ -85,11 +85,14 @@ export function goToWelcome() {
 }
 
 /**
- * Rol-aware nav görünürlüğü — `[data-role]` taşıyan nav item'ları yalnız
- * eşleşen role gösterir (örn. admin "Kullanıcılar"). user null ise hepsi gizli.
+ * Rol-aware görünürlük — `[data-role]` taşıyan elemanları yalnız eşleşen role
+ * gösterir (örn. admin "Kullanıcılar"). user null ise hepsi gizli.
+ * `.user-badge-role` HARİÇ tutulur: o span data-role'ü SADECE CSS renk kodu için
+ * taşır, görünürlük gating'ine girmemeli (badge görünürken her zaman görünmeli).
+ * (export: vitest birim testi için.)
  */
-function _applyRoleVisibility(user) {
-    document.querySelectorAll('[data-role]').forEach(el => {
+export function _applyRoleVisibility(user) {
+    document.querySelectorAll('[data-role]:not(.user-badge-role)').forEach(el => {
         // data-role tek rol ("admin") veya virgüllü çoklu rol ("admin,overseer,developer")
         const roles = (el.getAttribute('data-role') || '').split(',').map(r => r.trim());
         el.style.display = (user && roles.includes(user.role)) ? '' : 'none';

frontend/src/lib/pages/fields.js

@@ -249,8 +249,14 @@ export function openFieldDetail(fieldId) {
     document.getElementById('pageTitle').textContent = pageTitles['field-detail'][0];
     document.getElementById('pageSubtitle').textContent = pageTitles['field-detail'][1];
     if (location.hash !== `#field/${fieldId}`) location.hash = `#field/${fieldId}`;
+    // navigate() ile tutarlı: sayfa tepeden açılsın, odak kaydırmasın, mobil sidebar kapansın.
+    window.scrollTo(0, 0);
     const main = document.getElementById('main-content');
-    if (main) main.focus({ preventScroll: false });
+    if (main) main.focus({ preventScroll: true });
+    const sidebar = document.getElementById('sidebar');
+    if (sidebar) sidebar.classList.remove('open');
+    const hamburger = document.querySelector('.hamburger');
+    if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
     loadFieldDetail(fieldId);
 }
 

frontend/tests/account_rolevis.test.js

@@ -0,0 +1,59 @@
+/**
+ * Birim testler — _applyRoleVisibility() (frontend/src/lib/pages/account.js).
+ *
+ * Rol-aware görünürlük: [data-role] taşıyan elemanlar yalnız eşleşen role
+ * görünür; user null ise hepsi gizli. .user-badge-role span'i HARİÇ (yalnız
+ * CSS renk kodu için data-role taşır, gating'e girmemeli).
+ * jsdom environment vitest config'inden gelir.
+ */
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { _applyRoleVisibility } from "../src/lib/pages/account.js";
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <a class="nav-item" data-role="admin" id="usersNav">Kullanıcılar</a>
+    <a class="nav-item" data-role="admin,overseer,developer" id="analyticsNav">Raporlar</a>
+    <a class="dev-link" data-role="admin,developer" id="devLink">&lt;/&gt;</a>
+    <span class="user-badge-role" data-role="admin" id="roleSpan">yönetici</span>`;
+});
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("_applyRoleVisibility", () => {
+  it("admin: tüm admin-içeren öğeler görünür", () => {
+    _applyRoleVisibility({ role: "admin" });
+    expect(document.getElementById("usersNav").style.display).toBe("");
+    expect(document.getElementById("analyticsNav").style.display).toBe("");
+    expect(document.getElementById("devLink").style.display).toBe("");
+  });
+
+  it("çiftçi: admin-only öğeler gizli", () => {
+    _applyRoleVisibility({ role: "farmer" });
+    expect(document.getElementById("usersNav").style.display).toBe("none");
+    expect(document.getElementById("devLink").style.display).toBe("none");
+    expect(document.getElementById("analyticsNav").style.display).toBe("none");
+  });
+
+  it("developer: </> görünür ama Kullanıcılar gizli", () => {
+    _applyRoleVisibility({ role: "developer" });
+    expect(document.getElementById("devLink").style.display).toBe("");
+    expect(document.getElementById("analyticsNav").style.display).toBe("");
+    expect(document.getElementById("usersNav").style.display).toBe("none");
+  });
+
+  it("user null → tüm gated öğeler gizli", () => {
+    _applyRoleVisibility(null);
+    expect(document.getElementById("usersNav").style.display).toBe("none");
+    expect(document.getElementById("analyticsNav").style.display).toBe("none");
+    expect(document.getElementById("devLink").style.display).toBe("none");
+  });
+
+  it(".user-badge-role gating'e GİRMEZ — hiçbir durumda gizlenmez", () => {
+    const span = document.getElementById("roleSpan"); // data-role=admin
+    _applyRoleVisibility({ role: "farmer" }); // eşleşmeyen rol
+    expect(span.style.display).toBe(""); // hariç → dokunulmadı
+    _applyRoleVisibility(null); // user yok
+    expect(span.style.display).toBe(""); // yine dokunulmadı
+  });
+});

frontend/tests/charts_retheme.test.js

@@ -0,0 +1,81 @@
+/**
+ * Birim testler — rethemeCharts() (frontend/src/lib/charts.js).
+ *
+ * Tema değişiminde kayıtlı Chart.js instance'larının canvas-içi renkleri
+ * YERİNDE güncellenmeli; amber (#f59e0b) / mavi (#3b82f6) accent eksen
+ * tick'leri KORUNMALI; grid:display=false eksenine dokunulmamalı.
+ * jsdom environment vitest config'inden gelir.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  charts,
+  rethemeCharts,
+  chartTick,
+  chartLegend,
+  chartGrid,
+} from "../src/lib/charts.js";
+
+function mockChart() {
+  return {
+    options: {
+      plugins: { legend: { labels: { color: "#000" } }, title: { color: "#000" } },
+      scales: {
+        x: { ticks: { color: "#000" }, grid: { color: "#000" } },
+        y: { ticks: { color: "#f59e0b" }, grid: { color: "#000" } }, // amber accent
+        y1: { ticks: { color: "#3b82f6" }, grid: { display: false } }, // mavi accent, grid kapalı
+      },
+    },
+    update: vi.fn(),
+  };
+}
+
+function clearRegistry() {
+  Object.keys(charts).forEach((k) => delete charts[k]);
+}
+
+describe("rethemeCharts", () => {
+  beforeEach(() => {
+    clearRegistry();
+    document.documentElement.dataset.theme = "light";
+  });
+  afterEach(() => {
+    clearRegistry();
+    delete document.documentElement.dataset.theme;
+  });
+
+  it("gri tick/legend/grid renklerini güncel temaya çeker + update çağırır", () => {
+    const c = mockChart();
+    charts.test = c;
+    document.documentElement.dataset.theme = "dark";
+    rethemeCharts();
+    expect(c.options.scales.x.ticks.color).toBe(chartTick());
+    expect(c.options.plugins.legend.labels.color).toBe(chartLegend());
+    expect(c.options.scales.x.grid.color).toBe(chartGrid());
+    expect(c.update).toHaveBeenCalled();
+  });
+
+  it("amber/mavi accent eksen tick'lerini KORUR", () => {
+    const c = mockChart();
+    charts.test = c;
+    document.documentElement.dataset.theme = "dark";
+    rethemeCharts();
+    expect(c.options.scales.y.ticks.color).toBe("#f59e0b");
+    expect(c.options.scales.y1.ticks.color).toBe("#3b82f6");
+  });
+
+  it("grid:display=false ekseninin grid rengine dokunmaz", () => {
+    const c = mockChart();
+    charts.test = c;
+    rethemeCharts();
+    expect(c.options.scales.y1.grid.display).toBe(false);
+    expect(c.options.scales.y1.grid.color).toBeUndefined();
+  });
+
+  it("light↔dark farklı renkler üretir (tema-duyarlı)", () => {
+    document.documentElement.dataset.theme = "light";
+    const lightTick = chartTick();
+    document.documentElement.dataset.theme = "dark";
+    const darkTick = chartTick();
+    expect(lightTick).not.toBe(darkTick);
+  });
+});

frontend/tests/router_nav.test.js

@@ -0,0 +1,72 @@
+/**
+ * Birim testler — navigate() (frontend/src/lib/router.js).
+ *
+ * Kapsam: hedef sayfa aktive + başlık güncelleme; hash senkronu (refresh
+ * kalıcılığı, replaceState); tepeden açılma (scrollTo 0,0); active highlight
+ * yalnız .nav-item'lara; handler tetikleme.
+ * jsdom environment vitest config'inden gelir.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { navigate } from "../src/lib/router.js";
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <div id="sidebar" class="open"></div>
+    <button class="hamburger" aria-expanded="true"></button>
+    <main id="main-content" tabindex="-1"></main>
+    <a class="nav-item" href="#dashboard">Genel</a>
+    <a class="nav-item" href="#weather">Hava</a>
+    <h1 id="pageTitle"></h1>
+    <p id="pageSubtitle"></p>
+    <section class="page active" id="page-dashboard"></section>
+    <section class="page" id="page-weather"></section>`;
+  history.replaceState(null, "", " ");
+  vi.spyOn(window, "scrollTo").mockImplementation(() => {});
+  vi.spyOn(history, "replaceState");
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.innerHTML = "";
+});
+
+describe("navigate", () => {
+  it("hedef sayfayı aktive eder + öncekini kapatır + başlık günceller", () => {
+    navigate("weather", {}, null);
+    expect(document.getElementById("page-weather").classList.contains("active")).toBe(true);
+    expect(document.getElementById("page-dashboard").classList.contains("active")).toBe(false);
+    expect(document.getElementById("pageTitle").textContent).toBeTruthy();
+    expect(document.getElementById("pageSubtitle").textContent).toBeTruthy();
+  });
+
+  it("hash'i mevcut sayfaya senkronlar (refresh kalıcılığı)", () => {
+    navigate("weather", {}, null);
+    expect(history.replaceState).toHaveBeenCalledWith(null, "", "#weather");
+  });
+
+  it("sayfayı tepeden açar (scrollTo 0,0)", () => {
+    navigate("weather", {}, null);
+    expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
+  });
+
+  it("active highlight yalnız .nav-item'a — çip (nav-item değil) active almaz", () => {
+    document.body.insertAdjacentHTML(
+      "beforeend",
+      '<a class="user-badge" href="#weather" id="chip"></a>',
+    );
+    navigate("weather", {}, null);
+    expect(document.querySelector('.nav-item[href="#weather"]').classList.contains("active")).toBe(true);
+    expect(document.getElementById("chip").classList.contains("active")).toBe(false);
+  });
+
+  it("mobil sidebar'ı kapatır", () => {
+    navigate("weather", {}, null);
+    expect(document.getElementById("sidebar").classList.contains("open")).toBe(false);
+    expect(document.querySelector(".hamburger").getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("sayfa handler'ını çağırır", () => {
+    const h = vi.fn();
+    navigate("weather", { weather: h }, null);
+    expect(h).toHaveBeenCalledTimes(1);
+  });
+});