fix lerna bootstrap (editor v)

fix build (separate output dir for playground)
fix topicShape test
fix topicFontChange test
update/add snapshots

.gitignore

@@ -50,3 +50,5 @@ Thumbs.db
 
 **/build/**/*
 .vscode
+
+*/test/playground/dist

bitbucket-pipelines.yml

@@ -17,7 +17,6 @@ pipelines:
             - cypress
           script:
             - export CYPRESS_imageSnaphots="true"
-            - yarn install
             - yarn bootstrap
             - yarn build
             - yarn lint

docker-compose.snapshots.update.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:8.4.1
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

docker-compose.snapshots.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:8.4.1
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

packages/editor/cypress/integration/topicFontChange.test.js

@@ -1,4 +1,6 @@
 context('Edit Topic', () => {
+  // TODO: review why click({force: true}) is needed in these tests
+  // also, why is the element outside the viewport in screenshots?
   beforeEach(() => {
     cy.visit('/editor.html');
     cy.reload();
@@ -13,40 +15,32 @@ context('Edit Topic', () => {
 
   it('Change Font Size', () => {
     cy.get('#fontSizeTip').click();
-    cy.get('#small').click();
+    cy.get('.popover #small').click();
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.0625');
-
     cy.matchImageSnapshot('changeFontSizeSmall');
 
     cy.get('#fontSizeTip').click();
-    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
     cy.get('.popover #normal').click({ force: true });
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.75');
-
     cy.matchImageSnapshot('changeFontSizeNormal');
 
     cy.get('#fontSizeTip').click();
-    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
-    cy.get('#large').click({ force: true });
+    cy.get('.popover #large').click({ force: true });
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4375');
-
-    cy.matchImageSnapshot('changeFontSizeNormal');
+    cy.matchImageSnapshot('changeFontSizeLarge');
 
     cy.get('#fontSizeTip').click();
-    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
-    cy.get('#huge').click({ force: true });
+    cy.get('.popover #huge').click({ force: true });
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.15625');
-
     cy.matchImageSnapshot('changeFontSizeHuge');
   });
 
   it('Change Font type', () => {
     cy.get('#fontFamilyTip').click();
-    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
     cy.get('[model="Times"]').click({ force: true });
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
@@ -64,7 +58,6 @@ context('Edit Topic', () => {
 
   it('Change Font color', () => {
     cy.get('#fontColorTip').click();
-    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
     cy.get('[title="RGB (153, 0, 255)"]').click({ force: true });
 
     cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', 'rgb(153, 0, 255)');

packages/editor/cypress/integration/topicManager.test.js

@@ -4,8 +4,6 @@ context('Node manager', () => {
   });
 
   it('shortcut add sibling node', () => {
-    // TODO: why is the editor appearing twice in the snapshot?
-    // cy.matchImageSnapshot('editor');
     cy.contains('Mind Mapping').click();
     cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
 

packages/editor/cypress/integration/topicShape.test.js

@@ -9,9 +9,7 @@ context('Change Topic shape', () => {
     cy.get('#topicShapeTip').click();
     cy.get('#rectagle').click();
 
-    cy.get('[test-id=11] > rect').each((element, index, $list) => {
-      cy.get($list[1]).invoke('attr', 'rx').should('eq', '0');
-    });
+    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '0');
 
     cy.matchImageSnapshot('changeToSquareShape');
   });
@@ -21,9 +19,7 @@ context('Change Topic shape', () => {
     // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
     cy.get('#rounded_rectagle').click({ force: true });
 
-    cy.get('[test-id=11] > rect').each((element, index, $list) => {
-      cy.get($list[1]).invoke('attr', 'rx').should('eq', '4.6499999999999995');
-    });
+    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '4.05');
 
     cy.matchImageSnapshot('changeToRoundedRectagle');
   });
@@ -41,9 +37,7 @@ context('Change Topic shape', () => {
     // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
     cy.get('#elipse').click({ force: true });
 
-    cy.get('[test-id=11] > rect').each((element, index, $list) => {
-      cy.get($list[1]).invoke('attr', 'rx').should('eq', '13.950000000000001');
-    });
+    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '12.15');
 
     cy.matchImageSnapshot('changeToElipseShape');
   });

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wisemapping/editor",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "main": "dist/editor.bundle.js",
   "scripts": {
     "build": "webpack --config webpack.prod.js",

packages/editor/webpack.playground.js

@@ -8,13 +8,12 @@ const { merge } = require('webpack-merge');
 const playgroundConfig = {
   mode: 'development',
   entry: {
-    "editor.bundle": path.join(__dirname, 'src', 'index.tsx'),
     viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'),
     embedded: path.resolve(__dirname, './test/playground/map-render/js/embedded'),
     editor: path.resolve(__dirname, './test/playground/map-render/js/editor'),
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'test/playground/dist'),
     filename: '[name].js',
     library: {
       type: 'umd',
@@ -24,7 +23,6 @@ const playgroundConfig = {
     historyApiFallback: true,
     port: 8081,
     open: false,
-    writeToDisk: true,
   },
   module: {
     rules: [

packages/mindplot/webpack.playground.js

@@ -8,14 +8,19 @@ const common = require('./webpack.common');
 const playgroundConfig = {
   mode: 'development',
   entry: {
-    mindplot: path.resolve(__dirname, './src/index.js'),
     layout: path.resolve(__dirname, './test/playground/layout/context-loader'),
   },
+  output: {
+    path: path.resolve(__dirname, 'test/playground/dist'),
+    filename: '[name].js',
+    library: {
+      type: 'umd',
+    },
+  },
   devServer: {
     historyApiFallback: true,
     port: 8083,
     open: false,
-    writeToDisk: true,
   },
   module: {
     rules: [

packages/web2d/webpack.playground.js

@@ -20,7 +20,7 @@ module.exports = {
     image: './test/playground/image.js',
   },
   output: {
-    path: path.resolve(__dirname, 'dist', 'tests'),
+    path: path.resolve(__dirname, 'test/playground/dist'),
     filename: '[name].js',
     publicPath: '/',
   },