From 8e22ea4b1a3648898fa6fdbdbceae083d115a9b7 Mon Sep 17 00:00:00 2001 From: Patricio Mancini Date: Fri, 5 Jun 2020 18:00:46 -0300 Subject: [PATCH] create a new example for fixed column widths --- examples/fixed_column_width.html | 163 +++++++++++++++++++++++++++++++ test/fixed_column_width.test.js | 86 ++++++++++++++++ 2 files changed, 249 insertions(+) create mode 100644 examples/fixed_column_width.html create mode 100644 test/fixed_column_width.test.js diff --git a/examples/fixed_column_width.html b/examples/fixed_column_width.html new file mode 100644 index 00000000..9d710efe --- /dev/null +++ b/examples/fixed_column_width.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/fixed_column_width.test.js b/test/fixed_column_width.test.js new file mode 100644 index 00000000..e08eff09 --- /dev/null +++ b/test/fixed_column_width.test.js @@ -0,0 +1,86 @@ +/****************************************************************************** + * + * Copyright (c) 2020, the Regular Table Authors. + * + * This file is part of the Regular Table library, distributed under the terms + * of the Apache License 2.0. The full license can be found in the LICENSE + * file. + * + */ + +describe("fixed_column_width.html", () => { + beforeAll(async () => { + await page.setViewport({width: 400, height: 100}); + }); + + describe("creates a `` with fixed column widths", () => { + beforeAll(async () => { + await page.goto("http://localhost:8081/examples/fixed_column_width.html"); + await page.waitFor("regular-table table tbody tr td"); + }); + + test("fixed th has min-width", async () => { + const first_tr = await page.$("regular-table thead tr:first-child"); + const minWidths = await page.evaluate((first_tr) => Array.from(first_tr.children) + .map((x) => getComputedStyle(x).getPropertyValue('min-width')), first_tr); + const fixedWidth = minWidths[0]; + const notSetWidth = minWidths[1]; + expect(fixedWidth).toEqual("100px"); + expect(notSetWidth).toEqual("0px"); + }); + + test("fixed th has max-width", async () => { + const first_tr = await page.$("regular-table thead tr:first-child"); + const max_widths = await page.evaluate((first_tr) => Array.from(first_tr.children) + .map((x) => getComputedStyle(x).getPropertyValue('max-width')), first_tr); + const fixed_width = max_widths[0]; + const not_set_width = max_widths[1]; + expect(fixed_width).toEqual("100px"); + expect(not_set_width).toEqual("none"); + }); + + + test("fixed td has min-width", async () => { + const first_tr = await page.$("regular-table tbody tr:first-child"); + const minWidths = await page.evaluate((first_tr) => Array.from(first_tr.children) + .map((x) => getComputedStyle(x).getPropertyValue('min-width')), first_tr); + const fixedWidth = minWidths[0]; + const notSetWidth = minWidths[1]; + expect(fixedWidth).toEqual("100px"); + expect(notSetWidth).toEqual("0px"); + }); + + test("fixed td has max-width", async () => { + const first_tr = await page.$("regular-table tbody tr:first-child"); + const max_widths = await page.evaluate((first_tr) => Array.from(first_tr.children) + .map((x) => getComputedStyle(x).getPropertyValue('max-width')), first_tr); + const fixed_width = max_widths[0]; + const not_set_width = max_widths[1]; + expect(fixed_width).toEqual("100px"); + expect(not_set_width).toEqual("none"); + }); + + test("cell value do not overflow", async () => { + const first_td = await page.$("regular-table tbody tr td:first-child"); + const { text_overflow, overflow, white_space } = await page.evaluate((first_td) => { + first_td.text_content = 'ABCDEFGHABCDEFGHABCDEFGHABCDEFGH'; + const styles = getComputedStyle(first_td); + return { + text_overflow: styles.getPropertyValue('text-overflow'), + overflow: styles.getPropertyValue('overflow'), + white_space: styles.getPropertyValue('white-space') + }; + }, first_td); + expect(text_overflow).toEqual("ellipsis"); + expect(overflow).toEqual("hidden"); + expect(white_space).toEqual("nowrap"); + }); + + test("ths do not allow text selection", async () => { + const first_tr = await page.$("regular-table thead tr:first-child"); + const user_selects = await page.evaluate((first_tr) => Array.from(first_tr.children) + .map((x) => getComputedStyle(x).getPropertyValue('user-select')), first_tr); + expect(user_selects).toEqual(["none", "none", "none", "none"]); + }); + }); +});