More integration tests (#397)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v4150/esm]
+    branches: [v4160/more-integration-tests]
 
 jobs:
   build:

frontend/src/auth/AccountMenu.tsx

@@ -65,7 +65,11 @@ const AccountMenu = () => {
   if (user) {
     return (
       <div style={{ position: 'relative' }}>
-        <AvatarContainer onClick={openMenu} ref={menuAnchor}>
+        <AvatarContainer
+          onClick={openMenu}
+          ref={menuAnchor}
+          data-cy="account-menu"
+        >
           <Avatar user={user} />
           <DisplayName>{user.name}</DisplayName>
         </AvatarContainer>
@@ -76,7 +80,7 @@ const AccountMenu = () => {
             onClose={closeMenu}
           >
             {user && !user.pro && user.accountType !== 'anonymous' ? (
-              <MenuItem onClick={handleSubscribe}>
+              <MenuItem onClick={handleSubscribe} data-cy="account-menu-go-pro">
                 <ListItemIcon>
                   <Star
                     style={{
@@ -90,23 +94,23 @@ const AccountMenu = () => {
               </MenuItem>
             ) : null}
             {isNotAnon ? (
-              <MenuItem onClick={handleAccount}>
+              <MenuItem onClick={handleAccount} data-cy="account-menu-account">
                 <ListItemIcon>
                   <AccountCircle />
                 </ListItemIcon>
                 <ListItemText>{translations.Header.account}</ListItemText>
               </MenuItem>
             ) : null}
             {isAdmin ? (
-              <MenuItem onClick={handleAdmin}>
+              <MenuItem onClick={handleAdmin} data-cy="account-menu-admin">
                 <ListItemIcon>
                   <Key />
                 </ListItemIcon>
                 <ListItemText>{translations.Header.adminPanel}</ListItemText>
               </MenuItem>
             ) : null}
             {isAdmin || isNotAnon ? <Divider /> : null}
-            <MenuItem onClick={handleLogout}>
+            <MenuItem onClick={handleLogout} data-cy="account-menu-logout">
               <ListItemIcon>
                 <Logout />
               </ListItemIcon>

frontend/src/auth/modal/AnonAuth.tsx

@@ -71,7 +71,7 @@ const AnonAuth = ({ onClose, onUser }: AnonAuthProps) => {
         placeholder={loginTranslations.namePlaceholder}
         fullWidth
         style={{ marginTop: 20 }}
-        data-cy="anon-input"
+        inputProps={{ 'data-cy': 'anon-input' }}
       />
     </Wrapper>
   );

frontend/src/auth/modal/account/Login.tsx

@@ -94,8 +94,10 @@ const Login = ({
       />
       <div style={{ marginTop: 20 }} />
       <Links>
-        <Link onClick={onAskRegistration}>{translations.registerLink}</Link>
-        <Link onClick={onAskPasswordReset}>
+        <Link data-cy="register" onClick={onAskRegistration}>
+          {translations.registerLink}
+        </Link>
+        <Link data-cy="forgot-password" onClick={onAskPasswordReset}>
           {translations.forgotPasswordLink}
         </Link>
       </Links>

frontend/src/auth/modal/account/Register.tsx

@@ -99,6 +99,7 @@ const Register = ({ onClose }: RegisterProps) => {
             color="primary"
             autoFocus
             disabled={!validEmail || passwordScore < 3 || !validName}
+            data-cy="register-button"
           >
             {translations.registerButton}
           </Button>
@@ -127,6 +128,7 @@ const Register = ({ onClose }: RegisterProps) => {
             style={{ marginTop: 20 }}
             leftIcon={<Person />}
             required
+            data-cy="register-name"
           />
           <Input
             value={registerEmail}
@@ -144,6 +146,7 @@ const Register = ({ onClose }: RegisterProps) => {
                 ? translations.errorInvalidEmail
                 : undefined
             }
+            data-cy="register-email"
           />
           <Input
             value={registerPassword}
@@ -156,6 +159,7 @@ const Register = ({ onClose }: RegisterProps) => {
             style={{ marginTop: 20 }}
             leftIcon={<VpnKey />}
             required
+            data-cy="register-password"
           />
           <Suspense fallback={<span />}>
             <PasswordStrength

frontend/src/views/account/AccountPage.tsx

@@ -138,6 +138,7 @@ function AccountPage() {
             variant="contained"
             onClick={handleDeleteModalOpen}
             style={{ marginTop: 20 }}
+            data-cy="delete-account-button"
           >
             {translations.deleteAccount.deleteData}
           </Button>

frontend/src/views/account/delete/DeleteModal.tsx

@@ -65,12 +65,17 @@ export function DeleteModal({
       deleteSessions,
       deleteVotes,
     };
+    const buttonProps = {
+      color: 'error',
+      variant: 'contained',
+      'data-cy': 'delete-modal-confirm',
+    };
     confirm({
       title: translations.confirm.title,
       description: translations.confirm.description,
       confirmationText: translations.confirm.confirmation,
       cancellationText: translations.confirm.cancellation,
-      confirmationButtonProps: { color: 'error', variant: 'contained' },
+      confirmationButtonProps: buttonProps as any,
     })
       .then(async () => {
         trackEvent('account/gdpr/delete-account');
@@ -146,6 +151,7 @@ export function DeleteModal({
             checked={deleteSessions}
             onToggle={setDeleteSessions}
             icon={<Dashboard />}
+            cy="delete-modal-sessions"
           >
             <p>{translations.deleteSessions.main}</p>
             {deleteSessions ? (
@@ -161,6 +167,7 @@ export function DeleteModal({
             checked={deletePosts}
             onToggle={setDeletePosts}
             icon={<Note />}
+            cy="delete-modal-posts"
           >
             <p>{translations.deletePosts.main}</p>
             {deletePosts ? (
@@ -176,6 +183,7 @@ export function DeleteModal({
             checked={deleteVotes}
             onToggle={setDeleteVotes}
             icon={<ThumbUpOutlined />}
+            cy="delete-modal-votes"
           >
             <p>{translations.deleteVotes.main}</p>
             {deleteVotes ? (
@@ -190,7 +198,12 @@ export function DeleteModal({
         </List>
       </DialogContent>
       <DialogActions>
-        <Button color="error" variant="contained" onClick={handleDelete}>
+        <Button
+          color="error"
+          variant="contained"
+          onClick={handleDelete}
+          data-cy="delete-modal-delete-button"
+        >
           {translations.deleteAccountButton}
         </Button>
         <Button onClick={onClose}>{translations.cancelButton}</Button>
@@ -203,6 +216,7 @@ type DeleteItemProps = {
   disabled?: boolean;
   checked: boolean;
   icon: React.ReactNode;
+  cy?: string;
   onToggle?: (value: boolean) => void;
 };
 
@@ -211,6 +225,7 @@ function DeleteItem({
   disabled,
   icon,
   checked,
+  cy,
   onToggle,
 }: React.PropsWithChildren<DeleteItemProps>) {
   return (
@@ -225,6 +240,7 @@ function DeleteItem({
           edge="end"
           disabled={disabled}
           checked={checked}
+          data-cy={cy}
           onChange={(_, v) => (onToggle ? onToggle(v) : noop)}
         />
       </ListItemSecondaryAction>

frontend/src/views/game/GameFooter.tsx

@@ -99,7 +99,10 @@ function GameFooter({ onReady, onMessage, messages }: GameFooterProps) {
         </Button>
       ) : null}
       {user ? (
-        <IconButton onClick={chatOpen ? closeChat : openChat}>
+        <IconButton
+          onClick={chatOpen ? closeChat : openChat}
+          data-cy="open-chat-button"
+        >
           <Badge color="secondary" badgeContent={unreadCount ?? undefined}>
             <Chat htmlColor={colors.orange[500]} />
           </Badge>

frontend/src/views/game/board/Column.tsx

@@ -109,7 +109,7 @@ const Column: React.FC<ColumnProps> = ({
               </EnterIcon>
             </InputAdornment>
           }
-          data-cy="column-input"
+          inputProps={{ 'data-cy': 'column-input' }}
         />
         {permissions.canCreateGroup ? (
           <AddGroup>

frontend/src/views/game/chat/Chat.tsx

@@ -26,7 +26,7 @@ export default function Chat({ messages, onMessage }: ChatProps) {
     [encrypt, onMessage]
   );
   return (
-    <Container>
+    <Container data-cy="chat-container">
       <ScrollContainer>
         <Messages>
           {sortedMessages.map((m) => (
@@ -37,6 +37,7 @@ export default function Chat({ messages, onMessage }: ChatProps) {
       <Input
         placeholder={translations.writeAMessage}
         onNewMessage={handleInput}
+        cy="chat-input"
       />
     </Container>
   );

frontend/src/views/game/chat/Input.tsx

@@ -3,6 +3,7 @@ import { IconButton, Input as BaseInput, InputAdornment } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 
 type InputProps = {
+  cy?: string;
   placeholder?: string;
   onNewMessage: (value: string) => void;
 };
@@ -14,6 +15,7 @@ function isEnter(code: string) {
 export default function Input({
   placeholder,
   onNewMessage: onAdd,
+  cy,
 }: InputProps) {
   const [value, setValue] = useState('');
   const [valid, setValid] = useState(false);
@@ -56,6 +58,7 @@ export default function Input({
       onKeyPress={handleKeyPress}
       style={{ border: 'none', outline: 'none', margin: 10 }}
       multiline
+      inputProps={{ 'data-cy': cy }}
       endAdornment={
         <InputAdornment position="end">
           <IconButton

integration/Makefile

@@ -1,5 +1,7 @@
 master:
-	docker-compose -f docker-compose.ci.master.yml up --exit-code-from cypress
+	docker-compose rm -v -f
+	docker-compose -f docker-compose.local.master.yml pull
+	docker-compose -f docker-compose.local.master.yml up
 
 local:
 	docker build -f ../backend/Dockerfile -t retrospected/backend:local ../backend

integration/cypress/integration/test.spec.js

@@ -12,16 +12,20 @@ function get(name, rest) {
   return cy.get(`[data-cy=${name}]${rest ?? ''}`);
 }
 
+
 describe('Post workflow', () => {
   it('Should login and write a post', () => {
     cy.visit('/');
 
     // We need to wait until the backend is ready
     cy.wait(+Cypress.env('backend_delay'));
+
+    // Close cookie banner
+    cy.get('a.wpcc-btn').click();
 
     get('login-button').click();
     get('anon-tab').click();
-    get('anon-input', ' > input').focus().type('Zelensky');
+    get('anon-input').focus().type('Zelensky');
     get('anon-login-button').click();
 
     // Home page should display the user name
@@ -31,7 +35,7 @@ describe('Post workflow', () => {
     get('new-session-button').click();
 
     // And write a post
-    get('column-input', ' > input').first().focus().type('Slava Ukraini!{enter}');
+    get('column-input').first().focus().type('Slava Ukraini!{enter}');
 
     // Reload the page
     cy.reload();
@@ -43,9 +47,12 @@ describe('Post workflow', () => {
   it('Should change language and translate the app', () => {
     cy.visit('/');
 
+    // Close cookie banner
+    cy.get('a.wpcc-btn').click();
+
     get('login-button').click();
     get('anon-tab').click();
-    get('anon-input', ' > input').focus().type('Zelensky');
+    get('anon-input').focus().type('Zelensky');
     get('anon-login-button').click();
 
     // Home page should display the user name
@@ -56,7 +63,70 @@ describe('Post workflow', () => {
     get('language-picker').click();
     get('language-picker-item-fr').click();
 
+    // Exit panel
+    cy.get('body').type('{esc}');
+
     // Home page should now be in French
     cy.get('#content').should('contain', 'Bienvenue, Zelensky');
+
+    // Logout
+    get('account-menu').click();
+    get('account-menu-logout').click();
+
+  });
+
+  it('Should be able to create a new account', () => {
+    const id = Date.now();
+
+    cy.visit('/');
+
+    // Close cookie banner
+    cy.get('a.wpcc-btn').click();
+
+    // Login
+    get('login-button').click();
+
+    // Select the account tab
+    get('account-tab').click();
+
+    // Select register
+    get('register').click();
+
+    // Add some data
+    get('register-name').type('V Zelensky');
+    get('register-email').type(`vlad.zelensky.${id}@ukraine.ua`);
+    get('register-password').type('A-str0ng-Pa33!çà');
+
+    // Register
+    get('register-button').click();
+
+    // Create a new session, and add some messages
+    get('new-session-button').click();
+
+    // And write a post
+    get('column-input').first().focus().type('Slava Ukraini!{enter}');
+    cy.get('#content').should('contain', 'Slava Ukraini!');
+
+    // And some chat
+    get('open-chat-button').click({force: true});
+    get('chat-input').focus().type('This is a message{enter}');
+    cy.get('#content').should('contain', 'This is a message');
+
+    // Close
+    get('open-chat-button').click({force: true});
+
+    // Go to the user admin and delete the account
+    get('account-menu').click();
+    get('account-menu-account').click();
+    get('delete-account-button').click();
+    get('delete-modal-sessions').click();
+    get('delete-modal-posts').click();
+    get('delete-modal-votes').click();
+    get('delete-modal-delete-button').click();
+    get('delete-modal-confirm').click();
+
+    // We should be back to the home page
+    cy.get('div.marketing-content')
+    .should('contain', 'Real-time Retrospectives')
   });
 });