Initial e2e test setup

.gitignore

@@ -4,4 +4,8 @@ node_modules
 *.vsix
 .DS_Store
 dist
-todo.md
+todo.md
+storage
+
+e2e/extensions
+e2e/sample

.vscode/settings.json

@@ -10,8 +10,4 @@
     "typescript.tsc.autoDetect": "off",
     "eliostruyf.writingstyleguide.terms.isDisabled": true,
     "eliostruyf.writingstyleguide.biasFree.isDisabled": true,
-    "exportall.config.folderListener": [
-        "/src/pagesView/state/atom",
-        "/src/pagesView/state/selectors"
-    ]
 }

.vscodeignore

@@ -26,4 +26,6 @@ dist/*.html
 frontmatter.json
 .frontmatter
 webpack
-README.beta.md
+README.beta.md
+e2e
+storage

e2e/src/command.test.ts

@@ -0,0 +1,59 @@
+import { By, VSBrowser, EditorView, WebView, Workbench, Notification } from "vscode-extension-tester";
+import { expect } from "chai";
+import { sleep } from "./utils";
+import { join } from "path";
+
+// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/index.ts
+// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/command.test.ts
+
+describe("Initialization testing", function() {
+  this.timeout(2 * 60 * 1000 /*ms*/);
+
+  let workbench: Workbench;
+  let view: WebView;
+
+  this.beforeAll(async function() {
+    await VSBrowser.instance.openResources(join(__dirname, '../sample'));
+    await sleep(3000);
+    workbench = new Workbench();
+
+    await workbench.executeCommand("frontMatter.dashboard");
+    await sleep(3000);
+
+    await new EditorView().openEditor(`FrontMatter Dashboard`);
+
+    view = new WebView();
+    await view.switchToFrame();
+  });
+
+  it("1. Open welcome dashboard", async function() {
+    const element = await view.findWebElement(By.css('h1'));
+
+    const title = await element.getText();
+
+    expect(title).has.string(`Front Matter`);
+  });
+
+  it("2. Initialize project", async function() {
+    const btn = await view.findWebElement(By.css('[data-test="welcome-init"] button'));
+    expect(btn).to.exist;
+
+    await btn.click();
+
+    await sleep(1000);
+
+    const notifications = await workbench.getNotifications();
+
+    let notification!: Notification;
+    for (const not of notifications) {
+      const message = await not.getMessage();
+      if (message.includes('Front Matter:')) {
+        notification = not;
+      }
+    }
+
+    expect(await notification.getMessage()).has.string(`Project initialized successfully.`);
+  });
+
+  it("3. Check if project file is created", async function() {});
+});

e2e/src/runTests.ts

@@ -0,0 +1,33 @@
+import * as path from 'path';
+import * as semver from "semver";
+import { ExTester, ReleaseQuality } from "vscode-extension-tester";
+
+
+async function main(): Promise<void> {
+  const vsCodeVersion: semver.SemVer = new semver.SemVer(`1.65.0`);
+  const version = vsCodeVersion.version;
+
+  const storageFolder = path.join(__dirname, "..", "storage");
+  const extFolder = path.join(__dirname, "..", "extensions");
+
+  try {
+    const testPath = path.join(__dirname, "command.test.js");
+
+    const exTester = new ExTester(storageFolder, ReleaseQuality.Stable, extFolder);
+    await exTester.downloadCode(version);
+    await exTester.installVsix();
+    // await exTester.installFromMarketplace("eliostruyf.vscode-front-matter");
+    await exTester.downloadChromeDriver(version);
+    // await exTester.setupRequirements({vscodeVersion: version});
+    const result = await exTester.runTests(testPath, {
+      vscodeVersion: version
+    });
+
+    process.exit(result);
+  } catch (err) {
+    console.log(err);
+    process.exit(1);
+  }
+}
+
+main();

e2e/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './sleep';

e2e/src/utils/sleep.ts

@@ -0,0 +1,3 @@
+export async function sleep(time: number) {
+  await new Promise((resolve) => setTimeout(resolve, time));
+}

package.json

@@ -1923,7 +1923,8 @@
     "prod:panel": "webpack --mode production --config ./webpack/panel.config.js",
     "test-compile": "tsc -p ./",
     "clean": "rimraf dist",
-    "start:site": "cd ./docs && npm run dev"
+    "start:site": "cd ./docs && npm run dev",
+    "test": "tsc -p tsconfig.e2e.json && node ./e2e/out/runTests.js"
   },
   "devDependencies": {
     "@actions/core": "^1.8.2",
@@ -1936,6 +1937,7 @@
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
     "@tailwindcss/forms": "^0.3.3",
+    "@types/chai": "^4.3.1",
     "@types/glob": "7.1.3",
     "@types/invariant": "^2.2.35",
     "@types/js-yaml": "3.12.1",
@@ -1943,7 +1945,7 @@
     "@types/lodash.uniqby": "4.7.6",
     "@types/lodash.xor": "^4.5.6",
     "@types/mime-types": "^2.1.1",
-    "@types/mocha": "^5.2.6",
+    "@types/mocha": "^5.2.7",
     "@types/mustache": "^4.1.2",
     "@types/node": "10.17.48",
     "@types/node-fetch": "^2.5.12",
@@ -1958,6 +1960,7 @@
     "ajv": "^8.8.2",
     "array-move": "^4.0.0",
     "autoprefixer": "^10.3.2",
+    "chai": "^4.3.6",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
     "downshift": "6.0.6",
@@ -1974,6 +1977,7 @@
     "lodash.xor": "^4.5.0",
     "mdast-util-from-markdown": "1.0.0",
     "mime-types": "^2.1.35",
+    "mocha": "^10.0.0",
     "mustache": "^4.2.0",
     "node-json-db": "^1.3.0",
     "npm-run-all": "^4.1.5",
@@ -1991,6 +1995,7 @@
     "react-toastify": "^8.1.0",
     "recoil": "^0.4.1",
     "rimraf": "^3.0.2",
+    "semver": "^7.3.7",
     "style-loader": "2.0.0",
     "tailwindcss": "^2.2.7",
     "tailwindcss-nested-groups": "^1.2.4",
@@ -2002,6 +2007,7 @@
     "uniforms-bridge-json-schema": "^3.7.0",
     "uniforms-unstyled": "^3.7.0",
     "url-join-ts": "^1.0.5",
+    "vscode-extension-tester": "^4.2.5",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.65.0",
     "webpack-bundle-analyzer": "^4.5.0",

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -63,12 +63,14 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
 
   const steps = [
     { 
+      id: `welcome-init`,
       name: 'Initialize project', 
       description: <>Initialize the project with a template folder and sample markdown file. The template folder can be used to define your own templates. <b>Start by clicking on this action</b>.</>,
       status: settings.initialized ? Status.Completed : Status.NotStarted,
       onClick: settings.initialized ? undefined : () => { Messenger.send(DashboardMessage.initializeProject); }  
     },
     { 
+      id: `welcome-framework`,
       name: 'Framework presets', 
       description: (
         <div>
@@ -112,6 +114,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
       onClick: undefined 
     },
     {
+      id: `welcome-content-folders`,
       name: 'Register content folder(s)',
       description: (
         <>          
@@ -143,12 +146,14 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
       status: settings.contentFolders && settings.contentFolders.length > 0 ? Status.Completed : Status.NotStarted
     },
     { 
+      id: `welcome-import`,
       name: 'Import all tags and categories (optional)', 
       description: <>Now that Front Matter knows all the content folders. Would you like to import all tags and categories from the available content?</>,
       status: taxImported ? Status.Completed : Status.NotStarted,
       onClick: settings.contentFolders && settings.contentFolders.length > 0 ? importTaxonomy : undefined  
     },
     {
+      id: `welcome-show-dashboard`,
       name: 'Show the dashboard',
       description: <>Once all actions are completed, the dashboard can be loaded.</>,
       status: (settings.initialized && settings.contentFolders && settings.contentFolders.length > 0) ? Status.Active : Status.NotStarted,
@@ -166,7 +171,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     <nav aria-label="Progress">
       <ol role="list">
         {steps.map((step, stepIdx) => (
-          <li key={step.name} className={`${stepIdx !== steps.length - 1 ? 'pb-10' : ''} relative`}>
+          <li key={step.id} className={`${stepIdx !== steps.length - 1 ? 'pb-10' : ''} relative`} data-test={step.id}>
             <Step name={step.name} description={step.description} status={step.status} showLine={stepIdx !== steps.length - 1} onClick={step.onClick} />
           </li>
         ))}

tsconfig.e2e.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "outDir": "e2e/out",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "strict": false,
+    "noUnusedLocals": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "e2e/src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "src"
+  ]
+}

tsconfig.json

@@ -19,6 +19,7 @@
 	"exclude": [
 		"node_modules",
 		".vscode-test",
-		"docs"
+		"docs",
+		"e2e"
 	]
 }