Skip to content

Commit

Permalink
feat: Setup unit tests for completions FUI-1189 (#1)
Browse files Browse the repository at this point in the history 
* Set up jest with typescript for unit tests
* Set up some utils that we need for running unit tests
* Add one basic unit tests for completions
* Refactor out the completions code so it can be unit tested
  • Loading branch information
@matteematt
matteematt authored May 10, 2023
1 parent 3879d0b commit 0b24169
Show file tree
Hide file tree
Showing 12 changed files with 10,051 additions and 1,772 deletions.
11,105 changes: 9,451 additions & 1,654 deletions example/package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
testMatch: ["**/?(*.)+(spec|test).[t]s?(x)"],
};
1 change: 0 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,25 @@
"bin": {
"customelements-analyse": "./src/parser/analyse.js"
},
"scripts": {
"test:unit": "jest",
"test:unit:watch": "jest --watchAll",
"test:unit:verbose": "cross-env TEST_LOG=1 jest",
"copy-manifest": "cp ./example/ce.json ./src/jest/ce-test.json"
},
"dependencies": {
"@custom-elements-manifest/analyzer": "^0.8.0",
"cross-env": "^7.0.3",
"custom-elements-manifest": "^2.0.0",
"globby": "^13.1.4",
"minimist-lite": "^2.2.1",
"node-html-parser": "^6.1.5",
"typescript": "^4.4.3",
"typescript-template-language-service-decorator": "^2.3.2"
},
"devDependencies": {
"@types/jest": "^29.5.1",
"jest": "^29.5.0",
"ts-jest": "^29.1.0"
}
}
331 changes: 331 additions & 0 deletions src/jest/ce-test.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,331 @@
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/components.ts",
"declarations": [
{
"kind": "function",
"name": "registerComponents"
}
],
"exports": [
{
"kind": "js",
"name": "registerComponents",
"declaration": {
"name": "registerComponents",
"module": "src/components.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/index.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/root.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RootComponent",
"superclass": {
"name": "FASTElement",
"package": "@microsoft/fast-element"
},
"tagName": "root-component",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RootComponent",
"declaration": {
"name": "RootComponent",
"module": "src/root.ts"
}
},
{
"kind": "custom-element-definition",
"name": "root-component",
"declaration": {
"name": "RootComponent",
"module": "src/root.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/avatar/avatar.styles.ts",
"declarations": [
{
"kind": "variable",
"name": "avatarStyles",
"default": "css`\n :host {\n margin: 10px;\n }\n\n div.container {\n background-color: var(--accent-color);\n }\n\n div.top {\n width: 80%;\n flex: auo;\n display: grid;\n grid-auto-columns: 1fr 1fr;\n grid-template-columns: 1fr 1fr;\n }\n`"
}
],
"exports": [
{
"kind": "js",
"name": "avatarStyles",
"declaration": {
"name": "avatarStyles",
"module": "src/components/avatar/avatar.styles.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/avatar/avatar.template.ts",
"declarations": [
{
"kind": "variable",
"name": "avatarTemplate",
"default": "html<Avatar>`\n <template>\n <div class=\"container\">\n <div class=\"top\">\n <img\n src=\"${(x) => x.avatarSrc}\"\n @click=\"${(x, c) => (x.showFullInfo = !x.showFullInfo)})}\"\n />\n <div>\n <slot name=\"title\">\n <h1>Placeholder</h1>\n </slot>\n <slot name=\"address\">\n <p>123 London Road</p>\n <p>PA 112</p>\n </slot>\n </div>\n </div>\n\n ${when(\n (x) => x.showFullInfo && !x.fullInfoDisabled,\n html`\n <div class=\"bottom\">\n <slot name=\"info\">\n <p>${(_) => placeholder}</p>\n </slot>\n </div>\n `\n )}\n </div>\n </template>\n`"
}
],
"exports": [
{
"kind": "js",
"name": "avatarTemplate",
"declaration": {
"name": "avatarTemplate",
"module": "src/components/avatar/avatar.template.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/avatar/avatar.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "Avatar",
"members": [
{
"kind": "field",
"name": "showFullInfo",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "avatarSrc",
"type": {
"text": "string"
},
"default": "\"https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light\""
},
{
"kind": "field",
"name": "fullInfoDisabled",
"type": {
"text": "boolean"
},
"default": "false"
}
],
"attributes": [
{
"name": "avatar-src",
"type": {
"text": "string"
},
"default": "defaultAvatarSrc",
"resolveInitializer": {
"module": "src/components/avatar/avatar.ts"
},
"fieldName": "avatarSrc"
},
{
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "fullInfoDisabled"
}
],
"superclass": {
"name": "FASTElement",
"package": "@microsoft/fast-element"
},
"tagName": "person-avatar",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "Avatar",
"declaration": {
"name": "Avatar",
"module": "src/components/avatar/avatar.ts"
}
},
{
"kind": "custom-element-definition",
"name": "person-avatar",
"declaration": {
"name": "Avatar",
"module": "src/components/avatar/avatar.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/theme/theme.style.ts",
"declarations": [
{
"kind": "variable",
"name": "themeStyles",
"default": "css``"
}
],
"exports": [
{
"kind": "js",
"name": "themeStyles",
"declaration": {
"name": "themeStyles",
"module": "src/components/theme/theme.style.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/theme/theme.template.ts",
"declarations": [
{
"kind": "variable",
"name": "themeTemplate",
"default": "html<ThemePicker>`\n <template>\n <div class=\"fg\">\n <input\n type=\"text\"\n value=\"${(x) => `#${x.foreground}`}\"\n ${ref(\"fgInput\")}\n />\n <button @click=\"${(x) => x.updateTheme(\"foreground\")}\">Foreground</button>\n </div>\n\n <div class=\"bg\">\n <input\n type=\"text\"\n value=\"${(x) => `#${x.background}`}\"\n ${ref(\"bgInput\")}\n />\n <button @click=\"${(x) => x.updateTheme(\"background\")}\">Background</button>\n </div>\n </template>\n`"
}
],
"exports": [
{
"kind": "js",
"name": "themeTemplate",
"declaration": {
"name": "themeTemplate",
"module": "src/components/theme/theme.template.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/theme/theme.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "ThemePicker",
"members": [
{
"kind": "field",
"name": "foreground",
"type": {
"text": "string"
},
"default": "\"0078D4\""
},
{
"kind": "field",
"name": "background",
"type": {
"text": "string"
},
"default": "\"808080\""
},
{
"kind": "field",
"name": "fgInput",
"type": {
"text": "HTMLInputElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "bgInput",
"type": {
"text": "HTMLInputElement | null"
},
"default": "null"
},
{
"kind": "method",
"name": "updateTheme",
"parameters": [
{
"name": "type",
"type": {
"text": "'foreground' | 'background'"
}
}
]
}
],
"attributes": [
{
"name": "foreground",
"type": {
"text": "string"
},
"default": "\"0078D4\"",
"fieldName": "foreground"
},
{
"name": "background",
"type": {
"text": "string"
},
"default": "\"808080\"",
"fieldName": "background"
}
],
"superclass": {
"name": "FASTElement",
"package": "@microsoft/fast-element"
},
"tagName": "theme-picker",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "ThemePicker",
"declaration": {
"name": "ThemePicker",
"module": "src/components/theme/theme.ts"
}
},
{
"kind": "custom-element-definition",
"name": "theme-picker",
"declaration": {
"name": "ThemePicker",
"module": "src/components/theme/theme.ts"
}
}
]
}
]
}
Loading

0 comments on commit 0b24169

Please sign in to comment.