test for prompt creation

Author: Veikkosuhonen

e2e/README.md

@@ -0,0 +1,9 @@
+# Notes about e2e tests
+
+When writing new spec file, make sure to import the test function from the fixtures file, like this:
+```
+import { test } from './fixtures'
+```
+.
+
+So that the global foreach function runs for your tests.

e2e/prompts.spec.ts

@@ -0,0 +1,28 @@
+import { test } from './fixtures'
+import { expect } from '@playwright/test'
+import { acceptDisclaimer } from './utils/test-helpers'
+
+test.describe('Prompt creation', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/v2')
+    await acceptDisclaimer(page)
+  })
+
+  test('test', async ({ page }) => {
+    await page.goto('/courses/test-course/prompts')
+
+    const newPromptName = `testausprompti-${test.info().workerIndex}`
+
+    await page.getByRole('textbox', { name: 'Prompt name' }).fill(newPromptName)
+    await page.getByRole('textbox', { name: 'e.g. You are a helpful' }).fill('sanot aina "testi onnistui"')
+    await page.getByRole('button', { name: 'Save' }).click()
+    expect(page.getByText(newPromptName)).toBeVisible()
+    await page.getByText('Link to chat with this prompt active').last().click()
+
+    await page.getByRole('button', { name: 'Chat settings' }).click()
+
+    await page.locator('#prompt-selector-button').click()
+
+    expect(page.getByText(newPromptName)).toBeVisible()
+  })
+})

src/client/components/Admin/Testing.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { OutlineButtonBlack, OutlineButtonBlue } from '../ChatV2/generics/Buttons'
+import { OutlineButtonBlack, OutlineButtonBlue } from '../ChatV2/general/Buttons'
 import * as Sentry from '@sentry/react'
 import useCurrentUser from '../../hooks/useCurrentUser'
 

src/client/components/ChatV2/Annotations.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { useFileSearchResults } from './api'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { OutlineButtonBlack } from './generics/Buttons'
+import { OutlineButtonBlack } from './general/Buttons'
 import SubjectIcon from '@mui/icons-material/Subject'
 
 const AnnotationTruncated = ({

src/client/components/ChatV2/ChatBox.tsx

@@ -11,7 +11,7 @@ import useUserStatus from '../../hooks/useUserStatus'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import ModelSelector from './ModelSelector'
-import { BlueButton, GrayButton, OutlineButtonBlack } from './generics/Buttons'
+import { BlueButton, GrayButton, OutlineButtonBlack } from './general/Buttons'
 import { useIsEmbedded } from '../../contexts/EmbeddedContext'
 
 export const ChatBox = ({

src/client/components/ChatV2/ChatV2.tsx

@@ -19,11 +19,11 @@ import { ChatBox } from './ChatBox'
 import { Conversation } from './Conversation'
 import { DisclaimerModal } from './Disclaimer'
 import { handleCompletionStreamError } from './error'
-import { ChatInfo } from './generics/ChatInfo'
+import { ChatInfo } from './general/ChatInfo'
 import RagSelector from './RagSelector'
 import { SettingsModal } from './SettingsModal'
 import { getCompletionStream } from './util'
-import { OutlineButtonBlack } from './generics/Buttons'
+import { OutlineButtonBlack } from './general/Buttons'
 import useCurrentUser from '../../hooks/useCurrentUser'
 import { useChatStream } from './useChatStream'
 import Annotations from './Annotations'

src/client/components/ChatV2/Conversation.tsx

@@ -8,16 +8,16 @@ import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import type { FileSearchCompletedData } from '../../../shared/types'
 import type { ActivityPeriod, Message } from '../../types'
-import { ConversationSplash } from './generics/ConversationSplash'
-import { LoadingMessage } from './generics/LoadingMessage'
+import { ConversationSplash } from './general/ConversationSplash'
+import { LoadingMessage } from './general/LoadingMessage'
 import { preprocessMath } from './util'
 import 'katex/dist/katex.min.css'
 import 'katex/dist/contrib/mhchem'
 import CopyToClipboardButton from '../Chat/CopyToClipboardButton'
 import { t } from 'i18next'
 import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
-import { BlueButton } from './generics/Buttons'
+import { BlueButton } from './general/Buttons'
 import { MutableRefObject } from 'react'
 
 const UserMessage = ({ content, attachements }: { content: string; attachements?: string }) => (

src/client/components/ChatV2/Disclaimer.tsx

@@ -1,7 +1,7 @@
 import { Modal, Box, IconButton, Checkbox, FormControlLabel, FormGroup } from '@mui/material'
 import { Close } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
-import { BlueButton } from './generics/Buttons'
+import { BlueButton } from './general/Buttons'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { useState, useEffect } from 'react'

src/client/components/ChatV2/EmailButton.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
 import useCurrentUser from '../../hooks/useCurrentUser'
 import type { Message } from '../../types'
 import { sendEmail } from '../../util/email'
-import { OutlineButtonBlack } from './generics/Buttons'
+import { OutlineButtonBlack } from './general/Buttons'
 
 const escapeHtml = (str: string): string =>
   str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;')
@@ -158,7 +158,7 @@ const formatEmail = (messages: Message[], t: any): string => {
         <head>
             <meta charset="UTF-8">
             <style>
-                body { 
+                body {
                     color: rgba(0, 0, 0, 0.8);
                     line-height: 1.6;
                     margin: 0 auto;

src/client/components/ChatV2/PromptSelector.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Divider, IconButton, ListSubheader, Menu, MenuItem } from
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Prompt } from '../../types'
+import { OutlineButtonBlack } from './general/Buttons'
 
 const PromptSelector = ({
   coursePrompts,
@@ -36,17 +37,17 @@ const PromptSelector = ({
 
   return (
     <Box mb={'0.5rem'}>
-      <Button
+      <OutlineButtonBlack
+        id="prompt-selector-button"
         disabled={!!mandatoryPrompt}
-        variant="outlined"
         onClick={(event) => {
           setAnchorEl(event.currentTarget)
         }}
         endIcon={mandatoryPrompt ? <Lock /> : <KeyboardArrowDown />}
       >
         {activePrompt?.name ?? t('settings:choosePrompt')}
         {!!mandatoryPrompt && ` - ${t('settings:promptLocked')}`}
-      </Button>
+      </OutlineButtonBlack>
 
       <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
         <MenuItem onClick={() => handleSelect(undefined)}>{t('settings:default')}</MenuItem>