From 699a480268e95a4793ccb4b34c9617eda86d6553 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Tue, 9 Feb 2021 08:53:18 +0200 Subject: [PATCH] refactor!: convert to Polymer 3 (#134) --- .eslintignore | 2 - .eslintrc.json | 30 +- .github/workflows/sauce.yml | 28 ++ .github/workflows/tests.yml | 40 +++ .gitignore | 9 +- .npmignore | 10 - .prettierrc | 6 + .stylelintrc | 7 +- .travis.yml | 43 --- README.md | 67 ++-- bower.json | 37 --- demo/.eslintrc.json | 10 - demo/board-basics.html | 149 --------- demo/board-demo.js | 12 - demo/board-nesting.html | 59 ---- demo/board-styling.html | 118 ------- demo/demo-element.html | 53 ---- demo/demos.json | 37 --- demo/index.html | 29 -- demo/overflow-examples.html | 75 ----- demo/style.css | 63 ---- gen-tsd.json | 9 - index.html | 14 +- magi-p3-post.js | 12 - package.json | 66 +++- rollup.config.js | 12 + src/vaadin-board-row.d.ts | 53 ++++ src/vaadin-board-row.html | 296 ------------------ src/vaadin-board-row.js | 294 +++++++++++++++++ src/vaadin-board.d.ts | 40 +++ src/vaadin-board.html | 89 ------ src/vaadin-board.js | 82 +++++ test/.eslintrc.json | 20 +- test/basic.test.js | 23 ++ test/board-cols.test.js | 192 ++++++++++++ test/board-element.html | 23 -- test/board-if-element.html | 26 -- test/board-in-app-layout-component.html | 36 --- test/board-in-app-layout.html | 18 -- test/board-repeat-element.html | 35 --- test/board-row.test.js | 127 ++++++++ test/index.html | 23 -- test/light-dom.test.js | 60 ++++ test/outer.html | 25 -- test/redraw.test.js | 234 ++++++++++++++ test/size.test.js | 137 ++++++++ test/template.test.js | 76 +++++ test/test-suites.js | 12 - test/utils.js | 9 - test/vaadin-board-template_test.html | 66 ---- test/vaadin-board_boardcols_test.html | 218 ------------- test/vaadin-board_light_dom_test.html | 81 ----- test/vaadin-board_media-queries.html | 72 ----- test/vaadin-board_redraw_test.html | 130 -------- test/vaadin-board_size_test.html | 156 --------- test/vaadin-board_slot_test.html | 86 ----- test/vaadin-board_style.html | 66 ---- test/vaadin-board_test.html | 137 -------- ...board_update_size_or_breakpoints_test.html | 168 ---------- theme/lumo/vaadin-board-row.html | 1 - theme/lumo/vaadin-board-row.js | 1 + theme/lumo/vaadin-board.html | 2 - theme/lumo/vaadin-board.js | 2 + theme/material/vaadin-board-row.html | 1 - theme/material/vaadin-board-row.js | 1 + theme/material/vaadin-board.html | 2 - theme/material/vaadin-board.js | 2 + vaadin-board-row.d.ts | 1 + vaadin-board-row.html | 1 - vaadin-board-row.js | 2 + vaadin-board.d.ts | 1 + vaadin-board.html | 1 - vaadin-board.js | 2 + wct.conf.js | 39 --- web-test-runner.config.js | 80 +++++ 75 files changed, 1595 insertions(+), 2651 deletions(-) delete mode 100644 .eslintignore create mode 100644 .github/workflows/sauce.yml create mode 100644 .github/workflows/tests.yml delete mode 100644 .npmignore create mode 100644 .prettierrc delete mode 100644 .travis.yml delete mode 100644 bower.json delete mode 100644 demo/.eslintrc.json delete mode 100644 demo/board-basics.html delete mode 100644 demo/board-demo.js delete mode 100644 demo/board-nesting.html delete mode 100644 demo/board-styling.html delete mode 100644 demo/demo-element.html delete mode 100644 demo/demos.json delete mode 100644 demo/index.html delete mode 100644 demo/overflow-examples.html delete mode 100644 demo/style.css delete mode 100644 gen-tsd.json delete mode 100644 magi-p3-post.js create mode 100644 rollup.config.js create mode 100644 src/vaadin-board-row.d.ts delete mode 100644 src/vaadin-board-row.html create mode 100644 src/vaadin-board-row.js create mode 100644 src/vaadin-board.d.ts delete mode 100644 src/vaadin-board.html create mode 100644 src/vaadin-board.js create mode 100644 test/basic.test.js create mode 100644 test/board-cols.test.js delete mode 100644 test/board-element.html delete mode 100644 test/board-if-element.html delete mode 100644 test/board-in-app-layout-component.html delete mode 100644 test/board-in-app-layout.html delete mode 100644 test/board-repeat-element.html create mode 100644 test/board-row.test.js delete mode 100644 test/index.html create mode 100644 test/light-dom.test.js delete mode 100644 test/outer.html create mode 100644 test/redraw.test.js create mode 100644 test/size.test.js create mode 100644 test/template.test.js delete mode 100644 test/test-suites.js delete mode 100644 test/utils.js delete mode 100644 test/vaadin-board-template_test.html delete mode 100644 test/vaadin-board_boardcols_test.html delete mode 100644 test/vaadin-board_light_dom_test.html delete mode 100644 test/vaadin-board_media-queries.html delete mode 100644 test/vaadin-board_redraw_test.html delete mode 100644 test/vaadin-board_size_test.html delete mode 100644 test/vaadin-board_slot_test.html delete mode 100644 test/vaadin-board_style.html delete mode 100644 test/vaadin-board_test.html delete mode 100644 test/vaadin-board_update_size_or_breakpoints_test.html delete mode 100644 theme/lumo/vaadin-board-row.html create mode 100644 theme/lumo/vaadin-board-row.js delete mode 100644 theme/lumo/vaadin-board.html create mode 100644 theme/lumo/vaadin-board.js delete mode 100644 theme/material/vaadin-board-row.html create mode 100644 theme/material/vaadin-board-row.js delete mode 100644 theme/material/vaadin-board.html create mode 100644 theme/material/vaadin-board.js create mode 100644 vaadin-board-row.d.ts delete mode 100644 vaadin-board-row.html create mode 100644 vaadin-board-row.js create mode 100644 vaadin-board.d.ts delete mode 100644 vaadin-board.html create mode 100644 vaadin-board.js delete mode 100644 wct.conf.js create mode 100644 web-test-runner.config.js diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 804eb70..0000000 --- a/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -bower_components/* -node_modules/* \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index c33509a..ffe1987 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,19 +1,15 @@ { - "extends": ["vaadin", "eslint:recommended"], - "env": { - "browser": true, - "node": true, - "es6":true - }, - "plugins": [ - "html" - ], - "globals": { - "Vaadin": false, - "Polymer": false, - "CustomElements": false - }, - "rules": { - "no-console": ["error",{"allow": ["warn", "error"] }] - } + "extends": [ + "eslint:recommended", + "plugin:prettier/recommended" + ], + "plugins": ["prettier"], + "env": { + "browser": true, + "es6": true + }, + "parserOptions": { + "sourceType": "module", + "ecmaVersion": 2020 + } } diff --git a/.github/workflows/sauce.yml b/.github/workflows/sauce.yml new file mode 100644 index 0000000..3ef2301 --- /dev/null +++ b/.github/workflows/sauce.yml @@ -0,0 +1,28 @@ +name: sauce + +on: + push: + branches: + - '**' + tags-ignore: + - '*.*' + +jobs: + unit-tests: + runs-on: ubuntu-latest + if: "! contains(toJSON(github.event.commits.*.message), '[skip ci]')" + + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: npm install + + - name: SauceLabs tests + env: + SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }} + SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }} + run: npm run test:sauce diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml new file mode 100644 index 0000000..e8f50dd --- /dev/null +++ b/.github/workflows/tests.yml @@ -0,0 +1,40 @@ +name: tests + +on: [pull_request] + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: npm install + + - name: Check version + run: npm run check-version + + - name: Lint JavaScript + run: npm run lint:js + + - name: Lint CSS + run: npm run lint:css + + unit-tests: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: npm install + + - name: Unit tests + run: npm test diff --git a/.gitignore b/.gitignore index 485fc53..892aade 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,7 @@ -.idea/ -bower_components/ -node_modules/ -travis.log +bower_components +node_modules package-lock.json yarn.lock coverage -analysis.json \ No newline at end of file +dist +analysis.json diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 8a95ff8..0000000 --- a/.npmignore +++ /dev/null @@ -1,10 +0,0 @@ -bower_components -.eslintrc.json -.stylelintrc -.travis.yml -.gemini.yml -wct.conf.js -analysis.json -bower.json -index.html -screenshot.png diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..3506f0e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "singleQuote": true, + "printWidth": 120, + "trailingComma": "none", + "htmlWhitespaceSensitivity": "strict" +} diff --git a/.stylelintrc b/.stylelintrc index 9b73d99..5a1a6a7 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,3 +1,6 @@ { - "extends": "stylelint-config-vaadin" -} \ No newline at end of file + "extends": [ + "stylelint-config-vaadin", + "stylelint-config-prettier" + ] +} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 4644c0d..0000000 --- a/.travis.yml +++ /dev/null @@ -1,43 +0,0 @@ -sudo: true -dist: xenial -language: node_js -node_js: 8.11 - -cache: - directories: - - node_modules - -addons: - firefox: "66.0" - chrome: stable - -env: - - POLYMER=2 - - POLYMER=3 - -script: - - if [[ "$POLYMER" = "2" ]]; then - npm -q i && npm i -q --no-save bower polymer-cli && bower -q i && - if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then - wct --env saucelabs; - else - npm run check && - npm run lint && - xvfb-run -s '-screen 0 1024x768x24' wct; - fi && - if [[ "$TRAVIS_EVENT_TYPE" = "cron" ]]; then - wct --env saucelabs-cron; - fi; - fi - - - if [[ "$POLYMER" = "3" ]]; then - npm --no-save -q install -g yarn bower magi-cli web-component-tester polymer-modulizer && - rm -rf node_modules && - magi p3-convert --out . --import-style=name && - yarn install --flat && - if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then - wct --npm --env saucelabs; - else - xvfb-run -s '-screen 0 1024x768x24' wct --npm; - fi; - fi diff --git a/README.md b/README.md index 02a784c..1c7e81e 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,18 @@ -[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-board)](https://www.npmjs.com/package/@vaadin/vaadin-board) -[![Bower version](https://badgen.net/github/release/vaadin/vaadin-board)](https://github.com/vaadin/vaadin-board/releases) -[![Build Status](https://travis-ci.org/vaadin/vaadin-board.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-board) -[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) - - [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-board) -[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-board.svg)](https://vaadin.com/directory/component/vaadinvaadin-board) - - -# \ +# <vaadin-board> [Live Demo ↗](https://vaadin.com/components/vaadin-board/html-examples) | [API documentation ↗](https://vaadin.com/components/vaadin-board/html-api) - [<vaadin-board>](https://vaadin.com/components/vaadin-board) is a Web component to create flexible responsive layouts and build nice looking dashboard. Vaadin Board key feature is how it effectively reorders the widgets on different screen sizes, maximizing the use of space and looking stunning. +[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-board)](https://www.npmjs.com/package/@vaadin/vaadin-board) +[![Build Status](https://travis-ci.org/vaadin/vaadin-board.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-board) +[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-board) +[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-board.svg)](https://vaadin.com/directory/component/vaadinvaadin-board) +[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC) + ```html @@ -44,29 +40,6 @@ Vaadin Board key feature is how it effectively reorders the widgets on different ### Installation -The Vaadin components are distributed as Bower and npm packages. -Please note that the version range is the same, as the API has not changed. -You should not mix Bower and npm versions in the same application, though. - -Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components -are only published on npm, not pushed to GitHub repositories. - -### Polymer 2 and HTML Imports compatible version - -Install `vaadin-board`: - -```sh -$ bower i vaadin/vaadin-board --save -``` - -Once installed, import it in your application: - -```html - -``` - -### Polymer 3 and ES Modules compatible version - Install `vaadin-board`: ```sh @@ -79,33 +52,29 @@ Once installed, import it in your application: import '@vaadin/vaadin-board/vaadin-board.js'; ``` -## Running demos and tests in browser - -1. Clone the repository -`git clone https://github.com/vaadin/vaadin-board.git` - -1. Make sure you have [npm](https://www.npmjs.com/) installed. +## Running API docs in a browser -1. When in the `vaadin-element` directory, run `npm install` and then `bower install` to install dependencies. +1. Fork the `vaadin-board` repository and clone it locally. -1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`. +1. Make sure you have [node.js](https://nodejs.org/) 12.x installed. -1. Run `polymer serve --open`, browser will automatically open the component API documentation. - -1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example: +1. Make sure you have [npm](https://www.npmjs.com/) installed. - - http://127.0.0.1:8080/components/vaadin-board/demo - - http://127.0.0.1:8080/components/vaadin-board/test +1. When in the `vaadin-board` directory, run `npm install` to install dependencies. +1. Run `npm start`, browser will automatically open the component API documentation. ## Running tests from the command line -1. When in the `vaadin-board` directory, run `polymer test` +1. When in the `vaadin-board` directory, run `npm test` + +## Debugging tests in the browser +1. Run `npm run debug`, then choose manual mode (M) and open the link in browser. ## Following the coding style -We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files. +We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files. ## Contributing diff --git a/bower.json b/bower.json deleted file mode 100644 index 0901e36..0000000 --- a/bower.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "vaadin-board", - "homepage": "https://vaadin.com/components", - "authors": [ - "Vaadin Ltd" - ], - "description": "Polymer element to create flexible responsive layouts and build nice looking dashboard.", - "main": [ - "vaadin-board.html", - "vaadin-board-row.html", - "theme/material/vaadin-board.html", - "theme/material/vaadin-board-row.html" - ], - "license": "https://raw.githubusercontent.com/vaadin/vaadin-board/master/LICENSE.txt", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "package-lock.json", - "wct.conf.js" - ], - "dependencies": { - "polymer": "^2.0.0", - "iron-resizable-behavior": "^2.0.0", - "vaadin-license-checker": "vaadin/license-checker#^2.1.0", - "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1" - }, - "devDependencies": { - "app-layout": "PolymerElements/app-layout#v2.0.0", - "web-component-tester": "^6.1.5", - "webcomponentsjs": "^1.0.0", - "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0", - "iron-icon": "^2.0.1", - "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0", - "iron-component-page": "PolymerElements/iron-component-page#^3.0.1" - } -} diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json deleted file mode 100644 index 275e741..0000000 --- a/demo/.eslintrc.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "rules": { - "no-console": 0, - "no-global-assign": 0 - }, - "globals": { - "BoardDemo": false, - "DemoReadyEventEmitter":false - } -} diff --git a/demo/board-basics.html b/demo/board-basics.html deleted file mode 100644 index 7ee0d0c..0000000 --- a/demo/board-basics.html +++ /dev/null @@ -1,149 +0,0 @@ - - - - diff --git a/demo/board-demo.js b/demo/board-demo.js deleted file mode 100644 index 48c9281..0000000 --- a/demo/board-demo.js +++ /dev/null @@ -1,12 +0,0 @@ -window.BoardDemo = superClass => { - return class extends superClass { - static get properties() { - return { - }; - } - }; -}; - -window.addEventListener('WebComponentsReady', () => { - document.body.removeAttribute('unresolved'); -}); \ No newline at end of file diff --git a/demo/board-nesting.html b/demo/board-nesting.html deleted file mode 100644 index f337017..0000000 --- a/demo/board-nesting.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - diff --git a/demo/board-styling.html b/demo/board-styling.html deleted file mode 100644 index f94d176..0000000 --- a/demo/board-styling.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - diff --git a/demo/demo-element.html b/demo/demo-element.html deleted file mode 100644 index e9ed3b0..0000000 --- a/demo/demo-element.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - diff --git a/demo/demos.json b/demo/demos.json deleted file mode 100644 index c581538..0000000 --- a/demo/demos.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "Vaadin Board", - "pages": [ - { - "name": "Basics", - "url": "board-basics", - "src": "board-basics.html", - "meta": { - "title": "Vaadin Board Basic Examples", - "description": "", - "image": "" - } - } - , - { - "name": "Nested Rows", - "url": "board-nesting", - "src": "board-nesting.html", - "meta": { - "title": "Vaadin Board Nesting Examples", - "description": "", - "image": "" - } - } - , - { - "name": "Styling", - "url": "board-styling", - "src": "board-styling.html", - "meta": { - "title": "Vaadin Board Styling Examples", - "description": "", - "image": "" - } - } - ] -} \ No newline at end of file diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index e84c578..0000000 --- a/demo/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - Vaadin Board Examples - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/demo/overflow-examples.html b/demo/overflow-examples.html deleted file mode 100644 index 106e901..0000000 --- a/demo/overflow-examples.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - vaadin-board demo - - - - - - - - -
- -

Content alignment for non fitting content

- - - - -
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem - aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. - - - - -

Possible overflow configurations

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem - aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem - aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem - aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem - aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. - - - -
- - diff --git a/demo/style.css b/demo/style.css deleted file mode 100644 index bf3ee8d..0000000 --- a/demo/style.css +++ /dev/null @@ -1,63 +0,0 @@ -.top { - min-height: 50px; -} - -.mid { - min-height: 200px; -} - -.low.a { - min-height: 200px; -} - -.top.a { - background-color: #14BDEF; -} - -.top.b { - background-color: #DC4A3C; -} - -.top.c { - background-color: #00A657; -} - -.top.d { - background-color: #F19E00; -} - -.mid { - background-color: #4E92C1; -} - -.low.a { - background-color: #00A556; -} - -.low.b { - background-color: #F1CA43; -} - -.low.b .top.a { - background-color: #BE7D00; -} - -.low.b .top.b { - background-color: #008249; -} - -.low.b .top.c { - background-color: #AF3A2E; -} - -.low.b .top.d { - background-color: #0C98BE; -} - -.top.a, .top.b, .top.c, .top.d, .mid, -.low.a, .low.b { - box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.15), - inset -1px 0 0 0 rgba(0, 0, 0, 0.15), - inset 0 1px 0 0 rgba(0, 0, 0, 0.15), - inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); -} \ No newline at end of file diff --git a/gen-tsd.json b/gen-tsd.json deleted file mode 100644 index f4a47d8..0000000 --- a/gen-tsd.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "excludeFiles": [ - "wct.conf.js", - "index.html", - "demo/**/*", - "test/**/*", - "theme/**/*" - ] -} diff --git a/index.html b/index.html index daf4139..147590b 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,13 @@ - vaadin-board - - - - - - - + + + + diff --git a/magi-p3-post.js b/magi-p3-post.js deleted file mode 100644 index dd2596c..0000000 --- a/magi-p3-post.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - files: [ - 'vaadin-board-row.js', - 'vaadin-board.js' - ], - from: [ - /import '\.\/theme\/lumo\/vaadin-(.+)\.js';/ - ], - to: [ - `import './theme/lumo/vaadin-$1.js';\nexport * from './src/vaadin-$1.js';` - ] -}; diff --git a/package.json b/package.json index d55b63a..e74d7db 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,8 @@ "name": "@vaadin/vaadin-board", "version": "3.0.0", "description": "Polymer element to create flexible responsive layouts and build nice looking dashboard.", - "main": "vaadin-board.html", + "main": "vaadin-board.js", + "module": "vaadin-board.js", "repository": "vaadin/vaadin-board", "keywords": [ "Vaadin", @@ -26,26 +27,59 @@ "src", "theme" ], + "scripts": { + "analyze": "polymer analyze vaadin-* > analysis.json", + "check-version": "magi check-version", + "debug": "web-test-runner test/*.test.js --watch", + "dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist", + "lint": "npm run lint:js && npm run lint:css", + "lint:css": "stylelint src/*.js", + "lint:js": "eslint src theme test", + "prestart": "npm run analyze", + "preversion": "magi update-version", + "serve:dist": "web-dev-server --app-index dist/index.html --open", + "start": "web-dev-server --node-resolve --open", + "test": "web-test-runner test/*.test.js --coverage", + "test:sauce": "TEST_ENV=sauce npm test" + }, "husky": { "hooks": { - "pre-commit": "npm run lint" + "pre-commit": "lint-staged" } }, - "scripts": { - "test": "wct", - "check": "npm-run-all --parallel check:*", - "check:bower": "magi check-bower", - "check:version": "magi check-version", - "lint": "npm-run-all --parallel lint:*", - "lint:css": "stylelint *.html src/*.html demo/*.html theme/**/*.html test/*html", - "lint:html": "eslint *.html src demo test --ext .html", - "lint:js": "eslint *.js test", - "lint:polymer": "polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html", - "prestart": "polymer analyze vaadin-* > analysis.json", - "start": "polymer serve --port 3000 --open", - "preversion": "magi update-version" + "lint-staged": { + "*.js": [ + "eslint --fix", + "prettier --write" + ] + }, + "dependencies": { + "@polymer/polymer": "^3.0.0", + "@polymer/iron-resizable-behavior": "^3.0.0", + "@vaadin/vaadin-license-checker": "^2.1.0", + "@vaadin/vaadin-element-mixin": "^2.4.1" }, "devDependencies": { - "@vaadin/vaadin-component-dev-dependencies": "^3.0.0" + "@esm-bundle/chai": "^4.1.5", + "@open-wc/rollup-plugin-html": "^1.2.5", + "@open-wc/testing-helpers": "^1.8.12", + "@polymer/iron-component-page": "^4.0.0", + "@web/dev-server": "^0.1.6", + "@web/test-runner": "^0.12.7", + "@web/test-runner-saucelabs": "^0.4.1", + "eslint": "^7.18.0", + "eslint-config-prettier": "^6.15.0", + "eslint-plugin-prettier": "^3.1.4", + "husky": "^4.3.0", + "lint-staged": "^10.5.1", + "magi-cli": "^0.28.0", + "prettier": "^2.2.0", + "rimraf": "^3.0.2", + "rollup": "^2.34.1", + "rollup-plugin-terser": "^7.0.2", + "sinon": "^9.2.1", + "stylelint": "^13.8.0", + "stylelint-config-prettier": "^8.0.2", + "stylelint-config-vaadin": "^0.2.10" } } diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..b4695e8 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,12 @@ +/* eslint-env node */ +const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const { terser } = require('rollup-plugin-terser'); +const html = require('@open-wc/rollup-plugin-html'); + +module.exports = { + input: './index.html', + output: { + dir: './dist' + }, + plugins: [html(), nodeResolve(), terser()] +}; diff --git a/src/vaadin-board-row.d.ts b/src/vaadin-board-row.d.ts new file mode 100644 index 0000000..9cb9e38 --- /dev/null +++ b/src/vaadin-board-row.d.ts @@ -0,0 +1,53 @@ +import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; + +/** + * `` is a web component that together with `` component allows + * to create flexible responsive layouts and build nice looking dashboard. + * + * Each row can contain up to four elements (fewer if colspan is used) and is automatically responsive. + * The row changes between `large`, `medium` and `small` modes depending on the available width and + * the set breakpoints. + * + * In `large` mode, typically all content is shown side-by-side, in `medium` half of the content is + * side by side and in `small` mode, content is laid out vertically. + * + * The breakpoints can be set using custom CSS properties. + * By default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`. + * + * ```html + * + * + *
This could be chart 1
+ *
This could be chart 2
+ *
This could be chart 3
+ *
This could be chart 4
+ * + * + * ``` + * + * ### Styling + * + * The following custom properties are available for styling: + * + * Custom property | Description | Default + * ----------------|-------------|------------- + * `--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px` + * `--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px` + */ +declare class BoardRowElement extends ElementMixin(HTMLElement) { + /** + * Redraws the row, if necessary. + * + * In most cases, a board row will redraw itself if your reconfigure it. + * If you dynamically change CSS which affects the row, then you need to call this method. + */ + redraw(): void; +} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-board-row': BoardRowElement; + } +} + +export { BoardRowElement }; diff --git a/src/vaadin-board-row.html b/src/vaadin-board-row.html deleted file mode 100644 index 94fa5da..0000000 --- a/src/vaadin-board-row.html +++ /dev/null @@ -1,296 +0,0 @@ - - - - - - - - - - diff --git a/src/vaadin-board-row.js b/src/vaadin-board-row.js new file mode 100644 index 0000000..4825c5a --- /dev/null +++ b/src/vaadin-board-row.js @@ -0,0 +1,294 @@ +/** + * @license + * Copyright (c) 2017 - 2021 Vaadin Ltd + * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0. + */ +import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; +import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; +import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; +import { DomRepeat } from '@polymer/polymer/lib/elements/dom-repeat.js'; +import { DomIf } from '@polymer/polymer/lib/elements/dom-if.js'; +import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; +import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; + +const CLASSES = { + SMALL: 'small', + MEDIUM: 'medium', + LARGE: 'large' +}; + +/** + * `` is a web component that together with `` component allows + * to create flexible responsive layouts and build nice looking dashboard. + * + * Each row can contain up to four elements (fewer if colspan is used) and is automatically responsive. + * The row changes between `large`, `medium` and `small` modes depending on the available width and + * the set breakpoints. + * + * In `large` mode, typically all content is shown side-by-side, in `medium` half of the content is + * side by side and in `small` mode, content is laid out vertically. + * + * The breakpoints can be set using custom CSS properties. + * By default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`. + * + * ```html + * + * + *
This could be chart 1
+ *
This could be chart 2
+ *
This could be chart 3
+ *
This could be chart 4
+ * + * + * ``` + * + * ### Styling + * + * The following custom properties are available for styling: + * + * Custom property | Description | Default + * ----------------|-------------|------------- + * `--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px` + * `--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px` + * + * @extends HTMLElement + * @mixes ElementMixin + */ +class BoardRowElement extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) { + static get template() { + return html` + + + `; + } + + static get is() { + return 'vaadin-board-row'; + } + + constructor() { + super(); + this._onIronResize = this._onIronResize.bind(this); + this._oldWidth = 0; + this._oldBreakpoints = { smallSize: 600, mediumSize: 960 }; + this._oldFlexBasis = []; + } + + /** @protected */ + ready() { + super.ready(); + this.addEventListener('iron-resize', this._onIronResize, true); + this.$.insertionPoint.addEventListener('slotchange', this.redraw.bind(this)); + afterNextRender(this, function () { + //force this as an interested resizable of parent + this.dispatchEvent( + new CustomEvent('iron-request-resize-notifications', { + node: this, + bubbles: true, + cancelable: true, + composed: true, + detail: {} + }) + ); + }); + } + + /** @protected */ + connectedCallback() { + super.connectedCallback(); + afterNextRender(this, this._onIronResize); + } + + /** + * Adds styles for board row based on width. + * @private + */ + _addStyleNames(width, breakpoints) { + if (width < breakpoints.smallSize) { + this.classList.add(CLASSES.SMALL); + this.classList.remove(CLASSES.MEDIUM); + this.classList.remove(CLASSES.LARGE); + } else if (width < breakpoints.mediumSize) { + this.classList.remove(CLASSES.SMALL); + this.classList.add(CLASSES.MEDIUM); + this.classList.remove(CLASSES.LARGE); + } else { + this.classList.remove(CLASSES.SMALL); + this.classList.remove(CLASSES.MEDIUM); + this.classList.add(CLASSES.LARGE); + } + } + + /** + * Calculates flex basis based on colSpan, width and breakpoints. + * @param {number} colSpan colspan value of the row + * @param {number} width width of the row in px + * @param {number} colsInRow number of columns in the row + * @param {object} breakpoints object with smallSize and mediumSize number properties, which tells + * where the row should switch rendering size in pixels. + * @private + */ + _calculateFlexBasis(colSpan, width, colsInRow, breakpoints) { + if (width < breakpoints.smallSize) { + colsInRow = 1; + } else if (width < breakpoints.mediumSize && colsInRow == 4) { + colsInRow = 2; + } + let flexBasis = (colSpan / colsInRow) * 100; + flexBasis = flexBasis > 100 ? 100 : flexBasis; + return flexBasis + '%'; + } + + /** @private */ + _reportError() { + const errorMessage = 'The column configuration is not valid; column count should add up to 3 or 4.'; + console.warn(errorMessage, 'check: \r\n' + this.outerHTML); + } + + /** + * Parses board-cols from DOM. + * If there is not enough space in the row drop board cols. + * @param {!Array} nodes array of nodes + * @return {!Array} array of boardCols + * @private + */ + _parseBoardCols(nodes) { + const boardCols = nodes.map((node) => { + if (node.getAttribute('board-cols')) { + return parseInt(node.getAttribute('board-cols')); + } + return 1; + }); + + let spaceLeft = 4; + let returnBoardCols = []; + nodes.forEach((node, i) => { + spaceLeft = spaceLeft - boardCols[i]; + }); + + if (spaceLeft < 0) { + this._reportError(); + boardCols.forEach((node, i) => { + returnBoardCols[i] = 1; + }); + } else { + returnBoardCols = boardCols.slice(0); + } + + return returnBoardCols; + } + + /** + * If there is not enough space in the row. + * Extra items are dropped from DOM. + * @param {!Array} boardCols array of board-cols for every node + * @param {!Array} nodes array of nodes + * @return {!Array} filtered array of nodes + * @private + */ + _removeExtraNodesFromDOM(boardCols, nodes) { + let isErrorReported = false; + let spaceLeft = 4; + let returnNodes = []; + nodes.forEach((node, i) => { + spaceLeft = spaceLeft - boardCols[i]; + if (spaceLeft < 0) { + if (!isErrorReported) { + isErrorReported = true; + this._reportError(); + } + this.removeChild(node); + } else { + returnNodes[i] = node; + } + }); + return returnNodes; + } + + /** + * Redraws the row, if necessary. + * + * In most cases, a board row will redraw itself if your reconfigure it. + * If you dynamically change CSS which affects the row, then you need to call this method. + */ + redraw() { + this._recalculateFlexBasis(true); + } + + /** @private */ + _onIronResize() { + this._recalculateFlexBasis(false); + } + + /** @private */ + _recalculateFlexBasis(forceResize) { + const width = this.getBoundingClientRect().width; + const breakpoints = this._measureBreakpointsInPx(); + if ( + forceResize || + width != this._oldWidth || + breakpoints.smallSize != this._oldBreakpoints.smallSize || + breakpoints.mediumSize != this._oldBreakpoints.mediumSize + ) { + const nodes = this.$.insertionPoint.assignedNodes({ flatten: true }); + const isElementNode = function (node) { + return !(node.nodeType === node.TEXT_NODE || node instanceof DomRepeat || node instanceof DomIf); + }; + const filteredNodes = nodes.filter(isElementNode); + this._addStyleNames(width, breakpoints); + const boardCols = this._parseBoardCols(filteredNodes); + const colsInRow = boardCols.reduce((a, b) => a + b, 0); + this._removeExtraNodesFromDOM(boardCols, filteredNodes).forEach((e, i) => { + let newFlexBasis = this._calculateFlexBasis(boardCols[i], width, colsInRow, breakpoints); + if (forceResize || !this._oldFlexBasis[i] || this._oldFlexBasis[i] != newFlexBasis) { + this._oldFlexBasis[i] = newFlexBasis; + e.style.flexBasis = newFlexBasis; + } + }); + this._oldWidth = width; + this._oldBreakpoints = breakpoints; + } + } + + /** + * Measure the breakpoints in pixels. + * + * The breakpoints for `small` and `medium` can be given in any unit: `px`, `em`, `in` etc. + * We need to know them in `px` so that they are comparable with the actual size. + * + * @return {object} object with smallSize and mediumSize number properties, which tells + * where the row should switch rendering size in pixels. + * @private + */ + _measureBreakpointsInPx() { + // Convert minWidth to px units for comparison + const breakpoints = {}; + const tmpStyleProp = 'background-position'; + const smallSize = getComputedStyle(this).getPropertyValue('--small-size'); + const mediumSize = getComputedStyle(this).getPropertyValue('--medium-size'); + this.style.setProperty(tmpStyleProp, smallSize); + breakpoints.smallSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp)); + this.style.setProperty(tmpStyleProp, mediumSize); + breakpoints.mediumSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp)); + this.style.removeProperty(tmpStyleProp); + return breakpoints; + } +} + +customElements.define(BoardRowElement.is, BoardRowElement); + +export { BoardRowElement }; diff --git a/src/vaadin-board.d.ts b/src/vaadin-board.d.ts new file mode 100644 index 0000000..b0401ce --- /dev/null +++ b/src/vaadin-board.d.ts @@ -0,0 +1,40 @@ +import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; + +/** + * `` is a web component to create flexible responsive layouts + * and build nice looking dashboards. + * + * A `` is built using `` elements containing your child elements. + * Each board row consists of four columns, and can contain up to four elements. Using column spans + * you can tune the layout to your liking. + * + * ```html + * + * + *
This could be chart 1
+ *
This could be chart 2
+ *
This could be chart 3
+ *
This could be chart 4
+ * + * + * ``` + */ +declare class BoardElement extends ElementMixin(HTMLElement) { + static _finalizeClass(): void; + + /** + * Redraws the board and all rows inside it, if necessary. + * + * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS + * which affects this element, then you need to call this method. + */ + redraw(): void; +} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-board': BoardElement; + } +} + +export { BoardElement }; diff --git a/src/vaadin-board.html b/src/vaadin-board.html deleted file mode 100644 index e7471db..0000000 --- a/src/vaadin-board.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - - - - - diff --git a/src/vaadin-board.js b/src/vaadin-board.js new file mode 100644 index 0000000..a276caf --- /dev/null +++ b/src/vaadin-board.js @@ -0,0 +1,82 @@ +/** + * @license + * Copyright (c) 2017 - 2021 Vaadin Ltd + * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0. + */ +import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; +import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; +import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; +import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; +import '@vaadin/vaadin-license-checker/vaadin-license-checker.js'; +import './vaadin-board-row.js'; + +/** + * `` is a web component to create flexible responsive layouts + * and build nice looking dashboards. + * + * A `` is built using `` elements containing your child elements. + * Each board row consists of four columns, and can contain up to four elements. Using column spans + * you can tune the layout to your liking. + * + * ```html + * + * + *
This could be chart 1
+ *
This could be chart 2
+ *
This could be chart 3
+ *
This could be chart 4
+ * + * + * ``` + * + * @extends HTMLElement + * @mixes ElementMixin + */ +class BoardElement extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) { + static get template() { + return html` + + + `; + } + + static get is() { + return 'vaadin-board'; + } + + static get version() { + return '3.0.0'; + } + + /** + * @protected + */ + static _finalizeClass() { + super._finalizeClass(); + + const devModeCallback = window.Vaadin.developmentModeCallback; + const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker']; + /* c8 ignore next 3 */ + if (typeof licenseChecker === 'function') { + licenseChecker(BoardElement); + } + } + + /** + * Redraws the board and all rows inside it, if necessary. + * + * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS + * which affects this element, then you need to call this method. + */ + redraw() { + this.notifyResize(); + } +} + +customElements.define(BoardElement.is, BoardElement); + +export { BoardElement }; diff --git a/test/.eslintrc.json b/test/.eslintrc.json index 5463bc9..7eeefc3 100644 --- a/test/.eslintrc.json +++ b/test/.eslintrc.json @@ -1,19 +1,5 @@ { - "rules": { - "no-unused-vars": 0 - }, - "globals": { - "suite": false, - "expected": false, - "test": false, - "assert": false, - "setup": false, - "teardown":false, - "fixture":false, - "WCT": false, - "ios": false, - "chrome": false, - "System": false, - "HTMLImports": false + "env": { + "mocha": true } -} \ No newline at end of file +} diff --git a/test/basic.test.js b/test/basic.test.js new file mode 100644 index 0000000..ced39d2 --- /dev/null +++ b/test/basic.test.js @@ -0,0 +1,23 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync } from '@open-wc/testing-helpers'; +import '../vaadin-board.js'; + +describe('vaadin-details', () => { + let board; + + beforeEach(() => { + board = fixtureSync(''); + }); + + it('should define a vaadin-board custom element', () => { + expect(customElements.get('vaadin-board')).to.be.ok; + }); + + it('should define a vaadin-board-row custom element', () => { + expect(customElements.get('vaadin-board-row')).to.be.ok; + }); + + it('should have a valid version number', () => { + expect(board.constructor.version).to.match(/^(\d+\.)?(\d+\.)?(\d+)(-(alpha|beta)\d+)?$/); + }); +}); diff --git a/test/board-cols.test.js b/test/board-cols.test.js new file mode 100644 index 0000000..1395e7f --- /dev/null +++ b/test/board-cols.test.js @@ -0,0 +1,192 @@ +import { expect } from '@esm-bundle/chai'; +import sinon from 'sinon'; +import { aTimeout, fixtureSync } from '@open-wc/testing-helpers'; +import '../vaadin-board-row.js'; + +describe('board-cols', () => { + let row; + + describe('desktop 1 colspan item', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+ + `); + }); + + it('should make item with colspan 2 take 50% width', () => { + const rowRect = row.getBoundingClientRect(); + const expectedLeftOffset = [0, Math.floor((1 / 2) * rowRect.width), Math.floor((3 / 4) * rowRect.width)]; + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo(rowRect.left + expectedLeftOffset[i], 1); + } + }); + }); + + describe('desktop 2 colspan items', () => { + beforeEach(() => { + row = fixtureSync(` + +
low A
+
low B / A
+ + `); + }); + + it('should make items with colspan take 66% and 33% width', () => { + const rowRect = row.getBoundingClientRect(); + const expectedLeftOffset = [0, Math.floor((2 / 3) * rowRect.width)]; + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo(rowRect.left + expectedLeftOffset[i], 1); + } + }); + }); + + describe('incorrect colspan', () => { + beforeEach(() => { + sinon.stub(console, 'warn'); + + row = fixtureSync(` + +
top A
+
top B
+
top C
+ + `); + }); + + afterEach(() => { + console.warn.restore(); + }); + + it('should ignore incorrect board-cols', () => { + const rowRect = row.getBoundingClientRect(); + const expectedLeftOffset = [0, Math.floor((1 / 3) * rowRect.width), Math.floor((2 / 3) * rowRect.width)]; + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo(rowRect.left + expectedLeftOffset[i], 1); + } + }); + + it('should warn about incorrect board-cols', async () => { + await aTimeout(0); + expect(console.warn.called).to.be.true; + }); + }); + + describe('extra item', () => { + beforeEach(() => { + sinon.stub(console, 'warn'); + + row = fixtureSync(` + +
top A
+
top B
+
top C
+
top D
+
top E
+ + `); + }); + + afterEach(() => { + console.warn.restore(); + }); + + it('should warn about incorrect children count', async () => { + await aTimeout(0); + expect(console.warn.called).to.be.true; + }); + + it('should remove extra children from the DOM', () => { + const children = row.querySelectorAll('div'); + expect(children.length).to.equal(4); + }); + }); + + describe('tablet 1 colspan item', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+ + `); + }); + + it('should make item with colspan 2 take 100% width', () => { + const rowRect = row.getBoundingClientRect(); + const expectedLeftOffset = [0, 0, Math.floor((1 / 2) * rowRect.width)]; + const expectedTopOffset = [0, Math.floor((1 / 2) * rowRect.height), Math.floor((1 / 2) * rowRect.height)]; + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.be.closeTo(rowRect.top + expectedTopOffset[i], 1); + expect(rect.left).to.be.closeTo(rowRect.left + expectedLeftOffset[i], 1); + } + }); + }); + + describe('tablet no colspan', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+ + `); + }); + + it('should make items without take 33% width', () => { + const rowRect = row.getBoundingClientRect(); + const expectedLeftOffset = [0, Math.floor((1 / 3) * rowRect.width), Math.floor((2 / 3) * rowRect.width)]; + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo(rowRect.left + expectedLeftOffset[i], 1); + } + }); + }); + + describe('mobile 1 colspan item', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+ + `); + }); + + it('should make item with colspan 2 take 100% width', () => { + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.be.closeTo((i * rowRect.height) / 3 + rowRect.top, 1); + expect(rect.left).to.equal(rowRect.left); + } + }); + }); +}); diff --git a/test/board-element.html b/test/board-element.html deleted file mode 100644 index 0d7f71e..0000000 --- a/test/board-element.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/test/board-if-element.html b/test/board-if-element.html deleted file mode 100644 index 5a4fa8e..0000000 --- a/test/board-if-element.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/test/board-in-app-layout-component.html b/test/board-in-app-layout-component.html deleted file mode 100644 index f1369a5..0000000 --- a/test/board-in-app-layout-component.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/test/board-in-app-layout.html b/test/board-in-app-layout.html deleted file mode 100644 index 5fce643..0000000 --- a/test/board-in-app-layout.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/test/board-repeat-element.html b/test/board-repeat-element.html deleted file mode 100644 index ebbb43a..0000000 --- a/test/board-repeat-element.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/test/board-row.test.js b/test/board-row.test.js new file mode 100644 index 0000000..2cd8def --- /dev/null +++ b/test/board-row.test.js @@ -0,0 +1,127 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync } from '@open-wc/testing-helpers'; +import '../vaadin-board.js'; + +describe('vaadin-board-row', () => { + let row; + + describe('desktop', () => { + describe('4 items', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+
top D
+ + `); + }); + + it('should make each item take 25% width', () => { + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo((i * rowRect.width) / 4 + rowRect.left, 1); + } + }); + }); + + describe('2 items', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+ + `); + }); + + it('should make each item take 50% width', () => { + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo((i * rowRect.width) / 2 + rowRect.left, 1); + } + }); + }); + }); + + describe('tablet', () => { + describe('4 items', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+
top D
+ + `); + }); + + it('should make each item take 50% width', () => { + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.be.closeTo((Math.floor(i / 2) * rowRect.height) / 2 + rowRect.top, 1); + expect(rect.left).to.be.closeTo(((i % 2) * rowRect.width) / 2 + rowRect.left, 1); + } + }); + }); + + describe('2 items', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+ + `); + }); + + it('should make each item take 50% width', () => { + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.equal(rowRect.top); + expect(rect.left).to.be.closeTo(((i % 2) * rowRect.width) / 2 + rowRect.left, 1); + } + }); + }); + }); + + describe('mobile', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+
top D
+ + `); + }); + + it('should make each item take 100% width', () => { + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + + expect(rect.top).to.be.closeTo((i * rowRect.height) / 4 + rowRect.top, 1); + expect(rect.left).to.equal(rowRect.left); + } + }); + }); +}); diff --git a/test/index.html b/test/index.html deleted file mode 100644 index 8355ade..0000000 --- a/test/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - vaadin-board tests - - - - - - - - - diff --git a/test/light-dom.test.js b/test/light-dom.test.js new file mode 100644 index 0000000..0352f7a --- /dev/null +++ b/test/light-dom.test.js @@ -0,0 +1,60 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync, nextFrame } from '@open-wc/testing-helpers'; +import '../vaadin-board-row.js'; + +describe('light DOM children', () => { + let row; + + describe('adding', () => { + beforeEach(() => { + row = fixtureSync(` + +
top B
+
top C
+
top D
+ + `); + }); + + it('should trigger resize when element is added', async () => { + const firstItem = row.querySelector('#first'); + const addedItem = document.createElement('div'); + addedItem.textContent = 'top A'; + row.insertBefore(addedItem, firstItem); + await nextFrame(); + const rowRect = row.getBoundingClientRect(); + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + expect(rowRect.top).to.closeTo(rect.top, 1); + expect(rect.left).to.be.closeTo((i * rowRect.width) / 4 + rowRect.left, 1); + } + }); + }); + + describe('removing', () => { + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+
top D
+ + `); + }); + + it('should trigger resize when element is removed', async () => { + const firstItem = row.querySelector('#first'); + const secondItem = firstItem.nextElementSibling; + row.removeChild(firstItem); + row.removeChild(secondItem); + await nextFrame(); + const rowRect = row.getBoundingClientRect(); + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + expect(rowRect.top).to.closeTo(rect.top, 1); + expect(rect.left).to.be.closeTo(((i % 2) * rowRect.width) / 2 + rowRect.left, 1); + } + }); + }); +}); diff --git a/test/outer.html b/test/outer.html deleted file mode 100644 index e6555a4..0000000 --- a/test/outer.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/test/redraw.test.js b/test/redraw.test.js new file mode 100644 index 0000000..2781b0e --- /dev/null +++ b/test/redraw.test.js @@ -0,0 +1,234 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync } from '@open-wc/testing-helpers'; +import '../vaadin-board.js'; + +describe('redraw', () => { + describe('board', () => { + let board; + + beforeEach(() => { + board = fixtureSync(` + + +
top A
+
top B
+
top C
+
top D
+ + + `); + }); + + it('should trigger layout after board style is changed', () => { + board.style.width = '700px'; + board.redraw(); + + const row = board.querySelector('#top'); + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + expect(rect.left).to.be.closeTo(((i % 2) * rowRect.width) / 2 + rowRect.left, 1); + expect(rect.top).to.be.closeTo((Math.floor(i / 2) * rowRect.height) / 2 + rowRect.top, 1); + } + }); + }); + + describe('row', () => { + let row; + + beforeEach(() => { + row = fixtureSync(` + +
top A
+
top B
+
top C
+
top D
+ + `); + }); + + it('should trigger layout after board row style is changed', () => { + row.style.width = '700px'; + row.redraw(); + + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + expect(rect.left).to.be.closeTo(((i % 2) * rowRect.width) / 2 + rowRect.left, 1); + expect(rect.top).to.be.closeTo((Math.floor(i / 2) * rowRect.height) / 2 + rowRect.top, 1); + } + }); + }); + + describe('nested row', () => { + let board, row; + + beforeEach(() => { + board = fixtureSync(` + + +
top A
+ +
low B / A
+
low B / B
+
low B / C
+
low B / D
+ + + + `); + row = board.querySelector('#nested'); + }); + + it('should trigger layout for nested rows after board style is changed', () => { + board.style.width = '900px'; + board.redraw(); + + const row = board.querySelector('#nested'); + const rowRect = row.getBoundingClientRect(); + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + expect(rect.left).to.be.closeTo(rowRect.left, 1); + expect(rect.top).to.be.closeTo(rowRect.top + rect.height * i, 1); + } + }); + + it('should have the same size after changing from 1200px to 900px and back', () => { + const rowRect = row.getBoundingClientRect(); + const expectedLeftOffset = [0, Math.floor((1 / 2) * rowRect.width), 0, Math.floor((1 / 2) * rowRect.width)]; + + board.style.width = '900px'; + board.redraw(); + board.style.width = '1200px'; + board.redraw(); + + const expectedTopOffset = [0, 0, Math.floor((1 / 2) * rowRect.height), Math.floor((1 / 2) * rowRect.height)]; + + for (let i = 0; i < row.children.length; i++) { + const rect = row.children[i].getBoundingClientRect(); + // TODO: Delta=4 as a workaround for https://github.com/vaadin/vaadin-board/issues/121 + expect(rect.left).to.be.closeTo(rowRect.left + expectedLeftOffset[i], 4); + expect(rect.top).to.be.closeTo(rowRect.top + expectedTopOffset[i], 4); + } + }); + }); + + describe('row class names', () => { + let container, board, first, second, third; + + beforeEach(() => { + container = fixtureSync(` +
+ + +
first A
+
first B
+
first C
+
first D
+ + +
second A
+
second B
+
second C
+
second D
+ + +
third A
+
third B
+
third C
+
third D
+ + +
+ `); + board = container.querySelector('vaadin-board'); + first = container.querySelector('#first'); + second = container.querySelector('#second'); + third = container.querySelector('#third'); + }); + + it('should set correct class name to rows by default', () => { + expect(first.className).to.equal('large'); + expect(second.className).to.equal('large'); + expect(third.className).to.equal('large'); + }); + + it('should update rows on redraw after breakpoints change', () => { + container.style.setProperty('--vaadin-board-width-small', '1200px'); + container.style.setProperty('--vaadin-board-width-medium', '1500px'); + + expect(first.className).to.equal('large'); + expect(second.className).to.equal('large'); + expect(third.className).to.equal('large'); + + board.redraw(); + + expect(first.className).to.equal('small'); + expect(second.className).to.equal('small'); + expect(third.className).to.equal('small'); + }); + + it('should update rows on redraw after container resize', () => { + container.style.setProperty('width', '800px'); + + expect(first.className).to.equal('large'); + expect(second.className).to.equal('large'); + expect(third.className).to.equal('large'); + + board.redraw(); + + expect(first.className).to.equal('medium'); + expect(second.className).to.equal('medium'); + expect(third.className).to.equal('medium'); + }); + + it('should only update class on resize or breakpoint change', () => { + first.className = ''; + board.redraw(); + expect(first.className).to.equal(''); + + container.style.width = '1001px'; + board.redraw(); + expect(first.className).to.equal('large'); + }); + }); + + describe('nested row class names', () => { + let container, board, outer, inner; + + beforeEach(() => { + container = fixtureSync(` +
+ + +
first A
+
first B
+ +
second A
+
second B
+
second C
+ + + +
+ `); + board = container.querySelector('vaadin-board'); + outer = container.querySelector('#outer'); + inner = container.querySelector('#inner'); + }); + + it('should update nested rows on redraw after breakpoint change', () => { + expect(outer.className).to.equal('large'); + expect(inner.className).to.equal('small'); + + inner.setAttribute('class', ''); + container.style.setProperty('--vaadin-board-width-small', '601px'); + board.redraw(); + + expect(inner.className).to.equal('small'); + }); + }); +}); diff --git a/test/size.test.js b/test/size.test.js new file mode 100644 index 0000000..7c79292 --- /dev/null +++ b/test/size.test.js @@ -0,0 +1,137 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync } from '@open-wc/testing-helpers'; +import '../vaadin-board.js'; + +describe('size', () => { + let container, board, rows, rowDefault, rowSmaller, rowLarger; + + beforeEach(() => { + container = fixtureSync(` +
+ + + +
default A
+
default B
+
default C
+
default D
+ + +
smaller A
+
smaller B
+
smaller C
+
smaller D
+ + +
larger A
+
larger B
+
larger C
+
larger D
+ + +
+ `); + board = container.querySelector('vaadin-board'); + rows = container.querySelectorAll('vaadin-board-row'); + rowDefault = rows[0].querySelector('div'); + rowSmaller = rows[1].querySelector('div'); + rowLarger = rows[2].querySelector('div'); + }); + + const large = 'rgb(255, 0, 0)'; + const medium = 'rgb(0, 255, 0)'; + const small = 'rgb(0, 0, 255)'; + + function testSize(defaultColor, smallerColor, largerColor) { + expect(getComputedStyle(rowDefault).backgroundColor).to.equal(defaultColor); + expect(getComputedStyle(rowSmaller).backgroundColor).to.equal(smallerColor); + expect(getComputedStyle(rowLarger).backgroundColor).to.equal(largerColor); + } + + it('should apply correct styles for 900px width', () => { + container.style.width = '920px'; + board.redraw(); + testSize(large, large, medium); + + container.style.width = '880px'; + board.redraw(); + testSize(medium, large, medium); + }); + + it('should style items correctly for 500px width', () => { + container.style.width = '520px'; + board.redraw(); + testSize(medium, medium, small); + + container.style.width = '480px'; + board.redraw(); + testSize(small, medium, small); + }); + + it('should style items correctly for 700px width', () => { + container.style.width = '720px'; + board.redraw(); + testSize(medium, large, small); + + container.style.width = '680px'; + board.redraw(); + testSize(medium, medium, small); + }); + + it('should style items correctly for 300px width', () => { + container.style.width = '320px'; + board.redraw(); + testSize(small, medium, small); + + container.style.width = '280px'; + board.redraw(); + testSize(small, small, small); + }); + + it('should style items correctly for 1300px width', () => { + container.style.width = '1320px'; + board.redraw(); + testSize(large, large, large); + + container.style.width = '1280px'; + board.redraw(); + testSize(large, large, medium); + }); + + it('should style items correctly for 800px width', () => { + container.style.width = '820px'; + board.redraw(); + testSize(medium, large, medium); + + container.style.width = '780px'; + board.redraw(); + testSize(medium, large, small); + }); +}); diff --git a/test/template.test.js b/test/template.test.js new file mode 100644 index 0000000..0692803 --- /dev/null +++ b/test/template.test.js @@ -0,0 +1,76 @@ +import { expect } from '@esm-bundle/chai'; +import sinon from 'sinon'; +import { aTimeout, fixtureSync } from '@open-wc/testing-helpers'; +import '@polymer/polymer/lib/elements/dom-bind.js'; +import '@polymer/polymer/lib/elements/dom-if.js'; +import '@polymer/polymer/lib/elements/dom-repeat.js'; +import '../vaadin-board.js'; + +describe('template', () => { + let bind, board; + + beforeEach(() => { + sinon.stub(console, 'warn'); + }); + + afterEach(() => { + console.warn.restore(); + }); + + describe('dom-if', () => { + beforeEach(() => { + board = fixtureSync(` + + + + `); + bind = document.querySelector('dom-bind'); + }); + + it('should not include dom-if template to the board elements', async () => { + bind.show = true; + board.querySelector('dom-if').render(); + await aTimeout(0); + expect(console.warn.called).to.be.false; + }); + }); + + describe('dom-repeat', () => { + beforeEach(() => { + board = fixtureSync(` + + + + `); + bind = document.querySelector('dom-bind'); + }); + + it('should not include dom-repeat template to the board elements', async () => { + bind.items = ['Foo', 'Bar', 'Baz', 'Qux']; + board.querySelector('dom-repeat').render(); + await aTimeout(0); + expect(console.warn.called).to.be.false; + }); + }); +}); diff --git a/test/test-suites.js b/test/test-suites.js deleted file mode 100644 index c6a94ff..0000000 --- a/test/test-suites.js +++ /dev/null @@ -1,12 +0,0 @@ -window.VaadinElementSuites = [ - 'vaadin-board_boardcols_test.html', - 'vaadin-board_light_dom_test.html', - 'vaadin-board_media-queries.html', - 'vaadin-board_redraw_test.html', - 'vaadin-board_size_test.html', - 'vaadin-board_slot_test.html', - 'vaadin-board_style.html', - 'vaadin-board_test.html', - 'vaadin-board_update_size_or_breakpoints_test.html', - 'vaadin-board-template_test.html' -]; diff --git a/test/utils.js b/test/utils.js deleted file mode 100644 index a5d7317..0000000 --- a/test/utils.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Helper method for testing - * to calculate expected values based on multiplication - */ - - -var expected = function(mult, base) { - return Math.floor(mult * base); -} \ No newline at end of file diff --git a/test/vaadin-board-template_test.html b/test/vaadin-board-template_test.html deleted file mode 100644 index 2d4c1ae..0000000 --- a/test/vaadin-board-template_test.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_boardcols_test.html b/test/vaadin-board_boardcols_test.html deleted file mode 100644 index edc26e8..0000000 --- a/test/vaadin-board_boardcols_test.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_light_dom_test.html b/test/vaadin-board_light_dom_test.html deleted file mode 100644 index aa46520..0000000 --- a/test/vaadin-board_light_dom_test.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_media-queries.html b/test/vaadin-board_media-queries.html deleted file mode 100644 index 85c3f81..0000000 --- a/test/vaadin-board_media-queries.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - diff --git a/test/vaadin-board_redraw_test.html b/test/vaadin-board_redraw_test.html deleted file mode 100644 index 2632b6d..0000000 --- a/test/vaadin-board_redraw_test.html +++ /dev/null @@ -1,130 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_size_test.html b/test/vaadin-board_size_test.html deleted file mode 100644 index 0530e46..0000000 --- a/test/vaadin-board_size_test.html +++ /dev/null @@ -1,156 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_slot_test.html b/test/vaadin-board_slot_test.html deleted file mode 100644 index 59fe748..0000000 --- a/test/vaadin-board_slot_test.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - vaadin-board slot` test - - - - - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_style.html b/test/vaadin-board_style.html deleted file mode 100644 index 67e4c2d..0000000 --- a/test/vaadin-board_style.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_test.html b/test/vaadin-board_test.html deleted file mode 100644 index 155d8aa..0000000 --- a/test/vaadin-board_test.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/test/vaadin-board_update_size_or_breakpoints_test.html b/test/vaadin-board_update_size_or_breakpoints_test.html deleted file mode 100644 index d7627bf..0000000 --- a/test/vaadin-board_update_size_or_breakpoints_test.html +++ /dev/null @@ -1,168 +0,0 @@ - - - - - - - vaadin-board test - - - - - - - - - - - - - - - - - - diff --git a/theme/lumo/vaadin-board-row.html b/theme/lumo/vaadin-board-row.html deleted file mode 100644 index 3c065a2..0000000 --- a/theme/lumo/vaadin-board-row.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/theme/lumo/vaadin-board-row.js b/theme/lumo/vaadin-board-row.js new file mode 100644 index 0000000..db1f56c --- /dev/null +++ b/theme/lumo/vaadin-board-row.js @@ -0,0 +1 @@ +import '../../src/vaadin-board-row.js'; diff --git a/theme/lumo/vaadin-board.html b/theme/lumo/vaadin-board.html deleted file mode 100644 index fd89ac3..0000000 --- a/theme/lumo/vaadin-board.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/theme/lumo/vaadin-board.js b/theme/lumo/vaadin-board.js new file mode 100644 index 0000000..0cfdbfa --- /dev/null +++ b/theme/lumo/vaadin-board.js @@ -0,0 +1,2 @@ +import './vaadin-board-row.js'; +import '../../src/vaadin-board.js'; diff --git a/theme/material/vaadin-board-row.html b/theme/material/vaadin-board-row.html deleted file mode 100644 index 3c065a2..0000000 --- a/theme/material/vaadin-board-row.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/theme/material/vaadin-board-row.js b/theme/material/vaadin-board-row.js new file mode 100644 index 0000000..db1f56c --- /dev/null +++ b/theme/material/vaadin-board-row.js @@ -0,0 +1 @@ +import '../../src/vaadin-board-row.js'; diff --git a/theme/material/vaadin-board.html b/theme/material/vaadin-board.html deleted file mode 100644 index fd89ac3..0000000 --- a/theme/material/vaadin-board.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/theme/material/vaadin-board.js b/theme/material/vaadin-board.js new file mode 100644 index 0000000..0cfdbfa --- /dev/null +++ b/theme/material/vaadin-board.js @@ -0,0 +1,2 @@ +import './vaadin-board-row.js'; +import '../../src/vaadin-board.js'; diff --git a/vaadin-board-row.d.ts b/vaadin-board-row.d.ts new file mode 100644 index 0000000..b71a6ca --- /dev/null +++ b/vaadin-board-row.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-board-row.js'; diff --git a/vaadin-board-row.html b/vaadin-board-row.html deleted file mode 100644 index 5172bdd..0000000 --- a/vaadin-board-row.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/vaadin-board-row.js b/vaadin-board-row.js new file mode 100644 index 0000000..5273690 --- /dev/null +++ b/vaadin-board-row.js @@ -0,0 +1,2 @@ +import './theme/lumo/vaadin-board-row.js'; +export * from './src/vaadin-board-row.js'; diff --git a/vaadin-board.d.ts b/vaadin-board.d.ts new file mode 100644 index 0000000..25beea5 --- /dev/null +++ b/vaadin-board.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-board.js'; diff --git a/vaadin-board.html b/vaadin-board.html deleted file mode 100644 index d3f1cbb..0000000 --- a/vaadin-board.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/vaadin-board.js b/vaadin-board.js new file mode 100644 index 0000000..298e9d7 --- /dev/null +++ b/vaadin-board.js @@ -0,0 +1,2 @@ +import './theme/lumo/vaadin-board.js'; +export * from './src/vaadin-board.js'; diff --git a/wct.conf.js b/wct.conf.js deleted file mode 100644 index 74702e7..0000000 --- a/wct.conf.js +++ /dev/null @@ -1,39 +0,0 @@ -var envIndex = process.argv.indexOf('--env') + 1; -var env = envIndex ? process.argv[envIndex] : undefined; - -module.exports = { - registerHooks: function(context) { - const saucelabsPlatformsMobile = [ - 'iOS Simulator/iphone@12.2', - 'iOS Simulator/iphone@10.3' - ]; - - const saucelabsPlatformsMicrosoft = [ - 'Windows 10/microsoftedge@18', - 'Windows 10/internet explorer@11' - ]; - - const saucelabsPlatformsDesktop = [ - 'macOS 10.13/safari@latest' - ]; - - const saucelabsPlatforms = [ - ...saucelabsPlatformsMobile, - ...saucelabsPlatformsMicrosoft, - ...saucelabsPlatformsDesktop - ]; - - const cronPlatforms = [ - 'iOS Simulator/ipad@12.2', - 'iOS Simulator/iphone@10.3', - 'Windows 10/chrome@latest', - 'Windows 10/firefox@latest' - ]; - - if (env === 'saucelabs') { - context.options.plugins.sauce.browsers = saucelabsPlatforms; - } else if (env === 'saucelabs-cron') { - context.options.plugins.sauce.browsers = cronPlatforms; - } - } -}; diff --git a/web-test-runner.config.js b/web-test-runner.config.js new file mode 100644 index 0000000..d374016 --- /dev/null +++ b/web-test-runner.config.js @@ -0,0 +1,80 @@ +/* eslint-env node */ +const { createSauceLabsLauncher } = require('@web/test-runner-saucelabs'); + +const config = { + nodeResolve: true, + browserStartTimeout: 120000, // default 30000 + testsStartTimeout: 60000, // default 10000 + testsFinishTimeout: 60000, // default 20000 + testFramework: { + config: { + timeout: '10000' // default 2000 + } + }, + coverageConfig: { + include: ['**/src/*'], + threshold: { + statements: 100, + branches: 71, + functions: 95, + lines: 100 + } + } +}; + +config.testRunnerHtml = (testFramework) => ` + + + + + + + +`; + +if (process.env.TEST_ENV === 'sauce') { + const sauceLabsLauncher = createSauceLabsLauncher( + { + user: process.env.SAUCE_USERNAME, + key: process.env.SAUCE_ACCESS_KEY + }, + { + name: 'vaadin-board unit tests', + build: `${process.env.GITHUB_REF || 'local'} build ${process.env.GITHUB_RUN_NUMBER || ''}`, + recordScreenshots: false, + recordVideo: false + } + ); + + config.concurrency = 1; + config.browsers = [ + sauceLabsLauncher({ + browserName: 'firefox', + platformName: 'Windows 10', + browserVersion: 'latest' + }), + sauceLabsLauncher({ + browserName: 'safari', + platformName: 'macOS 10.15', + browserVersion: '13.1' + }), + sauceLabsLauncher({ + browserName: 'iphone', + platform: 'iPhone X Simulator', + version: '14.0' + }) + ]; +} + +module.exports = config;