Gängige Praxis: *Slice.js Verwendung: Wenn du Redux Toolkit und createSlice nutzt, ist der Postfix Slice gängiger. Begründung: createSlice ist ein Begriff aus Redux Toolkit. Der Name vermittelt, dass die Datei nicht nur den Reducer enthält, sondern auch Aktionen und den initialen Zustand. Häufig in modernen Projekten verwendet.
46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { RecoilRoot } from "recoil";
|
|
import MapComponent from "./MapComponent";
|
|
import { mapLayersState } from "../store/atoms/mapLayersSlice";
|
|
import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleStateSlice";
|
|
import "@testing-library/jest-dom";
|
|
|
|
describe("MapComponent - TK-Komponenten Tests", () => {
|
|
test("TK-Komponenten sind sichtbar, wenn Checkbox aktiviert ist", () => {
|
|
// Initialisiere die Recoil-Atoms
|
|
const mockState = {
|
|
TKKomponenten: true, // TK-Komponenten sichtbar
|
|
};
|
|
|
|
render(
|
|
<RecoilRoot initializeState={({ set }) => set(mapLayersState, mockState)}>
|
|
<MapComponent />
|
|
</RecoilRoot>
|
|
);
|
|
|
|
// Stelle sicher, dass die TK-Komponenten sichtbar sind
|
|
const tkLayer = screen.getByText(/TK-Komponenten/i);
|
|
expect(tkLayer).toBeInTheDocument();
|
|
});
|
|
|
|
test("TK-Komponenten werden ausgeblendet, wenn Checkbox deaktiviert wird", () => {
|
|
const mockState = {
|
|
TKKomponenten: true, // Initial sichtbar
|
|
};
|
|
|
|
render(
|
|
<RecoilRoot initializeState={({ set }) => set(mapLayersState, mockState)}>
|
|
<MapComponent />
|
|
</RecoilRoot>
|
|
);
|
|
|
|
// Simuliere die Checkbox-Interaktion
|
|
const checkbox = screen.getByRole("checkbox", { name: /TK-Komponenten/i });
|
|
fireEvent.click(checkbox); // Deaktiviert die Sichtbarkeit
|
|
|
|
// Erwartung: TK-Komponenten sind nicht sichtbar
|
|
expect(checkbox.checked).toBe(false);
|
|
});
|
|
});
|