diff --git a/src/compositions/bcl-banner/__snapshots__/banner.test.js.snap b/src/compositions/bcl-banner/__snapshots__/banner.test.js.snap index 9a9f890cf..b9ccda37c 100644 --- a/src/compositions/bcl-banner/__snapshots__/banner.test.js.snap +++ b/src/compositions/bcl-banner/__snapshots__/banner.test.js.snap @@ -3,7 +3,7 @@ exports[`OE - Hero banner default renders correctly 1`] = `
+
+
+
+ EU Budget for the future +
+

+ Innovation, economy, environment and geopolitics +

+ + Subscribe + + + + +
+
+
+ +`; + +exports[`OE - Page banner default renders correctly fixed height 1`] = ` + +
{ centered: true, hero: false, full_width: false, + fixed_height: false, }; if (data.image) { args.image = data.image || ""; @@ -66,6 +67,16 @@ const getArgTypes = (data) => { category: "Display", }, }, + fixed_height: { + name: "fixed-height", + type: "boolean", + description: "Disable aspect ratio and keep a fixed height", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + category: "Display", + }, + }, }; if (data.image) { argTypes.image = { @@ -83,7 +94,12 @@ const getArgTypes = (data) => { }; const resetAttrs = (data, args) => { - data.attributes.removeClass(["text-center", "hero", "full-width"]); + data.attributes.removeClass([ + "text-center", + "hero", + "full-width", + "fixed-height", + ]); if (args.centered) { data.attributes.addClass("text-center"); } diff --git a/src/compositions/bcl-banner/banner.test.js b/src/compositions/bcl-banner/banner.test.js index e55da3bf0..33a02b7c9 100644 --- a/src/compositions/bcl-banner/banner.test.js +++ b/src/compositions/bcl-banner/banner.test.js @@ -10,98 +10,132 @@ import dataImage from "@openeuropa/bcl-banner/data/data--image"; import dataShade from "@openeuropa/bcl-banner/data/data--shade"; const template = "@oe-bcl/bcl-banner/banner.html.twig"; -const render = (params) => renderTwigFileAsNode(template, params); +const render = (params, reset) => renderTwigFileAsNode(template, params, reset); expect.extend(toHaveNoViolations); describe("OE - Page banner", () => { test("default renders correctly", () => { expect.assertions(1); - return expect(render(dataDefault)).resolves.toMatchSnapshot(); + return expect(render(dataDefault, true)).resolves.toMatchSnapshot(); }); test("primary renders correctly", () => { expect.assertions(1); - return expect(render(dataPrimary)).resolves.toMatchSnapshot(); + return expect(render(dataPrimary, true)).resolves.toMatchSnapshot(); }); test("image text-block renders correctly", () => { expect.assertions(1); - return expect(render(dataImage)).resolves.toMatchSnapshot(); + return expect(render(dataImage, true)).resolves.toMatchSnapshot(); }); test("image shade renders correctly", () => { expect.assertions(1); - return expect(render(dataShade)).resolves.toMatchSnapshot(); + return expect(render(dataShade, true)).resolves.toMatchSnapshot(); }); test("default renders correctly with title", () => { expect.assertions(1); return expect( - render({ - ...dataDefault, - title: "Page banner test title", - title_tag: "h6", - }) + render( + { + ...dataDefault, + title: "Page banner test title", + title_tag: "h6", + }, + true + ) ).resolves.toMatchSnapshot(); }); test("primary renders correctly with title", () => { expect.assertions(1); return expect( - render({ - ...dataPrimary, - title: "Page banner test title", - title_tag: "h6", - }) + render( + { + ...dataPrimary, + title: "Page banner test title", + title_tag: "h6", + }, + true + ) ).resolves.toMatchSnapshot(); }); test("default renders correctly with title and link", () => { expect.assertions(1); return expect( - render({ - ...dataDefault, - title: "Page banner test title", - title_tag: "h6", - title_link: { - path: "/example.html", + render( + { + ...dataDefault, + title: "Page banner test title", + title_tag: "h6", + title_link: { + path: "/example.html", + }, }, - }) + true + ) ).resolves.toMatchSnapshot(); }); test("image text-block renders correctly with title", () => { expect.assertions(1); return expect( - render({ ...dataImage, title: "Page banner test title", title_tag: "h6" }) + render( + { ...dataImage, title: "Page banner test title", title_tag: "h6" }, + true + ) ).resolves.toMatchSnapshot(); }); test("image shade renders correctly with title", () => { expect.assertions(1); return expect( - render({ ...dataShade, title: "Page banner test title", title_tag: "h6" }) + render( + { ...dataShade, title: "Page banner test title", title_tag: "h6" }, + true + ) ).resolves.toMatchSnapshot(); }); test("default renders correctly with content classes", () => { expect.assertions(1); return expect( - render({ - ...dataDefault, - content_classes: "new-content-class", - }) + render( + { + ...dataDefault, + content_classes: "new-content-class", + }, + true + ) + ).resolves.toMatchSnapshot(); + }); + + test("default renders correctly fixed height", () => { + expect.assertions(1); + return expect( + render( + { + ...dataDefault, + fixed_height: true, + }, + true + ) ).resolves.toMatchSnapshot(); }); test("default renders correctly full width", () => { expect.assertions(1); return expect( - render({ - ...dataDefault, - full_width: true, - }) + render( + { + ...dataDefault, + full_width: true, + }, + true + ) ).resolves.toMatchSnapshot(); }); @@ -116,91 +150,106 @@ describe("OE - Hero banner", () => { test("default renders correctly", () => { expect.assertions(1); return expect( - render({ ...dataDefault, hero: true }) + render({ ...dataDefault, hero: true }, true) ).resolves.toMatchSnapshot(); }); test("primary renders correctly", () => { expect.assertions(1); return expect( - render({ ...dataPrimary, hero: true }) + render({ ...dataPrimary, hero: true }, true) ).resolves.toMatchSnapshot(); }); test("image text-block renders correctly", () => { expect.assertions(1); return expect( - render({ ...dataImage, hero: true }) + render({ ...dataImage, hero: true }, true) ).resolves.toMatchSnapshot(); }); test("image shade renders correctly", () => { expect.assertions(1); return expect( - render({ ...dataShade, hero: true }) + render({ ...dataShade, hero: true }, true) ).resolves.toMatchSnapshot(); }); test("default renders correctly with title", () => { expect.assertions(1); return expect( - render({ - ...dataDefault, - hero: true, - title: "Hero banner test title", - title_tag: "h6", - }) + render( + { + ...dataDefault, + hero: true, + title: "Hero banner test title", + title_tag: "h6", + }, + true + ) ).resolves.toMatchSnapshot(); }); test("primary renders correctly with title", () => { expect.assertions(1); return expect( - render({ - ...dataPrimary, - hero: true, - title: "Hero banner test title", - title_tag: "h6", - }) + render( + { + ...dataPrimary, + hero: true, + title: "Hero banner test title", + title_tag: "h6", + }, + true + ) ).resolves.toMatchSnapshot(); }); test("default renders correctly with title and link", () => { expect.assertions(1); return expect( - render({ - ...dataDefault, - hero: true, - title: "Hero banner test title", - title_tag: "h6", - title_link: { - path: "/example.html", + render( + { + ...dataDefault, + hero: true, + title: "Hero banner test title", + title_tag: "h6", + title_link: { + path: "/example.html", + }, }, - }) + true + ) ).resolves.toMatchSnapshot(); }); test("image text-block renders correctly with title", () => { expect.assertions(1); return expect( - render({ - ...dataImage, - hero: true, - title: "Hero banner test title", - title_tag: "h6", - }) + render( + { + ...dataImage, + hero: true, + title: "Hero banner test title", + title_tag: "h6", + }, + true + ) ).resolves.toMatchSnapshot(); }); test("image shade renders correctly with title", () => { expect.assertions(1); return expect( - render({ - ...dataShade, - hero: true, - title: "Hero banner test title", - title_tag: "h6", - }) + render( + { + ...dataShade, + hero: true, + title: "Hero banner test title", + title_tag: "h6", + }, + true + ) ).resolves.toMatchSnapshot(); }); diff --git a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap index 743f3da6e..c90f6c221 100644 --- a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap +++ b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap @@ -722,7 +722,7 @@ exports[`OE - Landing page renders correctly 1`] = `