Refactor mobile chat into modal (#3038)

* feat(mobile): refactor mobile chat into modal

- Make page always scrollable
- Move mobile chat into a standalone modal

* fix(test): split out mobile browser test specs

* fix(mobile): force chat button to render on top of footer

* fix: some small updates from review

* fix: hide/show hide chat menu option based on width

* fix: chat button icon getting cut off

* chore(tests): add browser tests for mobile chat modal

* chore(tests): add story for ChatModal component

* fix(test): quiet shellcheck

* fix: remove unused import

* fix(tests): silence storybook linting warning

* fix(ui): reposition chat modal button icon with transform

test/automated/browser/cypress/e2e/offline/06_offline_mobile.cy.js

@@ -0,0 +1,16 @@
+import { setup } from '../../support/setup.js';
+import filterTests from '../../support/filterTests';
+
+setup();
+
+filterTests(['mobile'], () => {
+	describe(`Live mobile tests`, () => {
+		it('Can visit the page', () => {
+			cy.visit('http://localhost:8080');
+		});
+
+		it('Mobile chat button should not be visible', () => {
+			cy.get('#mobile-chat-button').should('not.exist');
+		});
+	});
+});

test/automated/browser/cypress/e2e/online/01_online_live.cy.js

@@ -1,5 +1,6 @@
 import { setup } from '../../support/setup.js';
 import fetchData from '../../support/fetchData.js';
+import filterTests from '../../support/filterTests';
 
 setup();
 
@@ -12,73 +13,60 @@ describe(`Live tests`, () => {
 		cy.get('.vjs-big-play-button').should('be.visible');
 	});
 
-	// it('Chat should be visible', () => {
-	// 	cy.get('#chat-container').should('be.visible');
-	// });
-
 	it('User menu should be visible', () => {
 		cy.get('#user-menu').should('be.visible');
 	});
-
-	// it('Chat join message should exist', () => {
-	// 	cy.contains('joined the chat').should('be.visible');
-	// });
-
-	it('User menu should be visible', () => {
-		cy.get('#user-menu').should('be.visible');
-	});
-
-	it('Click on user menu', () => {
-		cy.get('#user-menu').click();
-	});
-
-	it('Can toggle chat off', () => {
-		cy.contains('Hide Chat').click();
-	});
-
-	it('Chat should not be visible', () => {
-		cy.get('#chat-container').should('not.exist');
-	});
-
-	it('Click on user menu', () => {
-		cy.get('#user-menu').click();
-	});
-
-	it('Can toggle chat on', () => {
-		cy.contains('Show Chat').click();
-	});
-
-	// it('Chat should be re-visible', () => {
-	// 	cy.get('#chat-container').should('be.visible');
-	// });
-
-	it('Click on user menu', () => {
-		cy.get('#user-menu').click();
-	});
-
-	it('Show change name modal', () => {
-		cy.contains('Change name').click();
-	});
-
-	it('Should change name', () => {
-		cy.get('#name-change-field').focus();
-		cy.get('#name-change-field').type('{ctrl+a}');
-		cy.get('#name-change-field').type('my-new-name');
-		cy.get('#name-change-submit').click();
-		cy.get('.ant-modal-close-x').click();
-		cy.wait(1500);
-		// cy.contains('is now known as').should('be.visible');
-	});
-
-	it('Should change to custom websocket host', () => {
-		fetchData('http://localhost:8080/api/admin/config/sockethostoverride', {
-			method: 'POST',
-			data: { value: 'ws://localhost:8080' },
-		});
-		cy.wait(1500);
-	});
-
-	it('Refresh page with new socket host', () => {
-		cy.visit('http://localhost:8080');
-	});
+});
+
+filterTests(['desktop'], () => {
+	describe(`Live desktop tests`, () => {
+		it('Click on user menu', () => {
+			cy.get('#user-menu').click();
+		});
+		it('Can toggle chat off', () => {
+			cy.contains('Hide Chat').click();
+		});
+
+		it('Chat should not be visible', () => {
+			cy.get('#chat-container').should('not.exist');
+		});
+
+		it('Click on user menu', () => {
+			cy.get('#user-menu').click();
+		});
+
+		it('Can toggle chat on', () => {
+			cy.contains('Show Chat').click();
+		});
+
+		it('Click on user menu', () => {
+			cy.get('#user-menu').click();
+		});
+
+		it('Show change name modal', () => {
+			cy.contains('Change name').click();
+		});
+
+		it('Should change name', () => {
+			cy.get('#name-change-field').focus();
+			cy.get('#name-change-field').type('{ctrl+a}');
+			cy.get('#name-change-field').type('my-new-name');
+			cy.get('#name-change-submit').click();
+			cy.get('.ant-modal-close-x').click();
+			cy.wait(1500);
+			// cy.contains('is now known as').should('be.visible');
+		});
+
+		it('Should change to custom websocket host', () => {
+			fetchData('http://localhost:8080/api/admin/config/sockethostoverride', {
+				method: 'POST',
+				data: { value: 'ws://localhost:8080' },
+			});
+			cy.wait(1500);
+		});
+
+		it('Refresh page with new socket host', () => {
+			cy.visit('http://localhost:8080');
+		});
+	});
 });

test/automated/browser/cypress/e2e/online/06_online_mobile_live.cy.js

@@ -0,0 +1,40 @@
+import { setup } from '../../support/setup.js';
+import filterTests from '../../support/filterTests';
+
+setup();
+
+filterTests(['mobile'], () => {
+	describe(`Live mobile tests`, () => {
+		it('Can visit the page', () => {
+			cy.visit('http://localhost:8080');
+		});
+
+		it('Mobile chat button should be visible', () => {
+			cy.get('#mobile-chat-button').should('be.visible');
+		});
+
+		it('Click mobile chat button', () => {
+			cy.get('#mobile-chat-button').click();
+		});
+
+		it('Mobile chat modal should be visible', () => {
+			cy.get('.ant-modal').should('be.visible');
+		});
+
+		it('Chat container should be visible', () => {
+			cy.get('#chat-container').should('be.visible');
+		});
+
+		it('Chat input should be visible', () => {
+			cy.get('#chat-input').should('be.visible');
+		});
+
+		it('Click on user menu', () => {
+			cy.get('#chat-modal-user-menu').click();
+		});
+
+		it('Show change name modal', () => {
+			cy.contains('Change name').click();
+		});
+	});
+});

test/automated/browser/run.sh

@@ -15,7 +15,6 @@ else
 	echo "Google Chrome not found. Using Electron."
 fi
 
-
 # Bundle the updated web code into the server codebase.
 if [ -z "$SKIP_BUILD" ]; then
 	echo "Bundling web code into server..."
@@ -30,7 +29,6 @@ else
 	echo "Skipping web build..."
 fi
 
-
 # Install the web test framework
 if [ -z "$SKIP_BUILD" ]; then
 	echo "Installing test dependencies..."
@@ -47,13 +45,13 @@ install_ffmpeg
 start_owncast
 
 # Run cypress browser tests for desktop
-npx cypress run --browser "$BROWSER" --group "desktop-offline" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js"
+npx cypress run --parallel --browser "$BROWSER" --group "desktop-offline" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js"
 # Run cypress browser tests for mobile
-npx cypress run --browser "$BROWSER" --group "mobile-offline" --ci-build-id $BUILD_ID --tag "mobile,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js" --config viewportWidth=375,viewportHeight=667
+npx cypress run --parallel --browser "$BROWSER" --group "mobile-offline" --env tags=mobile --ci-build-id $BUILD_ID --tag "mobile,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js" --config viewportWidth=375,viewportHeight=667
 
 start_stream
 
 # Run cypress browser tests for desktop
-npx cypress run --browser "$BROWSER" --group "desktop-online" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js"
+npx cypress run --parallel --browser "$BROWSER" --group "desktop-online" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js"
 # Run cypress browser tests for mobile
-npx cypress run --browser "$BROWSER" --group "mobile-online" --ci-build-id $BUILD_ID --tag "mobile,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js" --config viewportWidth=375,viewportHeight=667
+npx cypress run --parallel --browser "$BROWSER" --group "mobile-online" --env tags=mobile --ci-build-id $BUILD_ID --tag "mobile,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js" --config viewportWidth=375,viewportHeight=667

test/automated/screenshots/run.sh

@@ -5,7 +5,9 @@ set -o errexit
 set -o pipefail
 
 finish() {
+	# shellcheck disable=SC2317
 	kill_with_kids "$BROWSERSTACK_PID"
+	# shellcheck disable=SC2317
 	kill_with_kids "$STREAM_PID"
 }