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

Add column sizes specs

Browse Source
This commit is contained in:
Jeremy Thomas
2022-05-07 22:16:09 +01:00
parent 895e17ab14
commit 0e7659d624
3 changed files with 247 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
docs/cyp/grid/columns.html
View File

@@ -1,6 +1,12 @@
--- ---
layout: cypress layout: cypress
title: Grid/Columns title: Grid/Columns
screens:
- mobile
- tablet
- desktop
- widescreen
- fullhd
widths: widths:
- three-quarters - three-quarters
- two-thirds - two-thirds
@@ -54,6 +60,12 @@ widths:
Column {{ width }} Column {{ width }}
</div> </div>
{% endfor %} {% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}">
Column {{ i }}
</div>
{% endfor %}
{% endcapture %} {% endcapture %}
<div id="columns" class="columns"> <div id="columns" class="columns">
@@ -105,5 +117,63 @@ widths:
</div> </div>
<div id="columns-special" class="columns is-multiline"> <div id="columns-special" class="columns is-multiline">
{{ special_columns }} <div class="column is-narrow">
Column narrow
</div>
<div class="column is-full">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}">
Column {{ i }}
</div>
<div class="column is-offset-{{ i }}">
Column {{ i }}
</div>
{% endfor %}
</div> </div>
{% for screen in page.screens %}
<div id="columns-special-{{ screen }}" class="columns is-multiline is-{{ screen }}">
<div class="column is-narrow-{{ screen }}">
Column narrow
</div>
<div class="column is-full-{{ screen }}">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}-{{ screen }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}-{{ screen }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}-{{ screen }}">
Column {{ i }}
</div>
<div class="column is-offset-{{ i }}-{{ screen }}">
Column {{ i }}
</div>
{% endfor %}
</div>
{% endfor %}

321
docs/cypress/integration/grid/columns.spec.js
View File

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

6
package.json
View File

@@ -27,14 +27,8 @@
"url": "https://github.com/jgthms/bulma/issues" "url": "https://github.com/jgthms/bulma/issues"
}, },
"devDependencies": { "devDependencies": {
<<<<<<< HEAD
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"clean-css-cli": "^5.6.0", "clean-css-cli": "^5.6.0",
=======
"autoprefixer": "^10.4.5",
"clean-css-cli": "^5.6.0",
"cypress": "^9.6.0",
>>>>>>> 3c413174e41e0aa0c9bf60a9a5e35dc47831d25e
"node-sass": "^7.0.1", "node-sass": "^7.0.1",
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
"rimraf": "^3.0.2" "rimraf": "^3.0.2"