echo-webkom · renovate · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022
diff --git a/cypress/integration/entry-box.spec.ts b/cypress/integration/entry-box.spec.ts
@@ -12,7 +12,7 @@ describe('Entry Box', () => {
 
                 cy.visit('/');
                 cy.get('[data-cy=entry-box-bedpres]').within(() => {
-                    cy.get(`[data-cy="${bedpresPage}"]`).click();
+                    cy.get(`[data-cy="${bedpresPage}"]`).click({ force: true });
                     cy.url().should('include', bedpresPage);
                 });
             });
@@ -24,7 +24,7 @@ describe('Entry Box', () => {
 
                 cy.visit('/');
                 cy.get('[data-cy=entry-box-event]').within(() => {
-                    cy.get(`[data-cy="${eventPage}"]`).click();
+                    cy.get(`[data-cy="${eventPage}"]`).click({ force: true });
                     cy.url().should('include', eventPage);
                 });
             });

diff --git a/cypress/integration/happening-registration.spec.ts b/cypress/integration/happening-registration.spec.ts
@@ -4,19 +4,24 @@ import users from '../fixtures/users.json';
 import { happenings } from '../fixtures/happening.json';
 
 const checkSubmitRegistration = (degree: string, degreeYear: number) => {
-    cy.get('[data-cy=reg-btn]').click();
+    cy.get('[data-cy=reg-btn]').click({ force: true });
+
+    cy.wait(1000);
+
     cy.get('[data-cy=reg-form]').should('be.visible');
 
     cy.get('input[name=email]').type(`${degree}${degreeYear}@test.com`);
     cy.get('input[name=firstName]').type('Test');
     cy.get('input[name=lastName]').type('McTest');
-    cy.get('select[name=degree]').select(degree);
+    cy.get('select[name=degree]').select(degree, { force: true });
     cy.get('input[name=degreeYear]').check(degreeYear.toString(), { force: true });
     cy.get('input[id=terms1]').check({ force: true });
     cy.get('input[id=terms2]').check({ force: true });
     cy.get('input[id=terms3]').check({ force: true });
 
-    cy.get('button[type=submit]').click();
+    cy.get('[data-cy=reg-submit-btn]').click({ force: true });
+
+    cy.wait(1000);
 
     cy.get('li[class=chakra-toast]').contains('Påmeldingen din er registrert!');
 };
@@ -34,7 +39,10 @@ describe('Happening registration', () => {
                 });
 
                 it('Popup form appears correctly', () => {
-                    cy.get('[data-cy=reg-btn]').click();
+                    cy.get('[data-cy=reg-btn]').click({ force: true });
+
+                    cy.wait(1000);
+
                     cy.get('[data-cy=reg-form]').should('be.visible');
 
                     cy.get('input[name=email]').should('be.visible');

diff --git a/cypress/integration/nav.spec.ts b/cypress/integration/nav.spec.ts
@@ -19,19 +19,19 @@ describe('Nav Menus', () => {
 
             describe('navbar', () => {
                 it('Should navigate to om-echo page', () => {
-                    cy.get('[data-cy=nav-item]').contains('Om echo').click();
+                    cy.get('[data-cy=nav-item]').contains('Om echo').click({ force: true });
                     cy.url().should('include', '/om-oss');
                 });
                 it('Should navigate to for-bedrifter page', () => {
-                    cy.get('[data-cy=nav-item]').contains('For Bedrifter').click();
+                    cy.get('[data-cy=nav-item]').contains('For Bedrifter').click({ force: true });
                     cy.url().should('include', '/for-bedrifter');
                 });
                 it('Should navigate to for-studenter page', () => {
-                    cy.get('[data-cy=nav-item]').contains('For Studenter').click();
+                    cy.get('[data-cy=nav-item]').contains('For Studenter').click({ force: true });
                     cy.url().should('include', '/for-studenter');
                 });
                 it('Should navigate to home page', () => {
-                    cy.get('[data-cy=nav-item]').contains('Hjem').click();
+                    cy.get('[data-cy=nav-item]').contains('Hjem').click({ force: true });
                     cy.url().should('eq', 'http://localhost:3000/');
                 });
             });

diff --git a/cypress/integration/registration-deletion.spec.ts b/cypress/integration/registration-deletion.spec.ts
@@ -19,9 +19,9 @@ describe('Happening registration', () => {
                     it('Registrations are deleted properly', () => {
                         cy.get('[data-cy=reg-row]').should('have.length', rows);
                         cy.get('[data-cy=delete-button]').first().should('be.visible');
-                        cy.get('[data-cy=delete-button]').first().click();
+                        cy.get('[data-cy=delete-button]').first().click({ force: true });
 
-                        cy.get('[data-cy=confirm-delete-button]').click();
+                        cy.get('[data-cy=confirm-delete-button]').click({ force: true });
                     });
                 });
             }

diff --git a/package.json b/package.json
@@ -150,7 +150,7 @@
         "@testing-library/dom": "8.13.0",
         "@testing-library/jest-dom": "5.16.4",
         "@testing-library/react": "13.1.1",
-        "@testing-library/user-event": "13.5.0",
+        "@testing-library/user-event": "14.1.1",
         "@types/jest": "27.4.1",
         "@types/node": "14.18.13",
         "@types/react": "18.0.5",

diff --git a/src/components/__tests__/header.test.tsx b/src/components/__tests__/header.test.tsx
@@ -1,29 +1,50 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
 import Header from '../header';
 import { render } from './testing-utils';
 
 describe('Header', () => {
-    test('renders without crashing', () => {
-        const { getByTestId } = render(<Header />);
-        expect(getByTestId(/header-standard/i)).toBeInTheDocument();
+    test('renders without crashing', async () => {
+        render(<Header />);
+        const header = screen.getByTestId(/header-standard/i);
+
+        await waitFor(() => header);
+
+        expect(header).toBeInTheDocument();
     });
 
-    test('renders correctly', () => {
-        const { getByTestId } = render(<Header />);
-        expect(getByTestId(/header-standard/i)).toBeInTheDocument();
-        expect(getByTestId(/header-logo/i)).toBeInTheDocument();
-        expect(getByTestId(/navbar-standard/i)).toBeInTheDocument();
-        expect(getByTestId(/drawer-button/i)).toBeInTheDocument();
+    test('renders correctly', async () => {
+        render(<Header />);
+        const header = screen.getByTestId(/header-standard/i);
+        const headerLogo = screen.getByTestId(/header-logo/i);
+        const navbarStandard = screen.getByTestId(/navbar-standard/i);
+        const drawerButton = screen.getByTestId(/drawer-button/i);
+
+        await waitFor(() => header);
+        await waitFor(() => headerLogo);
+        await waitFor(() => navbarStandard);
+        await waitFor(() => drawerButton);
+
+        expect(header).toBeInTheDocument();
+        expect(headerLogo).toBeInTheDocument();
+        expect(navbarStandard).toBeInTheDocument();
+        expect(drawerButton).toBeInTheDocument();
     });
 
-    test('drawer button opens a chakra drawer', () => {
-        const { getByTestId, getByText } = render(<Header />);
-        const drawerButton = getByTestId(/drawer-button/i);
-        userEvent.click(drawerButton);
-        // drawer exists in DOM
-        expect(getByTestId(/navbar-drawer/i)).toBeInTheDocument();
-        // Drawer Header exists
-        expect(getByText(/navigasjon/i)).toBeInTheDocument();
+    test('drawer button opens a chakra drawer', async () => {
+        const user = userEvent.setup();
+        render(<Header />);
+        const drawerButton = screen.getByTestId(/drawer-button/i);
+
+        await waitFor(() => drawerButton);
+        expect(drawerButton).toBeInTheDocument();
+
+        await user.click(drawerButton);
+
+        const navText = screen.getByText(/navigasjon/i);
+        await waitFor(() => navText);
+
+        expect(navText).toBeInTheDocument();
     });
 });
diff --git a/src/components/registration-form.tsx b/src/components/registration-form.tsx
@@ -246,7 +246,7 @@ const RegistrationForm = ({ happening, regVerifyToken, type, backendUrl }: Props
                                 </VStack>
                             </ModalBody>
                             <ModalFooter>
-                                <Button type="submit" mr={3} colorScheme="teal">
+                                <Button type="submit" mr={3} colorScheme="teal" data-cy="reg-submit-btn">
                                     Send inn
                                 </Button>
                                 <Button onClick={onClose}>Lukk</Button>

diff --git a/yarn.lock b/yarn.lock
@@ -2454,12 +2454,10 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@14.1.1":
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.1.1.tgz#e1ff6118896e4b22af31e5ea2f9da956adde23d8"
+  integrity sha512-XrjH/iEUqNl9lF2HX9YhPNV7Amntkcnpw0Bo1KkRzowNDcgSN9i0nm4Q8Oi5wupgdfPaJNMAWa61A+voD6Kmwg==
 
 "@tootallnate/once@1":
   version "1.1.2"