Fix various e2e tests related to the react-router migration

Among other things, `SubmitButton` now accepts a `disabled` prop in case you
want to check for more things.

app/components/Form/SubmitButton.tsx

@@ -8,6 +8,7 @@ type Props = {
   className?: string;
   allowPristine?: boolean;
   danger?: boolean;
+  disabled?: boolean;
 };
 
 export const SubmitButton = ({
@@ -16,12 +17,13 @@ export const SubmitButton = ({
   className,
   allowPristine,
   danger = false,
+  disabled = false,
 }: Props) =>
   spySubmittable(
     (submittable) => (
       <Button
         submit
-        disabled={!submittable}
+        disabled={!submittable || disabled}
         onClick={onClick}
         className={className}
         danger={danger}

app/components/Search/index.tsx

@@ -2,8 +2,8 @@ import { debounce } from 'lodash';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { autocomplete, toggleSearch } from 'app/actions/SearchActions';
+import { selectIsLoggedIn } from 'app/reducers/auth';
 import { selectAutocompleteRedux } from 'app/reducers/search';
-import { useUserContext } from 'app/routes/app/AppRoute';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { Keyboard } from 'app/utils/constants';
 import QuickLinks from './QuickLinks';
@@ -13,7 +13,7 @@ import SearchResults from './SearchResults';
 import { getExternalLinks, getAdminLinks, getRegularLinks } from './utils';
 
 const Search = () => {
-  const { loggedIn } = useUserContext();
+  const loggedIn = useAppSelector(selectIsLoggedIn);
   const results = useAppSelector(selectAutocompleteRedux);
   const searching = useAppSelector((state) => state.search.searching);
   const allowed = useAppSelector((state) => state.allowed);

app/routes/contact/components/ContactForm.tsx

@@ -16,8 +16,8 @@ import {
   LegoFinalForm,
 } from 'app/components/Form';
 import { GroupType } from 'app/models';
-import { selectIsLoggedIn } from 'app/reducers/auth';
 import { selectGroup, selectGroupsWithType } from 'app/reducers/groups';
+import { useUserContext } from 'app/routes/app/AppRoute';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { isNotNullish } from 'app/utils';
 import { createValidator, maxLength, required } from 'app/utils/validation';
@@ -32,6 +32,8 @@ const validate = createValidator({
 const REVUE_BOARD_GROUP_ID = 59;
 
 const ContactForm = () => {
+  const { loggedIn } = useUserContext();
+
   const committees = useAppSelector((state) =>
     selectGroupsWithType(state, {
       groupType: GroupType.Committee,
@@ -43,8 +45,6 @@ const ContactForm = () => {
     })
   );
   const groups = [...committees, revueBoard].filter(isNotNullish);
-
-  const loggedIn = useAppSelector((state) => selectIsLoggedIn(state));
   const fetching = useAppSelector((state) => state.groups.fetching);
 
   const dispatch = useAppDispatch();
@@ -54,7 +54,8 @@ const ContactForm = () => {
     () =>
       Promise.all([
         dispatch(fetchAllWithType(GroupType.Committee)),
-        dispatch(fetchGroup(REVUE_BOARD_GROUP_ID)),
+        // The revue board group does not exist in local dev environment
+        dispatch(fetchGroup(REVUE_BOARD_GROUP_ID, { propagateError: false })),
       ]),
     []
   );
@@ -74,14 +75,14 @@ const ContactForm = () => {
         form.reset();
         dispatch(
           addToast({
-            message: 'Melding er sendt.',
+            message: 'Melding er sendt',
           })
         );
       })
       .catch(() =>
         dispatch(
           addToast({
-            message: 'Kunne ikke sende melding.',
+            message: 'Kunne ikke sende melding',
           })
         )
       );

app/routes/meetings/components/MeetingList.tsx

@@ -184,6 +184,7 @@ const MeetingList = () => {
   );
 
   useEffect(() => {
+    // TODO: This causes an endless amount of requests if the user has no older meetings
     if (showFetchOlder && meetingSections.length === 0 && !loading) {
       fetchOlder();
     }

app/routes/users/components/ChangePassword.tsx

@@ -31,7 +31,7 @@ const ChangePasswordForm = () => {
 
   return (
     <TypedLegoForm onSubmit={onSubmit} validate={validate}>
-      {({ handleSubmit }) => (
+      {({ handleSubmit, valid }) => (
         <form onSubmit={handleSubmit}>
           <Field
             label="Gammelt passord"
@@ -52,7 +52,9 @@ const ChangePasswordForm = () => {
             type="password"
             component={TextInput.Field}
           />
-          <SubmitButton danger>Endre passord</SubmitButton>
+          <SubmitButton disabled={!valid} danger>
+            Endre passord
+          </SubmitButton>
         </form>
       )}
     </TypedLegoForm>

cypress/e2e/password_change_spec.js

@@ -10,7 +10,7 @@ describe('Change password', () => {
   const newPassword = 'Abakus123';
   const weakPassword = 'Testing123';
 
-  it('Can change password', () => {
+  it('can change password', () => {
     cy.visit('/users/me/settings/profile');
 
     button('Endre passord').should('be.disabled');
@@ -25,7 +25,7 @@ describe('Change password', () => {
     cy.url().should('include', `/users/me`);
   });
 
-  it('Should require certain password strength', () => {
+  it('should require certain password strength', () => {
     cy.visit('/users/me/settings/profile');
 
     field('password').type(password).blur();

cypress/e2e/poll_spec.js

@@ -112,11 +112,7 @@ describe('Polls', () => {
 
     cy.contains('Lagre endringer').click();
 
-    // cannot check url because there is no url change on save, so let's check that the button disappears
-    cy.contains('Lagre endringer').should('not.exist');
-    cy.contains(poll_form.title);
-    cy.contains(poll_form.choice_1);
-    cy.contains(poll_form.choice_2);
+    cy.url().should('not.contain', '/polls/1');
 
     cy.visit('/');
     cy.contains('Avstemning');

cypress/e2e/profile_spec.js

@@ -78,6 +78,7 @@ describe('Profile settings', () => {
     cy.visit('/users/me/settings/profile');
 
     cy.contains('Lagre').should('be.disabled');
+
     cy.get('input[name=firstName]').clear().type(updatedUser.firstName);
     cy.get('input[name=lastName]').clear().type(updatedUser.lastName);
     cy.get('input[name=gender]').check(updatedUser.gender);
@@ -86,14 +87,12 @@ describe('Profile settings', () => {
 
     cy.contains('Lagre').should('not.be.disabled').click();
 
-    // TODO: Should use me in URL instead of username
-    // cy.url().should('include', '/users/me');
-    cy.url().should('include', `/users/${initialUser.username}`);
-
-    cy.window().then(() => {
-      // TODO: Should be scrolled to top
-      // expect(win.scrollY).to.be.closeTo(0, 50);
-    });
+    cy.url().should('include', '/users/me');
+    cy.get(c('infoCard'))
+      .first()
+      .find('button')
+      .should('contain', 'Innstillinger')
+      .click();
 
     // Check that settings were changed properly
     cy.visit('/users/me/settings/profile');