Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 20:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Update dependencies

Browse Source
This commit is contained in:
Jeremy Thomas
2022-11-23 17:09:26 +00:00
parent 40aec85009
commit bd2e065ab7
56 changed files with 4251 additions and 5140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
docs/cypress/e2e/grid/columns.spec.js Normal file
View File

@@ -0,0 +1,242 @@
import {
setMobile,
setTablet,
setDesktop,
setWidescreen,
setFullHD,
} from "../utils";
const SCREENS = [
["-mobile", setMobile],
["-tablet", setTablet],
["-desktop", setDesktop],
["-widescreen", setWidescreen],
["-fullhd", setFullHD],
];
const WIDTHS = [
["three-quarters", 0.75],
["two-thirds", 0.6666],
["half", 0.5],
["one-third", 0.3333],
["one-quarter", 0.25],
["one-fifth", 0.2],
["two-fifths", 0.4],
["three-fifths", 0.6],
["four-fifths", 0.8],
];
describe("Grid/Columns", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
setDesktop();
});
it("has Columns", () => {
cy.get(".columns").should("exist");
});
it("has correct Columns", () => {
cy.get("#columns").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.marginBottom).to.equal("12px");
expect(cs.marginLeft).to.equal("-12px");
expect(cs.marginRight).to.equal("-12px");
expect(cs.marginTop).to.equal("-12px");
});
});
it("has correct last Columns", () => {
cy.get("#columns-last").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("-12px");
});
});
it("has correct centered Columns", () => {
cy.get("#columns-centered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
});
it("has correct gapless Columns", () => {
cy.get("#columns-gapless").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("24px");
expect(cs.marginLeft).to.equal("0px");
expect(cs.marginRight).to.equal("0px");
expect(cs.marginTop).to.equal("0px");
});
cy.get("#columns-gapless .column").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.margin).to.equal("0px");
expect(cs.padding).to.equal("0px");
});
});
it("has correct gapless last Columns", () => {
cy.get("#columns-gapless-last").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
});
});
it("has correct multiline Columns", () => {
cy.get("#columns-multiline").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
});
});
it("has correct vcentered Columns", () => {
cy.get("#columns-vcentered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
});
});
// Responsiveness
it("has correct mobile Columns", () => {
setMobile();
cy.get("#columns-mobile").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
setDesktop();
cy.get("#columns-mobile").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has correct desktop Columns", () => {
setMobile();
cy.get("#columns-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
setTablet();
cy.get("#columns-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
setDesktop();
cy.get("#columns-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
});
describe("Grid/Column", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
setTablet();
});
it("has a Column", () => {
cy.get(".column").should("exist");
});
it("has a correct Column", () => {
cy.get("#columns .column").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
expect(cs.flexBasis).to.equal("0px");
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
expect(cs.padding).to.equal("12px");
});
});
it("has a correct Column sizes", () => {
SCREENS.forEach((screen) => {
const suffix = screen[0];
const fn = screen[1];
fn();
cy.get(`#columns-special${suffix}`).then(($) => {
const columnsWidth = $[0].clientWidth;
const $full = $.find(`.column.is-full${suffix}`);
const csfull = window.getComputedStyle($full[0]);
const actualFullWidth = csfull.width.substring(
0,
csfull.width.length - 2
);
expect(csfull.flexBasis).to.equal("auto");
expect(csfull.flexGrow).to.equal("0");
expect(csfull.flexShrink).to.equal("0");
expect(`${Math.round(actualFullWidth)}px`).to.equal(
`${Math.round(columnsWidth)}px`
);
const $narrow = $.find(`.column.is-narrow${suffix}`);
const csnarrow = window.getComputedStyle($narrow[0]);
expect(csnarrow.flexBasis).to.equal("auto");
expect(csnarrow.flexGrow).to.equal("0");
expect(csnarrow.flexShrink).to.equal("0");
WIDTHS.forEach((width) => {
const name = width[0];
const factor = width[1];
const $1 = $.find(`.column.is-${name}${suffix}`);
const cs1 = window.getComputedStyle($1[0]);
const actualWidth = cs1.width.substring(0, cs1.width.length - 2);
expect(cs1.flexBasis).to.equal("auto");
expect(cs1.flexGrow).to.equal("0");
expect(cs1.flexShrink).to.equal("0");
expect(`${Math.round(actualWidth)}px`).to.equal(
`${Math.round(factor * columnsWidth)}px`
);
const $2 = $.find(`.column.is-offset-${name}${suffix}`);
const cs2 = window.getComputedStyle($2[0]);
const actualMarginLeft = cs2.marginLeft.substring(
0,
cs2.marginLeft.length - 2
);
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
`${Math.round(factor * columnsWidth)}px`
);
for (let i = 1; i <= 12; i++) {
const $3 = $.find(`.column.is-${i}${suffix}`);
const cs3 = window.getComputedStyle($3[0]);
const actualWidth = cs3.width.substring(0, cs3.width.length - 2);
expect(cs3.flexBasis).to.equal("auto");
expect(cs3.flexGrow).to.equal("0");
expect(cs3.flexShrink).to.equal("0");
expect(`${Math.round(actualWidth)}px`).to.equal(
`${Math.round((i / 12) * columnsWidth)}px`
);
const $4 = $.find(`.column.is-offset-${i}${suffix}`);
const cs4 = window.getComputedStyle($4[0]);
const actualMarginLeft = cs4.marginLeft.substring(
0,
cs4.marginLeft.length - 2
);
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
`${Math.round((i / 12) * columnsWidth)}px`
);
}
});
});
});
});
});

96
docs/cypress/e2e/grid/tiles.spec.js Normal file
View File

@@ -0,0 +1,96 @@
import {
setMobile,
setTablet,
setDesktop,
setWidescreen,
setFullHD,
} from "../utils";
describe("Grid/Tiles", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/grid/tiles/");
setDesktop();
});
it("has a Tile", () => {
cy.get(".tile").should("exist");
});
it("has a correct Tile", () => {
cy.get("#tile").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("stretch");
expect(cs.display).to.equal("flex");
expect(cs.flexBasis).to.equal("0px");
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
expect(cs.minHeight).to.equal("min-content");
});
});
it("has a correct ancestor Tile", () => {
cy.get("#tile-ancestor").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("12px");
expect(cs.marginLeft).to.equal("-12px");
expect(cs.marginRight).to.equal("-12px");
expect(cs.marginTop).to.equal("-12px");
});
});
it("has a correct last ancestor Tile", () => {
cy.get("#tile-ancestor-last").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("-12px");
expect(cs.marginLeft).to.equal("-12px");
expect(cs.marginRight).to.equal("-12px");
expect(cs.marginTop).to.equal("-12px");
});
});
it("has a correct parent Tile", () => {
cy.get("#tile-parent").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("12px");
});
});
it("has a correct vertical Tile", () => {
cy.get("#tile-vertical").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexDirection).to.equal("column");
});
});
it("has a correct child Tile", () => {
cy.get("#tile-child").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
expect(cs.marginLeft).to.equal("0px");
expect(cs.marginRight).to.equal("0px");
expect(cs.marginTop).to.equal("0px");
});
});
it("has a correct vertical child Tile", () => {
cy.get("#tile-vertical-child").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("24px");
});
});
it("has a correct Tile sizes", () => {
for (let i = 1; i <= 12; i++) {
cy.get(`#tile-${i}`).then(($) => {
const cs = window.getComputedStyle($[0]);
const actualWidth = cs.width.substring(0, cs.width.length - 2);
expect(cs.flexBasis).to.equal("auto");
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
expect(`${Math.round(actualWidth)}px`).to.equal(
`${Math.round((i / 12) * 1000)}px`
);
});
}
});
});