@griddo/ax 12.10.5 → 12.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.10.5",
+	"version": "12.11.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9ec0a833c7547915d64745182be330df4bfc1e9c"
+	"gitHead": "84947272b2aeecc017658fb0463be48c44895bb1"
 }

package/src/__tests__/components/Fields/ConditionalField/ConditionalField.test.tsx

@@ -87,6 +87,23 @@ describe("ConditionalField component rendering", () => {
 	});
 });
 
+describe("ConditionalField spacing", () => {
+	it("should reset the bottom margin of its direct child only", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ConditionalField {...defaultProps} />
+			</ThemeProvider>,
+		);
+
+		const conditionalFieldContent = screen.getByTestId("conditionalFieldContent");
+
+		expect(conditionalFieldContent).toHaveStyleRule("margin-bottom", "0", { modifier: "> div:last-child" });
+		// A descendant selector would also reach every nested field and "Add" button,
+		// flattening the spacing of nested ArrayFieldGroups (sc-110266).
+		expect(conditionalFieldContent).not.toHaveStyleRule("margin-bottom", "0", { modifier: "div:last-child" });
+	});
+});
+
 interface IConditionalFieldProps {
 	value: string | boolean;
 	options: any[];

package/src/__tests__/components/Fields/RadioField/RadioField.test.tsx

@@ -94,3 +94,69 @@ describe("onClick events", () => {
 		expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
 	});
 });
+
+describe("RadioField description", () => {
+	const baseProps: IRadioFieldProps = {
+		name: "redirectionType",
+		value: "301",
+		title: "301 - Permanent",
+	};
+
+	const renderField = (props: IRadioFieldProps) =>
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<RadioField {...props} />
+			</ThemeProvider>,
+		);
+
+	it("should not render a description when none is given", () => {
+		renderField(baseProps);
+
+		expect(screen.queryByTestId("radio-field-description")).toBeNull();
+	});
+
+	it("should render the description below the title", () => {
+		renderField({ ...baseProps, description: "Keeps SEO. Use for definitive redirects." });
+
+		const description = screen.getByTestId("radio-field-description");
+		expect(description.textContent).toEqual("Keeps SEO. Use for definitive redirects.");
+		expect(description).toHaveStyleRule("display", "block");
+	});
+
+	it("should render the description smaller than the title", () => {
+		// Mismo tamaño que el HelpText de FieldsBehavior (uiXS), que es el texto
+		// descriptivo que ya usa el CMS bajo un campo.
+		renderField({ ...baseProps, description: "Keeps SEO." });
+
+		expect(screen.getByTestId("radio-field-description")).toHaveStyleRule("font-size", "12px");
+	});
+
+	it("should name the radio with the title alone", () => {
+		// Con la descripción colgando del <label> sin más, el nombre accesible
+		// concatenaba las dos cadenas sin separador ("301 - PermanentKeeps SEO.").
+		renderField({ ...baseProps, description: "Keeps SEO. Use for definitive redirects." });
+
+		const radio = screen.getByRole("radio", { name: "301 - Permanent" });
+		expect(radio).toBeTruthy();
+		expect(radio.getAttribute("aria-describedby")).toEqual("redirectionType-301-description");
+	});
+
+	it("should emphasise the title only when there is a description", () => {
+		const { container: withDescription } = renderField({ ...baseProps, description: "Keeps SEO." });
+		expect(withDescription.querySelector("label")).toHaveStyleRule("font-weight", "600");
+
+		cleanup();
+
+		const { container: withoutDescription } = renderField(baseProps);
+		expect(withoutDescription.querySelector("label")).not.toHaveStyleRule("font-weight", "600");
+	});
+
+	it("should select the option when the description is clicked", () => {
+		const onChange = vi.fn();
+		renderField({ ...baseProps, description: "Keeps SEO.", onChange });
+
+		fireEvent.click(screen.getByTestId("radio-field-description"));
+
+		expect(onChange).toHaveBeenCalledWith("301");
+	});
+});

package/src/__tests__/components/Fields/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,76 @@
+import type * as React from "react";
+
+import RadioGroup from "@ax/components/Fields/RadioGroup";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const options = [
+	{
+		name: "301",
+		value: "301",
+		title: "301 - Permanent",
+		description: "Keeps SEO. Use for definitive redirects.",
+	},
+	{
+		name: "302",
+		value: "302",
+		title: "302 - Temporary",
+		description: "Doesn't keep SEO. Use for short-lived changes.",
+	},
+];
+
+const renderGroup = (props: Partial<React.ComponentProps<typeof RadioGroup>> = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RadioGroup name="redirectionType" value="301" options={options} onChange={vi.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("RadioGroup component rendering", () => {
+	it("should render one radio per option", () => {
+		renderGroup();
+
+		expect(screen.getAllByTestId("radio-field-input")).toHaveLength(2);
+	});
+
+	it("should check the option matching the value", () => {
+		renderGroup();
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(true);
+		expect(temporary.checked).toBe(false);
+	});
+
+	it("should forward each option description to its radio", () => {
+		renderGroup();
+
+		const descriptions = screen.getAllByTestId("radio-field-description").map((node) => node.textContent);
+		expect(descriptions).toEqual([
+			"Keeps SEO. Use for definitive redirects.",
+			"Doesn't keep SEO. Use for short-lived changes.",
+		]);
+	});
+
+	it("should render no descriptions when the options have none", () => {
+		renderGroup({ options: options.map(({ description: _description, ...option }) => option) });
+
+		expect(screen.queryByTestId("radio-field-description")).toBeNull();
+	});
+});
+
+describe("RadioGroup events", () => {
+	it("should report the value of the clicked option", () => {
+		const onChange = vi.fn();
+		renderGroup({ onChange });
+
+		const [, temporary] = screen.getAllByTestId("radio-field-input");
+		fireEvent.click(temporary);
+
+		expect(onChange).toHaveBeenCalledWith("302");
+	});
+});

package/src/__tests__/modules/Redirects/BulkHeader/TableHeader.test.tsx

@@ -0,0 +1,123 @@
+import { parseTheme } from "@ax/helpers";
+import TableHeader from "@ax/modules/Redirects/BulkHeader/TableHeader";
+import * as HeaderStyle from "@ax/modules/Redirects/BulkHeader/TableHeader/style";
+import * as ItemStyle from "@ax/modules/Redirects/RedirectItem/style";
+import globalTheme from "@ax/themes/theme.json";
+import type { IQueryValue } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+const store = configureStore([thunk])({
+	app: { isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+});
+
+const renderHeader = (
+	isSiteItem: boolean,
+	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void = vi.fn(),
+	type: IQueryValue[] = [],
+) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<TableHeader
+				totalItems={1}
+				isScrolling={false}
+				selectAllItems={vi.fn()}
+				filterItems={filterItems}
+				filterValues={{ sites: [], type, order: [] }}
+				isSiteItem={isSiteItem}
+				sortItems={vi.fn()}
+				sortedListStatus={{ isAscending: false, sortedByDate: false }}
+				checkState={{ isAllSelected: false, hoverCheck: false }}
+				setHoverCheck={vi.fn()}
+			/>
+		</ThemeProvider>,
+		{ store },
+	);
+
+describe("[UC-AX-manage-redirects] Redirects TableHeader", () => {
+	it("AC8 · heads the redirection type column in global scope", () => {
+		renderHeader(false);
+
+		expect(screen.getByText("Type")).toBeTruthy();
+	});
+
+	it("AC8 · heads it in site scope too", () => {
+		renderHeader(true);
+
+		expect(screen.getByText("Type")).toBeTruthy();
+	});
+});
+
+describe("[UC-AX-manage-redirects] Redirects type column alignment", () => {
+	// La tabla es flex con anchuras fijas por celda: cabecera y fila se alinean
+	// solo porque coinciden a mano. Si una de las dos deriva, la columna entera
+	// se descuadra y jsdom no hace layout, así que nadie más lo vería.
+	const width = "96px";
+
+	it("AC8 · keeps header and cell the same width", () => {
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<>
+					<HeaderStyle.TypeHeader data-testid="header" />
+					<ItemStyle.TypeCell data-testid="cell" />
+				</>
+			</ThemeProvider>,
+			{ store },
+		);
+
+		expect(container.querySelector('[data-testid="header"]')).toHaveStyleRule("width", width);
+		expect(container.querySelector('[data-testid="cell"]')).toHaveStyleRule("width", width);
+	});
+});
+
+describe("[UC-AX-manage-redirects] Redirects type filter", () => {
+	const openTypeFilter = () => fireEvent.click(screen.getByTestId("redirect-type-filter"));
+
+	const optionFor = (label: string) => screen.getAllByTestId("list-item").find((item) => item.textContent === label);
+
+	it("AC9 · filters the listing by the chosen type", () => {
+		const filterItems = vi.fn();
+		renderHeader(false, filterItems);
+
+		openTypeFilter();
+		fireEvent.click(optionFor("302") as HTMLElement);
+
+		expect(filterItems).toHaveBeenCalledWith("type", [{ value: "302", label: "302" }]);
+	});
+
+	it("AC9 · offers 301 and 302, with none chosen to start with", () => {
+		renderHeader(false);
+
+		openTypeFilter();
+
+		expect(screen.getByText("Filter by type")).toBeTruthy();
+		expect(screen.getAllByTestId("list-item").map((item) => item.textContent)).toEqual(["301", "302"]);
+	});
+
+	it("AC9 · clears the filter when the chosen type is picked again", () => {
+		const filterItems = vi.fn();
+		renderHeader(false, filterItems, [{ value: "302", label: "302" }]);
+
+		openTypeFilter();
+		fireEvent.click(optionFor("302") as HTMLElement);
+
+		expect(filterItems).toHaveBeenCalledWith("type", []);
+	});
+
+	it("AC9 · offers the filter in site scope too, where the Site one is hidden", () => {
+		const filterItems = vi.fn();
+		renderHeader(true, filterItems);
+
+		openTypeFilter();
+		fireEvent.click(optionFor("301") as HTMLElement);
+
+		expect(filterItems).toHaveBeenCalledWith("type", [{ value: "301", label: "301" }]);
+	});
+});

package/src/__tests__/modules/Redirects/RedirectItem/RedirectItem.test.tsx

@@ -0,0 +1,163 @@
+import { parseTheme } from "@ax/helpers";
+import RedirectItem from "@ax/modules/Redirects/RedirectItem";
+import * as S from "@ax/modules/Redirects/RedirectItem/style";
+import { REDIRECT_TYPE_COLORS } from "@ax/modules/Redirects/utils";
+import globalTheme from "@ax/themes/theme.json";
+import type { IRedirect, RedirectType } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({
+	app: { isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+});
+
+const redirect: IRedirect = {
+	id: 1,
+	from: "/about/team",
+	to: { pageId: 7, url: "/about/people" },
+	site: { siteId: 2, siteName: "UST School", siteUrl: "/ust" },
+	domain: "https://ust.edu",
+	date: "2021-10-15T00:00:00.000Z",
+};
+
+const renderItem = (overrides: Partial<IRedirect> = {}, isSiteItem = false, setFormValues = vi.fn()) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RedirectItem
+				redirect={{ ...redirect, ...overrides }}
+				isSelected={false}
+				onChange={vi.fn()}
+				toggleToast={vi.fn()}
+				setFormValues={setFormValues}
+				formValues={redirect}
+				addRedirect={vi.fn()}
+				currentFilter=""
+				isSiteItem={isSiteItem}
+				hoverCheck={false}
+			/>
+		</ThemeProvider>,
+		{ store },
+	);
+
+describe("[UC-AX-manage-redirects] RedirectItem redirection type tag", () => {
+	it("AC8 · paints the redirect type on the row", () => {
+		renderItem({ type: "301" });
+
+		expect(screen.getByTestId("tag-square").textContent).toEqual("301");
+	});
+
+	it("AC8 · leaves the cell empty, not absent, when the redirect has no type", () => {
+		renderItem();
+
+		expect(screen.queryByTestId("tag-square")).toBeNull();
+		// La celda tiene que seguir ocupando su hueco o la fila se descuadra
+		// respecto a la cabecera y a las filas que sí traen tipo.
+		expect(screen.getAllByRole("cell")[1].textContent).toEqual("");
+	});
+
+	it("AC8 · keeps the column in place whether or not there is a type", () => {
+		// El recuento por sí solo no basta: borrar la columna baja los dos lados
+		// por igual. Hay que fijar también cuántas celdas tiene la fila.
+		const cellsInGlobalScope = 7;
+
+		const { unmount } = renderItem({ type: "301" });
+		expect(screen.getAllByRole("cell")).toHaveLength(cellsInGlobalScope);
+		unmount();
+
+		renderItem();
+
+		expect(screen.getAllByRole("cell")).toHaveLength(cellsInGlobalScope);
+	});
+
+	it("AC8 · keeps the type column in site scope, without the site one", () => {
+		renderItem({ type: "301" }, true);
+
+		expect(screen.getByTestId("tag-square")).toBeTruthy();
+		expect(screen.queryByText("UST School")).toBeNull();
+	});
+});
+
+describe("[UC-AX-manage-redirects] TypeTag colours", () => {
+	const renderTag = (type: RedirectType) =>
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<S.TypeTag type="square" text={type} color={REDIRECT_TYPE_COLORS[type]} />
+			</ThemeProvider>,
+			{ store },
+		);
+
+	it("AC8 · paints 301 with the permanent colour", () => {
+		renderTag("301");
+
+		expect(screen.getByTestId("tag-square")).toHaveStyleRule("background-color", "#C9EFFF");
+	});
+
+	it("AC8 · paints 302 with the temporary colour", () => {
+		renderTag("302");
+
+		expect(screen.getByTestId("tag-square")).toHaveStyleRule("background-color", "#DBB9FF");
+	});
+
+	it("AC8 · keeps the text readable over the pastel background", () => {
+		// Tag paints a near-white text whenever `color` is set, unreadable on these
+		// backgrounds. TypeTag lo revierte con un `&&`, que duplica especificidad;
+		// hay que pedirle al matcher ese mismo selector, porque jsdom no aplica la
+		// cascada y sin `modifier` devuelve la regla plana de TagSquare.
+		renderTag("301");
+
+		expect(screen.getByTestId("tag-square")).toHaveStyleRule(
+			"color",
+			parseTheme(globalTheme).color.textMediumEmphasis,
+			{ modifier: "&&" },
+		);
+	});
+});
+
+describe("[UC-AX-manage-redirects] RedirectItem editing", () => {
+	it("AC7 · seeds the form with 301 when the row carries no type", () => {
+		const setFormValues = vi.fn();
+		renderItem({}, false, setFormValues);
+
+		fireEvent.click(screen.getByText("/about/team"));
+
+		expect(setFormValues).toHaveBeenCalledWith(expect.objectContaining({ type: "301" }));
+	});
+
+	it("should open the row from the type cell too", () => {
+		// Todas las celdas de la fila abren la edición; si la del tipo se queda sin
+		// onClick, clicar el tag no hace nada y las demás sí.
+		const setFormValues = vi.fn();
+		renderItem({ type: "301" }, false, setFormValues);
+
+		fireEvent.click(screen.getByTestId("tag-square"));
+
+		expect(setFormValues).toHaveBeenCalledWith(expect.objectContaining({ type: "301" }));
+	});
+
+	it("AC7 · keeps the type the row already has", () => {
+		const setFormValues = vi.fn();
+		renderItem({ type: "302" }, false, setFormValues);
+
+		fireEvent.click(screen.getByText("/about/team"));
+
+		expect(setFormValues).toHaveBeenCalledWith(expect.objectContaining({ type: "302" }));
+	});
+});
+
+describe("[UC-AX-manage-redirects] RedirectItem type normalisation", () => {
+	it("should paint the tag when the API sends the type as a number", () => {
+		// El store normaliza a string (containers/Redirects/actions), pero la fila
+		// no debe depender de ello para pintar.
+		renderItem({ type: 301 as never });
+
+		expect(screen.getByTestId("tag-square").textContent).toEqual("301");
+	});
+});

package/src/__tests__/modules/Redirects/RedirectPanel/RedirectPanel.test.tsx

@@ -0,0 +1,134 @@
+// `connect` captura el action creator al cargar el módulo, así que hay que
+// sustituirlo antes de que se importe el panel (vi.mock se iza).
+const updateRedirectSpy = vi.hoisted(() => vi.fn());
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		updateRedirect: (...args: unknown[]) => {
+			updateRedirectSpy(...args);
+			return () => Promise.resolve();
+		},
+	},
+}));
+
+import { parseTheme } from "@ax/helpers";
+import RedirectPanel from "@ax/modules/Redirects/RedirectPanel";
+import globalTheme from "@ax/themes/theme.json";
+import type { IRedirect } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+const mockStore = configureStore([thunk]);
+// El panel monta el UrlField, que arrastra el PageFinder conectado:
+// necesita sites.currentSiteInfo/sites y app.lang/globalLangs.
+const store = mockStore({
+	app: { isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+});
+
+const formValues: IRedirect = {
+	from: "/about/team",
+	to: { pageId: undefined, url: "/about/people" },
+	type: "301",
+};
+
+const renderPanel = (overrides: Partial<IRedirect> = {}, setFormValues = vi.fn()) => {
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RedirectPanel
+				isOpen={true}
+				isOpenedSecond={false}
+				toggleModal={vi.fn()}
+				toggleSecondaryPanel={vi.fn()}
+				formValues={{ ...formValues, ...overrides }}
+				setFormValues={setFormValues}
+				addRedirect={vi.fn()}
+				currentFilter=""
+			/>
+		</ThemeProvider>,
+		{ store },
+	);
+
+	return { setFormValues };
+};
+
+describe("[UC-AX-manage-redirects] RedirectPanel redirection type", () => {
+	it("AC7 · offers both types with their descriptions", () => {
+		renderPanel();
+
+		expect(screen.getByText("301 - Permanent")).toBeTruthy();
+		expect(screen.getByText("302 - Temporary")).toBeTruthy();
+		expect(screen.getByText("Keeps SEO. Use for definitive redirects.")).toBeTruthy();
+		expect(screen.getByText("Doesn’t keep SEO. Use for short-lived changes.")).toBeTruthy();
+	});
+
+	it("AC7 · preselects the type held in the form", () => {
+		renderPanel();
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(true);
+		expect(temporary.checked).toBe(false);
+	});
+
+	it("should not preselect anything when the type is not a string", () => {
+		// Documenta por qué el store normaliza: RadioGroup compara con ===, así que
+		// un 301 numérico no casa con la opción "301" y el panel sale en blanco.
+		renderPanel({ type: 301 as never });
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(false);
+		expect(temporary.checked).toBe(false);
+	});
+
+	it("AC7 · preselects 302 when the form holds it", () => {
+		renderPanel({ type: "302" });
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(false);
+		expect(temporary.checked).toBe(true);
+	});
+
+	it("AC7 · reports the chosen type without touching the rest of the form", () => {
+		const { setFormValues } = renderPanel();
+
+		const [, temporary] = screen.getAllByTestId("radio-field-input");
+		fireEvent.click(temporary);
+
+		expect(setFormValues).toHaveBeenCalledWith({ ...formValues, type: "302" });
+	});
+});
+
+describe("[UC-AX-manage-redirects] RedirectPanel update payload", () => {
+	it("AC7 · sends the chosen type on update (PUT)", async () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<RedirectPanel
+					isOpen={true}
+					isOpenedSecond={false}
+					toggleModal={vi.fn()}
+					toggleSecondaryPanel={vi.fn()}
+					redirect={{ ...formValues, id: 7 }}
+					formValues={{ ...formValues, id: 7, type: "302" }}
+					setFormValues={vi.fn()}
+					addRedirect={vi.fn()}
+					currentFilter="&sites=1"
+				/>
+			</ThemeProvider>,
+			{ store },
+		);
+
+		// "Update Redirect" es también el título del panel; hay que ir al botón.
+		fireEvent.click(screen.getByRole("button", { name: "Update Redirect" }));
+
+		expect(updateRedirectSpy).toHaveBeenCalledWith(
+			{ from: "/about/team", to: "/about/people", type: "302" },
+			7,
+			"&sites=1",
+		);
+	});
+});

package/src/__tests__/modules/Redirects/Redirects/Redirects.create.test.tsx

@@ -0,0 +1,69 @@
+// `connect` captura los action creators al cargar el módulo, así que hay que
+// sustituirlos antes de que se importe la pantalla (vi.mock se iza).
+const addRedirectSpy = vi.hoisted(() => vi.fn());
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		getRedirects: () => () => Promise.resolve(),
+		deleteRedirect: () => () => Promise.resolve(true),
+		importRedirects: () => () => Promise.resolve(true),
+		updateRedirect: () => () => Promise.resolve(),
+		addRedirect: (...args: unknown[]) => {
+			addRedirectSpy(...args);
+			return () => Promise.resolve();
+		},
+	},
+}));
+
+import { MemoryRouter } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Redirects from "@ax/modules/Redirects";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+// jsdom no implementa Element.scrollTo y el módulo lo llama sobre el tableRef.
+beforeEach(() => {
+	Element.prototype.scrollTo = vi.fn();
+});
+
+const store = configureStore([thunk])({
+	redirects: { redirects: [], totalItems: 0, totalImports: 0, imports: null },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+	app: { isLoading: false, isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+});
+
+const navItems = [{ title: "Redirects", path: "/settings/redirects" }];
+
+describe("[UC-AX-manage-redirects] Redirects — crear con tipo", () => {
+	it("AC7 · creates as 301 when the author does not touch the type (POST)", () => {
+		render(
+			<MemoryRouter>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Redirects navItems={navItems as never} currentNavItem={navItems[0] as never} />
+				</ThemeProvider>
+			</MemoryRouter>,
+			{ store },
+		);
+
+		fireEvent.click(screen.getByText("New Redirect"));
+		// Hay varios inputs en pantalla (el buscador del MainWrapper incluido);
+		// el autoComplete del panel es el que identifica el campo "Old URL".
+		const oldUrl = document.querySelector('input[autocomplete="redirect-old"]') as HTMLInputElement;
+		fireEvent.change(oldUrl, { target: { value: "/old" } });
+		fireEvent.click(screen.getByRole("button", { name: "Add Redirect" }));
+
+		expect(addRedirectSpy).toHaveBeenCalledWith(
+			expect.objectContaining({ type: "301" }),
+			expect.any(Function),
+			undefined,
+			expect.any(String),
+		);
+	});
+});