npm - @orangelogic/orange-dam-content-browser-sdk - Versions diffs - 2.1.5 → 2.1.6 - Mend

@orangelogic/orange-dam-content-browser-sdk 2.1.5 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CBSDKdemo.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-  <script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.5/OrangeDAMContentBrowserSDK.min.js"></script>
+  <script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.6/OrangeDAMContentBrowserSDK.min.js"></script>
   <link rel="stylesheet" type="text/css"
-    href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.5/OrangeDAMContentBrowserSDK.min.css">
+    href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.6/OrangeDAMContentBrowserSDK.min.css">
   <style>
     * {

package/cypress/support/commands.ts ADDED Viewed

@@ -0,0 +1,69 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+Cypress.Commands.add(
+  'reactComponent',
+  {
+    prevSubject: 'element',
+  },
+  ($el) => {
+    if ($el.length !== 1) {
+      throw new Error(
+        `cy.component() requires element of length 1 but got ${$el.length}`,
+      );
+    }
+    // Query for key starting with __reactInternalInstance$ for React v16.x
+    const key = Object.keys($el.get(0)).find((item) =>
+      item.startsWith('__reactFiber$'),
+    );
+    const domFiber = $el.prop(key || '');
+    Cypress.log({
+      name: 'component',
+      consoleProps() {
+        return {
+          component: domFiber,
+        };
+      },
+    });
+    return domFiber.return;
+  },
+);
+Cypress.Commands.add('waitForCustomElement', (tagName) => {
+  cy.window().then((win) => win.customElements.whenDefined(tagName));
+});

package/cypress/support/component-index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://design-system.orangelogic.com/css/ol-light.css">
+    <script type="module" src="https://design-system.orangelogic.com/entry.1.0.186.js"></script>
+    <title>Components App</title>
+    <style>
+        .resize__input-group {
+    display: flex;
+    flex: 1;
+  }    cx-input {
+      flex: 1;
+    }
+    </style>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts ADDED Viewed

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable import/no-extraneous-dependencies */
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+// Import commands.js using ES2015 syntax:
+import './commands';
+import '@cypress/code-coverage/support';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+import { mount } from 'cypress/react';
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+      reactComponent: Chainable<any>;
+      waitForCustomElement: (tagname: string) => Chainable<any>;
+    }
+  }
+}
+Cypress.Commands.add('mount', mount);
+// Example use:
+// cy.mount(<MyComponent />)

package/cypress/support/e2e.ts ADDED Viewed

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+// Import commands.js using ES2015 syntax:
+import './commands';
+import '@cypress/code-coverage/support';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.config.ts ADDED Viewed

@@ -0,0 +1,69 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { defineConfig } from 'cypress';
+import path from 'path';
+process.env.NODE_ENV = 'test';
+export default defineConfig({
+  e2e: {
+    experimentalRunAllSpecs: true,
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+  },
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig: {
+        resolve: {
+          extensions: ['.ts', '.tsx', '.js', '.jsx'],
+          alias: {
+            '@': path.resolve(__dirname, './src'), // adjust if your src is in a different folder
+          },
+        },
+        mode: 'development',
+        devtool: false,
+        module: {
+          rules: [
+            // application and Cypress files are bundled like React components
+            // and instrumented using the babel-plugin-istanbul
+            // (we will filter the code coverage for non-application files later)
+            {
+              test: /\.(ts|tsx|js|jsx)?$/,
+              exclude: /node_modules/,
+              use: {
+                loader: 'babel-loader',
+                options: {
+                  presets: [
+                    '@babel/preset-env',
+                    ['@babel/preset-react', { runtime: 'automatic' }],
+                    '@babel/preset-typescript',
+                  ],
+                  plugins: [
+                    // we could optionally insert this plugin
+                    // only if the code coverage flag is on
+                    'babel-plugin-istanbul',
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config);
+      on('task', {
+        log: message => {
+          console.log(message);
+          return null;
+        },
+      });
+      return config;
+    },
+  },
+  viewportWidth: 1280,
+  viewportHeight: 720,
+});

package/gab_extension/GAB.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
-  <script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.5/OrangeDamAssetBrowser.min.js"></script>
+  <script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.6/OrangeDamAssetBrowser.min.js"></script>
   <link rel="stylesheet" type="text/css"
-    href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.5/OrangeDamAssetBrowser.min.css">
+    href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.6/OrangeDamAssetBrowser.min.css">
   <style>
     #orangelogic-GAB-browser-wrapper {
       min-width: 382px;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@orangelogic/orange-dam-content-browser-sdk",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "OrangeDAM Content Browser SDK source code",
   "main": "index.js",
   "homepage": "/",
@@ -27,9 +27,15 @@
     "start": "node scripts/start.js",
     "test": "node scripts/test.js",
     "format": "eslint --fix .",
-    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
+    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
+    "cypress:test": "cypress run --component --browser chrome"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@cypress/code-coverage": "^3.14.0",
+    "@cypress/instrument-cra": "^1.4.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -42,6 +48,8 @@
     "@types/webfontloader": "^1.6.35",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "babel-plugin-istanbul": "^7.0.0",
+    "cypress": "^14.3.0",
     "ajv": "^8.9.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.46.0",
@@ -186,6 +194,28 @@
     ]
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "nyc": {
+    "all": true,
+    "excludeAfterRemap": true,
+    "include": [
+      "src/**/*.{ts,tsx}"
+    ],
+    "exclude": [
+      "src/store/**/*",
+      "src/__tests__/**/*",
+      "src/**/*.d.ts",
+      "src/types/**/*",
+      "src/utils/api.ts",
+      "src/AppContext.ts",
+      "src/page/Home/**/*",
+      "src/view/**/*"
+    ],
+    "check-coverage": true,
+    "branches": 70,
+    "functions": 90,
+    "lines": 80,
+    "statements": 80
+  },
   "publishConfig": {
     "access": "public"
   }

package/src/components/ArrayClamp/ArrayClamp.cy.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+import ArrayClamp from '@/components/ArrayClamp';
+describe('Loader', () => {
+  it('Should hide 3 items', () => {
+    cy.mount(<div style={{
+      width: '300px',
+    }}><ArrayClamp>
+        {[1, 2, 3, 4, 5].map((item) => (
+          <span key={item} style={{
+            width: '120px',
+            display: 'inline-block',
+          }}>{item}</span>
+        ))}
+      </ArrayClamp></div>);
+    cy.get('.clamped').should('have.length', 3);
+  });
+});

package/src/components/Browser/Browser.cy.tsx ADDED Viewed

@@ -0,0 +1,307 @@
+/// <reference types="cypress" />
+import { Provider } from 'react-redux';
+import { store } from '@/store';
+import Browser from './Browser';
+import { Folder } from '@/types/search';
+import { storeData } from '@/utils/storage';
+const BrowserProps = {
+  collectionPath: 'containers>>virtual folders',
+  currentFolder: {
+    id: '2Y1FQECIK0',
+    title: 'Library',
+    docType: 'Story',
+    path: [''],
+    fullPath: 'Library',
+    parents: [
+      {
+        id: '',
+        title: '',
+        docType: 'Story',
+        path: [],
+        parents: [],
+        fullPath: '',
+        hasChildren: true,
+      },
+    ],
+    hasChildren: true,
+  },
+  lastLocationMode: true,
+  open: true,
+  showCollections: true,
+  useSession: 'qqqqqq',
+};
+const folderData = [
+  {
+    recordID: '2Y1FQECIK0',
+    fields: {
+      'CoreField.TitleWithFallback': 'Library',
+      'CoreField.DocType': 'Story',
+      'Document.CortexPath': 'Root/Library',
+      'Document.HasBrowserChildren': '1',
+      AllowATSLink: 'False',
+    },
+  },
+  {
+    recordID: '2Y1FQECZA6',
+    fields: {
+      'CoreField.TitleWithFallback': 'Personal Folders',
+      'CoreField.DocType': 'Story',
+      'Document.CortexPath': 'Root/Personal Folders',
+      'Document.HasBrowserChildren': '1',
+      AllowATSLink: 'False',
+    },
+  },
+  {
+    recordID: '2Y1FQEZH3T',
+    fields: {
+      'CoreField.TitleWithFallback': 'Database',
+      'CoreField.DocType': 'Story',
+      'Document.CortexPath': 'Root/Database',
+      'Document.HasBrowserChildren': '1',
+      AllowATSLink: 'False',
+    },
+  },
+  {
+    recordID: '2Y1FQEF3LZ',
+    fields: {
+      'CoreField.TitleWithFallback': 'Site',
+      'CoreField.DocType': 'Story',
+      'Document.CortexPath': 'Root/Site',
+      'Document.HasBrowserChildren': '1',
+      AllowATSLink: 'False',
+    },
+  },
+  {
+    recordID: '2Y1FQEK3DZ',
+    fields: {
+      'CoreField.TitleWithFallback': 'System Bin',
+      'CoreField.DocType': 'Story',
+      'Document.CortexPath': 'Root/System Bin',
+      'Document.HasBrowserChildren': '0',
+      AllowATSLink: 'False',
+    },
+  },
+];
+const BrowserWrapper = ({
+  lastLocationMode,
+  onFolderSelect,
+}: {
+  onFolderSelect?: (selectedFolder: Folder) => void;
+  lastLocationMode?: boolean;
+}) => {
+  const props = { ...BrowserProps };
+  if (lastLocationMode !== undefined) {
+    props.lastLocationMode = lastLocationMode;
+  }
+  return (
+    <Provider store={store}>
+      <Browser {...props} onFolderSelect={onFolderSelect || (() => {})} onClose={() => {}} />
+    </Provider>
+  );
+};
+describe('Browser', () => {
+  beforeEach(() => {
+    cy.intercept(
+      'GET',
+      '/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1*',
+      (req) => {
+        const url = new URL(req.url);
+        const objectRecordID = url.searchParams.get('objectRecordID');
+        const extraFilters = url.searchParams.get('extraFilters');
+        const searchText = (extraFilters || '').split('Story_Title:')[1]?.split(' ')[0];
+        if (objectRecordID) {
+          req.reply({
+            body: {
+              contentItems: [
+                {
+                  recordID: '2Y1FQEX9IB9',
+                  fields: {
+                    'CoreField.TitleWithFallback': 'Images',
+                    'CoreField.DocType': 'Story',
+                    'Document.CortexPath': 'Root/Library/Images',
+                    'Document.HasBrowserChildren': '0',
+                    AllowATSLink: 'False',
+                  },
+                },
+                {
+                  recordID: '2Y1FQEYV03',
+                  fields: {
+                    'CoreField.TitleWithFallback': 'Contact photos',
+                    'CoreField.DocType': 'Story',
+                    'Document.CortexPath': 'Root/Library/Contact photos',
+                    'Document.HasBrowserChildren': '0',
+                    AllowATSLink: 'False',
+                  },
+                },
+                {
+                  recordID: '2Y1FQEQANQ9',
+                  fields: {
+                    'CoreField.TitleWithFallback': 'Items without primary links',
+                    'CoreField.DocType': 'Story',
+                    'Document.CortexPath': 'Root/Library/Items without primary links',
+                    'Document.HasBrowserChildren': '1',
+                    AllowATSLink: 'False',
+                  },
+                },
+              ],
+            },
+            delay: 1000,
+          });
+        } else if (searchText) {
+          if (searchText === 'Lib') {
+            req.reply({
+              body: {
+                contentItems: [
+                  {
+                    recordID: '2Y1FQECIK0',
+                    fields: {
+                      'CoreField.TitleWithFallback': 'Library',
+                      'CoreField.DocType': 'Story',
+                      'Document.CortexPath': 'Root/Library',
+                      'Document.HasBrowserChildren': '1',
+                      AllowATSLink: 'False',
+                    },
+                  },
+                ],
+              },
+              delay: 1000,
+            });
+          } else {
+            req.reply({
+              body: {
+                contentItems: [],
+              },
+              delay: 1000,
+            });
+          }
+        } else {
+          req.reply({
+            body: {
+              contentItems: folderData,
+            },
+            delay: 1000,
+          });
+        }
+      },
+    ).as('getFolders');
+  });
+  it('Should render the browser with correct number of items', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-tree-item').should('have.length', folderData.length);
+  });
+  it('Should expand', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-tree-item').eq(0).shadow().find('[part="expand-button"]').click();
+    cy.get('cx-tree-item').eq(0).find('cx-tree-item').should('have.length', 3);
+  });
+  it('Should collapse', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-tree-item').eq(0).shadow().find('[part="expand-button"]').click();
+    cy.get('cx-tree-item').eq(0).shadow().find('[part="expand-button"]').click();
+    cy.get('cx-tree-item').eq(0).should('not.have.attr', 'expanded');
+  });
+  it('Should show search results', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-input').shadow().find('input').type('Lib');
+    cy.get('cx-tree-item').should('have.length', 1);
+  });
+  it('Should show no search results', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-input').shadow().find('input').type('non-existing-folder');
+    cy.get('cx-tree-item').should('have.length', 0);
+  });
+  it('Should reset the search results', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-input').shadow().find('input').type('Lib');
+    cy.get('cx-tree-item').should('have.length', 1);
+    cy.get('cx-input').shadow().find('input').clear();
+    cy.get('cx-tree-item').should('have.length', folderData.length);
+  });
+  it('Should close the browser', () => {
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-drawer').shadow().find('cx-icon-button').click();
+    cy.get('cx-drawer').should('not.have.attr', 'open');
+  });
+  it('Should select default folder when localStorage data is invalid', () => {
+    storeData('lastLocation', 'hello');
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-tree-item').should('have.length', folderData.length);
+    cy.get('cx-tree-item').eq(0).should('have.attr', 'selected');
+  });
+  it('Should select default folder when localStorage data is not found', () => {
+    storeData(
+      'lastLocation',
+      JSON.stringify({
+        id: 'some-random-id',
+      }),
+    );
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-tree-item').should('have.length', folderData.length);
+    cy.get('cx-tree-item').eq(0).should('have.attr', 'selected');
+  });
+  it('Should select correct folder when localStorage data is valid', () => {
+    storeData(
+      'lastLocation',
+      JSON.stringify({
+        id: '2Y1FQECIK0',
+        title: 'Library',
+        docType: 'Story',
+        path: [''],
+        fullPath: 'Library',
+        parents: [
+          {
+            id: '',
+            title: '',
+            docType: 'Story',
+            path: [],
+            parents: [],
+            fullPath: '',
+            hasChildren: true,
+          },
+        ],
+        hasChildren: true,
+      }),
+    );
+    cy.mount(<BrowserWrapper></BrowserWrapper>);
+    cy.get('cx-tree-item').should('have.length', folderData.length);
+    cy.get('cx-tree-item').eq(0).should('have.attr', 'selected');
+  });
+  it('Should render default folder when lastLocationMode is false', () => {
+    cy.mount(<BrowserWrapper lastLocationMode={false}></BrowserWrapper>);
+    cy.get('cx-tree-item').should('have.length', folderData.length);
+    cy.get('cx-tree-item').eq(0).should('have.attr', 'selected');
+  });
+  it('Should call onFolderSelect when a folder is selected', () => {
+    const onFolderSelect = cy.stub().as('onFolderSelect');
+    cy.mount(<BrowserWrapper onFolderSelect={onFolderSelect}></BrowserWrapper>);
+    cy.get('cx-tree-item').eq(2).click();
+    cy.get('@onFolderSelect').should('have.been.called');
+  });
+});