From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 7 May 2022 16:25:24 +0000 (+0100)
Subject: Add section specs
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=d4b67f488eee57101c548490d80babee366bf858;p=thirdparty%2Fbulma.git

Add section specs
---

diff --git a/docs/cyp/layout/section.html b/docs/cyp/layout/section.html
new file mode 100644
index 000000000..11b473bba
--- /dev/null
+++ b/docs/cyp/layout/section.html
@@ -0,0 +1,8 @@
+---
+layout: cypress
+title: Layout/Section
+---
+
+<section id="section" class="section"></section>
+<section id="section-medium" class="section is-medium"></section>
+<section id="section-large" class="section is-large"></section>
diff --git a/docs/cypress/integration/layout/section.spec.js b/docs/cypress/integration/layout/section.spec.js
new file mode 100644
index 000000000..7cce873d3
--- /dev/null
+++ b/docs/cypress/integration/layout/section.spec.js
@@ -0,0 +1,40 @@
+import { setMobile, setDesktop } from "../utils";
+
+describe("Layout/Section", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/section/");
+    setDesktop();
+  });
+
+  it("has a Section", () => {
+    cy.get(".section").should("exist");
+  });
+
+  it("has a correct Section", () => {
+    cy.get("#section").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("48px");
+    });
+
+    setMobile();
+
+    cy.get("#section").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("48px 24px");
+    });
+  });
+
+  it("has a correct medium Section", () => {
+    cy.get("#section-medium").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("144px 72px");
+    });
+  });
+
+  it("has a correct large Section", () => {
+    cy.get("#section-large").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("288px 96px");
+    });
+  });
+});