update tests

cypress/fixtures/mock/compatibleMetadata.json

@@ -0,0 +1,15 @@
+{
+  "has_missing_dependencies": false,
+  "package_compatibilities": [
+    {
+      "package_name": "fsspec",
+      "package_version": "2023.9.1",
+      "is_compatible": true
+    },
+    {
+      "package_name": "kedro-datasets",
+      "package_version": "2.0.0",
+      "is_compatible": true
+    }
+  ]
+}

cypress/fixtures/mock/package-compatibilities-incompatible.json → cypress/fixtures/mock/inCompatibleMetadata.json

@@ -1,12 +1,15 @@
-[
-  {
+{
+  "has_missing_dependencies": true,
+  "package_compatibilities": [
+    {
       "package_name": "fsspec",
       "package_version": "2023.8.1",
       "is_compatible": false
-  },
-  {
+    },
+    {
       "package_name": "kedro-datasets",
       "package_version": "1.8.0",
       "is_compatible": false
-  }
-]
+    }
+  ]
+}

cypress/tests/ui/flowchart/banners.cy.js

@@ -0,0 +1,32 @@
+describe('Banners in Kedro-Viz', () => {
+  beforeEach(() => {
+    // Clears localStorage before each test
+    cy.clearLocalStorage();
+  });
+
+  it("shows a missing dependencies banner in viz lite mode if the kedro project dependencies are not installed.", () => {
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/metadata',
+      'GET',
+      '/mock/inCompatibleMetadata.json'
+    ).as("appMetadata");
+
+    // Action
+    cy.reload();
+
+    // Assert after action
+    cy.get('[data-test="flowchart-wrapper--lite-banner"]').should('exist');
+    cy.get('.banner-message-body').should('contains.text', 'please install the missing Kedro project dependencies')
+    cy.get('.banner-message-title').should('contains.text', 'Missing dependencies')
+
+    // Test Learn more link
+    cy.get(".banner a")
+      .should("contains.attr", "href", "https://docs.kedro.org/projects/kedro-viz/en/latest/kedro-viz_visualisation.html#visualise-a-kedro-project-without-installing-project-dependencies");
+
+    // Close the banner
+    cy.get(".banner-close").click()
+    cy.get('[data-test="flowchart-wrapper--lite-banner"]').should('not.exist');
+
+  });
+});

cypress/tests/ui/flowchart/shareable-urls.cy.js

@@ -7,9 +7,9 @@ describe('Shareable URLs with empty localStorage', () => {
   it('verifies that users can open the Deploy Kedro-Viz modal if the localStorage is empty. #TC-52', () => {
     // Intercept the network request to mock with a fixture
     cy.__interceptRest__(
-      '/api/package-compatibilities',
+      '/api/metadata',
       'GET',
-      '/mock/package-compatibilities-compatible.json'
+      '/mock/compatibleMetadata.json'
     );
 
     // Action
@@ -25,9 +25,9 @@ describe('Shareable URLs with empty localStorage', () => {
   it("shows an incompatible message given the user's fsspec package version is outdated. #TC-53", () => {
     // Intercept the network request to mock with a fixture
     cy.__interceptRest__(
-      '/api/package-compatibilities',
+      '/api/metadata',
       'GET',
-      '/mock/package-compatibilities-incompatible.json'
+      '/mock/inCompatibleMetadata.json'
     );
 
     // Action

src/components/experiment-wrapper/experiment-wrapper.js

@@ -193,7 +193,7 @@ const ExperimentWrapper = ({ theme, runsMetadata }) => {
   }, []);
 
   useEffect(() => {
-    async function getPackageCompatibility() {
+    async function checkPackageCompatibility() {
       try {
         const request = await fetchMetadata();
         const response = await request.json();
@@ -206,11 +206,11 @@ const ExperimentWrapper = ({ theme, runsMetadata }) => {
           setIsKedroDatasetsCompatible(kedroDatasetsPackage.is_compatible);
         }
       } catch (error) {
-        console.error('package-compatibilities fetch error: ', error);
+        console.error('metadata fetch error: ', error);
       }
     }
 
-    getPackageCompatibility();
+    checkPackageCompatibility();
   }, []);
 
   useEffect(() => {

src/components/flowchart-wrapper/flowchart-wrapper.js

@@ -43,6 +43,7 @@ import { isRunningLocally, mapNodeTypes } from '../../utils';
 import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
 import './flowchart-wrapper.scss';
 import Banner from '../ui/banner';
+import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 
 /**
  * Main flowchart container. Handles showing/hiding the sidebar nav for flowchart view,
@@ -315,13 +316,11 @@ export const FlowChartWrapper = ({
   };
 
   const showBanner = (bannerKey) => {
-    return true;
-    // [TODO: Uncomment below part after design testing]
-    // const bannerStatus = loadLocalStorage(localStorageBannerStatus);
-    // const shouldShowBanner =
-    //   displayBanner[bannerKey] &&
-    //   (bannerStatus[bannerKey] || bannerStatus[bannerKey] === undefined);
-    // return shouldShowBanner;
+    const bannerStatus = loadLocalStorage(localStorageBannerStatus);
+    const shouldShowBanner =
+      displayBanner[bannerKey] &&
+      (bannerStatus[bannerKey] || bannerStatus[bannerKey] === undefined);
+    return shouldShowBanner;
   };
 
   if (isInvalidUrl) {
@@ -350,6 +349,7 @@ export const FlowChartWrapper = ({
             }}
             btnUrl={BANNER_METADATA.liteModeWarning.docsLink}
             onClose={() => handleBannerClose(BANNER_KEYS.LITE)}
+            dataTest={getDataTestAttribute('flowchart-wrapper', 'lite-banner')}
           />
         )}
         <div className="pipeline-wrapper">

src/components/shareable-url-modal/shareable-url-modal.js

@@ -47,7 +47,7 @@ const ShareableUrlModal = ({ onToggleModal, onSetBanner, visible }) => {
   const [isPreviewEnabled, setIsPreviewEnabled] = useState(false);
 
   useEffect(() => {
-    async function getPackageCompatibility() {
+    async function checkPackageCompatibility() {
       try {
         const request = await fetchMetadata();
         const response = await request.json();
@@ -71,11 +71,11 @@ const ShareableUrlModal = ({ onToggleModal, onSetBanner, visible }) => {
           }
         }
       } catch (error) {
-        console.error('package-compatibilities fetch error: ', error);
+        console.error('metadata fetch error: ', error);
       }
     }
 
-    getPackageCompatibility();
+    checkPackageCompatibility();
   }, [onSetBanner]);
 
   const setStateForPublishedView = () => {

src/components/ui/banner/banner.js

@@ -15,6 +15,7 @@ const Banner = ({
   btnText = 'Learn More',
   position = 'top',
   onClose = null,
+  dataTest,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
 
@@ -30,7 +31,10 @@ const Banner = ({
   }
 
   return (
-    <div className={classnames('banner', `banner-${position}`)}>
+    <div
+      className={classnames('banner', `banner-${position}`)}
+      data-test={dataTest}
+    >
       {icon && <div className="banner-icon">{icon}</div>}
       <div className="banner-message">
         <span className="banner-message-title">{message.title}</span>