test: [TOL-1361] Rich Text editor component tests

.circleci/config.yml

@@ -61,38 +61,6 @@ jobs:
       - store_test_results:
           path: reports
 
-  integration-tests:
-    parameters:
-      executor:
-        type: executor
-      browser:
-        type: enum
-        # firefox has been disabled temporarily until further investigation
-        enum: [chrome, edge]
-
-    parallelism: 3
-    executor: << parameters.executor >>
-    steps:
-      - checkout
-      - yarn_install
-      - run: yarn build
-      - run: yarn build-storybook
-      - yarn_serve
-      - run:
-          command: |
-            TESTFILES=$(circleci tests glob "cypress/e2e/**/*.ts" | circleci tests split --split-by=timings --timings-type=filename | awk '{if (NR>1) printf ","; printf "%s", $0} END {if (NR>0) printf " "}')
-            npx cypress run \
-              --spec "${TESTFILES}" \
-              --reporter junit \
-              --reporter-options "mochaFile=./cypress/reports/e2e/test-results.[hash].xml" \
-              --browser << parameters.browser >>
-      - store_test_results:
-          path: cypress/reports/e2e
-      - store_artifacts:
-          path: cypress/screenshots
-      - store_artifacts:
-          path: cypress/videos
-
   component-tests:
     parallelism: 3
     executor: linux-cypress
@@ -140,15 +108,6 @@ workflows:
           context: vault
       - component-tests:
           context: vault
-      - integration-tests:
-          name: integration-<< matrix.executor >>-<< matrix.browser >>
-          context: vault
-          matrix:
-            alias: integration-tests-linux
-            parameters:
-              executor: [linux-cypress]
-              # firefox has been disabled temporarily until further investigation
-              browser: [chrome, edge]
       - release:
           context: vault
           filters:
@@ -157,4 +116,3 @@ workflows:
           requires:
             - lint
             - unit-tests
-            - integration-tests-linux

cypress.config.ts

@@ -78,7 +78,7 @@ export default defineConfig({
         module: {
           rules: [
             {
-              test: /\.tsx?$/,
+              test: /\.t|jsx?$/,
               exclude: [/node_modules/],
               use: [
                 {

cypress/e2e/rich-text/RichTextEditor.Commands.spec.ts → cypress/component/rich-text/RichTextEditor.Commands.spec.ts

@@ -1,10 +1,9 @@
-/* eslint-disable mocha/no-setup-in-describe */
-
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 
 import { block, document as doc, text } from '../../../packages/rich-text/src/helpers/nodeFactory';
-import { getIframe } from '../../fixtures/utils';
+import { createRichTextFakeSdk } from '../../fixtures';
 import { RichTextPage } from './RichTextPage';
+import { mountRichTextEditor } from './utils';
 
 // the sticky toolbar gets in the way of some of the tests, therefore
 // we increase the viewport height to fit the whole page on the screen
@@ -15,12 +14,12 @@ describe('Rich Text Editor - Commands', { viewportHeight: 2000 }, () => {
   beforeEach(() => {
     cy.viewport(1000, 2000);
     richText = new RichTextPage();
-    richText.visit();
+    mountRichTextEditor();
   });
 
   describe('Palette', () => {
-    const getPalette = () => getIframe().findByTestId('rich-text-commands');
-    const getCommandList = () => getIframe().findByTestId('rich-text-commands-list');
+    const getPalette = () => cy.findByTestId('rich-text-commands');
+    const getCommandList = () => cy.findByTestId('rich-text-commands-list');
 
     it('should be visible', () => {
       richText.editor.click().type('/');
@@ -60,7 +59,7 @@ describe('Rich Text Editor - Commands', { viewportHeight: 2000 }, () => {
     it('should embed entry', () => {
       richText.editor.click().type('/');
       getCommandList().findByText('Embed Example Content Type').click();
-      getCommandList().findByText('Hello world').click();
+      getCommandList().findByText('The best article ever').click();
 
       //this is used instead of snapshot value because we have randomized entry IDs
       richText.getValue().should((doc) => {
@@ -73,7 +72,7 @@ describe('Rich Text Editor - Commands', { viewportHeight: 2000 }, () => {
     it('should embed inline', () => {
       richText.editor.click().type('/');
       getCommandList().findByText('Embed Example Content Type - Inline').click();
-      getCommandList().findByText('Hello world').click();
+      getCommandList().findByText('The best article ever').click();
 
       //this is used instead of snapshot value because we have randomized entry IDs
       richText.getValue().should((doc) => {
@@ -102,7 +101,7 @@ describe('Rich Text Editor - Commands', { viewportHeight: 2000 }, () => {
     it('should delete command after embedding', () => {
       richText.editor.click().type('/');
       getCommandList().findByText('Embed Example Content Type').click();
-      getCommandList().findByText('Hello world').click();
+      getCommandList().findByText('The best article ever').click();
 
       richText.editor.children().contains('/').should('not.exist');
     });
@@ -174,13 +173,14 @@ describe('Rich Text Editor - Commands', { viewportHeight: 2000 }, () => {
     });
 
     it('should be disabled without any action item', () => {
-      // disable embedded entries/assets
-      cy.setFieldValidations([
-        {
-          enabledNodeTypes: ['heading-1'],
-        },
-      ]);
-      cy.reload();
+      const sdk = createRichTextFakeSdk({
+        validations: [
+          {
+            enabledNodeTypes: ['heading-1'],
+          },
+        ],
+      });
+      mountRichTextEditor({ sdk, actionsDisabled: true });
 
       // try to open command prompt
       richText.editor.click().type('/');
@@ -218,8 +218,6 @@ describe('Rich Text Editor - Commands', { viewportHeight: 2000 }, () => {
           },
         ],
       });
-      // Clear validations after the test
-      cy.setFieldValidations([]);
     });
   });
 });

cypress/e2e/rich-text/RichTextEditor.EmbeddedAssetBlocks.spec.ts → cypress/component/rich-text/RichTextEditor.EmbeddedAssetBlocks.spec.ts

@@ -1,58 +1,22 @@
-/* eslint-disable mocha/no-setup-in-describe */
-
 import { BLOCKS } from '@contentful/rich-text-types';
 
 import { block, document as doc, text } from '../../../packages/rich-text/src/helpers/nodeFactory';
-import { getIframe } from '../../fixtures/utils';
+import { mod } from '../../fixtures/utils';
+import { KEYS, assetBlock, emptyParagraph, paragraphWithText } from './helpers';
 import { RichTextPage } from './RichTextPage';
+import { mountRichTextEditor } from './utils';
 
 // the sticky toolbar gets in the way of some of the tests, therefore
 // we increase the viewport height to fit the whole page on the screen
 
 describe('Rich Text Editor - Embedded Entry Assets', { viewportHeight: 2000 }, () => {
   let richText: RichTextPage;
-
-  // copied from the 'is-hotkey' library we use for RichText shortcuts
-  const IS_MAC =
-    typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-  const mod = IS_MAC ? 'meta' : 'control';
-  const buildHelper =
-    (type) =>
-    (...children) =>
-      block(type, {}, ...children);
-  const paragraph = buildHelper(BLOCKS.PARAGRAPH);
-  const paragraphWithText = (t) => paragraph(text(t, []));
-  const emptyParagraph = () => paragraphWithText('');
   const expectDocumentToBeEmpty = () => richText.expectValue(undefined);
 
-  const keys = {
-    enter: { keyCode: 13, which: 13, key: 'Enter' },
-    backspace: { keyCode: 8, which: 8, key: 'Backspace' },
-  };
-
-  function pressEnter() {
-    richText.editor.trigger('keydown', keys.enter);
-  }
-
-  const assetBlock = () =>
-    block(BLOCKS.EMBEDDED_ASSET, {
-      target: {
-        sys: {
-          id: 'example-entity-id',
-          type: 'Link',
-          linkType: 'Asset',
-        },
-      },
-    });
-
   beforeEach(() => {
     richText = new RichTextPage();
-    richText.visit();
-    cy.shouldConfirm(true);
-  });
 
-  afterEach(() => {
-    cy.unsetShouldConfirm();
+    mountRichTextEditor();
   });
 
   const methods: [string, () => void][] = [
@@ -76,9 +40,8 @@ describe('Rich Text Editor - Embedded Entry Assets', { viewportHeight: 2000 }, (
         richText.editor.click();
         triggerEmbeddedAsset();
 
-        richText.editor.find('[data-entity-id="example-entity-id"]').click();
-
-        richText.editor.trigger('keydown', keys.enter);
+        richText.editor.find('[data-entity-id="published_asset"]').click();
+        richText.editor.trigger('keydown', KEYS.enter);
 
         richText.expectValue(doc(emptyParagraph(), assetBlock(), emptyParagraph()));
       });
@@ -93,12 +56,12 @@ describe('Rich Text Editor - Embedded Entry Assets', { viewportHeight: 2000 }, (
         addEmbeddedAsset();
 
         // Press enter on the first asset block
-        richText.editor.click().find('[data-entity-id="example-entity-id"]').first().click();
-        pressEnter();
+        richText.editor.click().find('[data-entity-id="published_asset"]').first().click();
+        richText.editor.trigger('keydown', KEYS.enter);
 
         // Press enter on the second asset block
-        richText.editor.click().find('[data-entity-id="example-entity-id"]').first().click();
-        pressEnter();
+        richText.editor.click().find('[data-entity-id="published_asset"]').first().click();
+        richText.editor.trigger('keydown', KEYS.enter);
 
         richText.expectValue(
           doc(emptyParagraph(), assetBlock(), emptyParagraph(), assetBlock(), emptyParagraph())
@@ -110,8 +73,8 @@ describe('Rich Text Editor - Embedded Entry Assets', { viewportHeight: 2000 }, (
 
         richText.expectValue(doc(assetBlock(), emptyParagraph()));
 
-        getIframe().findByTestId('cf-ui-card-actions').click();
-        getIframe().findByTestId('card-action-remove').click();
+        cy.findByTestId('cf-ui-card-actions').click();
+        cy.findByTestId('card-action-remove').click();
 
         richText.expectValue(undefined);
       });
@@ -121,9 +84,9 @@ describe('Rich Text Editor - Embedded Entry Assets', { viewportHeight: 2000 }, (
 
         richText.expectValue(doc(assetBlock(), emptyParagraph()));
 
-        getIframe().findByTestId('cf-ui-asset-card').click();
+        cy.findByTestId('cf-ui-asset-card').click();
         // .type('{backspace}') does not work on non-typable elements.(contentEditable=false)
-        richText.editor.trigger('keydown', keys.backspace);
+        richText.editor.trigger('keydown', KEYS.backspace);
 
         richText.expectValue(undefined);
       });

cypress/e2e/rich-text/RichTextEditor.EmbeddedEntryBlocks.spec.ts → cypress/component/rich-text/RichTextEditor.EmbeddedEntryBlocks.spec.ts

@@ -1,44 +1,23 @@
-/* eslint-disable mocha/no-setup-in-describe */
-
 import { BLOCKS } from '@contentful/rich-text-types';
 
 import { block, document as doc, text } from '../../../packages/rich-text/src/helpers/nodeFactory';
-import { getIframe } from '../../fixtures/utils';
+import { mod } from '../../fixtures/utils';
+import { emptyParagraph, KEYS, paragraphWithText } from './helpers';
 import { RichTextPage } from './RichTextPage';
+import { mountRichTextEditor } from './utils';
 
 // the sticky toolbar gets in the way of some of the tests, therefore
 // we increase the viewport height to fit the whole page on the screen
 
 describe('Rich Text Editor - Embedded Entry Blocks', { viewportHeight: 2000 }, () => {
   let richText: RichTextPage;
-
-  // copied from the 'is-hotkey' library we use for RichText shortcuts
-  const IS_MAC =
-    typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-  const mod = IS_MAC ? 'meta' : 'control';
-  const buildHelper =
-    (type) =>
-    (...children) =>
-      block(type, {}, ...children);
-  const paragraph = buildHelper(BLOCKS.PARAGRAPH);
-  const paragraphWithText = (t) => paragraph(text(t, []));
-  const emptyParagraph = () => paragraphWithText('');
   const expectDocumentToBeEmpty = () => richText.expectValue(undefined);
 
-  const keys = {
-    enter: { keyCode: 13, which: 13, key: 'Enter' },
-    backspace: { keyCode: 8, which: 8, key: 'Backspace' },
-  };
-
-  function pressEnter() {
-    richText.editor.trigger('keydown', keys.enter);
-  }
-
   const entryBlock = () =>
     block(BLOCKS.EMBEDDED_ENTRY, {
       target: {
         sys: {
-          id: 'example-entity-id',
+          id: 'published-entry',
           type: 'Link',
           linkType: 'Entry',
         },
@@ -48,12 +27,7 @@ describe('Rich Text Editor - Embedded Entry Blocks', { viewportHeight: 2000 }, (
   beforeEach(() => {
     cy.viewport(1000, 2000);
     richText = new RichTextPage();
-    richText.visit();
-    cy.shouldConfirm(true);
-  });
-
-  afterEach(() => {
-    cy.unsetShouldConfirm();
+    mountRichTextEditor();
   });
 
   const methods: [string, () => void][] = [
@@ -76,9 +50,9 @@ describe('Rich Text Editor - Embedded Entry Blocks', { viewportHeight: 2000 }, (
       it('adds paragraph before the block when pressing enter if the block is first document node', () => {
         richText.editor.click().then(triggerEmbeddedEntry);
 
-        richText.editor.find('[data-entity-id="example-entity-id"]').click();
+        richText.editor.find('[data-entity-id="published-entry"]').click();
 
-        richText.editor.trigger('keydown', keys.enter);
+        richText.editor.trigger('keydown', KEYS.enter);
 
         richText.expectValue(doc(emptyParagraph(), entryBlock(), emptyParagraph()));
       });
@@ -93,12 +67,12 @@ describe('Rich Text Editor - Embedded Entry Blocks', { viewportHeight: 2000 }, (
         addEmbeddedEntry();
 
         // Inserts paragraph before embed because it's in the first line.
-        richText.editor.find('[data-entity-id="example-entity-id"]').first().click();
-        pressEnter();
+        richText.editor.find('[data-entity-id="published-entry"]').first().click();
+        richText.editor.trigger('keydown', KEYS.enter);
 
         // inserts paragraph in-between embeds.
-        richText.editor.find('[data-entity-id="example-entity-id"]').first().click();
-        pressEnter();
+        richText.editor.find('[data-entity-id="published-entry"]').first().click();
+        richText.editor.trigger('keydown', KEYS.enter);
 
         richText.expectValue(
           doc(emptyParagraph(), entryBlock(), emptyParagraph(), entryBlock(), emptyParagraph())
@@ -110,8 +84,8 @@ describe('Rich Text Editor - Embedded Entry Blocks', { viewportHeight: 2000 }, (
 
         richText.expectValue(doc(entryBlock(), emptyParagraph()));
 
-        getIframe().findByTestId('cf-ui-card-actions').click();
-        getIframe().findByTestId('delete').click();
+        cy.findByTestId('cf-ui-card-actions').click();
+        cy.findByTestId('delete').click();
 
         richText.expectValue(undefined);
       });
@@ -121,9 +95,9 @@ describe('Rich Text Editor - Embedded Entry Blocks', { viewportHeight: 2000 }, (
 
         richText.expectValue(doc(entryBlock(), emptyParagraph()));
 
-        getIframe().findByTestId('cf-ui-entry-card').click();
+        cy.findByTestId('cf-ui-entry-card').click();
         // .type('{backspace}') does not work on non-typable elements.(contentEditable=false)
-        richText.editor.trigger('keydown', keys.backspace);
+        richText.editor.trigger('keydown', KEYS.backspace);
 
         richText.expectValue(undefined);
       });