Merge pull request #102 from contentstack/staging

Staging

Author: Amitkanswal

.env.sample

@@ -17,4 +17,6 @@ BASIC_AUTH_PASSWORD = #Add your basic auth password
 # Based on the env make sure to add proper credentials for the below variables
 DEVELOPER_HUB_API= #Add Developer Hub API endpoint (e.g: developerhub-api.contentstack.com)
 ENV_URL= #Add App host URL (e.g: https://app.contentstack.com/)
-BASE_API_URL= #Add API end point (e.g: api.contentstack.io)
+BASE_API_URL= #Add API end point (e.g: api.contentstack.io)
+
+VITE_PUBLIC_KEY_BASE_URL = #Add Vite public key base URL (e.g: https://app.contentstack.com)

.gitignore

@@ -1,4 +1,6 @@
 # dependencies
 node_modules
 playwright-report
-.env
+.env
+dist/
+

e2e/pages/AssetPage.ts

@@ -41,7 +41,7 @@ export class AssetPage {
     await this.navigateToAsset(assetId);
     await this.widgetSelector();
     const frame = await this.accessFrame();
-    await frame?.waitForSelector('.app-component-content');
+    await frame?.waitForSelector('.ui-container');
     const locateText: any = await frame?.locator('text="Asset Sidebar Widget"');
     const matchText = await locateText?.innerText();
     expect(matchText).toBe('Asset Sidebar Widget');

e2e/pages/EntryPage.ts

@@ -45,7 +45,7 @@ export class EntryPage {
   // Check for dashboard widget
   async validateDashboardWidget() {
     const frame = await this.accessFrame();
-    await frame?.waitForSelector('.app-component-content');
+    await frame?.waitForSelector('.ui-container');
     const locateText: any = await frame?.locator('text="Dashboard Widget"');
     const matchText = await locateText?.innerText();
     expect(matchText).toBe('Dashboard Widget');
@@ -54,12 +54,19 @@ export class EntryPage {
   // Check for entry custom field & entry side bar
   async validateCustomField() {
     const frame = await this.accessFrame();
-    await frame?.waitForSelector('.custom-field-container');
+    await frame?.waitForSelector('.ui-container');
     const locateText = await frame?.locator("text='Custom Field'");
     const matchText = await locateText?.innerText();
     expect(matchText).toBe('Custom Field');
     await this.widgetSelector();
     const sideBarWidget = await frame?.locator('.entry-sidebar-container >> text=Sidebar Widget');
     expect(sideBarWidget).toBeTruthy();
   }
+
+  async validateCustomFieldWithInvalidJWTToken() {
+    const frame = await this.accessFrame();
+    await frame?.waitForSelector('.app-failed-container');
+    const locateText = await frame?.locator("text='The App was loaded outside Contentstack Dashboard.'");
+    return locateText?.isVisible();
+  }
 }

e2e/tests/app-flow.spec.ts

@@ -1,7 +1,7 @@
-import { test} from '@playwright/test';
+import { test, expect} from '@playwright/test';
 import { AssetPage } from '../pages/AssetPage';
 
-import { createContentType, createEntry, createApp, updateApp, installApp, assetUpload, uninstallApp, deleteApp, deleteContentType, entryPageFlow, initializeEntry, getExtensionFieldUid, deleteAsset } from '../utils/helper';
+import { createContentType, createEntry, createApp, updateApp, installApp, assetUpload, uninstallApp, deleteApp, deleteContentType, entryPageFlow, initializeEntry, getExtensionFieldUid, deleteAsset, mockFetchPublicKey } from '../utils/helper';
 
 const jsonFile = require('jsonfile');
 
@@ -61,20 +61,53 @@ test.afterAll(async () => {
   }
 });
 
-test('#1 Validate Dashboard Widget', async ({ page, context }) => {
+test('Verify Dashboard Widget', async ({ page, context }) => {
   const entryPage = await initializeEntry(page);
   await entryPage.navigateToDashboard();
   await entryPage.validateDashboardWidget();
 });
 
-test('#2 Validating Custom Field & Entry Sidebar', async ({ page, context }) => {
+test('Verify Custom Field & Entry Sidebar', async ({ page, context }) => {
   const entryPage = await initializeEntry(page);
   await entryPageFlow(savedCredentials, entryPage);
   await entryPage.validateCustomField();
 });
 
-test('#3 Validate Asset Sidebar', async ({ page, context }) => {
+test('Verify Asset Sidebar', async ({ page, context }) => {
   const { assetId } = savedCredentials;
   const assetPage = new AssetPage(page);
   await assetPage.validateAssetSideBar(assetId);
 });
+
+test.skip("Verify if custom-field is loading for valid AppToken", async ({ page, context }) => {
+  const entryPage = await initializeEntry(page);
+  await entryPageFlow(savedCredentials, entryPage);
+  await mockFetchPublicKey(context, true);
+
+  // Mocking a valid token
+  await page.evaluate(() => {
+    window.localStorage.setItem("app_token", "VALID_JWT_TOKEN");
+  });
+
+  await page.reload();
+
+  // Expect the validateCustomField function to be called
+  await entryPage.validateCustomField();
+});
+
+test("Verify if AppFailed component is displayed for Invalid AppToken", async ({ page, context }) => {
+  const entryPage = await initializeEntry(page);
+  await entryPageFlow(savedCredentials, entryPage);
+  await mockFetchPublicKey(context, false);
+
+  // Mocking an invalid token
+  await page.evaluate(() => {
+    window.localStorage.setItem("app_token", "INVALID_JWT_TOKEN");
+  });
+
+  await page.reload();
+
+  // Expect the AppFailed component to be visible
+  const isErrorDisplayed = await entryPage.validateCustomFieldWithInvalidJWTToken();
+  expect(isErrorDisplayed).toBeTruthy();
+});

e2e/utils/helper.ts

@@ -195,7 +195,7 @@ export const updateApp = async (authToken: string, appId: string) => {
               {
                 name: `App Boilerplate _${Math.floor(Math.random() * 1000)}`,
                 path: '/custom-field',
-                signed: false,
+                signed: true,
                 enabled: true,
                 data_type: 'text',
               },
@@ -424,3 +424,13 @@ export const getExtensionFieldUid = async (authToken: string) => {
     console.error(error);
   }
 };
+
+// Utility function to mock valid and invalid app-tokens for signed requests
+export const mockFetchPublicKey = async (context, isValid = true) => {
+  await context.route("**/.well-known/public-keys.json", (route) => {
+    route.fulfill({
+      status: 200,
+      body: JSON.stringify({ "signing-key": isValid ? "VALID_PUBLIC_KEY_PEM" : "" }),
+    });
+  });
+};

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/default-app-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Marketplace App Boilerplate" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>ContentStack Marketplace Boilerplate</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

manifest.json

@@ -15,7 +15,7 @@
         "meta": [
           {
             "multiple": false,
-            "path": "/#/custom-field",
+            "path": "/custom-field",
             "signed": false,
             "enabled": true,
             "data_type": "json"
@@ -26,7 +26,7 @@
         "type": "cs.cm.stack.dashboard",
         "meta": [
           {
-            "path": "/#/stack-dashboard",
+            "path": "/stack-dashboard",
             "signed": false,
             "enabled": true,
             "default_width": "half"
@@ -38,7 +38,7 @@
         "meta": [
           {
             "blur": false,
-            "path": "/#/asset-sidebar",
+            "path": "/asset-sidebar",
             "signed": false,
             "enabled": true,
             "width": 500
@@ -49,7 +49,7 @@
         "type": "cs.cm.stack.content_type_sidebar",
         "meta": [
           {
-            "path": "/#/content-type-sidebar",
+            "path": "/content-type-sidebar",
             "signed": false,
             "enabled": true
           }
@@ -59,7 +59,7 @@
         "type": "cs.cm.stack.sidebar",
         "meta": [
           {
-            "path": "/#/entry-sidebar",
+            "path": "/entry-sidebar",
             "signed": false,
             "enabled": true
           }
@@ -69,7 +69,7 @@
         "type": "cs.cm.stack.full_page",
         "meta": [
           {
-            "path": "/#/full-page",
+            "path": "/full-page",
             "signed": false,
             "enabled": true
           }
@@ -79,7 +79,7 @@
         "type": "cs.cm.stack.field_modifier",
         "meta": [
           {
-            "path": "/#/field-modifier",
+            "path": "/field-modifier",
             "signed": false,
             "enabled": true,
             "allowed_types": ["$all"]
@@ -90,7 +90,7 @@
         "type": "cs.cm.stack.config",
         "meta": [
           {
-            "path": "/#/app-configuration",
+            "path": "/app-configuration",
             "signed": false,
             "enabled": true
           }