🪚 CI (non-interactive) mode for create-lz-oapp; User tests (LayerZero…

…-Labs#253)

.changeset/large-plums-dress.md

@@ -0,0 +1,5 @@
+---
+"create-lz-oapp": patch
+---
+
+Add ability run in CI (non-interactive) mode

.eslintignore

@@ -7,3 +7,4 @@ node_modules
 *.yaml
 Dockerfile
 Makefile
+*.bats

.gitmodules

@@ -4,3 +4,12 @@
 [submodule "toolbox-foundry/ds-test"]
 	path = packages/toolbox-foundry/src/ds-test
 	url = https://github.com/dapphub/ds-test
+[submodule "tests-user/bats-core"]
+	path = tests-user/lib/bats-core
+	url = https://github.com/bats-core/bats-core.git
+[submodule "tests-user/bats-support"]
+	path = tests-user/lib/bats-support
+	url = https://github.com/bats-core/bats-support.git
+[submodule "tests-user/bats-assert"]
+	path = tests-user/lib/bats-assert
+	url = https://github.com/bats-core/bats-assert.git

DEVELOPMENT.md

@@ -228,6 +228,10 @@ pnpm test:user
 
 This will spin up a local NPM registry (available on [localhost:4873](http://localhost:4873) for debugging purposes), publish all packages locally and run the test suite.
 
+The tests themselves are written using [BATS - _Bash Automated Testing System_](https://github.com/bats-core/bats-core) ([Tutorial & more docs here](https://bats-core.readthedocs.io/en/stable/)) in combination with standard assertions from [`bats-assert`](https://github.com/bats-core/bats-assert).
+
+The test suites can be found under `./tests-user/tests` directory.
+
 #### Using local NPM registry
 
 The local NPM registry can also be used to simulate arbitrary user flows without needing to link or publish packages to NPM. To do this, follow these steps:

docker-compose.registry.yaml

@@ -22,7 +22,16 @@ services:
     healthcheck:
       interval: 2s
       retries: 10
-      test: ["CMD", "wget", "--output-document", "--tries=1", "--no-verbose", "--spider", "http://0.0.0.0:4873/-/ping"]
+      test:
+        [
+          "CMD",
+          "wget",
+          "--output-document",
+          "--tries=1",
+          "--no-verbose",
+          "--spider",
+          "http://0.0.0.0:4873/-/ping",
+        ]
     stop_grace_period: 120s
     volumes:
       - ./verdaccio.yaml:/verdaccio/conf/config.yaml
@@ -40,9 +49,9 @@ services:
       - npm-registry
     # Here we build and publish all the packages locally,
     # including any pending changesets.
-    # 
+    #
     # Even though we enabled anonymous publishing in verdaccio,
-    # we need to specify some sort of an auth token 
+    # we need to specify some sort of an auth token
     # since we are trying to publish scoped packages. This can be anything,
     # any non-empty string will do
     command:
@@ -67,13 +76,29 @@ services:
     depends_on:
       publish:
         condition: service_completed_successfully
+    # create-lz-oapp allows us to specify the repository/ref we pull the examples from
+    #
+    # In order to test the version on this branch in github actions,
+    # we'll set these based on the default variables github gives us
+    #
+    # If these are not provided, for example if running on a local machine,
+    # we'll default them to our repository and and empty ref
+    environment:
+      - [email protected]:${GITHUB_REPOSITORY:-LayerZero-Labs/devtools}
+      - LAYERZERO_EXAMPLES_REPOSITORY_REF=${GITHUB_REF_NAME}
+    working_dir: /app
     command:
       - /bin/bash
       - -c
       - |
         pnpm config set registry http://npm-registry:4873/
-        
-        ./tests-user/create-lz-oapp.sh
-    volumes:
-      - ./tests-user:/tests-user
 
+        /app/tests-user/lib/bats-core/bin/bats --verbose-run --recursive ./tests-user/tests
+    volumes:
+      # If we want to clone from github.com, we'll need its public keys added to our SSH config
+      # otherwise git clone would trigger an interactive prompt asking us to add a server fingerprint
+      #
+      # See more here https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/githubs-ssh-key-fingerprints
+      - ./tests-user/ssh/known_hosts:/root/.ssh/known_hosts
+      # The testing library and test suites
+      - ./tests-user:/app/tests-user

packages/create-lz-oapp/src/components/error.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import type { Config } from "@/types";
+import { Box, Text } from "ink";
+import {
+  BadGitRefError,
+  DestinationNotEmptyError,
+  DownloadError,
+  MissingGitRefError,
+} from "@/utilities/cloning";
+
+interface ErrorMessageProps {
+  config: Config;
+  error?: unknown;
+}
+
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({
+  config,
+  error,
+}) => {
+  if (error == null) return null;
+
+  switch (true) {
+    case error instanceof DestinationNotEmptyError:
+      return (
+        <Text color="red">
+          Destination directory <Text bold>{config.destination}</Text> is not
+          empty
+        </Text>
+      );
+
+    case error instanceof BadGitRefError:
+      return (
+        <Text color="red">
+          The example <Text bold>{config.example.label}</Text> has its
+          repository URL malformed: '
+          <Text bold>{config.example.repository}</Text>' does not look like a
+          valid repository
+        </Text>
+      );
+
+    case error instanceof MissingGitRefError:
+      return (
+        <Text color="red">
+          The example <Text bold>{config.example.label}</Text> does not seem to
+          exist in the repository
+        </Text>
+      );
+
+    case error instanceof DownloadError:
+      return (
+        <Box flexDirection="column">
+          <Text color="red">There was a problem downloading the example</Text>
+          <Text>○ Please check your internet connection</Text>
+          <Text>
+            ○ Please check that the example exists (
+            <Text bold>{config.example.repository}</Text>)
+          </Text>
+        </Box>
+      );
+
+    case error instanceof Error:
+      return <DefaultErrorMessage error={error} />;
+
+    default:
+      return <DefaultErrorMessage error={String(error)} />;
+  }
+};
+
+export const DefaultErrorMessage: React.FC<{ error: Error | string }> = ({
+  error,
+}) => {
+  return (
+    <Text color="red">
+      <Text bold>{String(error)}</Text>
+    </Text>
+  );
+};

packages/create-lz-oapp/src/components/setup.tsx

@@ -1,16 +1,11 @@
 import React, { useEffect } from "react";
 import type { Config } from "@/types";
-import { Box, Text } from "ink";
-import {
-  BadGitRefError,
-  DestinationNotEmptyError,
-  DownloadError,
-  MissingGitRefError,
-  cloneExample,
-} from "@/utilities/cloning";
+import { Box } from "ink";
+import { cloneExample } from "@/utilities/cloning";
 import { Progress } from "./progress";
 import { installDependencies } from "@/utilities/installation";
 import { useTask } from "@/utilities/tasks";
+import { ErrorMessage } from "./error";
 
 interface Props {
   config: Config;
@@ -46,59 +41,3 @@ export const Setup: React.FC<Props> = ({ config }) => {
     </Box>
   );
 };
-
-interface ErrorMessageProps {
-  config: Config;
-  error?: unknown;
-}
-
-const ErrorMessage: React.FC<ErrorMessageProps> = ({ config, error }) => {
-  if (error == null) return null;
-
-  switch (true) {
-    case error instanceof DestinationNotEmptyError:
-      return (
-        <Text color="red">
-          Destination directory <Text bold>{config.destination}</Text> is not
-          empty
-        </Text>
-      );
-
-    case error instanceof BadGitRefError:
-      return (
-        <Text color="red">
-          The example <Text bold>{config.example.label}</Text> has its
-          repository URL malformed: '
-          <Text bold>{config.example.repository}</Text>' does not look like a
-          valid repository
-        </Text>
-      );
-
-    case error instanceof MissingGitRefError:
-      return (
-        <Text color="red">
-          The example <Text bold>{config.example.label}</Text> does not seem to
-          exist in the repository
-        </Text>
-      );
-
-    case error instanceof DownloadError:
-      return (
-        <Box flexDirection="column">
-          <Text color="red">There was a problem downloading the example</Text>
-          <Text>○ Please check your internet connection</Text>
-          <Text>
-            ○ Please check that the example exists (
-            <Text bold>{config.example.repository}</Text>)
-          </Text>
-        </Box>
-      );
-
-    default:
-      return (
-        <Text color="red">
-          An unknown error happened: <Text bold>{String(error)}</Text>
-        </Text>
-      );
-  }
-};

packages/create-lz-oapp/src/config.ts

@@ -1,4 +1,5 @@
 import type { Example, PackageManager } from '@/types'
+import { isPackageManagerAvailable } from './utilities/installation'
 
 /**
  * To enable example development in a custom repository
@@ -34,19 +35,29 @@ export const EXAMPLES: Example[] = [
 
 export const PACKAGE_MANAGERS: PackageManager[] = [
     {
-        command: 'npm',
+        id: 'npm',
+        executable: 'npm',
+        args: ['install', '--legacy-peer-deps'],
         label: 'npm',
     },
     {
-        command: 'yarn',
+        id: 'yarn',
+        executable: 'yarn',
+        args: ['install'],
         label: 'yarn',
     },
     {
-        command: 'pnpm',
+        id: 'pnpm',
+        executable: 'pnpm',
+        args: ['install'],
         label: 'pnpm',
     },
     {
-        command: 'bun',
+        id: 'bun',
+        executable: 'bun',
+        args: ['install'],
         label: 'bun',
     },
 ]
+
+export const AVAILABLE_PACKAGE_MANAGERS = PACKAGE_MANAGERS.filter(isPackageManagerAvailable)