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

Fix some more cypress tests

This commit is contained in:
Ramon Wenger 2022-10-26 15:47:19 +02:00
parent a0fd6fddd1
commit da6bab1789
11 changed files with 462 additions and 464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/cypress/e2e/frontend/rooms/room-page.spec.js
View File

@ -27,6 +27,7 @@ describe('The Room Page (Teacher)', () => {
AddRoomEntry: { AddRoomEntry: {
addRoomEntry: { addRoomEntry: {
roomEntry: { roomEntry: {
slug: 'entry-slug',
title: entryTitle, title: entryTitle,
contents: [ contents: [
{ {

28
client/src/components/content-block-form/ContentFormSection.vue
View File

@ -1,8 +1,13 @@
<template> <template>
<div class="content-form-section"> <div class="content-form-section">
<h2 class="content-form-section__heading"> <h2 class="content-form-section__heading">
<component class="content-form-section__icon" :is="icon" /> <component
<span class="content-form-section__title" data-cy="content-form-section-title">{{ title }}</span> class="content-form-section__icon"
:is="icon"
/> <span
class="content-form-section__title"
data-cy="content-form-section-title"
>{{ title }}</span>
</h2> </h2>
<content-element-actions <content-element-actions
@ -22,30 +27,31 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from "vue";
import formElementIcons from '@/components/ui/form-element-icons.js'; import formElementIcons from '@/components/ui/form-element-icons.js';
import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue'; import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
import { ActionOptions } from '@/@types'; import {ActionOptions} from "@/@types";
export default { export default defineComponent({
props: { props: {
title: { title: {
type: String, type: String,
default: '', default: ''
}, },
icon: { icon: {
type: String, type: String,
default: '', default: ''
}, },
actions: { actions: {
type: Object as () => ActionOptions, type: Object as () => ActionOptions,
default: () => {}, default: () => {}
}, }
}, },
components: { components: {
ContentElementActions, ContentElementActions,
...formElementIcons, ...formElementIcons
}, }
}; });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

101
client/src/components/content-forms/TipTap.vue
View File

@ -1,31 +1,20 @@
<template> <template>
<div class="tip-tap"> <div class="tip-tap">
<editor-content class="tip-tap__editor-wrapper" :editor="editor" /> <editor-content
class="tip-tap__editor-wrapper"
:editor="editor"
/>
<toggle :bordered="false" :checked="isList" label="Als Liste formatieren" @input="toggleList" /> <toggle
:bordered="false"
:checked="isList"
label="Als Liste formatieren"
@input="toggleList"
/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
<<<<<<< HEAD
import Vue, { PropType } from 'vue';
import { Editor, EditorContent } from '@tiptap/vue-2';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import BulletList from '@tiptap/extension-bullet-list';
import ListItem from '@tiptap/extension-list-item';
import Toggle from '@/components/ui/Toggle.vue';
||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
import Vue, {PropType} from 'vue';
import {Editor, EditorContent} from "@tiptap/vue-2";
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import BulletList from '@tiptap/extension-bullet-list';
import ListItem from '@tiptap/extension-list-item';
import Toggle from "@/components/ui/Toggle.vue";
=======
import {PropType, defineComponent} from 'vue'; import {PropType, defineComponent} from 'vue';
import {Editor, EditorContent} from "@tiptap/vue-3"; import {Editor, EditorContent} from "@tiptap/vue-3";
import Document from '@tiptap/extension-document'; import Document from '@tiptap/extension-document';
@ -34,7 +23,6 @@ import Toggle from '@/components/ui/Toggle.vue';
import BulletList from '@tiptap/extension-bullet-list'; import BulletList from '@tiptap/extension-bullet-list';
import ListItem from '@tiptap/extension-list-item'; import ListItem from '@tiptap/extension-list-item';
import Toggle from "@/components/ui/Toggle.vue"; import Toggle from "@/components/ui/Toggle.vue";
>>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
interface Data { interface Data {
editor: Editor | undefined; editor: Editor | undefined;
@ -43,12 +31,11 @@ interface Value {
text: string; text: string;
} }
<<<<<<< HEAD export default defineComponent({
export default Vue.extend({
props: { props: {
value: { value: {
type: Object as PropType<Value>, type: Object as PropType<Value>,
validator(value: Value) { validator: (value: Value) => {
return Object.prototype.hasOwnProperty.call(value, 'text'); return Object.prototype.hasOwnProperty.call(value, 'text');
}, },
}, },
@ -56,7 +43,7 @@ export default Vue.extend({
components: { components: {
Toggle, Toggle,
EditorContent, EditorContent
}, },
data(): Data { data(): Data {
@ -70,8 +57,8 @@ export default Vue.extend({
return this.editor?.isActive('bulletList') || false; return this.editor?.isActive('bulletList') || false;
}, },
text(): string { text(): string {
return this.value.text; return this.value?.text || '';
}, }
}, },
watch: { watch: {
@ -84,43 +71,33 @@ export default Vue.extend({
} }
editor.commands.setContent(text, false); editor.commands.setContent(text, false);
}, }
}, },
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
editorProps: { editorProps: {
attributes: { attributes: {
class: 'tip-tap__editor', class: 'tip-tap__editor'
||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3) }
export default Vue.extend({
props: {
value: {
type: Object as PropType<Value>,
validator(value: Value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
=======
export default defineComponent({
props: {
value: {
type: Object as PropType<Value>,
validator: (value: Value) => {
return Object.prototype.hasOwnProperty.call(value, 'text');
>>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
},
}, },
content: this.text, content: this.text,
extensions: [Document, Paragraph, Text, BulletList, ListItem], extensions: [
Document,
Paragraph,
Text,
BulletList,
ListItem
],
onUpdate: () => { onUpdate: () => {
const text=(this.editor as Editor).getHTML(); const text=(this.editor as Editor).getHTML();
this.$emit('input', text); this.$emit('input', text);
this.$emit('change-text', text); this.$emit('change-text', text);
}, }
<<<<<<< HEAD
}); });
}, },
beforeDestroy() { beforeUnmount() {
this.editor?.destroy(); this.editor?.destroy();
}, },
@ -128,49 +105,43 @@ export default Vue.extend({
toggleList() { toggleList() {
const editor = this.editor as Editor; const editor = this.editor as Editor;
editor.chain().selectAll().toggleBulletList().run(); editor.chain().selectAll().toggleBulletList().run();
||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
text(): string {
return this.value.text;
}
=======
text(): string {
return this.value?.text || '';
}
>>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
},
}, },
}
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~styles/helpers'; @import '~styles/helpers';
.tip-tap { .tip-tap {
&__editor-wrapper { &__editor-wrapper {
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
} }
:deep(.tip-tap__editor) { /deep/ &__editor {
@include inputstyle; @include inputstyle;
flex-direction: column; flex-direction: column;
min-height: 150px; min-height: 150px;
} }
:deep(ul) { /deep/ ul {
padding-left: $medium-spacing; padding-left: $medium-spacing;
list-style: initial; list-style: initial;
} }
:deep(li) { /deep/ li {
@include inputfont; @include inputfont;
} }
:deep(div) { /deep/ div {
@include inputfont; @include inputfont;
} }
:deep(p) { /deep/ p {
@include inputfont; @include inputfont;
} }
} }
</style> </style>

3
client/src/components/instruments/FilterEntry.vue
View File

@ -4,6 +4,7 @@
class="filter-entry" class="filter-entry"
data-cy="filter-entry" data-cy="filter-entry"
:style="categoryStyle" :style="categoryStyle"
@click="$emit('filter')"
> >
<span class="filter-entry__text">{{ text }}</span> <span class="filter-entry__text">{{ text }}</span>
<span <span
@ -48,6 +49,8 @@
ChevronRight, ChevronRight,
}, },
emits: ['filter'],
apollo: { apollo: {
instrumentFilter: { instrumentFilter: {
query: INSTRUMENT_FILTER_QUERY, query: INSTRUMENT_FILTER_QUERY,

23
client/src/components/instruments/FilterGroup.vue
View File

@ -7,7 +7,7 @@
:category="category" :category="category"
:is-category="true" :is-category="true"
:id="category.id" :id="category.id"
@click="setCategoryFilter(category.id)" @filter="setCategoryFilter(category.id)"
/> />
<div class="filter-group__children"> <div class="filter-group__children">
<filter-entry <filter-entry
@ -17,19 +17,20 @@
v-for="type in types" v-for="type in types"
:id="type.id" :id="type.id"
:key="type.id" :key="type.id"
@click="setFilter(`type:${type.id}`)" @filter="setFilter(`type:${type.id}`)"
/> />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {defineComponent} from 'vue';
import FilterEntry from '@/components/instruments/FilterEntry'; import FilterEntry from '@/components/instruments/FilterEntry';
import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql'; import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql'; import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
export default { export default defineComponent({
props: { props: {
title: { title: {
type: String, type: String,
@ -50,15 +51,15 @@ export default {
apollo: { apollo: {
instrumentFilter: { instrumentFilter: {
query: INSTRUMENT_FILTER_QUERY, query: INSTRUMENT_FILTER_QUERY
}, }
}, },
data() { data() {
return { return {
instrumentFilter: { instrumentFilter: {
currentFilter: '', currentFilter: ''
}, }
}; };
}, },
inheritAttrs: false, inheritAttrs: false,
@ -75,12 +76,12 @@ export default {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: SET_FILTER_MUTATION, mutation: SET_FILTER_MUTATION,
variables: { variables: {
filter, filter
}
});
}
}, },
}); });
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

6
client/src/components/portfolio/ShareLink.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<a class="share-icon"> <a
class="share-icon"
@click="$emit('share')"
>
<share-icon class="share-icon__icon" /> <share-icon class="share-icon__icon" />
<span class="share-icon__text"> <span class="share-icon__text">
<template v-if="!final">Mit Lehrperson teilen</template> <template v-if="!final">Mit Lehrperson teilen</template>
@ -19,6 +22,7 @@
default: false, default: false,
}, },
}, },
emits: ['share'],
components: {ShareIcon}, components: {ShareIcon},
}; };
</script> </script>

56
client/src/components/rooms/RoomForm.vue
View File

@ -1,33 +1,41 @@
<template> <template>
<page-form class="room-form" title="Neuer Raum" @save="$emit('save', localRoom)"> <page-form
<page-form-input label="Titel" v-model="localRoom.title" /> class="room-form"
title="Neuer Raum"
@save="$emit('save', localRoom)"
>
<page-form-input
label="Titel"
v-model="localRoom.title"
/>
<page-form-input label="Beschreibung" type="textarea" v-model="localRoom.description" /> <page-form-input
label="Beschreibung"
type="textarea"
v-model="localRoom.description"
/>
<h2 class="room-form__property-heading">Farbe</h2> <h2 class="room-form__property-heading">
<color-chooser :selected-color="localRoom.appearance" @input="updateColor" /> Farbe
</h2>
<color-chooser
:selected-color="localRoom.appearance"
@input="updateColor"
/>
<template #footer> <template #footer>
<button type="submit" data-cy="room-form-save" class="button button--primary room-form__save-button"> <button
type="submit"
data-cy="room-form-save"
class="button button--primary room-form__save-button"
>
Speichern Speichern
</button> </button>
<<<<<<< HEAD
<router-link to="/rooms" tag="button" class="button"> Abbrechen </router-link>
||||||| parent of c96f9b5b (Remove obsolete tag attributes)
<router-link
to="/rooms"
tag="button"
class="button"
>
Abbrechen
</router-link>
=======
<router-link <router-link
to="/rooms" to="/rooms"
class="button" class="button"
> >
Abbrechen Abbrechen
</router-link> </router-link>
>>>>>>> c96f9b5b (Remove obsolete tag attributes)
</template> </template>
</page-form> </page-form>
</template> </template>
@ -45,13 +53,13 @@ export default {
components: { components: {
ColorChooser, ColorChooser,
PageForm, PageForm,
PageFormInput, PageFormInput
}, },
data() { data() {
return { return {
localRoom: Object.assign({}, this.room), localRoom: Object.assign({}, this.room),
me: {}, me: {}
}; };
}, },
@ -59,7 +67,7 @@ export default {
this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance); this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
}, },
beforeDestroy() { beforeUnmount() {
this.$store.dispatch('setSpecialContainerClass', ''); this.$store.dispatch('setSpecialContainerClass', '');
}, },
@ -67,19 +75,19 @@ export default {
updateColor(newColor) { updateColor(newColor) {
this.localRoom.appearance = newColor; this.localRoom.appearance = newColor;
this.$store.dispatch('setSpecialContainerClass', newColor); this.$store.dispatch('setSpecialContainerClass', newColor);
}, }
}, },
apollo: { apollo: {
me: { me: {
query: ME_QUERY, query: ME_QUERY,
}, }
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~styles/helpers'; @import "~styles/helpers";
.room-form { .room-form {
&__property-heading { &__property-heading {

2
client/src/mixins/room.js
View File

@ -13,7 +13,7 @@ export default {
RoomActions, RoomActions,
}, },
beforeDestroy() { beforeUnmount() {
this.$store.dispatch('setSpecialContainerClass', ''); this.$store.dispatch('setSpecialContainerClass', '');
}, },

2
client/src/pages/portfolio/project.vue
View File

@ -8,7 +8,7 @@
:final="project.final" :final="project.final"
data-cy="project-share-link" data-cy="project-share-link"
class="project__share" class="project__share"
@click="updateProjectShareState(project.slug, !project.final)" @share="updateProjectShareState(project.slug, !project.final)"
/> />
<project-actions :share-buttons="false" class="project__more" :slug="project.slug" v-if="canEdit" /> <project-actions :share-buttons="false" class="project__more" :slug="project.slug" v-if="canEdit" />

55
client/src/pages/rooms/editRoomEntry.vue
View File

@ -1,9 +1,15 @@
<template> <template>
<content-block-form :content-block="roomEntry" :features="features" v-if="roomEntry.id" @save="save" @back="goBack" /> <content-block-form
:content-block="roomEntry"
:features="features"
v-if="roomEntry.id"
@save="save"
@back="goBack"
/>
</template> </template>
<script> <script>
import Vue from 'vue'; import {defineComponent} from 'vue';
import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql'; import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql'; import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
@ -13,16 +19,16 @@ import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
import {ROOMS_FEATURE_SET} from '@/consts/features.consts'; import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
import {ROOM_PAGE} from '@/router/room.names'; import {ROOM_PAGE} from '@/router/room.names';
export default Vue.extend({ export default defineComponent( {
props: { props: {
slug: { slug: {
type: String, type: String,
required: true, required: true
}, },
entrySlug: { entrySlug: {
type: String, type: String,
required: true, required: true
}, }
}, },
components: { components: {
@ -44,10 +50,10 @@ export default Vue.extend({
query: ROOM_ENTRY_QUERY, query: ROOM_ENTRY_QUERY,
variables() { variables() {
return { return {
slug: this.entrySlug, slug: this.entrySlug
}; };
}, }
}, }
}, },
methods: { methods: {
@ -55,8 +61,8 @@ export default Vue.extend({
this.$router.push({ this.$router.push({
name: ROOM_PAGE, name: ROOM_PAGE,
params: { params: {
slug: this.slug, slug: this.slug
}, }
}); });
}, },
save({title, contents}) { save({title, contents}) {
@ -65,22 +71,14 @@ export default Vue.extend({
title, title,
contents, contents,
}; };
this.$apollo this.$apollo.mutate({
.mutate({
mutation: UPDATE_ROOM_ENTRY_MUTATION, mutation: UPDATE_ROOM_ENTRY_MUTATION,
variables: { variables: {
input: { input: {
roomEntry: entry, roomEntry: entry,
},
},
update: (
store,
{
data: {
updateRoomEntry: { roomEntry },
},
} }
) => { },
update: (store, {data: {updateRoomEntry: {roomEntry}}}) => {
try { try {
const fragment = ROOM_ENTRY_FRAGMENT; const fragment = ROOM_ENTRY_FRAGMENT;
const id = store.identify(roomEntry); const id = store.identify(roomEntry);
@ -89,21 +87,24 @@ export default Vue.extend({
store.writeFragment({ store.writeFragment({
id, id,
fragment, fragment,
data, data
}); });
} catch (e) { } catch (e) {
// Query did not exist in the cache, and apollo throws a generic Error. Do nothing // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
} }
}, }
}) }).then(() => {
.then(() => {
this.goBack(); this.goBack();
}); });
},
}
}, },
} ); } );
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~styles/helpers'; @import '~styles/helpers';
</style> </style>

59
client/src/pages/rooms/newRoomEntry.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<content-block-form :content-block="roomEntry" :features="features" @save="save" @back="goBack" /> <content-block-form
:content-block="roomEntry"
:features="features"
@save="save"
@back="goBack"
/>
</template> </template>
<script> <script>
import Vue from 'vue'; import {defineComponent} from 'vue';
import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql'; import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql'; import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
@ -12,12 +17,12 @@ import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
import {ROOMS_FEATURE_SET} from '@/consts/features.consts'; import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
import {ROOM_PAGE} from '@/router/room.names'; import {ROOM_PAGE} from '@/router/room.names';
export default Vue.extend({ export default defineComponent( {
props: { props: {
slug: { slug: {
type: String, type: String,
required: true, required: true
}, }
}, },
components: { components: {
@ -39,32 +44,24 @@ export default Vue.extend({
this.$router.push({ this.$router.push({
name: ROOM_PAGE, name: ROOM_PAGE,
params: { params: {
slug: this.slug, slug: this.slug
}, }
}); });
}, },
save({title, contents}) { save({title, contents}) {
const entry = { const entry = {
title, title,
contents, contents,
roomSlug: this.slug, roomSlug: this.slug
}; };
this.$apollo this.$apollo.mutate({
.mutate({
mutation: NEW_ROOM_ENTRY_MUTATION, mutation: NEW_ROOM_ENTRY_MUTATION,
variables: { variables: {
input: { input: {
roomEntry: entry, roomEntry: entry,
},
},
update: (
store,
{
data: {
addRoomEntry: { roomEntry },
},
} }
) => { },
update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
try { try {
const query = ROOM_ENTRIES_QUERY; const query = ROOM_ENTRIES_QUERY;
const variables = {slug: this.slug}; const variables = {slug: this.slug};
@ -72,33 +69,39 @@ export default Vue.extend({
if (room && room.roomEntries) { if (room && room.roomEntries) {
const newEdge ={ const newEdge ={
node: roomEntry, node: roomEntry,
__typename: 'RoomEntryNodeEdge', __typename: 'RoomEntryNodeEdge'
}; };
const edges = [newEdge, ...room.roomEntries.edges]; const edges = [
newEdge,
...room.roomEntries.edges
];
const data = { const data = {
room: { room: {
...room, ...room,
roomEntries: { roomEntries: {
...room.roomEntries, ...room.roomEntries,
edges, edges
}, }
}, }
}; };
store.writeQuery({query, variables, data}); store.writeQuery({query, variables, data});
} }
} catch (e) { } catch (e) {
// Query did not exist in the cache, and apollo throws a generic Error. Do nothing // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
} }
}, }
}) }).then(() => {
.then(() => {
this.goBack(); this.goBack();
}); });
},
}
}, },
} ); } );
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~styles/helpers'; @import '~styles/helpers';
</style> </style>