Add extension testing examples (lensapp#15)

* Add extension testing examples

* Copy missing files

* Move bable.config to correct folder

* Add new files to test case

* Add new npm script test

* Update test snapshot for npm test

Signed-off-by: Hung-Han (Henry) Chen <[email protected]>

generators/app/generate-ext-ts.js

@@ -25,8 +25,15 @@ module.exports = {
     fs.copyTpl(generator.sourceRoot() + "/tsconfig.json", name + "/tsconfig.json", extensionConfig);
     fs.copyTpl(generator.sourceRoot() + "/main.ts", name + "/main.ts", extensionConfig);
     fs.copyTpl(generator.sourceRoot() + "/renderer.tsx", name + "/renderer.tsx", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/components/GlobalPage.tsx", name + "/components/GlobalPage.tsx", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/components/GlobalPage.test.tsx", name + "/components/GlobalPage.test.tsx", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/components/GlobalPageMenuIcon.tsx", name + "/components/GlobalPageMenuIcon.tsx", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/components/GlobalPageMenuIcon.test.tsx", name + "/components/GlobalPageMenuIcon.test.tsx", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/components/StatusBarItemIcon.tsx", name + "/components/StatusBarItemIcon.tsx", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/components/StatusBarItemIcon.test.tsx", name + "/components/StatusBarItemIcon.test.tsx", extensionConfig);
     fs.copyTpl(generator.sourceRoot() + "/package.json", name + "/package.json", extensionConfig);
     fs.copyTpl(generator.sourceRoot() + "/webpack.config.js", name + "/webpack.config.js", extensionConfig);
+    fs.copyTpl(generator.sourceRoot() + "/babel.config.js", name + "/babel.config.js", extensionConfig);
 
     fs.copy(generator.sourceRoot() + "/.eslintrc", name + "/.eslintrc");
     fs.copy(generator.sourceRoot() + "/.eslintignore", name + "/.eslintignore");

generators/app/templates/ext-ts/components/GlobalPage.test.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+import GlobalPage from "./GlobalPage";
+
+describe("<GlobalPage />", () => {
+  it("renders w/o issues", () => {
+    const { container } = render(<GlobalPage />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders texts", () => {
+    render(<GlobalPage />);
+    expect(screen.getByTestId("global-page-header")).toHaveTextContent(
+      "Extension Global Page"
+    );
+    expect(screen.getByTestId("global-page-title")).toHaveTextContent(
+      "Global Page Content"
+    );
+    expect(screen.getByTestId("global-page-paragraph")).toHaveTextContent(
+      "A very long paragraph"
+    );
+  });
+
+  it("matches snapshot", () => {
+    // this test is totally optional, but might be useful for extension developers
+    // to track the version diffs in "Component" from @k8slens/extensions (if you upgrade) 
+    // and react to the upstream changes.
+    const { asFragment } = render(<GlobalPage />);
+    expect(asFragment()).toMatchInlineSnapshot();
+  });
+});

generators/app/templates/ext-ts/components/GlobalPageMenuIcon.test.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect"
+
+import GlobalPageMenuIcon from "./GlobalPageMenuIcon";
+
+describe("<GlobalPageMenuIcon />", () => {
+  it("renders w/o issues", () => {
+    const { container } = render(<GlobalPageMenuIcon />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("click called navigate()", () => {
+    const navigate = jest.fn();
+    render(<GlobalPageMenuIcon navigate={navigate} />);
+    fireEvent.click(screen.getByTestId("global-page-menu-icon"));
+    expect(navigate).toHaveBeenCalled();
+  });
+})

generators/app/templates/ext-ts/components/StatusBarItemIcon.test.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect"
+
+import StatusBarItemIcon from "./StatusBarItemIcon";
+
+describe("<StatusBarItemIcon />", () => {
+  it("renders w/o issues", () => {
+    const { container } = render(<StatusBarItemIcon />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("click called navigate()", () => {
+    const navigate = jest.fn();
+    render(<StatusBarItemIcon navigate={navigate} />);
+    fireEvent.click(screen.getByTestId("statusbar-item-icon"));
+    expect(navigate).toHaveBeenCalled();
+    expect(screen.getByTestId("statusbar-item-icon")).toHaveStyle({ color: "rgb(255, 255, 0)" });
+  });
+})

generators/app/templates/ext-ts/package.json

@@ -22,7 +22,8 @@
 	"scripts": {
 		"start": "webpack --watch",
 		"build": "npm run clean && webpack",
-		"clean": "rm -rf ./dist"
+		"clean": "rm -rf ./dist",
+		"test": "jest"
 	},
 	"dependencies": {
 		<%- dep("react") %>,

test/__snapshots__/ext-ts.test.js.snap

@@ -59,6 +59,7 @@ Object {
     "build": "npm run clean && webpack",
     "clean": "rm -rf ./dist",
     "start": "webpack --watch",
+    "test": "jest",
   },
   "version": "0.0.1",
 }

test/ext-ts.test.js

@@ -21,7 +21,9 @@ test("ext-ts generator works as expected", async () => {
   const files = [
     "README.md", "package.json", "webpack.config.js", "tsconfig.json", ".gitignore",
     "main.ts", "renderer.tsx",
-    ".eslintrc", ".eslintignore"
+    "components/GlobalPage.tsx", "components/GlobalPageMenuIcon.tsx", "components/StatusBarItemIcon.tsx",
+    "components/GlobalPage.test.tsx", "components/GlobalPageMenuIcon.test.tsx", "components/StatusBarItemIcon.test.tsx",
+    "babel.config.js", ".eslintrc", ".eslintignore"
   ].map((fileName) => `${resultPath}/${name}/${fileName}`);
   assert.file(files);
   const packageJSON = JSON.parse(fs.readFileSync(`${resultPath}/${name}/package.json`, "utf8"));