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

Merged in chore/navigation-tests (pull request #206) 

Adds E2E tests for navigation (desktop/mobile) and preview

Approved-by: Daniel Egger
This commit is contained in:
Livio Bieri 2023-09-28 08:55:22 +00:00 committed by Daniel Egger
parent 05f111eada d646454ae9
commit c121895d3b
6 changed files with 166 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/header/CoursePreviewBar.vue
View File

@ -23,6 +23,7 @@ const { t } = useTranslation();
<div class="flex space-x-8">
<router-link
data-cy="preview-learn-path-link"
:to="courseSession.learning_path_url"
class="preview-nav-item"
:class="{ 'preview-nav-item--active': inLearningPath() }"
@ -31,6 +32,7 @@ const { t } = useTranslation();
</router-link>
<router-link
data-cy="preview-competence-profile-link"
:to="getCompetenceBaseUrl(courseSession)"
class="preview-nav-item"
:class="{ 'preview-nav-item--active': inCompetenceProfile() }"
@ -46,7 +48,7 @@ const { t } = useTranslation();
<style lang="postcss" scoped>
.preview-nav-item {
@apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-800;
@apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-900 focus:text-black;
}
.preview-nav-item--active {

10
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"
@ -109,6 +113,7 @@ onMounted(() => {
<div class="hidden space-x-8 lg:flex">
<template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
<router-link
data-cy="navigation-cockpit-link"
:to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
class="nav-item"
:class="{ 'nav-item--active': inCockpit() }"
@ -117,6 +122,7 @@ onMounted(() => {
</router-link>
<router-link
data-cy="navigation-preview-link"
:to="courseSessionsStore.currentCourseSession.learning_path_url"
target="_blank"
class="nav-item"
@ -129,6 +135,7 @@ onMounted(() => {
</template>
<template v-else>
<router-link
data-cy="navigation-learning-path-link"
:to="courseSessionsStore.currentCourseSession.learning_path_url"
class="nav-item"
:class="{ 'nav-item--active': inLearningPath() }"
@ -137,6 +144,7 @@ onMounted(() => {
</router-link>
<router-link
data-cy="navigation-competence-profile-link"
:to="
getCompetenceBaseUrl(courseSessionsStore.currentCourseSession)
"

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>

27
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 },
});
cy.request({
method: "POST", url: "/api/core/login/", body: {username, password},
});
};
export const logout = () => {
cy.request({
method: "POST",
url: "/api/core/logout/",
});
cy.request({
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}`);
}

84
cypress/e2e/navigation.cy.js Normal file
View File

@ -0,0 +1,84 @@
import {checkNavigationLink, EXPERT_LOGIN, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
const openMobileNavigation = () => {
cy.get('[data-cy="navigation-mobile-menu-button"]').click();
}
describe("navigation.cy.js", () => {
beforeEach(() => {
cy.manageCommand("cypress_reset");
});
describe("Desktop view", () => {
beforeEach(() => {
cy.viewport(1280, 720);
});
describe("Expert / Trainer", () => {
beforeEach(() => {
login(...EXPERT_LOGIN);
visitCoursePage("cockpit");
});
it("should have correct expert navigation", () => {
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);
visitCoursePage("learn");
});
it("should have correct navigation", () => {
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");
});
});
})
});

50
cypress/e2e/preview.cy.js
View File

@ -1,23 +1,45 @@
import {login} from "./helpers";
import {checkNavigationLink, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
describe("preview.cy.js", () => {
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");
});
});
it("Student does not see preview", () => {
login("test-student1@example.com", "test");
cy.visit("/course/test-lehrgang/learn/fahrzeug");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
});
describe("Participant", () => {
before(() => {
login(...PARTICIPANT_LOGIN);
});
it("Trainer sees preview exclusively on course", () => {
login("test-trainer1@example.com", "test");
it("should not show course preview on learn path", () => {
visitCoursePage("learn");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
});
cy.visit("/");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
cy.visit("/course/test-lehrgang/learn/fahrzeug");
cy.get('[data-cy="course-preview-bar"]').should("exist");
});
it("should not show course preview on competence", () => {
visitCoursePage("competence");
cy.get('[data-cy="course-preview-bar"]').should("not.exist");
});
})
});