Refactor some test code and fix small errors

client/cypress/fixtures/mocks.ts

@@ -1,5 +1,5 @@
 export const SELECTED_CLASS_ID = 987;
-export const SELECTED_CLASS_ID_ENCODED = btoa(`SchoolClassNode:${SELECTED_CLASS_ID}`);
+export const SELECTED_CLASS_ID_ENCODED = window.btoa(`SchoolClassNode:${SELECTED_CLASS_ID}`);
 const selectedClass = {
   id: SELECTED_CLASS_ID_ENCODED,
   name: 'Moordale',
@@ -10,11 +10,11 @@ const selectedClass = {
 
 let idIndex = 0;
 
-function* idGenerator(entity) {
+function* idGenerator(entity: string) {
   while (true) {
-    console.log(`generating id for ${entity}, ${idIndex}`);
+    // console.log(`generating id for ${entity}, ${idIndex}`);
     idIndex += 1;
-    yield btoa(`${entity}:${idIndex}`);
+    yield window.btoa(`${entity}:${idIndex}`);
   }
 }
 
@@ -45,6 +45,8 @@ export default {
     title: 'chapter-title',
     description: 'chapter-description',
     bookmark: null,
+    descriptionHiddenFor: [],
+    titleHiddenFor: [],
   }),
   ContentBlockNode: () => ({
     contents: [],
@@ -52,6 +54,7 @@ export default {
     slug: 'content-block-slug',
     userCreated: false,
     type: '',
+    instrumentCategory: null,
     id: getContentBlockId(),
   }),
   AssignmentNode: () => ({

client/cypress/support/helpers.ts

@@ -1,14 +1,16 @@
 // todo: clean up this file
 
+import { SchoolClassNode } from '@/__generated__/graphql';
+
 export const getMinimalMe = ({ readOnly = false, classReadOnly = false, isTeacher = true } = {}) => {
   const selectedClass = {
     name: 'Selected Class',
-    id: btoa('SchoolClassNode:987'),
+    id: window.btoa('SchoolClassNode:987'),
     readOnly: classReadOnly,
   };
   return {
     me: {
-      id: btoa('PrivateUserNode:1'),
+      id: window.btoa('PrivateUserNode:1'),
       readOnly,
       isTeacher,
       selectedClass,
@@ -17,13 +19,13 @@ export const getMinimalMe = ({ readOnly = false, classReadOnly = false, isTeache
   };
 };
 
-const getSchoolClassNode = (id, schoolClassName) => ({
+const getSchoolClassNode = (id: string, schoolClassName: string) => ({
-  id: btoa(`SchoolClassNode:${id}`),
+  id: window.btoa(`SchoolClassNode:${id}`),
   name: schoolClassName,
   __typename: 'SchoolClassNode',
 });
 
-export const assertStartPage = (onboarding) => {
+export const assertStartPage = (onboarding: boolean) => {
   if (onboarding) {
     cy.get('[data-cy=onboarding-page]').should('exist');
   } else {
@@ -31,8 +33,16 @@ export const assertStartPage = (onboarding) => {
   }
 };
 
+export const defaultModuleQueriesandMutations = {
+  // these are the queries on the module page
+  MeQuery: getMinimalMe(),
+  ModuleDetailsQuery: {},
+  ModuleEditModeQuery: {},
+  UpdateLastModule: {},
+};
+
 export const getMe = ({ schoolClasses, teacher }) => {
-  let schoolClassNodes;
+  let schoolClassNodes: SchoolClassNode[];
   if (schoolClasses) {
     schoolClassNodes = schoolClasses.map((schoolClass, i) => getSchoolClassNode(i, schoolClass));
   } else {

client/src/components/ContentBlock.vue

@@ -2,6 +2,7 @@
   <div
     :class="{ 'hideable-element--greyed-out': isHidden }"
     class="content-block__container hideable-element content-list__parent"
+    data-cy="content-block-div"
     ref="contentBlockDiv"
   >
     <div
@@ -307,7 +308,10 @@ const { mutate: doCreateHighlight } = useMutation(
           fragmentName: 'ContentBlockHighlightsFragment',
           data: {
             ...contentBlockWithHighlights,
-            highlights: [...contentBlockWithHighlights.highlights, highlight],
+            highlights: [
+              ...(contentBlockWithHighlights?.highlights.filter((h) => h.id !== highlight.id) || []),
+              highlight,
+            ],
           },
         });
       }

client/src/components/TextToSelect.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { onUnmounted, ref } from 'vue';
-import rangy from 'rangy';
-import 'rangy/lib/rangy-textrange';
-import Mark from 'mark.js';
-const markStart = ref(0);
-const markLength = ref(15);
-const paragraph = ref(null);
-const select2 = () => {
-  const instance = new Mark(paragraph.value);
-  console.log(paragraph.value);
-  // instance.mark("Text");
-  // const sel = rangy.getSelection();
-  // const range = sel.getRangeAt(0);
-  //
-  // console.log(range);
-  // console.log(sel.anchorNode);
-  // console.log(sel.focusNode);
-  // console.log(rangy.dom.isAncestorOf(root.value, sel.anchorNode));
-  instance.markRanges([{ start: markStart.value, length: markLength.value }]);
-};
-const clear = () => {
-  const instance = new Mark(paragraph.value);
-  instance.unmark();
-};
-
-const selectionHandler = (e) => {
-  console.log(e);
-  // const selection = window.getSelection();
-  const selection = rangy.getSelection();
-  if (selection && !selection?.isCollapsed) {
-    console.log('selection changed and something is there');
-    // getting selection
-    console.log(selection);
-    // const { anchorNode, focusNode } = selection;
-    // console.log(paragraph.value.contains(anchorNode));
-    // console.log(paragraph.value.contains(focusNode));
-    // const anchorNode = selection?.anchorNode
-    // get range
-    const range = selection.getRangeAt(0);
-    console.log(range);
-    // console.log(range.startContainer);
-    // console.log(range.startContainer.parentNode === paragraph.value);
-    // get start and end of range to use
-    const { startOffset, endOffset } = range;
-    // const { startContainer, endContainer, startOffset, endOffset } = range;
-    // find out what the offset is of those containers relative to the parent
-    // const start = getNodeOffset(startContainer, paragraph.value);
-    // const end = getNodeOffset(endContainer, paragraph.value);
-    const { start, end } = range.toCharacterRange(paragraph.value);
-    console.log(
-      `start: ${start}, end: ${end}, highlightStart: ${start + startOffset}, highlightEnd: ${end + endOffset}`
-    );
-    // markStart.value = start + startOffset;
-    markStart.value = start;
-    // markLength.value = end + endOffset - markStart.value;
-    markLength.value = end - markStart.value;
-    console.log(range.toCharacterRange(paragraph.value));
-  }
-};
-
-document.addEventListener('selectionchange', selectionHandler);
-
-onUnmounted(() => {
-  document.removeEventListener('selectionchange', selectionHandler);
-});
-</script>
-
-<template>
-  <div
-    class="greetings"
-    ref="root"
-  >
-    <pre>
-      {{ markStart }} / {{ markLength }}
-    </pre>
-    <h3>Here's some text</h3>
-    <p>
-      Here is some more Text to be selected. There's even some
-      <em>emphasized</em> words and even <a href="https://iterativ.ch">links</a>.
-    </p>
-    <p ref="paragraph">There are even <i>multiple</i> paragraphs.</p>
-    <ul>
-      <li>Hallo</li>
-      <li>Velo</li>
-    </ul>
-    <button @click="select">Select</button>
-    <button @click="select2">Select 2</button>
-    <button @click="clear">Unmark</button>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

client/src/graphql/cache.ts

@@ -1,3 +1,4 @@
+import { ContentBlockNode, HighlightNode } from '@/__generated__/graphql';
 import { makeVar, InMemoryCache } from '@apollo/client/core';
 import log from 'loglevel';
 
@@ -9,14 +10,14 @@ const helloEmailVar = makeVar('');
 const languageVar = makeVar('de');
 
 const idToRefFactory =
-  (__typename) =>
+  (__typename: string) =>
-    (_, { args, toReference }) => {
+  (_, { args, toReference }) => {
-      log.debug(`Referencing ${__typename} with ${args.id}`);
+    log.debug(`Referencing ${__typename} with ${args.id}`);
-      return toReference({
+    return toReference({
-        __typename,
+      __typename,
-        id: args.id,
+      id: args.id,
-      });
+    });
-    };
+  };
 
 const typePolicies = {
   ProjectNode: {
@@ -31,7 +32,7 @@ const typePolicies = {
   ChapterNode: {
     fields: {
       contentBlocks: {
-        merge(_existing, incoming) {
+        merge(_existing: ContentBlockNode[], incoming: ContentBlockNode[]) {
           // always replace the whole array
           return incoming;
         },
@@ -41,7 +42,7 @@ const typePolicies = {
   ModuleNode: {
     fields: {
       inEditMode: {
-        read(previous) {
+        read(previous: boolean | undefined) {
           return previous !== undefined ? previous : false;
         },
       },
@@ -61,6 +62,16 @@ const typePolicies = {
   RoomEntryNode: {
     keyFields: ['slug'],
   },
+  ContentBlockNode: {
+    fields: {
+      highlights: {
+        merge(_existing: HighlightNode[], incoming: HighlightNode[]) {
+          // always replace the whole array
+          return incoming;
+        },
+      },
+    },
+  },
   // https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#example
   Query: {
     fields: {

client/src/helpers/popover.ts

@@ -1,6 +1,5 @@
 import HighlightPopover from '@/components/highlights/HighlightPopover.vue';
 import { createApp } from 'vue';
-import { ResolveReject } from './types';
 
 interface Options {
   wrapper: HTMLElement;