mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Extract React Application as a Feature (#7441)
* Fix webpack config for react Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce package for discovering html elements in unit tests Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using discovery of html elements from package Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce competition for starting react application inside the Feature Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Move stuff in application start to earlier timeslot having no real need to be done so late Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using react application root feature being more friendly to extending Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using more familiar pattern of higher order components for wrapping react application Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Adapt to more familiar pattern for higher order components Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Rename feature for clarity Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> --------- Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen
GitHub
parent
5827fc9d9a
commit
b5e564271e
235
package-lock.json
generated
235
package-lock.json
generated
@ -4634,6 +4634,14 @@
|
||||
"resolved": "packages/node-fetch",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@k8slens/react-application": {
|
||||
"resolved": "packages/technical-features/react-application",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@k8slens/react-testing-library-discovery": {
|
||||
"resolved": "packages/utility-features/react-testing-library-discovery",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@k8slens/release-tool": {
|
||||
"resolved": "packages/release-tool",
|
||||
"link": true
|
||||
@ -34325,6 +34333,57 @@
|
||||
"integrity": "sha512-ZOzvDRWp8dCVBmgnkIqYCArgdFOO9YzocZp8Ra25N/RStKiWvMOXHMz+GjSeVNe5TstaTmTWPucGJkDw0XXJWA==",
|
||||
"dev": true
|
||||
},
|
||||
"packages/business-features/dock": {
|
||||
"name": "@k8slens/dock",
|
||||
"version": "1.0.0-alpha.0",
|
||||
"extraneous": true,
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "^1.6.4",
|
||||
"@k8slens/eslint-config": "6.5.0-alpha.1",
|
||||
"@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
"@ogre-tools/injectable": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
|
||||
"lodash": "^4.17.21"
|
||||
}
|
||||
},
|
||||
"packages/business-features/dock/agnostic": {
|
||||
"version": "1.0.0-alpha.0",
|
||||
"extraneous": true,
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "^1.6.4",
|
||||
"@k8slens/eslint-config": "6.5.0-alpha.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@ogre-tools/injectable": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2"
|
||||
}
|
||||
},
|
||||
"packages/business-features/keyboard-shortcuts": {
|
||||
"name": "@k8slens/keyboard-shortcuts",
|
||||
"version": "1.0.0-alpha.0",
|
||||
"extraneous": true,
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "^1.6.4",
|
||||
"@k8slens/eslint-config": "6.5.0-alpha.1",
|
||||
"@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@k8slens/react-application": "^1.0.0-alpha.0",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
"@ogre-tools/injectable": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
|
||||
"lodash": "^4.17.21"
|
||||
}
|
||||
},
|
||||
"packages/cluster-settings": {
|
||||
"name": "@k8slens/cluster-settings",
|
||||
"version": "6.5.0-alpha.1",
|
||||
@ -34354,6 +34413,7 @@
|
||||
"@hapi/subtext": "^7.1.0",
|
||||
"@k8slens/cluster-settings": "^6.5.0-alpha.1",
|
||||
"@k8slens/node-fetch": "^6.5.0-alpha.1",
|
||||
"@k8slens/react-application": "^1.0.0-alpha.0",
|
||||
"@kubernetes/client-node": "^0.18.1",
|
||||
"@material-ui/styles": "^4.11.5",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
@ -34422,6 +34482,7 @@
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "1.6.4",
|
||||
"@k8slens/messaging-fake-bridge": "^1.0.0-alpha.1",
|
||||
"@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||
@ -37892,6 +37953,7 @@
|
||||
"@k8slens/messaging": "^1.0.0-alpha.1",
|
||||
"@k8slens/messaging-for-main": "^1.0.0-alpha.1",
|
||||
"@k8slens/messaging-for-renderer": "^1.0.0-alpha.1",
|
||||
"@k8slens/react-application": "^1.0.0-alpha.0",
|
||||
"@k8slens/run-many": "^1.0.0-alpha.1",
|
||||
"@k8slens/startable-stoppable": "^1.0.0-alpha.1",
|
||||
"@k8slens/test-utils": "^1.0.0-alpha.1",
|
||||
@ -39543,6 +39605,179 @@
|
||||
"lodash": "^4.17.21"
|
||||
}
|
||||
},
|
||||
"packages/technical-features/react-application": {
|
||||
"name": "@k8slens/react-application",
|
||||
"version": "1.0.0-alpha.0",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "^1.6.4",
|
||||
"@k8slens/eslint-config": "6.5.0-alpha.1",
|
||||
"@k8slens/react-testing-library-discovery": "*",
|
||||
"@testing-library/react": "^12.1.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@k8slens/application": "^6.5.0-alpha.2",
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
"@ogre-tools/injectable": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-mobx": "^15.1.2",
|
||||
"@ogre-tools/injectable-react": "^15.1.2",
|
||||
"lodash": "^4.17.15",
|
||||
"mobx": "^6.8.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
}
|
||||
},
|
||||
"packages/technical-features/react-application-root": {
|
||||
"name": "@k8slens/react-application-root",
|
||||
"version": "1.0.0-alpha.0",
|
||||
"extraneous": true,
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "^1.6.4",
|
||||
"@k8slens/eslint-config": "6.5.0-alpha.1",
|
||||
"@k8slens/react-testing-library-discovery": "*",
|
||||
"@testing-library/react": "^12.1.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@k8slens/application": "^6.5.0-alpha.2",
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
"@ogre-tools/injectable": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-mobx": "^15.1.2",
|
||||
"@ogre-tools/injectable-react": "^15.1.2",
|
||||
"lodash": "^4.17.15",
|
||||
"mobx": "^6.8.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery": {
|
||||
"name": "@k8slens/react-testing-library-discovery",
|
||||
"version": "1.0.0-alpha.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@testing-library/dom": "^8.19.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/@testing-library/dom": {
|
||||
"version": "8.20.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
|
||||
"integrity": "sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^5.0.1",
|
||||
"aria-query": "^5.0.0",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.9",
|
||||
"lz-string": "^1.4.4",
|
||||
"pretty-format": "^27.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/@testing-library/react": {
|
||||
"version": "13.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
|
||||
"integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@testing-library/dom": "^8.5.0",
|
||||
"@types/react-dom": "^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/@types/aria-query": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
|
||||
"integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q=="
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/@types/react-dom": {
|
||||
"version": "18.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
|
||||
"integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/ansi-styles": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
|
||||
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/aria-query": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
|
||||
"integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
|
||||
"dependencies": {
|
||||
"deep-equal": "^2.0.5"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/pretty-format": {
|
||||
"version": "27.5.1",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
|
||||
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1",
|
||||
"ansi-styles": "^5.0.0",
|
||||
"react-is": "^17.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/react-testing-library-discovery/node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"packages/utility-features/run-many": {
|
||||
"name": "@k8slens/run-many",
|
||||
"version": "1.0.0-alpha.1",
|
||||
|
||||
@ -122,6 +122,7 @@
|
||||
"@hapi/subtext": "^7.1.0",
|
||||
"@k8slens/cluster-settings": "^6.5.0-alpha.1",
|
||||
"@k8slens/node-fetch": "^6.5.0-alpha.1",
|
||||
"@k8slens/react-application": "^1.0.0-alpha.0",
|
||||
"@kubernetes/client-node": "^0.18.1",
|
||||
"@material-ui/styles": "^4.11.5",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
@ -190,6 +191,7 @@
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "1.6.4",
|
||||
"@k8slens/messaging-fake-bridge": "^1.0.0-alpha.1",
|
||||
"@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||
|
||||
@ -7,8 +7,8 @@ import type { IObservableValue } from "mobx";
|
||||
import { runInAction, computed, observable } from "mobx";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
import React from "react";
|
||||
|
||||
describe("preferences: extension adding preference tabs", () => {
|
||||
|
||||
@ -10,8 +10,8 @@ import { runInAction } from "mobx";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { preferenceItemInjectionToken } from "./renderer/preference-items/preference-item-injection-token";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - hiding-of-empty-branches, given in preferences page", () => {
|
||||
let builder: ApplicationBuilder;
|
||||
|
||||
@ -7,8 +7,8 @@ import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import navigateToProxyPreferencesInjectable from "./common/navigate-to-proxy-preferences.injectable";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
import type { FakeExtensionOptions } from "../../renderer/components/test-utils/get-extension-fake";
|
||||
|
||||
describe("preferences - navigation to application preferences", () => {
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - navigation to editor preferences", () => {
|
||||
let applicationBuilder: ApplicationBuilder;
|
||||
|
||||
@ -8,8 +8,8 @@ import { getApplicationBuilder } from "../../renderer/components/test-utils/get-
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom/extend-expect";
|
||||
import type { FakeExtensionOptions } from "../../renderer/components/test-utils/get-extension-fake";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
import logErrorInjectable from "../../common/log-error.injectable";
|
||||
|
||||
describe("preferences - navigation to extension specific preferences", () => {
|
||||
|
||||
@ -7,8 +7,8 @@ import type { ApplicationBuilder } from "../../renderer/components/test-utils/ge
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import requestPublicHelmRepositoriesInjectable from "../helm-charts/child-features/preferences/renderer/adding-of-public-helm-repository/public-helm-repositories/request-public-helm-repositories.injectable";
|
||||
import getActiveHelmRepositoriesInjectable from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - navigation to kubernetes preferences", () => {
|
||||
let builder: ApplicationBuilder;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - navigation to proxy preferences", () => {
|
||||
let applicationBuilder: ApplicationBuilder;
|
||||
|
||||
@ -9,8 +9,8 @@ import { getApplicationBuilder } from "../../renderer/components/test-utils/get-
|
||||
import navigateToTelemetryPreferencesInjectable from "./common/navigate-to-telemetry-preferences.injectable";
|
||||
import sentryDataSourceNameInjectable from "../../common/vars/sentry-dsn-url.injectable";
|
||||
import type { FakeExtensionOptions } from "../../renderer/components/test-utils/get-extension-fake";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - navigation to telemetry preferences", () => {
|
||||
let builder: ApplicationBuilder;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - navigation to terminal preferences", () => {
|
||||
let applicationBuilder: ApplicationBuilder;
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("preferences - navigation using application menu", () => {
|
||||
let applicationBuilder: ApplicationBuilder;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
|
||||
describe("show-about-using-tray", () => {
|
||||
let applicationBuilder: ApplicationBuilder;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import type { Discover } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import { discoverFor } from "../../renderer/components/test-utils/discovery-of-html-elements";
|
||||
import type { Discover } from "@k8slens/react-testing-library-discovery";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
import React from "react";
|
||||
import type { Navigate } from "../../renderer/navigation/navigate.injectable";
|
||||
import navigateInjectable from "../../renderer/navigation/navigate.injectable";
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import {
|
||||
afterApplicationIsLoadedInjectionToken,
|
||||
} from "@k8slens/application";
|
||||
import { onLoadOfApplicationInjectionToken } from "@k8slens/application";
|
||||
import { bootstrap } from "./bootstrap";
|
||||
import startFrameInjectable from "./start-frame/start-frame.injectable";
|
||||
|
||||
@ -22,7 +20,7 @@ const bootstrapInjectable = getInjectable({
|
||||
|
||||
causesSideEffects: true,
|
||||
|
||||
injectionToken: afterApplicationIsLoadedInjectionToken,
|
||||
injectionToken: onLoadOfApplicationInjectionToken,
|
||||
});
|
||||
|
||||
export default bootstrapInjectable;
|
||||
|
||||
@ -5,10 +5,7 @@
|
||||
|
||||
import "./components/app.scss";
|
||||
|
||||
import React from "react";
|
||||
import { render, unmountComponentAtNode } from "react-dom";
|
||||
import { DefaultProps } from "./mui-base-theme";
|
||||
import { DiContextProvider } from "@ogre-tools/injectable-react";
|
||||
import { unmountComponentAtNode } from "react-dom";
|
||||
import type {
|
||||
DiContainerForInjection,
|
||||
} from "@ogre-tools/injectable";
|
||||
@ -17,8 +14,6 @@ import extensionDiscoveryInjectable from "../extensions/extension-discovery/exte
|
||||
import extensionInstallationStateStoreInjectable from "../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
|
||||
import initRootFrameInjectable from "./frames/root-frame/init-root-frame.injectable";
|
||||
import initClusterFrameInjectable from "./frames/cluster-frame/init-cluster-frame/init-cluster-frame.injectable";
|
||||
import { Router } from "react-router";
|
||||
import historyInjectable from "./navigation/history.injectable";
|
||||
import assert from "assert";
|
||||
|
||||
export async function bootstrap(di: DiContainerForInjection) {
|
||||
@ -30,16 +25,13 @@ export async function bootstrap(di: DiContainerForInjection) {
|
||||
await di.inject(extensionDiscoveryInjectable).init();
|
||||
di.inject(extensionInstallationStateStoreInjectable).bindIpcListeners();
|
||||
|
||||
let App;
|
||||
let initializeApp;
|
||||
|
||||
// TODO: Introduce proper architectural boundaries between root and cluster iframes
|
||||
if (process.isMainFrame) {
|
||||
initializeApp = di.inject(initRootFrameInjectable);
|
||||
App = (await import("./frames/root-frame/root-frame")).RootFrame;
|
||||
} else {
|
||||
initializeApp = di.inject(initClusterFrameInjectable);
|
||||
App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
|
||||
}
|
||||
|
||||
try {
|
||||
@ -50,15 +42,4 @@ export async function bootstrap(di: DiContainerForInjection) {
|
||||
isTopFrameView: process.isMainFrame,
|
||||
});
|
||||
}
|
||||
|
||||
const history = di.inject(historyInjectable);
|
||||
|
||||
render(
|
||||
<DiContextProvider value={{ di }}>
|
||||
<Router history={history}>
|
||||
{DefaultProps(App)}
|
||||
</Router>
|
||||
</DiContextProvider>,
|
||||
rootElem,
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,115 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
|
||||
type DiscoverySourceTypes = RenderResult | Element;
|
||||
|
||||
export type QuerySingleElement = (
|
||||
attributeName: string,
|
||||
attributeValue?: string
|
||||
) => { discovered: Element | null } & Discover;
|
||||
|
||||
export type GetSingleElement = (
|
||||
attributeName: string,
|
||||
attributeValue?: string
|
||||
) => { discovered: Element } & Discover;
|
||||
|
||||
export type QueryAllElements = (attributeName: string) => {
|
||||
discovered: Element[];
|
||||
attributeValues: (string | null)[];
|
||||
};
|
||||
|
||||
export interface Discover {
|
||||
querySingleElement: QuerySingleElement;
|
||||
queryAllElements: QueryAllElements;
|
||||
getSingleElement: GetSingleElement;
|
||||
}
|
||||
|
||||
export const discoverFor = (getSource: () => DiscoverySourceTypes): Discover => ({
|
||||
querySingleElement: querySingleElement(getSource),
|
||||
queryAllElements: queryAllElements(getSource),
|
||||
getSingleElement: getSingleElement(getSource),
|
||||
});
|
||||
|
||||
export const querySingleElement =
|
||||
(getSource: () => DiscoverySourceTypes): QuerySingleElement =>
|
||||
(attributeName, attributeValue) => {
|
||||
const source = getSource();
|
||||
|
||||
const dataAttribute = `data-${attributeName}-test`;
|
||||
|
||||
const selector = attributeValue
|
||||
? `[${dataAttribute}="${attributeValue}"]`
|
||||
: `[${dataAttribute}]`;
|
||||
|
||||
const discovered = getBaseElement(source).querySelector(selector);
|
||||
|
||||
const nestedDiscover = discoverFor(() => {
|
||||
if (!discovered) {
|
||||
throw new Error("Tried to do nested discover using source that does not exist");
|
||||
}
|
||||
|
||||
return discovered;
|
||||
});
|
||||
|
||||
return {
|
||||
discovered,
|
||||
|
||||
...nestedDiscover,
|
||||
};
|
||||
};
|
||||
|
||||
export const queryAllElements =
|
||||
(getSource: () => DiscoverySourceTypes): QueryAllElements =>
|
||||
(attributeName) => {
|
||||
const source = getSource();
|
||||
|
||||
const dataAttribute = `data-${attributeName}-test`;
|
||||
|
||||
const results = [
|
||||
...getBaseElement(source).querySelectorAll(`[${dataAttribute}]`),
|
||||
];
|
||||
|
||||
return {
|
||||
discovered: results,
|
||||
|
||||
attributeValues: results.map((result) =>
|
||||
result.getAttribute(dataAttribute),
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
export const getSingleElement =
|
||||
(getSource: () => DiscoverySourceTypes): GetSingleElement =>
|
||||
(attributeName, attributeValue) => {
|
||||
const dataAttribute = `data-${attributeName}-test`;
|
||||
|
||||
const { discovered, ...nestedDiscover } = querySingleElement(getSource)(
|
||||
attributeName,
|
||||
attributeValue,
|
||||
);
|
||||
|
||||
if (!discovered) {
|
||||
const validValues =
|
||||
queryAllElements(getSource)(attributeName).attributeValues;
|
||||
|
||||
if (attributeValue) {
|
||||
throw new Error(
|
||||
`Couldn't find HTML-element with attribute "${dataAttribute}" with value "${attributeValue}". Present values are:\n\n"${validValues.join(
|
||||
'",\n"',
|
||||
)}"`,
|
||||
);
|
||||
}
|
||||
|
||||
throw new Error(
|
||||
`Couldn't find HTML-element with attribute "${dataAttribute}"`,
|
||||
);
|
||||
}
|
||||
|
||||
return { discovered, ...nestedDiscover };
|
||||
};
|
||||
|
||||
const getBaseElement = (source: DiscoverySourceTypes) =>
|
||||
"baseElement" in source ? source.baseElement : source;
|
||||
@ -59,7 +59,7 @@ import { Namespace } from "../../../common/k8s-api/endpoints";
|
||||
import { getOverrideFsWithFakes } from "../../../test-utils/override-fs-with-fakes";
|
||||
import applicationMenuItemCompositeInjectable from "../../../features/application-menu/main/application-menu-item-composite.injectable";
|
||||
import { getCompositePaths } from "../../../common/utils/composite/get-composite-paths/get-composite-paths";
|
||||
import { discoverFor } from "./discovery-of-html-elements";
|
||||
import { discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
import { findComposite } from "../../../common/utils/composite/find-composite/find-composite";
|
||||
import shouldStartHiddenInjectable from "../../../main/electron-app/features/should-start-hidden.injectable";
|
||||
import fsInjectable from "../../../common/fs/fs.injectable";
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import {
|
||||
reactApplicationChildrenInjectionToken,
|
||||
} from "@k8slens/react-application";
|
||||
import { computed } from "mobx";
|
||||
|
||||
const frameApplicationRootInjectable = getInjectable({
|
||||
id: "frame-application-root",
|
||||
|
||||
instantiate: () => {
|
||||
const Frame = process.isMainFrame
|
||||
? require("./root-frame/root-frame").RootFrame
|
||||
: require("./cluster-frame/cluster-frame").ClusterFrame;
|
||||
|
||||
return {
|
||||
id: "frame-application-root",
|
||||
Component: Frame,
|
||||
enabled: computed(() => true),
|
||||
};
|
||||
},
|
||||
|
||||
causesSideEffects: true,
|
||||
|
||||
injectionToken: reactApplicationChildrenInjectionToken,
|
||||
});
|
||||
|
||||
export default frameApplicationRootInjectable;
|
||||
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { Router } from "react-router";
|
||||
import historyInjectable from "../navigation/history.injectable";
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
reactApplicationHigherOrderComponentInjectionToken,
|
||||
} from "@k8slens/react-application";
|
||||
|
||||
const routingReactApplicationHocInjectable = getInjectable({
|
||||
id: "routing-react-application-hoc",
|
||||
|
||||
instantiate: (di) => {
|
||||
const history = di.inject(historyInjectable);
|
||||
|
||||
return ({ children }) =>
|
||||
(
|
||||
<Router history={history}>
|
||||
{children}
|
||||
</Router>
|
||||
);
|
||||
},
|
||||
|
||||
injectionToken: reactApplicationHigherOrderComponentInjectionToken,
|
||||
});
|
||||
|
||||
export default routingReactApplicationHocInjectable;
|
||||
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import React from "react";
|
||||
import { reactApplicationHigherOrderComponentInjectionToken } from "@k8slens/react-application";
|
||||
import { ThemeProvider } from "@material-ui/core";
|
||||
import { defaultMuiBaseTheme } from "../mui-base-theme";
|
||||
|
||||
const themeProviderReactApplicationHocInjectable = getInjectable({
|
||||
id: "theme-provider-react-application-hoc",
|
||||
|
||||
instantiate:
|
||||
() =>
|
||||
({ children }) =>
|
||||
<ThemeProvider theme={defaultMuiBaseTheme}>{children}</ThemeProvider>,
|
||||
|
||||
injectionToken: reactApplicationHigherOrderComponentInjectionToken,
|
||||
});
|
||||
|
||||
export default themeProviderReactApplicationHocInjectable;
|
||||
@ -6,7 +6,7 @@
|
||||
import React from "react";
|
||||
import { createTheme, ThemeProvider } from "@material-ui/core";
|
||||
|
||||
const defaultTheme = createTheme({
|
||||
export const defaultMuiBaseTheme = createTheme({
|
||||
props: {
|
||||
MuiIconButton: {
|
||||
color: "inherit",
|
||||
@ -32,7 +32,7 @@ const defaultTheme = createTheme({
|
||||
|
||||
export function DefaultProps(App: React.ComponentType | React.FunctionComponent) {
|
||||
return (
|
||||
<ThemeProvider theme= { defaultTheme } >
|
||||
<ThemeProvider theme= { defaultMuiBaseTheme } >
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@ -6,9 +6,7 @@ import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { runManyFor } from "@k8slens/run-many";
|
||||
import * as tokens from "../before-frame-starts/tokens";
|
||||
import currentlyInClusterFrameInjectable from "../routes/currently-in-cluster-frame.injectable";
|
||||
import {
|
||||
afterApplicationIsLoadedInjectionToken,
|
||||
} from "@k8slens/application";
|
||||
import { onLoadOfApplicationInjectionToken } from "@k8slens/application";
|
||||
|
||||
const startFrameInjectable = getInjectable({
|
||||
id: "start-frame",
|
||||
@ -44,7 +42,7 @@ const startFrameInjectable = getInjectable({
|
||||
};
|
||||
},
|
||||
|
||||
injectionToken: afterApplicationIsLoadedInjectionToken,
|
||||
injectionToken: onLoadOfApplicationInjectionToken,
|
||||
});
|
||||
|
||||
export default startFrameInjectable;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const path = require("path");
|
||||
const getReactConfig = require("./get-react-config");
|
||||
|
||||
module.exports = getReactConfig({
|
||||
module.exports = getReactConfig()({
|
||||
entrypointFilePath: "./index.ts",
|
||||
outputDirectory: path.resolve(process.cwd(), "dist"),
|
||||
});
|
||||
|
||||
@ -206,6 +206,7 @@
|
||||
"@k8slens/messaging": "^1.0.0-alpha.1",
|
||||
"@k8slens/messaging-for-main": "^1.0.0-alpha.1",
|
||||
"@k8slens/messaging-for-renderer": "^1.0.0-alpha.1",
|
||||
"@k8slens/react-application": "^1.0.0-alpha.0",
|
||||
"@k8slens/run-many": "^1.0.0-alpha.1",
|
||||
"@k8slens/startable-stoppable": "^1.0.0-alpha.1",
|
||||
"@k8slens/test-utils": "^1.0.0-alpha.1",
|
||||
|
||||
@ -15,6 +15,7 @@ import { createContainer } from "@ogre-tools/injectable";
|
||||
import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
|
||||
import { registerInjectableReact } from "@ogre-tools/injectable-react";
|
||||
import { messagingFeatureForRenderer } from "@k8slens/messaging-for-renderer";
|
||||
import { reactApplicationFeature } from "@k8slens/react-application";
|
||||
|
||||
const environment = "renderer";
|
||||
|
||||
@ -24,7 +25,13 @@ runInAction(() => {
|
||||
registerMobX(di);
|
||||
registerInjectableReact(di);
|
||||
registerLensCore(di, environment);
|
||||
registerFeature(di, applicationFeature, messagingFeatureForRenderer);
|
||||
|
||||
registerFeature(
|
||||
di,
|
||||
applicationFeature,
|
||||
messagingFeatureForRenderer,
|
||||
reactApplicationFeature
|
||||
);
|
||||
|
||||
autoRegister({
|
||||
di,
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@k8slens/eslint-config/eslint",
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
"@k8slens/eslint-config/prettier"
|
||||
19
packages/technical-features/react-application/README.md
Normal file
19
packages/technical-features/react-application/README.md
Normal file
@ -0,0 +1,19 @@
|
||||
# @k8slens/react-application
|
||||
|
||||
# Usage
|
||||
|
||||
```bash
|
||||
$ npm install @k8slens/react-application
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { reactApplicationFeature } from "@k8slens/react-application";
|
||||
import { registerFeature } from "@k8slens/feature-core";
|
||||
import { createContainer } from "@ogre-tools/injectable";
|
||||
|
||||
const di = createContainer("some-container");
|
||||
|
||||
registerFeature(di, reactApplicationRootFeature);
|
||||
```
|
||||
|
||||
## Extendability
|
||||
10
packages/technical-features/react-application/index.ts
Normal file
10
packages/technical-features/react-application/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export { renderInjectionToken } from "./src/render-application/render.injectable";
|
||||
export type { Render } from "./src/render-application/render.injectable";
|
||||
|
||||
export { reactApplicationChildrenInjectionToken } from "./src/react-application/react-application-children-injection-token";
|
||||
export type { ReactApplicationChildren } from "./src/react-application/react-application-children-injection-token";
|
||||
|
||||
export { reactApplicationHigherOrderComponentInjectionToken } from "./src/react-application/react-application-higher-order-component-injection-token";
|
||||
export type { ReactApplicationHigherOrderComponent } from "./src/react-application/react-application-higher-order-component-injection-token";
|
||||
|
||||
export { reactApplicationFeature } from "./src/feature";
|
||||
@ -0,0 +1 @@
|
||||
module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;
|
||||
52
packages/technical-features/react-application/package.json
Normal file
52
packages/technical-features/react-application/package.json
Normal file
@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "@k8slens/react-application",
|
||||
"private": false,
|
||||
"version": "1.0.0-alpha.0",
|
||||
"description": "Package for React Application",
|
||||
"type": "commonjs",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/lensapp/lens.git"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"author": {
|
||||
"name": "OpenLens Authors",
|
||||
"email": "info@k8slens.dev"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/lensapp/lens",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"dev": "webpack --mode=development --watch",
|
||||
"test:unit": "jest --coverage --runInBand",
|
||||
"lint": "lens-lint",
|
||||
"lint:fix": "lens-lint --fix"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@k8slens/application": "^6.5.0-alpha.2",
|
||||
"@ogre-tools/fp": "^15.1.2",
|
||||
"@ogre-tools/injectable": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
|
||||
"@ogre-tools/injectable-extension-for-mobx": "^15.1.2",
|
||||
"@ogre-tools/injectable-react": "^15.1.2",
|
||||
"lodash": "^4.17.15",
|
||||
"mobx": "^6.8.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@async-fn/jest": "^1.6.4",
|
||||
"@k8slens/eslint-config": "6.5.0-alpha.1",
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"@k8slens/react-testing-library-discovery": "*"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react-application renders 1`] = `
|
||||
<body>
|
||||
<div />
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`react-application when content is registered and enabled renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
data-some-content-test="true"
|
||||
>
|
||||
Some children
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`react-application when content is registered and enabled when content is disabled renders 1`] = `
|
||||
<body>
|
||||
<div />
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`react-application when content is registered and enabled when higher order component is registered renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
data-some-higher-order-component-test="true"
|
||||
>
|
||||
<div
|
||||
data-some-content-test="true"
|
||||
>
|
||||
Some children
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
17
packages/technical-features/react-application/src/feature.ts
Normal file
17
packages/technical-features/react-application/src/feature.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { getFeature } from "@k8slens/feature-core";
|
||||
import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
|
||||
import { applicationFeature } from "@k8slens/application";
|
||||
|
||||
export const reactApplicationFeature = getFeature({
|
||||
id: "react-application",
|
||||
|
||||
register: (di) => {
|
||||
autoRegister({
|
||||
di,
|
||||
targetModule: module,
|
||||
getRequireContexts: () => [require.context("./", true, /\.injectable\.(ts|tsx)$/)],
|
||||
});
|
||||
},
|
||||
|
||||
dependencies: [applicationFeature],
|
||||
});
|
||||
@ -0,0 +1,137 @@
|
||||
import { registerFeature } from "@k8slens/feature-core";
|
||||
import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable";
|
||||
import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
|
||||
import { registerInjectableReact } from "@ogre-tools/injectable-react";
|
||||
import { reactApplicationFeature } from "./feature";
|
||||
import { runInAction, computed, observable, IObservableValue } from "mobx";
|
||||
import { startApplicationInjectionToken } from "@k8slens/application";
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import { render, act } from "@testing-library/react";
|
||||
import renderInjectable from "./render-application/render.injectable";
|
||||
import { reactApplicationChildrenInjectionToken } from "./react-application/react-application-children-injection-token";
|
||||
import React from "react";
|
||||
import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery";
|
||||
import {
|
||||
ReactApplicationHigherOrderComponent,
|
||||
reactApplicationHigherOrderComponentInjectionToken,
|
||||
} from "./react-application/react-application-higher-order-component-injection-token";
|
||||
|
||||
const SomeContent = () => <div data-some-content-test>Some children</div>;
|
||||
|
||||
describe("react-application", () => {
|
||||
let rendered: RenderResult;
|
||||
let di: DiContainer;
|
||||
let discover: Discover;
|
||||
|
||||
beforeEach(async () => {
|
||||
di = createContainer("some-container");
|
||||
|
||||
registerInjectableReact(di);
|
||||
|
||||
registerMobX(di);
|
||||
|
||||
runInAction(() => {
|
||||
registerFeature(di, reactApplicationFeature);
|
||||
});
|
||||
|
||||
di.override(renderInjectable, () => (application) => {
|
||||
rendered = render(application);
|
||||
});
|
||||
|
||||
const startApplication = di.inject(startApplicationInjectionToken);
|
||||
|
||||
await startApplication();
|
||||
|
||||
discover = discoverFor(() => rendered);
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("when content is registered and enabled", () => {
|
||||
let someObservable: IObservableValue<boolean>;
|
||||
|
||||
beforeEach(() => {
|
||||
someObservable = observable.box(true);
|
||||
|
||||
const someContentInjectable = getInjectable({
|
||||
id: "some-content",
|
||||
|
||||
instantiate: () => ({
|
||||
id: "some-content",
|
||||
Component: SomeContent,
|
||||
enabled: computed(() => someObservable.get()),
|
||||
}),
|
||||
|
||||
injectionToken: reactApplicationChildrenInjectionToken,
|
||||
});
|
||||
|
||||
runInAction(() => {
|
||||
di.register(someContentInjectable);
|
||||
});
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders the content", () => {
|
||||
const { discovered } = discover.getSingleElement("some-content");
|
||||
|
||||
expect(discovered).not.toBeNull();
|
||||
});
|
||||
|
||||
describe("when higher order component is registered", () => {
|
||||
beforeEach(() => {
|
||||
const SomeHigherOrderComponent: ReactApplicationHigherOrderComponent = ({ children }) => (
|
||||
<div data-some-higher-order-component-test>{children}</div>
|
||||
);
|
||||
|
||||
const someHigherOrderComponentInjectable = getInjectable({
|
||||
id: "some-higher-order-component",
|
||||
|
||||
instantiate: () => SomeHigherOrderComponent,
|
||||
|
||||
injectionToken: reactApplicationHigherOrderComponentInjectionToken,
|
||||
});
|
||||
|
||||
runInAction(() => {
|
||||
di.register(someHigherOrderComponentInjectable);
|
||||
});
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders the content inside the higher order component", () => {
|
||||
const { discovered } = discover
|
||||
.getSingleElement("some-higher-order-component")
|
||||
.getSingleElement("some-content");
|
||||
|
||||
expect(discovered).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("when content is disabled", () => {
|
||||
beforeEach(() => {
|
||||
act(() => {
|
||||
runInAction(() => {
|
||||
someObservable.set(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("does not render the content", () => {
|
||||
const { discovered } = discover.querySingleElement("some-content");
|
||||
|
||||
expect(discovered).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||
import type React from "react";
|
||||
import type { IComputedValue } from "mobx";
|
||||
|
||||
export interface ReactApplicationChildren {
|
||||
id: string;
|
||||
Component: React.ComponentType;
|
||||
enabled: IComputedValue<boolean>;
|
||||
}
|
||||
|
||||
export const reactApplicationChildrenInjectionToken = getInjectionToken<ReactApplicationChildren>({
|
||||
id: "react-application-children-injection-token",
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
|
||||
import React from "react";
|
||||
import {
|
||||
ReactApplicationChildren,
|
||||
reactApplicationChildrenInjectionToken,
|
||||
} from "./react-application-children-injection-token";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import { observer, Observer } from "mobx-react";
|
||||
|
||||
type Dependencies = { contents: IComputedValue<ReactApplicationChildren[]> };
|
||||
|
||||
const NonInjectedContent = observer(({ contents }: Dependencies) => (
|
||||
<>
|
||||
{contents.get().map((child) => (
|
||||
<Observer key={child.id}>{() => (child.enabled.get() ? <child.Component /> : null)}</Observer>
|
||||
))}
|
||||
</>
|
||||
));
|
||||
|
||||
export const ReactApplicationContent = withInjectables<Dependencies>(
|
||||
NonInjectedContent,
|
||||
|
||||
{
|
||||
getProps: (di) => ({
|
||||
contents: di.inject(computedInjectManyInjectable)(reactApplicationChildrenInjectionToken),
|
||||
}),
|
||||
},
|
||||
);
|
||||
@ -0,0 +1,11 @@
|
||||
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||
import type React from "react";
|
||||
|
||||
export type ReactApplicationHigherOrderComponent = React.ComponentType<{
|
||||
children: React.ReactNode;
|
||||
}>;
|
||||
|
||||
export const reactApplicationHigherOrderComponentInjectionToken =
|
||||
getInjectionToken<ReactApplicationHigherOrderComponent>({
|
||||
id: "react-application-higher-order-component-injection-token",
|
||||
});
|
||||
@ -0,0 +1,37 @@
|
||||
import type { DiContainerForInjection } from "@ogre-tools/injectable";
|
||||
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
|
||||
import { DiContextProvider } from "@ogre-tools/injectable-react";
|
||||
import { observer } from "mobx-react";
|
||||
import React from "react";
|
||||
import {
|
||||
ReactApplicationHigherOrderComponent,
|
||||
reactApplicationHigherOrderComponentInjectionToken,
|
||||
} from "./react-application-higher-order-component-injection-token";
|
||||
|
||||
import { ReactApplicationContent } from "./react-application-content";
|
||||
|
||||
interface ReactApplicationProps {
|
||||
di: DiContainerForInjection;
|
||||
}
|
||||
|
||||
const render = (components: ReactApplicationHigherOrderComponent[]) => {
|
||||
const [Component, ...rest] = components;
|
||||
|
||||
if (!Component) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <Component>{render(rest)}</Component>;
|
||||
};
|
||||
|
||||
export const ReactApplication = observer(({ di }: ReactApplicationProps) => {
|
||||
const computedInjectMany = di.inject(computedInjectManyInjectable);
|
||||
|
||||
const higherOrderComponents = computedInjectMany(
|
||||
reactApplicationHigherOrderComponentInjectionToken,
|
||||
);
|
||||
|
||||
const Components = [...higherOrderComponents.get(), ReactApplicationContent];
|
||||
|
||||
return <DiContextProvider value={{ di }}>{render(Components)}</DiContextProvider>;
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { afterApplicationIsLoadedInjectionToken } from "@k8slens/application";
|
||||
import renderInjectable from "./render.injectable";
|
||||
import { ReactApplication } from "../react-application/react-application";
|
||||
import React from "react";
|
||||
|
||||
export const renderApplicationWhenApplicationIsReadyInjectable = getInjectable({
|
||||
id: "render-application-when-application-is-ready",
|
||||
|
||||
instantiate: (di) => {
|
||||
const render = di.inject(renderInjectable);
|
||||
|
||||
return {
|
||||
run: () => {
|
||||
render(<ReactApplication di={di} />);
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
injectionToken: afterApplicationIsLoadedInjectionToken,
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
|
||||
import { render } from "react-dom";
|
||||
import type React from "react";
|
||||
|
||||
export type Render = (application: React.ReactElement) => void;
|
||||
|
||||
export const renderInjectionToken = getInjectionToken<Render>({
|
||||
id: "render-injection-token",
|
||||
});
|
||||
|
||||
const renderInjectable = getInjectable({
|
||||
id: "render",
|
||||
|
||||
/* c8 ignore next */
|
||||
instantiate: () => (application) => render(application, document.getElementById("app")),
|
||||
|
||||
causesSideEffects: true,
|
||||
|
||||
injectionToken: renderInjectionToken,
|
||||
});
|
||||
|
||||
export default renderInjectable;
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "@k8slens/typescript/config/base.json",
|
||||
"include": ["**/*.ts", "**/*.tsx"]
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
module.exports = require("@k8slens/webpack").configForReact;
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@k8slens/eslint-config/eslint",
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
"@k8slens/eslint-config/prettier"
|
||||
@ -0,0 +1,13 @@
|
||||
export type {
|
||||
Discover,
|
||||
GetSingleElement,
|
||||
QueryAllElements,
|
||||
QuerySingleElement,
|
||||
} from "./src/discovery-of-html-elements";
|
||||
|
||||
export {
|
||||
discoverFor,
|
||||
getSingleElement,
|
||||
queryAllElements,
|
||||
querySingleElement,
|
||||
} from "./src/discovery-of-html-elements";
|
||||
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@k8slens/react-testing-library-discovery",
|
||||
"private": false,
|
||||
"version": "1.0.0-alpha.0",
|
||||
"description": "A way to discover HTML-elements using react-testing-library",
|
||||
"type": "commonjs",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/lensapp/lens.git"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"author": {
|
||||
"name": "OpenLens Authors",
|
||||
"email": "info@k8slens.dev"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/lensapp/lens",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"dev": "webpack --mode=development --watch",
|
||||
"lint": "lens-lint",
|
||||
"lint:fix": "lens-lint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@testing-library/dom": "^8.19.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import { prettyDOM as prettyDom } from "@testing-library/dom";
|
||||
|
||||
type DiscoverySourceTypes = RenderResult | Element;
|
||||
|
||||
export type QuerySingleElement = (
|
||||
attributeName: string,
|
||||
attributeValue?: string,
|
||||
) => { discovered: Element | null } & Discover;
|
||||
|
||||
type Clickable = { click: () => void };
|
||||
|
||||
export type GetSingleElement = (
|
||||
attributeName: string,
|
||||
attributeValue?: string,
|
||||
) => { discovered: Element } & Discover & Clickable;
|
||||
|
||||
export type QueryAllElements = (attributeName: string) => {
|
||||
discovered: Element[];
|
||||
attributeValues: (string | null)[];
|
||||
};
|
||||
|
||||
export interface Discover {
|
||||
querySingleElement: QuerySingleElement;
|
||||
queryAllElements: QueryAllElements;
|
||||
getSingleElement: GetSingleElement;
|
||||
}
|
||||
|
||||
const getBaseElement = (source: DiscoverySourceTypes) =>
|
||||
"baseElement" in source ? source.baseElement : source;
|
||||
|
||||
export function querySingleElement(getSource: () => DiscoverySourceTypes): QuerySingleElement {
|
||||
return (attributeName, attributeValue) => {
|
||||
const source = getSource();
|
||||
|
||||
const dataAttribute = `data-${attributeName}-test`;
|
||||
|
||||
const selector = attributeValue
|
||||
? `[${dataAttribute}="${attributeValue}"]`
|
||||
: `[${dataAttribute}]`;
|
||||
|
||||
const discovered = getBaseElement(source).querySelector(selector);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
const nestedDiscover = discoverFor(() => {
|
||||
if (!discovered) {
|
||||
throw new Error("Tried to do nested discover using source that does not exist");
|
||||
}
|
||||
|
||||
return discovered;
|
||||
});
|
||||
|
||||
return {
|
||||
discovered,
|
||||
|
||||
...nestedDiscover,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function queryAllElements(getSource: () => DiscoverySourceTypes): QueryAllElements {
|
||||
return (attributeName) => {
|
||||
const source = getSource();
|
||||
|
||||
const dataAttribute = `data-${attributeName}-test`;
|
||||
|
||||
const results = [...getBaseElement(source).querySelectorAll(`[${dataAttribute}]`)];
|
||||
|
||||
return {
|
||||
discovered: results,
|
||||
|
||||
attributeValues: results.map((result) => result.getAttribute(dataAttribute)),
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function getSingleElement(getSource: () => DiscoverySourceTypes): GetSingleElement {
|
||||
return (attributeName, attributeValue) => {
|
||||
const dataAttribute = `data-${attributeName}-test`;
|
||||
|
||||
const { discovered, ...nestedDiscover } = querySingleElement(getSource)(
|
||||
attributeName,
|
||||
attributeValue,
|
||||
);
|
||||
|
||||
if (!discovered) {
|
||||
// eslint-disable-next-line xss/no-mixed-html
|
||||
const html = prettyDom(getBaseElement(getSource()));
|
||||
|
||||
if (attributeValue) {
|
||||
const validValues = queryAllElements(getSource)(attributeName).attributeValues;
|
||||
|
||||
throw new Error(
|
||||
`Couldn't find HTML-element with attribute "${dataAttribute}" with value "${attributeValue}".\n\nPresent values are:\n\n"${validValues.join(
|
||||
'",\n"',
|
||||
)}"\n\nHTML is:\n\n${html}`,
|
||||
);
|
||||
}
|
||||
|
||||
throw new Error(
|
||||
`Couldn't find HTML-element with attribute "${dataAttribute}"\n\nHTML is:\n\n${html}`,
|
||||
);
|
||||
}
|
||||
|
||||
const click = () => {
|
||||
if ("click" in discovered && typeof discovered.click === "function") {
|
||||
discovered.click();
|
||||
} else {
|
||||
throw new Error(
|
||||
`Tried to click something that was not clickable:\n\n${prettyDom(discovered)}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return { discovered, click, ...nestedDiscover };
|
||||
};
|
||||
}
|
||||
|
||||
export function discoverFor(getSource: () => DiscoverySourceTypes): Discover {
|
||||
return {
|
||||
querySingleElement: querySingleElement(getSource),
|
||||
queryAllElements: queryAllElements(getSource),
|
||||
getSingleElement: getSingleElement(getSource),
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "@k8slens/typescript/config/base.json",
|
||||
"include": ["**/*.ts"]
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
module.exports = require("@k8slens/webpack").configForNode;
|
||||
Loading…
Reference in New Issue
Block a user