Merge pull request #109 from fullstackedorg/105-rewrite-tests

Fixed Test to new UI

build.ts

@@ -2,7 +2,6 @@ import fs from "fs";
 import path from "path";
 import * as sass from "sass";
 import { build } from "./platform/node/src/build";
-import { scan } from "./editor/api/projects/scan";
 import esbuild from "esbuild";
 import zip from "./editor/api/projects/zip";
 import child_process from "child_process";

editor/api/config/index.ts

@@ -25,8 +25,6 @@ export default {
             return false;
         }
 
-        console.log(configDir);
-
         await rpc().fs.mkdir(configDir, { absolutePath: true });
         return true;
     },

editor/api/connectivity/index.ts

@@ -48,6 +48,8 @@ onPush["peerNearby"] = async (eventStr) => {
 };
 
 async function onPeerNearby(eventType: "new" | "lost", peerNearby: PeerNearby) {
+    console.log("onPeerNearby");
+
     if (eventType === "new" && _autoConnect) {
         let alreadyConnected = false;
         // already connected

editor/components/top-bar.ts

@@ -1,3 +1,4 @@
+import { BACK_BUTTON_CLASS } from "../constants";
 import stackNavigation from "../stack-navigation";
 import { Button } from "./primitives/button";
 
@@ -23,6 +24,7 @@ export function TopBar(opts?: Partial<TopBarOpts>) {
             style: "icon-large",
             iconLeft: "Arrow"
         });
+        backButton.classList.add(BACK_BUTTON_CLASS);
         backButton.onclick = () => {
             if (opts?.onBack && !opts.onBack()) {
                 return;

editor/constants.ts

@@ -1,16 +1,21 @@
 export const PROJECTS_TITLE = "Projects";
+export const PROJECTS_VIEW_ID = "projects-view";
+export const PROJECT_VIEW_ID = "project";
+export const PEERS_VIEW_ID = "peers"
+export const SETTINGS_VIEW_ID = "settings"
 export const NEW_PROJECT_ID = "new-project";
+export const IMPORT_ZIP_ID = "import-zip";
 export const IMPORT_PROJECT_FILE_INPUT_ID = "import-project";
 export const RUN_PROJECT_ID = "run-project";
 export const NEW_FILE_ID = "new-file";
 export const PACKAGES_BUTTON_ID = "packages-btn";
 export const DELETE_ALL_PACKAGES_ID = "delete-all-packages";
 export const SETTINGS_BUTTON_ID = "settings";
-export const BACK_BUTTON_ID = "back-button";
+export const BACK_BUTTON_CLASS = "back-button";
 export const PROJECT_TITLE_ID = "project-title";
 export const PACKAGE_INSTALLER_ID = "package-installer";
 export const TYPESCRIPT_ICON_ID = "typescript-icon";
-export const PEERS_ICON_ID = "peers-connectivity";
+export const PEERS_BUTTON_ID = "peers-connectivity";
 export const INCOMING_PEER_CONNECTION_REQUEST_DIALOG =
     "peer-connection-request-dialog";
 export const MANUAL_PEER_CONNECT_DIALOG = "manual-peer-connect";

editor/index.ts

@@ -65,6 +65,9 @@ if (installDemo) {
             didImportProject: () => {
                 projects.reloadProjectsList();
                 stackNavigation.back();
+
+                // webcontainer test
+                testDemo();
             },
             zip: {
                 data,
@@ -78,16 +81,20 @@ if (installDemo) {
 // init connectivity
 await api.connectivity.init();
 
-// for test puposes
-const searchParams = new URLSearchParams(window.location.search);
-if (searchParams.has("demo")) {
-    const demoProject = (await api.projects.list()).find(
-        ({ title }) => title === "Demo"
-    );
-    if (demoProject) {
-        // projectView.setProject(demoProject);
-        // stackNavigation.navigate(await projectView.render(), BG_COLOR);
-        // await projectView.runProject();
+// for webcontainer test purposes
+async function testDemo() {
+    const searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.has("demo")) {
+        const demoProject = (await api.projects.list()).find(
+            ({ title }) => title === "Demo"
+        );
+        if (demoProject) {
+            stackNavigation.navigate(Project({
+                project: demoProject,
+                didUpdateProject: null,
+                run: true
+            }), BG_COLOR);
+        }
     }
 }
 

editor/views/add-project/import-zip.ts

@@ -8,6 +8,7 @@ import { ViewScrollable } from "../../components/view-scrollable";
 import * as zip from "@zip.js/zip.js";
 import { createProjectFromFullStackedFile } from "../../api/projects";
 import { gitLogger } from "./clone-git";
+import { IMPORT_PROJECT_FILE_INPUT_ID } from "../../constants";
 
 type ImportZipOpts = {
     didImportProject: () => void;
@@ -34,7 +35,7 @@ export function ImportZip(opts: ImportZipOpts) {
     const zipFileInput = InputFile({
         label: "Project ZIP"
     });
-
+    zipFileInput.input.id = IMPORT_PROJECT_FILE_INPUT_ID;
     form.append(zipFileInput.container);
 
     zipFileInput.input.onchange = async () => {

editor/views/add-project/index.ts

@@ -1,6 +1,6 @@
 import { Button } from "../../components/primitives/button";
 import { TopBar } from "../../components/top-bar";
-import { BG_COLOR } from "../../constants";
+import { BG_COLOR, IMPORT_ZIP_ID } from "../../constants";
 import stackNavigation from "../../stack-navigation";
 import { CloneGit } from "./clone-git";
 import { CreateEmpty } from "./create-empty";
@@ -43,6 +43,7 @@ export function AddProject(opts: AddProjectOpts) {
         text: "Import zip",
         iconLeft: "Archive"
     });
+    importZipButton.id = IMPORT_ZIP_ID
     importZipButton.onclick = () =>
         stackNavigation.navigate(
             ImportZip({ didImportProject: onProjectCreation }),

editor/views/peers/index.ts

@@ -10,13 +10,14 @@ import { InputText } from "../../components/primitives/inputs";
 import { TopBar } from "../../components/top-bar";
 import { ViewScrollable } from "../../components/view-scrollable";
 import { find } from "../project/code-editor";
+import { PEER_DISCONNECT_BUTTON_CLASS, PEER_PAIR_BUTTON_CLASS, PEERS_VIEW_ID } from "../../constants";
 
 let reloadLists: () => void;
 const singletonReloadList = () => reloadLists();
 
 export function Peers() {
     const { container, scrollable } = ViewScrollable();
-    container.id = "peers";
+    container.id = PEERS_VIEW_ID;
     container.classList.add("view");
 
     const connectionButton = Button({
@@ -66,6 +67,7 @@ export function Peers() {
     scrollable.append(lists);
 
     api.connectivity.advertise.start();
+    api.connectivity.browse.start();
 
     return container;
 }
@@ -99,13 +101,14 @@ function Connected(opts: PeersListOpts) {
         const right = document.createElement("div");
 
         if (peerConnection.state === PEER_CONNECTION_STATE.PAIRING) {
-            right.innerHTML = `<small>Paring (${peerConnection.validation})</small>`;
+            right.innerHTML = `<small>Paring (<span class="code">${peerConnection.validation}</span>)</small>`;
         }
 
         const disconnectButton = Button({
             text: "Disconnect",
             color: "red"
         });
+        disconnectButton.classList.add(PEER_DISCONNECT_BUTTON_CLASS)
         disconnectButton.onclick = () => {
             disconnectButton.disabled = true;
             api.connectivity.disconnect(peerConnection);
@@ -152,6 +155,7 @@ function Nearby(opts: PeersListOpts) {
             const pairButton = Button({
                 text: "Pair"
             });
+            pairButton.classList.add(PEER_PAIR_BUTTON_CLASS)
             item.append(pairButton);
             pairButton.onclick = () => {
                 pairButton.disabled = true;

editor/views/peers/pairing-request.ts

@@ -4,6 +4,7 @@ import {
 } from "../../../src/connectivity/types";
 import { Dialog } from "../../components/dialog";
 import { Button } from "../../components/primitives/button";
+import { PEER_TRUST_BUTTON_ID } from "../../constants";
 
 type PairingRequestOpts = {
     peerConnectionRequest: PeerConnectionRequest | PeerConnectionTokenExchange;
@@ -29,6 +30,7 @@ export function PairingRequest(opts: PairingRequestOpts) {
     const trustButton = Button({
         text: "Trust"
     });
+    trustButton.id = PEER_TRUST_BUTTON_ID;
 
     buttonRow.append(denyButton, trustButton);
 

editor/views/project/file-tree.ts

@@ -3,6 +3,7 @@ import { Popover } from "../../components/popover";
 import { Button, ButtonGroup } from "../../components/primitives/button";
 import { Icon } from "../../components/primitives/icon";
 import { InputText } from "../../components/primitives/inputs";
+import { NEW_FILE_ID } from "../../constants";
 import rpc from "../../rpc";
 import { WorkerTS } from "../../typescript";
 import { CodeEditor } from "./code-editor";
@@ -61,6 +62,7 @@ export function FileTree(opts: FileTreeOpts) {
         style: "icon-small",
         iconLeft: "File Add"
     });
+    newFileButton.id = NEW_FILE_ID;
     newFileButton.onclick = () =>
         AddFile({
             baseDirectory: opts.directory,
@@ -400,10 +402,12 @@ function ItemInputForm(opts: ItemInputFormOpts) {
 
     setTimeout(() => {
         inputName.input.focus();
-        inputName.input.setSelectionRange(
-            0,
-            dotIndex === -1 ? opts.initialValue.length : dotIndex
-        );
+        if(inputName.input.value) {
+            inputName.input.setSelectionRange(
+                0,
+                dotIndex === -1 ? opts.initialValue.length : dotIndex
+            );
+        }
     }, 1);
 
     return form;

editor/views/project/index.ts

@@ -12,19 +12,22 @@ import { FileTree } from "./file-tree";
 import { Git } from "./git";
 import type esbuild from "esbuild";
 import { packageInstaller } from "../packages/installer";
+import { DELETE_ALL_PACKAGES_ID, PROJECT_VIEW_ID, RUN_PROJECT_ID } from "../../constants";
 
 type ProjectOpts = {
     project: ProjectType;
-    didDeleteAllPackages?: () => void;
     didUpdateProject: () => void;
 
     // to directly run from deeplink
     run?: boolean;
+
+    // only for packages view
+    didDeleteAllPackages?: () => void;
 };
 
 export function Project(opts: ProjectOpts) {
     const container = document.createElement("div");
-    container.id = "project";
+    container.id = PROJECT_VIEW_ID;
     container.classList.add("view");
 
     const fileTree = FileTree({
@@ -55,6 +58,7 @@ export function Project(opts: ProjectOpts) {
         style: "icon-large",
         iconLeft: "Play"
     });
+    runButton.id = RUN_PROJECT_ID;
     runButton.onclick = async () => {
         const loaderContainer = document.createElement("div");
         loaderContainer.classList.add("loader-container");
@@ -83,6 +87,7 @@ export function Project(opts: ProjectOpts) {
         text: "Delete All",
         color: "red"
     });
+    deleteAllButton.id = DELETE_ALL_PACKAGES_ID;
     deleteAllButton.onclick = async () => {
         deleteAllButton.disabled = true;
         await rpc().fs.rmdir(opts.project.location, {

editor/views/projects.ts

@@ -6,7 +6,7 @@ import { Button, ButtonGroup } from "../components/primitives/button";
 import { InputText } from "../components/primitives/inputs";
 import { TopBar as TopBarComponent } from "../components/top-bar";
 import { ViewScrollable } from "../components/view-scrollable";
-import { BG_COLOR } from "../constants";
+import { BG_COLOR, NEW_PROJECT_ID, PEERS_BUTTON_ID, PROJECTS_TITLE, PROJECTS_VIEW_ID, SETTINGS_BUTTON_ID } from "../constants";
 import stackNavigation from "../stack-navigation";
 import { AddProject } from "./add-project";
 import { Peers } from "./peers";
@@ -53,14 +53,15 @@ function TopBar() {
         style: "icon-large",
         iconLeft: "Settings"
     });
+    settings.id = SETTINGS_BUTTON_ID;
 
     settings.onclick = () => {
         stackNavigation.navigate(Settings(), BG_COLOR);
     };
 
     const topBar = TopBarComponent({
         noBack: true,
-        title: "Projects",
+        title: PROJECTS_TITLE,
         actions: [PeersWidget(), settings]
     });
 
@@ -83,7 +84,7 @@ function PeersWidget() {
         style: "icon-large",
         iconLeft: "Peers"
     });
-
+    peersButton.id = PEERS_BUTTON_ID;
     peersButton.onclick = () => stackNavigation.navigate(Peers(), BG_COLOR);
 
     container.append(peersConnectedCount, peersButton);
@@ -140,6 +141,7 @@ function SearchAndAdd(opts: SearchAndAddOpts) {
         style: "icon-large",
         iconLeft: "Plus"
     });
+    addButton.id = NEW_PROJECT_ID;
 
     addButton.onclick = () => {
         stackNavigation.navigate(
@@ -200,6 +202,7 @@ function ProjectsList() {
 
 function ProjectTile(project: ProjectType) {
     const container = document.createElement("div");
+    container.id = PROJECTS_VIEW_ID;
     container.classList.add("project-tile");
 
     container.onclick = () =>

editor/views/settings/index.ts

@@ -8,11 +8,11 @@ import { Connectivity } from "./connectivity";
 import { GitAuthentications } from "./git-authentications";
 import { Version } from "./version";
 import stackNavigation from "../../stack-navigation";
-import { BG_COLOR } from "../../constants";
+import { BG_COLOR, PACKAGES_BUTTON_ID, SETTINGS_VIEW_ID } from "../../constants";
 
 export function Settings() {
     const { container, scrollable } = ViewScrollable();
-    container.id = "settings";
+    container.id = SETTINGS_VIEW_ID;
     container.classList.add("view");
 
     const topBar = TopBar({
@@ -49,6 +49,7 @@ function Packages() {
                 text,
                 iconRight: "Package"
             });
+            updatedButton.id = PACKAGES_BUTTON_ID
 
             if (!nodeModulesDirectory)
                 nodeModulesDirectory =

platform/node/src/adapter.ts

@@ -75,6 +75,10 @@ export function createAdapter(
                 });
             },
             rmdir: (path) => {
+                const dirPath = baseDirectory + "/" + path;
+
+                if(!fs.existsSync(dirPath)) return;
+
                 return fs.promises.rm(baseDirectory + "/" + path, {
                     recursive: true
                 });

platform/node/src/main.ts

@@ -129,8 +129,8 @@ export function main(
                     "index",
                     outdir,
                     directories.rootDirectory +
-                        "/" +
-                        directories.nodeModulesDirectory
+                    "/" +
+                    directories.nodeModulesDirectory
                 );
                 return result?.errors?.length ? result.errors : 1;
             }
@@ -282,7 +282,9 @@ function upgradeFS(
         },
         rmdir: (path, options) => {
             if (options?.absolutePath) {
-                return fs.promises.rm(rootDirectory + "/" + path, {
+                const dirPath = rootDirectory + "/" + path;
+                if (!fs.existsSync(dirPath)) return;
+                return fs.promises.rm(dirPath, {
                     recursive: true
                 });
             }