From 6adb0b5edbeb0b10bae01f619814a63f9129e383 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aykut=20Sara=C3=A7?= Date: Wed, 20 Sep 2023 13:12:29 +0300 Subject: [PATCH] feat(input): add showPicker to input --- package-lock.json | 202 ++++++++++++++++++++++++++ package.json | 2 + src/components/input/bl-input.test.ts | 13 ++ src/components/input/bl-input.ts | 6 + src/imports.d.ts | 4 + 5 files changed, 227 insertions(+) diff --git a/package-lock.json b/package-lock.json index 29cf4c9f..810b7b89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@storybook/web-components": "7.0.18", "@storybook/web-components-vite": "^7.0.18", "@trivago/prettier-plugin-sort-imports": "^4.1.1", + "@types/chai-spies": "^1.0.4", "@types/estree": "1.0.0", "@types/prettier": "^2.6.4", "@typescript-eslint/eslint-plugin": "^6.0.0", @@ -47,6 +48,7 @@ "@web/test-runner-playwright": "^0.9.0", "@web/test-runner-puppeteer": "^0.12.0", "@webcomponents/webcomponentsjs": "^2.7.0", + "chai-spies": "^1.0.0", "chromatic": "^6.17.1", "clean-css": "^5.3.2", "del": "^6.1.0", @@ -7091,6 +7093,15 @@ "@types/chai": "*" } }, + "node_modules/@types/chai-spies": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/chai-spies/-/chai-spies-1.0.4.tgz", + "integrity": "sha512-HCG1EUGpVYmmqIG9rnSIxkng/tOzARG1HmUIV5miCp55ykqxSnVj2vlXaf6nDwaMm7qzkvNe9SHW15ywPKDqTA==", + "dev": true, + "dependencies": { + "@types/chai": "*" + } + }, "node_modules/@types/co-body": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/co-body/-/co-body-6.1.0.tgz", @@ -9235,6 +9246,16 @@ "util": "^0.12.0" } }, + "node_modules/assertion-error": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", + "dev": true, + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", @@ -9988,6 +10009,25 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chai": { + "version": "4.3.8", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz", + "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==", + "dev": true, + "peer": true, + "dependencies": { + "assertion-error": "^1.1.0", + "check-error": "^1.0.2", + "deep-eql": "^4.1.2", + "get-func-name": "^2.0.0", + "loupe": "^2.3.1", + "pathval": "^1.1.1", + "type-detect": "^4.0.5" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/chai-a11y-axe": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz", @@ -9998,6 +10038,18 @@ "axe-core": "^4.3.3" } }, + "node_modules/chai-spies": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/chai-spies/-/chai-spies-1.0.0.tgz", + "integrity": "sha512-elF2ZUczBsFoP07qCfMO/zeggs8pqCf3fZGyK5+2X4AndS8jycZYID91ztD9oQ7d/0tnS963dPkd0frQEThDsg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + }, + "peerDependencies": { + "chai": "*" + } + }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -10020,6 +10072,16 @@ "dev": true, "license": "MIT" }, + "node_modules/check-error": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", + "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==", + "dev": true, + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -11139,6 +11201,19 @@ "node": ">=0.10" } }, + "node_modules/deep-eql": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz", + "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==", + "dev": true, + "peer": true, + "dependencies": { + "type-detect": "^4.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/deep-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", @@ -14049,6 +14124,16 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/get-func-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", + "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==", + "dev": true, + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/get-intrinsic": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", @@ -17741,6 +17826,16 @@ "loose-envify": "cli.js" } }, + "node_modules/loupe": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz", + "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==", + "dev": true, + "peer": true, + "dependencies": { + "get-func-name": "^2.0.0" + } + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -20020,6 +20115,16 @@ "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==", "dev": true }, + "node_modules/pathval": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", + "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==", + "dev": true, + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/peek-stream": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz", @@ -23886,6 +23991,16 @@ "node": ">= 0.8.0" } }, + "node_modules/type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, "node_modules/type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", @@ -30286,6 +30401,15 @@ "@types/chai": "*" } }, + "@types/chai-spies": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/chai-spies/-/chai-spies-1.0.4.tgz", + "integrity": "sha512-HCG1EUGpVYmmqIG9rnSIxkng/tOzARG1HmUIV5miCp55ykqxSnVj2vlXaf6nDwaMm7qzkvNe9SHW15ywPKDqTA==", + "dev": true, + "requires": { + "@types/chai": "*" + } + }, "@types/co-body": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/co-body/-/co-body-6.1.0.tgz", @@ -31972,6 +32096,13 @@ "util": "^0.12.0" } }, + "assertion-error": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", + "dev": true, + "peer": true + }, "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", @@ -32491,6 +32622,22 @@ "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", "dev": true }, + "chai": { + "version": "4.3.8", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz", + "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==", + "dev": true, + "peer": true, + "requires": { + "assertion-error": "^1.1.0", + "check-error": "^1.0.2", + "deep-eql": "^4.1.2", + "get-func-name": "^2.0.0", + "loupe": "^2.3.1", + "pathval": "^1.1.1", + "type-detect": "^4.0.5" + } + }, "chai-a11y-axe": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz", @@ -32500,6 +32647,13 @@ "axe-core": "^4.3.3" } }, + "chai-spies": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/chai-spies/-/chai-spies-1.0.0.tgz", + "integrity": "sha512-elF2ZUczBsFoP07qCfMO/zeggs8pqCf3fZGyK5+2X4AndS8jycZYID91ztD9oQ7d/0tnS963dPkd0frQEThDsg==", + "dev": true, + "requires": {} + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -32517,6 +32671,13 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "check-error": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", + "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==", + "dev": true, + "peer": true + }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -33351,6 +33512,16 @@ "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==", "dev": true }, + "deep-eql": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz", + "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==", + "dev": true, + "peer": true, + "requires": { + "type-detect": "^4.0.0" + } + }, "deep-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", @@ -35336,6 +35507,13 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true }, + "get-func-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", + "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==", + "dev": true, + "peer": true + }, "get-intrinsic": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", @@ -37997,6 +38175,16 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "loupe": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz", + "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==", + "dev": true, + "peer": true, + "requires": { + "get-func-name": "^2.0.0" + } + }, "lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -39566,6 +39754,13 @@ "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==", "dev": true }, + "pathval": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", + "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==", + "dev": true, + "peer": true + }, "peek-stream": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz", @@ -42409,6 +42604,13 @@ "prelude-ls": "^1.2.1" } }, + "type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "dev": true, + "peer": true + }, "type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", diff --git a/package.json b/package.json index c8cdc664..178b184d 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "@storybook/web-components": "7.0.18", "@storybook/web-components-vite": "^7.0.18", "@trivago/prettier-plugin-sort-imports": "^4.1.1", + "@types/chai-spies": "^1.0.4", "@types/estree": "1.0.0", "@types/prettier": "^2.6.4", "@typescript-eslint/eslint-plugin": "^6.0.0", @@ -103,6 +104,7 @@ "@web/test-runner-playwright": "^0.9.0", "@web/test-runner-puppeteer": "^0.12.0", "@webcomponents/webcomponentsjs": "^2.7.0", + "chai-spies": "^1.0.0", "chromatic": "^6.17.1", "clean-css": "^5.3.2", "del": "^6.1.0", diff --git a/src/components/input/bl-input.test.ts b/src/components/input/bl-input.test.ts index c44ef097..c14a79ad 100644 --- a/src/components/input/bl-input.test.ts +++ b/src/components/input/bl-input.test.ts @@ -1,6 +1,9 @@ import { assert, expect, fixture, oneEvent, html, elementUpdated } from "@open-wc/testing"; +import spies from "chai-spies"; import BlInput from "./bl-input"; +chai.use(spies); + describe("bl-input", () => { it("is defined", () => { const el = document.createElement("bl-input"); @@ -44,6 +47,16 @@ describe("bl-input", () => { expect(el.shadowRoot?.querySelector("input")?.getAttribute("type")).to.equal("number"); }); + it('should call showPicker if "showPicker" is in HTMLInputElement.prototype', async () => { + const el = await fixture(html``); + const spy = chai.spy.on(el.validationTarget, "showPicker"); + + el.showPicker(); + + expect(HTMLInputElement.prototype).to.have.property("showPicker"); + expect(spy).to.have.been.called.once; + }); + it("should set type password", async () => { const el = await fixture(html``); diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts index 6b92ff74..e77a0e9b 100644 --- a/src/components/input/bl-input.ts +++ b/src/components/input/bl-input.ts @@ -230,6 +230,12 @@ export default class BlInput extends FormControlMixin(LitElement) { this.passwordVisible = !this.passwordVisible; } + showPicker() { + if ("showPicker" in HTMLInputElement.prototype) { + this.validationTarget.showPicker(); + } + } + validityCallback(): string | void { this.onInvalid(this.internals.validity); return this.customInvalidText || this.validationTarget?.validationMessage; diff --git a/src/imports.d.ts b/src/imports.d.ts index 88c7f969..62e60a02 100644 --- a/src/imports.d.ts +++ b/src/imports.d.ts @@ -11,3 +11,7 @@ declare module "*.svg" { export default content; } declare module "*.css"; + +interface HTMLInputElement { + showPicker: () => void; +}