diff options
author | Jeremy Thomas <bbxdesign@gmail.com> | 2022-05-08 00:16:09 +0300 |
---|---|---|
committer | Jeremy Thomas <bbxdesign@gmail.com> | 2022-05-08 00:16:09 +0300 |
commit | 0e7659d624df3a05bd83d4e842c723f9b503f2ae (patch) | |
tree | 9ccdfc8dd1e216fcb4c3446c8dd6389d75c4428e | |
parent | 895e17ab14702ae81b2e3f61776f6eec27ba18be (diff) |
Add column sizes specs
-rw-r--r-- | docs/cyp/grid/columns.html | 72 | ||||
-rw-r--r-- | docs/cypress/integration/grid/columns.spec.js | 365 | ||||
-rw-r--r-- | package.json | 6 |
3 files changed, 269 insertions, 174 deletions
diff --git a/docs/cyp/grid/columns.html b/docs/cyp/grid/columns.html index 3cb754bb..99e9fbff 100644 --- a/docs/cyp/grid/columns.html +++ b/docs/cyp/grid/columns.html @@ -1,6 +1,12 @@ --- layout: cypress title: Grid/Columns +screens: +- mobile +- tablet +- desktop +- widescreen +- fullhd widths: - three-quarters - two-thirds @@ -54,6 +60,12 @@ widths: Column {{ width }} </div> {% endfor %} + + {% for i in (1..12) %} + <div class="column is-{{ i }}"> + Column {{ i }} + </div> + {% endfor %} {% endcapture %} <div id="columns" class="columns"> @@ -105,5 +117,63 @@ widths: </div> <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> + +{% 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 %} diff --git a/docs/cypress/integration/grid/columns.spec.js b/docs/cypress/integration/grid/columns.spec.js index 546a1468..8b8d2758 100644 --- a/docs/cypress/integration/grid/columns.spec.js +++ b/docs/cypress/integration/grid/columns.spec.js @@ -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 = [ ["three-quarters", 0.75], @@ -12,131 +26,119 @@ const WIDTHS = [ ["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/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(() => { @@ -160,51 +162,80 @@ describe("Grid/Column", () => { }); 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` - ); + SCREENS.forEach((screen) => { + const suffix = screen[0]; + const fn = screen[1]; + + fn(); - const $2 = $.find(`.column.is-offset-${name}`); - const cs = window.getComputedStyle($2[0]); - const actualMarginLeft = cs.marginLeft.substring( + 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, - cs.marginLeft.length - 2 + csfull.width.length - 2 ); - expect(`${Math.round(actualMarginLeft)}px`).to.equal( - `${Math.round(factor * columnsWidth)}px` + 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` + ); + } + }); }); }); }); diff --git a/package.json b/package.json index 994ed03d..be49ce8c 100644 --- a/package.json +++ b/package.json @@ -27,14 +27,8 @@ "url": "https://github.com/jgthms/bulma/issues" }, "devDependencies": { -<<<<<<< HEAD "autoprefixer": "^10.4.7", "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", "postcss-cli": "^9.1.0", "rimraf": "^3.0.2" |