Slate, webpack, toastify and cypress

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
       },
     ],
     'unicorn/prefer-string-slice': 'error',
+    'react/no-unknown-property': ['error', { ignore: ['css', 'bold', 'italic', 'delete'] }],
   },
   plugins: ['babel', '@emotion', 'cypress', 'unicorn'],
   settings: {

.github/workflows/nodejs.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '*'
+          node-version: 18
           check-latest: true
         if: ${{ needs.changes.outputs.cms == 'true' }}
       - name: log versions
@@ -73,7 +73,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '*'
+          node-version: 18
           check-latest: true
           cache: yarn
         if: ${{ needs.changes.outputs.cms == 'true' }}

babel.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const { extendDefaultPlugins } = require('svgo');
 
 const appVersion = require('./packages/netlify-cms-app/package.json').version;
 const coreVersion = require('./packages/netlify-cms-core/package.json').version;
@@ -28,12 +27,16 @@ const defaultPlugins = [
 ];
 
 const svgo = {
-  plugins: extendDefaultPlugins([
+  plugins: [
     {
-      name: 'removeViewBox',
-      active: false,
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false,
+        },
+      },
     },
-  ]),
+  ],
 };
 
 function presets() {
@@ -83,7 +86,7 @@ function plugins() {
   }
 
   if (!isProduction) {
-    return [...defaultPlugins, 'react-hot-loader/babel'];
+    return [...defaultPlugins];
   }
 
   return defaultPlugins;

cypress.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  projectId: '1c35bs',
+  retries: {
+    runMode: 4,
+    openMode: 0,
+  },
+  e2e: {
+    video: false,
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'cypress/e2e/*spec*.js',
+  },
+});

cypress/integration/common/i18n.js → cypress/e2e/common/i18n.js

@@ -34,7 +34,7 @@ export const updateTranslation = () => {
 
     enterTranslation('de de');
   });
-  flushClockAndSave();
+  cy.contains('button', 'Save').click();
 };
 
 export const assertTranslation = () => {

cypress/integration/common/media_library.js → cypress/e2e/common/media_library.js

@@ -16,8 +16,8 @@ import { workflowStatus } from '../../utils/constants';
 function uploadMediaFile() {
   assertNoImagesInLibrary();
 
-  const fixture = 'media/netlify.png';
-  cy.get('input[type="file"]').attachFile(fixture);
+  const fixture = 'cypress/fixtures/media/netlify.png';
+  cy.get('input[type="file"]').selectFile(fixture, { force: true });
   cy.contains('span', 'Uploading...').should('not.exist');
 
   assertImagesInLibrary();
@@ -41,6 +41,7 @@ function deleteImage() {
 }
 
 function chooseSelectedMediaFile() {
+  cy.contains('button', 'Choose selected').should('not.be.disabled');
   cy.contains('button', 'Choose selected').click();
 }
 
@@ -49,6 +50,7 @@ function chooseAnImage() {
 }
 
 function waitForEntryToLoad() {
+  cy.contains('button', 'Saving...').should('not.exist');
   cy.contains('div', 'Loading entry...').should('not.exist');
 }
 
@@ -71,6 +73,8 @@ function newPostWithImage(entry) {
 
 function publishPostWithImage(entry) {
   newPostWithImage(entry);
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(500);
   exitEditor();
   goToWorkflow();
   updateWorkflowStatus(entry, workflowStatus.draft, workflowStatus.ready);

cypress/integration/i18n_simple_workflow_spec_proxy_fs_backend.js → cypress/e2e/i18n_simple_workflow_spec_proxy_fs_backend.js

@@ -33,11 +33,11 @@ en:
   template: post
   date: 1970-01-01T00:00:00.000Z
   title: first title
+  body: first body
   description: first description
   category: first category
   tags:
     - tag1
-  body: first body
 de:
   date: 1970-01-01T00:00:00.000Z
   title: de

cypress/integration/markdown_widget_backspace_spec.js → cypress/e2e/markdown_widget_backspace_spec.js

@@ -5,18 +5,19 @@ describe('Markdown widget', () => {
   before(() => {
     Cypress.config('defaultCommandTimeout', 4000);
     cy.task('setupBackend', { backend: 'test' });
-    cy.loginAndNewPost();
+
   });
 
   beforeEach(() => {
+    cy.loginAndNewPost();
     cy.clearMarkdownEditorContent();
   });
 
   after(() => {
     cy.task('teardownBackend', { backend: 'test' });
   });
 
-  describe('pressing backspace', () => {
+  // describe('pressing backspace', () => {
     it('sets non-default block to default when empty', () => {
       cy.focused()
         .clickHeadingOneButton()
@@ -88,6 +89,6 @@ describe('Markdown widget', () => {
         .confirmMarkdownEditorContent(`
           <p>foobarbaz</p>
         `);
-    });
+    // });
   });
 });

cypress/e2e/markdown_widget_code_block_spec.js

@@ -0,0 +1,135 @@
+import { oneLineTrim, stripIndent } from 'common-tags';
+import '../utils/dismiss-local-backup';
+
+describe('Markdown widget code block', () => {
+  before(() => {
+    Cypress.config('defaultCommandTimeout', 4000);
+    cy.task('setupBackend', { backend: 'test' });
+  });
+
+  beforeEach(() => {
+    cy.loginAndNewPost();
+    cy.clearMarkdownEditorContent();
+  });
+
+  after(() => {
+    cy.task('teardownBackend', { backend: 'test' });
+  });
+  describe('code block', () => {
+    it('outputs code', () => {
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy
+        .insertCodeBlock()
+        .type('foo')
+        .enter()
+        .type('bar')
+        .confirmMarkdownEditorContent(
+          `
+          ${codeBlock(`
+            foo
+            bar
+          `)}
+        `,
+        )
+        .wait(500)
+        .clickModeToggle().confirmMarkdownEditorContent(`
+          ${codeBlockRaw(`
+            foo
+            bar
+          `)}
+        `);
+    });
+  });
+});
+
+function codeBlockRaw(content) {
+  return ['```', ...stripIndent(content).split('\n'), '```']
+    .map(
+      line => oneLineTrim`
+    <div>
+      <span>
+        <span>
+          <span>${line}</span>
+        </span>
+      </span>
+    </div>
+  `,
+    )
+    .join('');
+}
+
+function codeBlock(content) {
+  const lines = stripIndent(content)
+    .split('\n')
+    .map(
+      (line, idx) => `
+    <div>
+      <div>
+        <div>${idx + 1}</div>
+      </div>
+      <pre><span>${line}</span></pre>
+    </div>
+  `,
+    )
+    .join('');
+
+  return oneLineTrim`
+    <div>
+      <div></div>
+      <div>
+        <div><label>Code Block </label>
+          <div><button><span><svg>
+                  <path></path>
+                </svg></span></button>
+            <div>
+              <div>
+                <div><textarea></textarea></div>
+                <div>
+                  <div></div>
+                </div>
+                <div>
+                  <div></div>
+                </div>
+                <div></div>
+                <div></div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <div>
+                            <pre><span>xxxxxxxxxx</span></pre>
+                          </div>
+                          <div></div>
+                          <div></div>
+                          <div>
+                            <div> </div>
+                          </div>
+                          <div>
+                            ${lines}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div></div>
+                  <div>
+                    <div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+            <span>
+                <span>
+                    <span></span>
+                </span>
+            </span>
+        </div>
+      </div>
+      <div></div>
+    </div>
+  `;
+}

cypress/integration/markdown_widget_enter_spec.js → cypress/e2e/markdown_widget_enter_spec.js

@@ -4,10 +4,11 @@ describe('Markdown widget breaks', () => {
   before(() => {
     Cypress.config('defaultCommandTimeout', 4000);
     cy.task('setupBackend', { backend: 'test' });
-    cy.loginAndNewPost();
+
   });
 
   beforeEach(() => {
+    cy.loginAndNewPost();
     cy.clearMarkdownEditorContent();
   });
 
@@ -88,7 +89,7 @@ describe('Markdown widget breaks', () => {
         .enter({ shift: true })
         .confirmMarkdownEditorContent(`
           <p>
-            <br>
+
           </p>
         `);
     });
@@ -97,10 +98,7 @@ describe('Markdown widget breaks', () => {
         .enter({ shift: true, times: 4 })
         .confirmMarkdownEditorContent(`
           <p>
-            <br>
-            <br>
-            <br>
-            <br>
+
           </p>
         `);
     });

cypress/integration/markdown_widget_hotkeys_spec.js → cypress/e2e/markdown_widget_hotkeys_spec.js

@@ -3,18 +3,18 @@ import {HOT_KEY_MAP} from "../utils/constants";
 const headingNumberToWord = ['', 'one', 'two', 'three', 'four', 'five', 'six'];
 const isMac = Cypress.platform === 'darwin';
 const modifierKey = isMac ? '{meta}' : '{ctrl}';
+// eslint-disable-next-line func-style
 const replaceMod = (str) => str.replace(/mod\+/g, modifierKey).replace(/shift\+/g, '{shift}');
 
-describe('Markdown widget', () => {
+describe('Markdown widget hotkeys', () => {
   describe('hot keys', () => {
     before(() => {
       Cypress.config('defaultCommandTimeout', 4000);
       cy.task('setupBackend', { backend: 'test' });
-      cy.loginAndNewPost();
-
     });
 
     beforeEach(() => {
+      cy.loginAndNewPost();
       cy.clearMarkdownEditorContent();
       cy.focused()
         .type('foo')
@@ -77,15 +77,18 @@ describe('Markdown widget', () => {
 
     describe('link', () => {
       before(() => {
-        cy.window().then((win) => {
-          cy.stub(win, 'prompt').returns('https://google.com');
-        });
+
       });
       it('pressing mod+k transforms the text to a link', () => {
-        cy.get('@selection')
+        cy.window().then((win) => {
+          cy.get('@selection')
           .type(replaceMod(HOT_KEY_MAP['link']))
-          .confirmMarkdownEditorContent('<p><a>foo</a></p>')
+          cy.stub(win, 'prompt').returns('https://google.com');
+          cy.confirmMarkdownEditorContent('<p><a>foo</a></p>')
           .type(replaceMod(HOT_KEY_MAP['link']));
+        });
+
+
       });
     });