Add a test for the "Toggle Solutions" page

Also do some refactoring to support it

client/cypress/e2e/frontend/modules/show-solutions.cy.ts

@@ -0,0 +1,53 @@
+const moduleId = window.btoa('ModuleNode:1');
+const operations = {
+  MeQuery: {
+    me: {
+      isTeacher: true,
+      permissions: ['users.can_manage_school_class_content'],
+    },
+  },
+  ModuleDetailsQuery: {
+    module: {
+      title: 'Module With Solutions',
+      solutionsEnabled: false,
+      slug: 'some-module',
+      id: moduleId,
+      chapters: [],
+      language: 'de',
+      level: null,
+      category: null,
+    },
+  },
+  ModuleEditModeQuery: {},
+  UpdateLastModule: {},
+  UpdateSolutionVisibility: ({ input: { enabled } }) => {
+    return {
+      updateSolutionVisibility: {
+        success: true,
+        solutionsEnabled: enabled,
+      },
+    };
+  },
+};
+describe('Show solutions', () => {
+  beforeEach(() => {
+    cy.setup();
+    cy.mockGraphqlOps({ operations });
+  });
+  it('goes to the settings and toggles the "Show solutions" option', () => {
+    cy.visit('/module/some-module');
+
+    cy.getByDataCy('module-settings-button').click();
+
+    cy.getByDataCy('base-input-container').should('have.data', 'checked', false);
+    cy.getByDataCy('base-input-container').click();
+    cy.wait('@UpdateSolutionVisibility');
+    cy.getByDataCy('tick-icon').should('be.visible');
+
+    cy.getByDataCy('back-link').click();
+    cy.getByDataCy('solutions-enabled').should('contain', 'true');
+
+    cy.getByDataCy('module-settings-button').click();
+    cy.getByDataCy('tick-icon').should('be.visible');
+  });
+});

client/cypress/support/commands.ts

@@ -60,6 +60,7 @@ const mockGraphql = (options?: any) => {
     // rebuilding what was in cypress-graphql-mock package here, because now we can just intercept the graphql call instead of messing with fetch
     cy.intercept('POST', '/api/graphql', (req) => {
       const { operationName, query, variables } = req.body;
+      req.alias = operationName;
       return getRootValue(currentOperations, operationName, variables)
         .then((rootValue) => {
           if (!rootValue) {

client/src/components/icons/Tick.vue

@@ -2,7 +2,8 @@
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
-    id="shape"
+    data-cy="tick-icon"
+    id="tick"
   >
     <polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72" />
   </svg>

client/src/components/modules/ModuleSubNavigation.vue

@@ -2,6 +2,7 @@
   <nav class="module-sub-navigation sub-navigation">
     <back-link
       :title="module.title"
+      data-cy="back-link"
       type="module"
     />
   </nav>

client/src/components/toggle-menu/ToggleSolutionsForModule.vue

@@ -35,7 +35,7 @@ export default {
 
   computed: {
     canToggleSolutions() {
-      return this.me.permissions.includes('users.can_manage_school_class_content');
+      return this.me.isTeacher;
     },
     slug() {
       return this.$route.params.slug;