diff --git a/cypress/e2e/LogIn.cy.ts b/cypress/e2e/LogIn.cy.ts new file mode 100644 index 0000000000000000000000000000000000000000..5d26ad9b4a82bc34e5817e00a5b2e077b6ac2d7d --- /dev/null +++ b/cypress/e2e/LogIn.cy.ts @@ -0,0 +1,26 @@ +describe('Login spec', () => { + it('Can log in', () => { + cy.visit('/login') + + cy.get('[data-testid="LogInButton"]').should('be.disabled') + + cy.get('[data-testid="NameInput"]').type("JohnSmith12") + cy.get('[data-testid="NameInput"]').should('have.value', "JohnSmith12") + + cy.get('[data-testid="LogInButton"]').should('be.disabled') + + cy.get('[data-testid="PasswordInput"]').type("password") + cy.get('[data-testid="PasswordInput"]').should('have.value', "password") + + cy.get('[data-testid="LogInButton"]').should('be.enabled') + cy.get('[data-testid="LogInButton"]').click() + cy.url().should('include', '/homepage') + }) + + it('Can navigate to new user', () => { + cy.visit('/login') + cy.get('[data-testid="NewUserLink"]').click() + cy.url().should('include', '/signup') + + }) +}) \ No newline at end of file diff --git a/src/views/FrontPage/LoginView.vue b/src/views/FrontPage/LoginView.vue index 3ef1f951ee7792c50d0826fb2a054a368edd6eb8..1c88f724af12c9b1b8f21efe30e188d89d1d8281 100644 --- a/src/views/FrontPage/LoginView.vue +++ b/src/views/FrontPage/LoginView.vue @@ -36,15 +36,21 @@ async function login() { <div id="LoginFields"> <div id="UserDiv"> <h2 id="Username">Brukernavn</h2> - <input id="NameField" placeholder="Skriv inn dit brukernavn" v-model="username"> + <input id="NameField" placeholder="Skriv inn dit brukernavn" v-model="username" data-testid="NameInput"> </div> <div id="PasswordDiv"> <h2 id="Password">Passord</h2> - <input id="PasswordField" type="password" placeholder="Skriv inn dit passord" v-model="password"> + <input id="PasswordField" type="password" placeholder="Skriv inn dit passord" v-model="password" data-testid="PasswordInput"> </div> </div> - <button id="LogInButton" @click="login" :disabled="!username || password.length < 8" :class="{ 'disabled-button': !username || password.length < 8 }">LogIn</button> - <h2 @click="navigateToNewUser()" id="NewUser">Ny til Sparesti? Trykk her for å lage en profil!</h2> + <button id="LogInButton" + @click="login" + :disabled="!username || password.length < 8" + :class="{ 'disabled-button': !username || password.length < 8 }" + data-testid="LogInButton"> + LogIn + </button> + <h2 @click="navigateToNewUser()" id="NewUser" data-testid="NewUserLink">Ny til Sparesti? Trykk her for å lage en profil!</h2> </div> </template>