ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: more tests for mobile navigation

This commit is contained in:
Livio Bieri 2023-09-21 16:24:11 +02:00
parent d87f922dec
commit dbe74f754b
5 changed files with 130 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/header/MainNavigationBar.vue
View File

@ -77,7 +77,11 @@ onMounted(() => {
<div class="relative flex h-16 justify-between">
<div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
<!-- Mobile menu button -->
<div class="flex" @click="state.showMobileNavigationMenu = true">
<div
data-cy="navigation-mobile-menu-button"
class="flex"
@click="state.showMobileNavigationMenu = true"
>
<button
type="button"
class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"

20
client/src/components/header/MobileMenu.vue
View File

@ -58,24 +58,36 @@ const courseSessionsStore = useCourseSessionsStore();
<ul class="mt-6">
<template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
<li class="mb-6">
<button @click="clickLink(`${courseSession.course_url}/cockpit`)">
<button
data-cy="navigation-mobile-cockpit-link"
@click="clickLink(`${courseSession.course_url}/cockpit`)"
>
{{ $t("cockpit.title") }}
</button>
</li>
<li class="mb-6">
<button @click="clickLink(courseSession.learning_path_url)">
<button
data-cy="navigation-mobile-preview-link"
@click="clickLink(courseSession.learning_path_url)"
>
{{ $t("a.VorschauTeilnehmer") }}
</button>
</li>
</template>
<template v-else>
<li class="mb-6">
<button @click="clickLink(courseSession.learning_path_url)">
<button
data-cy="navigation-mobile-learning-path-link"
@click="clickLink(courseSession.learning_path_url)"
>
{{ $t("general.learningPath") }}
</button>
</li>
<li class="mb-6">
<button @click="clickLink(getCompetenceBaseUrl(courseSession))">
<button
data-cy="navigation-mobile-competence-profile-link"
@click="clickLink(getCompetenceBaseUrl(courseSession))"
>
{{ $t("competences.title") }}
</button>
</li>

19
cypress/e2e/helpers.js
View File

@ -1,14 +1,23 @@
export const login = (username, password) => {
cy.request({
method: "POST",
url: "/api/core/login/",
body: { username, password },
method: "POST", url: "/api/core/login/", body: {username, password},
});
};
export const logout = () => {
cy.request({
method: "POST",
url: "/api/core/logout/",
method: "POST", url: "/api/core/logout/",
});
};
export const BASE_URL = "/course/test-lehrgang";
export const EXPERT_LOGIN = ["test-trainer1@example.com", "test"];
export const PARTICIPANT_LOGIN = ["test-student1@example.com", "test"];
export const visitCoursePage = (subPath) => {
cy.visit(`${BASE_URL}/${subPath}`);
}
export const checkNavigationLink = (dataCy, expectedLink) => {
cy.get(`[data-cy="${dataCy}"]`).should('have.attr', 'href').and('eq', `${BASE_URL}/${expectedLink}`);
}

80
cypress/e2e/navigation.cy.js
View File

@ -1,15 +1,7 @@
import {login} from "./helpers";
import {checkNavigationLink, EXPERT_LOGIN, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
const BASE_URL = "/course/test-lehrgang";
const EXPERT_LOGIN = ["test-trainer1@example.com", "test"];
const PARTICIPANT_LOGIN = ["test-student1@example.com", "test"];
const visitCoursePage = (subPath) => {
cy.visit(`${BASE_URL}/${subPath}`);
}
const checkNavigationLink = (dataCy, expectedLink) => {
cy.get(`[data-cy="${dataCy}"]`).should('have.attr', 'href').and('eq', `${BASE_URL}/${expectedLink}`);
const openMobileNavigation = () => {
cy.get('[data-cy="navigation-mobile-menu-button"]').click();
}
describe("Navigation tests", () => {
@ -25,48 +17,68 @@ describe("Navigation tests", () => {
describe("Expert / Trainer", () => {
beforeEach(() => {
login(...EXPERT_LOGIN);
});
it("should show course preview on learn", () => {
visitCoursePage("learn");
cy.get('[data-cy="course-preview-bar"]').should("exist");
});
it("should show course preview on competence", () => {
visitCoursePage("competence");
cy.get('[data-cy="course-preview-bar"]').should("exist");
});
it("should have correct course preview navigation", () => {
visitCoursePage("learn");
checkNavigationLink("preview-learn-path-link", "cockpit");
checkNavigationLink("preview-competence-profile-link", "learn");
visitCoursePage("cockpit");
});
it("should have correct expert navigation", () => {
visitCoursePage("cockpit");
checkNavigationLink("navigation-cockpit-link", "cockpit");
checkNavigationLink("navigation-preview-link", "learn");
cy.get('[data-cy="navigation-competence-profile-link"]').should("not.exist");
cy.get('[data-cy="navigation-learning-path-link"]').should("not.exist");
});
});
describe("Participant", () => {
beforeEach(() => {
login(...PARTICIPANT_LOGIN);
});
it("should not show course preview on learn path", () => {
visitCoursePage("learn");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
});
it("should have correct navigation", () => {
visitCoursePage("learn");
checkNavigationLink("navigation-competence-profile-link", "competence");
checkNavigationLink("navigation-learning-path-link", "learn");
cy.get('[data-cy="navigation-cockpit-link"]').should("not.exist");
cy.get('[data-cy="navigation-preview-link"]').should("not.exist");
});
});
});
describe("Mobile view", () => {
beforeEach(() => {
cy.viewport(375, 667);
});
describe("Expert / Trainer", () => {
beforeEach(() => {
login(...EXPERT_LOGIN);
visitCoursePage("cockpit");
openMobileNavigation();
});
it("should have correct expert navigation", () => {
cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("exist");
cy.get('[data-cy="navigation-mobile-preview-link"]').should("exist");
cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("not.exist");
cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("not.exist");
})
})
describe("Participant", () => {
beforeEach(() => {
login(...PARTICIPANT_LOGIN);
visitCoursePage("learn");
openMobileNavigation();
});
it("should have correct navigation", () => {
cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("not.exist");
cy.get('[data-cy="navigation-mobile-preview-link"]').should("not.exist");
cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("exist");
cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("exist");
});
});
})
});

45
cypress/e2e/preview.cy.js Normal file
View File

@ -0,0 +1,45 @@
import {checkNavigationLink, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
describe("Preview Bar", () => {
beforeEach(() => {
cy.manageCommand("cypress_reset");
})
describe("Expert / Trainer", () => {
beforeEach(() => {
login("test-trainer1@example.com", "test");
});
it("should show course preview on learn", () => {
visitCoursePage("learn");
cy.get('[data-cy="course-preview-bar"]').should("exist");
});
it("should show course preview on competence", () => {
visitCoursePage("competence");
cy.get('[data-cy="course-preview-bar"]').should("exist");
});
it("should have correct course preview navigation", () => {
visitCoursePage("learn");
checkNavigationLink("preview-learn-path-link", "learn");
checkNavigationLink("preview-competence-profile-link", "competence");
});
});
describe("Participant", () => {
before(() => {
login(...PARTICIPANT_LOGIN);
});
it("should not show course preview on learn path", () => {
visitCoursePage("learn");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
});
it("should not show course preview on competence", () => {
visitCoursePage("competence");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
});
})
});