🎁mnemonic, 🎁ButtonGroup, e2e tests

.github/workflows/CI.yaml

@@ -100,27 +100,65 @@ jobs:
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
           # Without this, we would need to "finalize" percy build explicitly. More info: https://docs.percy.io/docs/parallel-test-suites
-          PERCY_PARALLEL_TOTAL: 10
+          PERCY_PARALLEL_TOTAL: 15 # 10 for component tests, 5 for e2e
           # Percy's nonce is supposed to be set to run id by default, but it's not. Plus, appending run_number makes it more reliable in case of rerunning
           PERCY_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-        run: yarn run test:cypress --parallel
+        run: yarn run cypress:component --record --parallel --group component
 
       - name: Run Cypress Tests (without percy) ✅
         if: ${{ !(env.IS_PR_JUST_MERGED == 'true' || env.IS_PR_WITH_PERCY == 'true') }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-        run: yarn run test:cypress --parallel
+        run: yarn run cypress:component --record --parallel --group component
 
-      - uses: actions/upload-artifact@v2
-        name: Upload Cypress screenshots if tests failed 🤕
-        if: failure()
+  cypress_tests_e2e:
+    needs: install_and_cache_dependencies
+    strategy:
+      fail-fast: true
+      matrix:
+        group: [1, 2, 3, 4, 5]
+    runs-on: ubuntu-latest # note: macos doesn't have docker installed!
+    container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+
+    env:
+      CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+      CYPRESS_parallel: true
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
         with:
-          name: cypress-screenshots
-          path: |
-            packages/jui/**/__image_snapshots__
-            packages/jui/cypress/videos
-            packages/jui/cypress/screenshots
+          node-version: 16.16.0
+          cache: yarn
+
+      - name: Install Dependencies 🔧
+        run: yarn install --immutable
+
+      - name: Build example-app 🔨
+        run: yarn workspace jui-example-app run build
+
+      - name: Run Cypress Tests ✅
+        if: ${{ env.IS_PR_JUST_MERGED == 'true' || env.IS_PR_WITH_PERCY == 'true' }}
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          # Without this, we would need to "finalize" percy build explicitly. More info: https://docs.percy.io/docs/parallel-test-suites
+          PERCY_PARALLEL_TOTAL: 15 # 10 for component tests, 5 for e2e
+          # Percy's nonce is supposed to be set to run id by default, but it's not. Plus, appending run_number makes it more reliable in case of rerunning
+          PERCY_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+        run: |
+          yarn workspace jui-example-app run serve &
+          yarn run cypress:e2e --record --parallel --group e2e
+      - name: Run Cypress Tests (without percy) ✅
+        if: ${{ !(env.IS_PR_JUST_MERGED == 'true' || env.IS_PR_WITH_PERCY == 'true') }}
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+        run: |
+          yarn workspace jui-example-app run serve &
+          yarn run cypress:e2e --record --parallel --group e2e
 
   # just because there is no way to add a required status check based on a matrix job. In order to avoid adding
   # individual status check for each parallel job. Based on this suggestion:
@@ -129,7 +167,7 @@ jobs:
     name: Succeeded
     if: ${{ always() }}
     runs-on: ubuntu-latest
-    needs: [build_and_test, cypress_tests]
+    needs: [build_and_test, cypress_tests, cypress_tests_e2e]
     steps:
       - run: exit 1
         # see https://stackoverflow.com/a/67532120/4907315

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "type-check": "yarn workspaces foreach run type-check",
     "test": "yarn workspaces foreach run test",
-    "test:cypress": "yarn workspaces foreach run test:cypress",
+    "cypress:component": "yarn workspaces foreach run cypress:component",
+    "cypress:e2e": "yarn workspaces foreach run cypress:e2e",
     "lint": "yarn run lint:lib",
     "lint:lib": "yarn eslint packages/jui",
     "format:check": "prettier packages/jui packages/website .github --check",

packages/example-app/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "../../node_modules/.bin/parcel serve",
+    "dev": "../../node_modules/.bin/parcel serve",
+    "serve": "PORT=1234 ../../node_modules/.bin/serve ./dist",
     "jest:type-check": "tsc --project tsconfig.jest.json",
     "test": "jest",
     "type-check": "tsc --project tsconfig.app.json && yarn run jest:type-check",
@@ -13,7 +14,10 @@
   "alias": {
     "caf": "caf/dist/esm/index.mjs",
     "@intellij-platform/core/utils/tree-utils": "@intellij-platform/core/src/utils/tree-utils",
-    "@intellij-platform/core/utils/array-utils": "@intellij-platform/core/src/utils/array-utils"
+    "@intellij-platform/core/utils/array-utils": "@intellij-platform/core/src/utils/array-utils",
+    "@intellij-platform/core/utils/useEventCallback": "@intellij-platform/core/src/utils/useEventCallback",
+    "@intellij-platform/core/StyledSeparator": "@intellij-platform/core/src/StyledSeparator",
+    "@intellij-platform/core/List/StyledListItem": "@intellij-platform/core/src/List/StyledListItem"
   },
   "dependencies": {
     "@intellij-platform/core": "workspace:^",
@@ -43,6 +47,7 @@
     "@types/jest": "^29.5.2",
     "@types/uuid": "^9.0.7",
     "jest": "^29.5.0",
+    "serve": "^14.2.3",
     "typescript": "workspace:*"
   }
 }

packages/example-app/src/App.tsx

@@ -10,7 +10,7 @@ import {
 } from "@intellij-platform/core";
 import { DefaultSuspense } from "./DefaultSuspense";
 import { Project } from "./Project/Project";
-import { SampleRepoInitializer } from "./SampleRepoInitializer";
+import { ProjectInitializer } from "./ProjectInitializer";
 import { fs, WaitForFs } from "./fs/fs";
 import { exampleAppKeymap } from "./exampleAppKeymap";
 import "./jetbrains-mono-font.css";
@@ -29,7 +29,7 @@ export const App = ({ height }: { height?: CSSProperties["height"] }) => {
     // TODO: add an error boundary
     <DefaultSuspense>
       <WaitForFs>
-        <SampleRepoInitializer>
+        <ProjectInitializer>
           <KeymapProvider keymap={exampleAppKeymap}>
             <RecoilRoot>
               <WindowManager>
@@ -39,7 +39,7 @@ export const App = ({ height }: { height?: CSSProperties["height"] }) => {
               </WindowManager>
             </RecoilRoot>
           </KeymapProvider>
-        </SampleRepoInitializer>
+        </ProjectInitializer>
       </WaitForFs>
     </DefaultSuspense>
   );

packages/example-app/src/Editor/EditorZeroState.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  CommonActionId,
+  styled,
+  useAction,
+  useGetActionShortcut,
+} from "@intellij-platform/core";
+
+const StyledContainer = styled.div.attrs({ tabIndex: -1 })`
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  justify-content: center;
+  padding: 0 25%;
+  font-size: 1rem;
+  outline: none;
+`;
+
+const StyledLine = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+`;
+
+const StyledShortcut = styled.div`
+  color: ${({ theme }) => theme.commonColors.linkForegroundEnabled};
+`;
+
+export function EditorZeroState() {
+  return (
+    <StyledContainer>
+      <ActionTip actionId={CommonActionId.GO_TO_FILE} />
+      <ActionTip actionId={CommonActionId.GO_TO_ACTION} />
+    </StyledContainer>
+  );
+}
+
+function ActionTip({ actionId }: { actionId: string }) {
+  const getShortcut = useGetActionShortcut();
+  const action = useAction(actionId);
+  return (
+    <StyledLine>
+      {action?.title}
+      <StyledShortcut>{getShortcut(actionId)}</StyledShortcut>
+    </StyledLine>
+  );
+}