cypress tests for render panel

Watts-Lab · Jul 22, 2024 · 6c40920 · 6c40920
1 parent 1b8176f
commit 6c40920
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 19 deletions.
diff --git a/cypress/e2e/test.cy.ts b/cypress/e2e/test.cy.ts
@@ -43,6 +43,12 @@ describe('test spec', () => {
     cy.get('[data-cy="element-0-1"]').contains("survey").should("be.visible")
     cy.get('[data-cy="element-0-1"]').contains("TIPI").should("be.visible")
 
+    // view first stage in render panel
+    cy.get('[data-cy="render-panel"]').contains("Click on a stage card to preview the stage from a participant view.").should("be.visible")
+    cy.get('[data-cy="stage-0"]').click(0, 0)
+    cy.get('[data-cy="render-panel"]').contains("Click on a stage card to preview the stage from a participant view.").should("not.exist")
+    cy.get('[data-cy="render-panel"]').contains("Here are a number of personality traits").should("be.visible")
+
     // create second stage
     cy.get('[data-cy="add-stage-button"]').click()
     cy.get('[data-cy="edit-stage-name-new"]').type("Stage 2")
@@ -62,6 +68,11 @@ describe('test spec', () => {
     cy.get('[data-cy="element-1-0"]').contains("video").should("be.visible")
     cy.get('[data-cy="element-1-0"]').contains("https://www.youtube.com/").should("be.visible")
 
+    // view second stage in render panel
+    cy.get('[data-cy="stage-1"]').click(0, 0)
+    cy.get('[data-cy="render-panel"]').contains("Click on a stage card to preview the stage from a participant view.").should("not.exist")
+    cy.get('[data-cy="render-panel"]').contains("Click to continue the video").should("be.visible")
+
     // edit first element
     cy.get('[data-cy="edit-element-button-0-0"]').click()
     cy.get('[data-cy="edit-element-name-0-0"]').should("have.value", "Element 1").should("be.visible").type(" Edited")

diff --git a/deliberation-empirica b/deliberation-empirica
diff --git a/src/app/editor/components/RenderPanel.tsx b/src/app/editor/components/RenderPanel.tsx
@@ -6,8 +6,7 @@ import RenderDelibElement from './RenderDelibElement'
 
 import { StageContext } from '@/editor/stageContext'
 
-
-  const Stage = dynamic(
+const Stage = dynamic(
   () =>
     import('./../../../.././deliberation-empirica/client/src/Stage.jsx').then(
       (mod) => mod.Stage
@@ -17,7 +16,6 @@ import { StageContext } from '@/editor/stageContext'
   }
 )
 
-
 export function RenderPanel() {
   const [time, setTime] = useState(0)
 
@@ -40,14 +38,14 @@ export function RenderPanel() {
   //console.log('Current stage', localStorage.getItem('currentStageIndex'))
 
   return (
-    <div className="flex">
+    <div className="flex h-full w-full" data-cy="render-panel">
       {currentStageIndex === 'default' && (
         <h1>
           Click on a stage card to preview the stage from a participant view.
         </h1>
       )}
       {currentStageIndex !== 'default' && (
-        <div>
+        <div className="min-w-fit">
           <h1>Preview of stage {currentStageIndex} </h1>
           <TimePicker
             value={time + ' s'}
@@ -74,7 +72,7 @@ export function RenderPanel() {
           )}
       </div> */}
 
-      <div className="page-display-container">
+      <div className="page-display-container max-w-full overflow-auto">
         {currentStageIndex !== 'default' && <Stage />}
       </div>
     </div>

diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
@@ -42,7 +42,7 @@ export default function EditorPage({}) {
         >
           <div
             id="upperLeft"
-            className="overflow-auto h-full w-full"
+            className="overflow-auto"
             style={{ minHeight: 200, height: upperLeftHeight }}
           >
             <RenderPanel />

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,20 +1,20 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { SessionProvider } from "./AuthProvider";
-import Navbar from "./components/Navbar";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { SessionProvider } from './AuthProvider'
+import Navbar from './components/Navbar'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'CSSLab Researcher Portal',
+  description: 'CSSLab Researcher Portal',
+}
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
   return (
     <html lang="en" data-theme="cupcake">
@@ -26,5 +26,5 @@ export default function RootLayout({
         </SessionProvider>
       </body>
     </html>
-  );
+  )
 }