From a6fdb2d0b0164dcf9ef3305172aac66799c05422 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 7 Feb 2024 19:00:46 +0100
Subject: [PATCH] Add a test for the "Toggle Solutions" page

Also do some refactoring to support it
---
 .../e2e/frontend/modules/show-solutions.cy.ts | 53 +++++++++++++++++++
 client/cypress/support/commands.ts            |  1 +
 client/src/components/icons/Tick.vue          |  3 +-
 .../modules/ModuleSubNavigation.vue           |  1 +
 .../toggle-menu/ToggleSolutionsForModule.vue  |  2 +-
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 client/cypress/e2e/frontend/modules/show-solutions.cy.ts

diff --git a/client/cypress/e2e/frontend/modules/show-solutions.cy.ts b/client/cypress/e2e/frontend/modules/show-solutions.cy.ts
new file mode 100644
index 00000000..b26b39fa
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/client/cypress/support/commands.ts b/client/cypress/support/commands.ts
index af0f79d1..6df5d473 100644
--- a/client/cypress/support/commands.ts
+++ b/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) {
diff --git a/client/src/components/icons/Tick.vue b/client/src/components/icons/Tick.vue
index cde654f8..015e63ed 100644
--- a/client/src/components/icons/Tick.vue
+++ b/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>
diff --git a/client/src/components/modules/ModuleSubNavigation.vue b/client/src/components/modules/ModuleSubNavigation.vue
index 5b78a4fa..ac1a314c 100644
--- a/client/src/components/modules/ModuleSubNavigation.vue
+++ b/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>
diff --git a/client/src/components/toggle-menu/ToggleSolutionsForModule.vue b/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
index ef540134..73182f98 100644
--- a/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
+++ b/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;