HumanSignal · juliosgarbi · Nov 20, 2023 · Nov 1, 2023 · Nov 7, 2023 · Nov 9, 2023
diff --git a/web/.gitignore b/web/.gitignore
@@ -75,6 +75,7 @@ libs/editor/.env.production.local
 
 # Testing
 libs/editor/coverage/
+libs/editor/tests/e2e/output/
 
 # codecept screenshots
 libs/editor/e2e/output

diff --git a/web/apps/labelstudio-e2e/project.json b/web/apps/labelstudio-e2e/project.json
@@ -8,7 +8,7 @@
       "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/labelstudio-e2e/cypress.config.ts",
-        "devServerTarget": "labelstudio:serve:development",
+        "baseUrl": "http://localhost:8080/",
         "testingType": "e2e"
       },
       "configurations": {

diff --git a/web/apps/labelstudio-e2e/src/e2e/app.cy.ts b/web/apps/labelstudio-e2e/src/e2e/app.cy.ts
@@ -1,13 +1 @@
-import { getGreeting } from '../support/app.po';
 
-describe('labelstudio', () => {
-  beforeEach(() => cy.visit('/'));
-
-  it('should display welcome message', () => {
-    // Custom command example, see `../support/commands.ts` file
-    cy.login('my-email@something.com', 'myPassword');
-
-    // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome labelstudio');
-  });
-});
diff --git a/web/apps/labelstudio-e2e/src/fixtures/example.json b/web/apps/labelstudio-e2e/src/fixtures/example.json
diff --git a/web/apps/labelstudio-e2e/src/support/app.po.ts b/web/apps/labelstudio-e2e/src/support/app.po.ts
diff --git a/web/apps/labelstudio-e2e/src/support/commands.ts b/web/apps/labelstudio-e2e/src/support/commands.ts
@@ -1,33 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-declare namespace Cypress {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface Chainable<Subject> {
-    login(email: string, password: string): void;
-  }
-}
-//
-// -- This is a parent command --
-Cypress.Commands.add('login', (email, password) => {
-  console.log('Custom command example: Login', email, password);
-});
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

diff --git a/web/apps/labelstudio/project.json b/web/apps/labelstudio/project.json
@@ -74,7 +74,7 @@
         "buildTarget": "labelstudio:build"
       }
     },
-    "test": {
+    "unit": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {

diff --git a/web/libs/datamanager/.env.build b/web/libs/datamanager/.env.build
diff --git a/web/libs/datamanager/.env.example b/web/libs/datamanager/.env.example
@@ -1,2 +1,4 @@
-# API_GATEWAY=http://[ls-hostname]/api/dm
-# LS_ACCESS_TOKEN=[your LS token here]
+API_GATEWAY=http://[ls-hostname]/api/dm
+LS_ACCESS_TOKEN=[your LS token here]
+CSS_PREFIX=[prefix for your css classes with trailing dash]
+APP_FOLDER=libs/datamanager/
diff --git a/web/libs/datamanager/project.json b/web/libs/datamanager/project.json
@@ -24,7 +24,7 @@
         "lintFilePatterns": ["libs/datamanager/**/*.{ts,tsx,js,jsx}"]
       }
     },
-    "test": {
+    "unit": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {

diff --git a/web/libs/editor/.env.build b/web/libs/editor/.env.build
diff --git a/web/libs/editor/project.json b/web/libs/editor/project.json
@@ -47,11 +47,11 @@
         }
       }
     },
-    "test": {
+    "unit": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "libs/editor/jest.config.ts",
+        "jestConfig": "libs/editor/jest.config.js",
         "passWithNoTests": true
       },
       "configurations": {

diff --git a/web/libs/editor/src/components/AnnotationsCarousel/__tests__/AnnotationButton.test.tsx b/web/libs/editor/src/components/AnnotationsCarousel/__tests__/AnnotationButton.test.tsx
@@ -18,12 +18,12 @@ describe('AnnotationsButton', () => {
     const entity = annotationStore.annotations[0];
     const view = mount(<AnnotationButton entity={entity} capabilities={{}} annotationStore={annotationStore} />);
 
-    expect(view.find('.dm-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
+    expect(view.find('.lsf-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
   });
   test('Prediction', () => {
     const entity = annotationStore.predictions[0];
     const view = mount(<AnnotationButton entity={entity} capabilities={{}} annotationStore={annotationStore} />);
-    
-    expect(view.find('.dm-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
+
+    expect(view.find('.lsf-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
   });
 });
diff --git a/web/libs/editor/src/components/AnnotationsCarousel/__tests__/AnnotationsCarousel.test.tsx b/web/libs/editor/src/components/AnnotationsCarousel/__tests__/AnnotationsCarousel.test.tsx
@@ -16,6 +16,6 @@ jest.mock('react', () => ({
 
 test('AnnotationsCarousel', async () => {
   const view = mount(<AnnotationsCarousel annotationStore={annotationStore} store={store} />);
-  
-  expect(view.find('.dm-annotations-carousel__carosel').children().length).toBe(9);
+
+  expect(view.find('.lsf-annotations-carousel__carosel').children().length).toBe(9);
 });
diff --git a/web/libs/editor/src/components/Filter/__tests__/Filter.test.tsx b/web/libs/editor/src/components/Filter/__tests__/Filter.test.tsx
@@ -150,7 +150,7 @@ describe('Filter', () => {
 
     const dropdown = await filter.getByTestId('dropdown');
 
-    expect(dropdown.classList.contains('dm-visible')).toBe(true);
+    expect(dropdown.classList.contains('lsf-visible')).toBe(true);
 
     const AddButton = await filter.getByText('Add Filter');
 
@@ -160,9 +160,9 @@ describe('Filter', () => {
 
     await new Promise((resolve) => setTimeout(resolve, 100));
 
-    expect(dropdown.classList.contains('dm-before-appear')).toBe(false);
-    expect(dropdown.classList.contains('dm-visible')).toBe(false);
-    expect(dropdown.classList.contains('dm-before-disappear')).toBe(false);
+    expect(dropdown.classList.contains('lsf-before-appear')).toBe(false);
+    expect(dropdown.classList.contains('lsf-visible')).toBe(false);
+    expect(dropdown.classList.contains('lsf-before-disappear')).toBe(false);
   });
 
   test('Should show filter length badge', () => {
@@ -217,6 +217,6 @@ describe('Filter', () => {
 
     fireEvent.click(FilterButton);
 
-    expect(FilterButton.classList.contains('dm-filter-button_active')).toBe(true);
+    expect(FilterButton.classList.contains('lsf-filter-button_active')).toBe(true);
   });
 });
diff --git a/web/libs/editor/src/components/SidePanels/__tests__/PanelBase.test.tsx b/web/libs/editor/src/components/SidePanels/__tests__/PanelBase.test.tsx
@@ -89,10 +89,10 @@ describe('PanelBase', () => {
       </PanelBase>
     </div>);
 
-    expect(view.find('.dm-panel__title').text()).toBe(panelName);
-    expect(view.find('.dm-panel__body .dm-details').text()).toBe(sampleContent);
+    expect(view.find('.lsf-panel__title').text()).toBe(panelName);
+    expect(view.find('.lsf-panel__body .lsf-details').text()).toBe(sampleContent);
     expect(isCurrentlyExpanded).toBe(true);
-    view.find('.dm-panel__toggle').simulate('click');
+    view.find('.lsf-panel__toggle').simulate('click');
     expect(isCurrentlyExpanded).toBe(false);
   });
 });
diff --git a/web/nx.json b/web/nx.json
@@ -1,18 +1,6 @@
 {
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "tasksRunnerOptions": {
-    "default": {
-      "runner": "nx-cloud",
-      "options": {
-        "cacheableOperations": [
-          "build",
-          "lint",
-          "test",
-          "e2e"
-        ],
-        "accessToken": "YWU2NWZlYjItYzI2MS00MDcwLThhNzQtMDM0ZDZjMTdjNWZifHJlYWQtd3JpdGU="
-      }
-    }
   },
   "targetDefaults": {
     "build": {

diff --git a/web/package.json b/web/package.json
@@ -4,14 +4,21 @@
   "license": "MIT",
   "scripts": {
     "ls:watch": "nx run labelstudio:build:development --watch",
+    "ls:unit": "nx run labelstudio:unit",
+    "ls:e2e": "nx run labelstudio-e2e:e2e",
     "lsf:watch": "nx run editor:build:development --watch",
     "lsf:serve": "nx run editor:serve:development",
-    "lsf:e2e": "cd libs/editor/tests/e2e && npm run test",
+    "lsf:e2e": "cd libs/editor/tests/e2e && yarn test",
     "lsf:integration": "nx run editor:integration",
     "lsf:integration:watch": "nx run editor:integration --watch",
+    "lsf:unit": "nx run editor:unit",
     "dm:watch": "nx run datamanager:build:development --watch",
+    "dm:unit": "nx run datamanager:unit",
     "build": "nx run editor:build:production && nx run datamanager:build:production && nx run labelstudio:build:production",
-    "test": "nx run labelstudio:test:ci"
+    "test:unit": "yarn lsf:unit && yarn ls:unit && yarn dm:unit",
+    "test:e2e": "yarn ls:e2e && yarn lsf:e2e",
+    "test:integration": "yarn lsf:integration",
+    "postinstall": "cd libs/editor && bash scripts/postinstall.sh"
   },
   "private": true,
   "dependencies": {
@@ -23,6 +30,7 @@
     "@reecelucas/react-use-hotkeys": "^1.3.1",
     "@swc/helpers": "0.5.3",
     "@thi.ng/rle-pack": "^3.1.30",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "antd": "^4.3.3",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -34,8 +42,10 @@
     "deep-equal": "^2.0.5",
     "dotenv-defaults": "^2.0.2",
     "emoji-regex": "^7.0.3",
+    "enzyme": "^3.11.0",
     "husky": "^3.1.0",
     "insert-after": "^0.1.4",
+    "jest-fetch-mock": "^3.0.3",
     "keymaster": "^1.6.2",
     "konva": "^8.1.3",
     "lint-staged": "^9.5.0",
@@ -85,6 +95,8 @@
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.12.13",
+    "@cypress/code-coverage": "^3.10.0",
+    "@cypress/webpack-preprocessor": "^5.17.0",
     "@nrwl/react": "17.0.3",
     "@nx/cypress": "17.0.3",
     "@nx/eslint-plugin": "17.0.3",
@@ -102,7 +114,7 @@
     "@swc-node/register": "~1.6.7",
     "@swc/cli": "~0.1.62",
     "@swc/core": "1.3.96",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "^14.1.2",
     "@types/chroma-js": "^2.1.3",
     "@types/jest": "^29.4.0",
     "@types/mini-css-extract-plugin": "^2.5.1",
@@ -116,11 +128,17 @@
     "@typescript-eslint/parser": "5.62.0",
     "babel-jest": "^29.4.1",
     "babel-loader": "^8.2.2",
+    "chai": "^4.3.7",
     "chroma-js": "^2.1.1",
     "codemirror": "^5.59.4",
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^3.0.2",
     "cypress": "^12.11.0",
+    "cypress-image-snapshot": "^4.0.1",
+    "cypress-multi-reporters": "^1.6.2",
+    "cypress-parallel": "^0.12.0",
+    "cypress-plugin-snapshots": "^1.4.4",
+    "cypress-terminal-report": "^5.1.1",
     "date-fns": "^2.20.1",
     "eslint": "8.46.0",
     "eslint-config-prettier": "9.0.0",
@@ -136,8 +154,11 @@
     "lodash.clonedeep": "^4.5.0",
     "nx": "17.0.3",
     "nx-cloud": "16.5.2",
+    "pixelmatch": "^5.3.0",
     "pleasejs": "^0.4.2",
+    "pngjs": "^7.0.0",
     "prettier": "^2.6.2",
+    "proper-lockfile": "^4.1.2",
     "react-codemirror2": "^7.2.1",
     "react-icons": "^4.2.0",
     "react-refresh": "^0.10.0",
@@ -150,24 +171,13 @@
     "stylus-loader": "^5.0.0",
     "truncate-middle": "^1.0.6",
     "ts-jest": "^29.1.0",
+    "ts-loader": "^9.4.2",
     "ts-node": "10.9.1",
     "typescript": "4.8.3",
     "url-loader": "^4.1.1",
-    "xpath-range": "^1.1.1",
-    "@cypress/code-coverage": "^3.10.0",
-    "@cypress/webpack-preprocessor": "^5.17.0",
-    "chai": "^4.3.7",
-    "cypress-image-snapshot": "^4.0.1",
-    "cypress-multi-reporters": "^1.6.2",
-    "cypress-parallel": "^0.12.0",
-    "cypress-plugin-snapshots": "^1.4.4",
-    "cypress-terminal-report": "^5.1.1",
-    "pixelmatch": "^5.3.0",
-    "pngjs": "^7.0.0",
-    "proper-lockfile": "^4.1.2",
-    "ts-loader": "^9.4.2",
     "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1",
+    "xpath-range": "^1.1.1",
     "yargs": "^17.7.1"
   },
   "babel": {
@@ -198,4 +208,3 @@
   },
   "packageManager": "yarn@3.6.0"
 }
-