mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add grid specs
This commit is contained in:
Jeremy Thomas
parent
d4b67f488e
commit
895e17ab14
109
docs/cyp/grid/columns.html
Normal file
109
docs/cyp/grid/columns.html
Normal file
@ -0,0 +1,109 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Grid/Columns
|
||||
widths:
|
||||
- three-quarters
|
||||
- two-thirds
|
||||
- half
|
||||
- one-third
|
||||
- one-quarter
|
||||
- one-fifth
|
||||
- two-fifths
|
||||
- three-fifths
|
||||
- four-fifths
|
||||
---
|
||||
|
||||
{% capture columns %}
|
||||
<div class="column">
|
||||
First column
|
||||
</div>
|
||||
<div class="column">
|
||||
Second column
|
||||
</div>
|
||||
<div class="column">
|
||||
Third column
|
||||
</div>
|
||||
<div class="column">
|
||||
Fourth column
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture twelve_columns %}
|
||||
{% for i in (1..12) %}
|
||||
<div class="column">
|
||||
Column {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture 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 %}
|
||||
{% endcapture %}
|
||||
|
||||
<div id="columns" class="columns">
|
||||
{{ columns }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="columns-last" class="columns">
|
||||
{{ columns }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles -->
|
||||
|
||||
<div id="columns-centered" class="columns is-centered">
|
||||
{{ columns }}
|
||||
</div>
|
||||
|
||||
<div id="columns-gapless" class="columns is-gapless">
|
||||
{{ columns }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="columns-gapless-last" class="columns is-gapless">
|
||||
{{ columns }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="columns-multiline" class="columns is-multiline">
|
||||
{{ columns }}
|
||||
</div>
|
||||
|
||||
<div id="columns-vcentered" class="columns is-vcentered">
|
||||
{{ columns }}
|
||||
</div>
|
||||
|
||||
<!-- Responsiveness -->
|
||||
|
||||
<div id="columns-mobile" class="columns is-mobile">
|
||||
{{ twelve_columns }}
|
||||
</div>
|
||||
|
||||
<div id="columns-tablet" class="columns is-tablet">
|
||||
{{ twelve_columns }}
|
||||
</div>
|
||||
|
||||
<div id="columns-desktop" class="columns is-desktop">
|
||||
{{ twelve_columns }}
|
||||
</div>
|
||||
|
||||
<div id="columns-special" class="columns is-multiline">
|
||||
{{ special_columns }}
|
||||
</div>
|
||||
211
docs/cypress/integration/grid/columns.spec.js
Normal file
211
docs/cypress/integration/grid/columns.spec.js
Normal file
@ -0,0 +1,211 @@
|
||||
import { setMobile, setTablet, setDesktop } from "../utils";
|
||||
|
||||
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],
|
||||
];
|
||||
|
||||
// const OFFSETS = [
|
||||
// ["offset-three-quarters", 0.75],
|
||||
// ["offset-two-thirds", 0.6666],
|
||||
// ["offset-half", 0.5],
|
||||
// ["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", () => {
|
||||
// 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", () => {
|
||||
cy.get(`#columns-special`).then(($) => {
|
||||
const columnsWidth = $[0].clientWidth;
|
||||
|
||||
const $full = $.find(`.column.is-full`);
|
||||
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`);
|
||||
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}`);
|
||||
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,
|
||||
cs.marginLeft.length - 2
|
||||
);
|
||||
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
|
||||
`${Math.round(factor * columnsWidth)}px`
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user