Merge pull request #621 from NDLANO/search-page-cypress-tests

Add search page cypress tests

e2e/integration/frontpage_spec.js

@@ -10,7 +10,6 @@ import { visitOptions } from '../support';
 
 describe('Front page', () => {
   beforeEach(() => {
-    cy.server();
     cy.visit('/?disableSSR=true', visitOptions);
   });
   it('should have a list of valid links on front page', () => {

e2e/integration/search_page_spec.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { visitOptions } from '../support';
+
+describe('Search page', () => {
+  beforeEach(() => {
+    cy.apiIntercept(
+      'POST',
+      '**/graphql',
+      ['groupSearchGraphQL', 'searchPageGraphQL'],
+      ['GroupSearch', 'searchPageQuery'],
+    );
+  });
+
+  it('contains search bar', () => {
+    cy.visit('/search/?disableSSR=true', visitOptions);
+    cy.apiwait(['@groupSearchGraphQL', '@searchPageGraphQL']);
+    cy.get('input').focus();
+  });
+
+  it('LTI contains search bar', () => {
+    cy.visit('/lti/?disableSSR=true', visitOptions);
+    cy.apiwait(['@groupSearchGraphQL', '@searchPageGraphQL']);
+    cy.get('input').focus();
+  });
+});

e2e/integration/subjects_page_spec.js

@@ -10,10 +10,9 @@ import { visitOptions } from '../support';
 
 describe('Subjects page', () => {
   beforeEach(() => {
-    cy.server();
     cy.visit('/?disableSSR=true', visitOptions);
 
-    cy.apiroute('POST', '**/graphql', 'subjectpageGraphQL');
+    cy.apiIntercept('POST', '**/graphql', 'subjectpageGraphQL');
     cy.get('[data-testid="category-list"]  button:contains("Alle fag"):visible')
       .click()
       .get('a:contains("Medieuttrykk og mediesamfunnet")')

e2e/integration/topic_menu_spec.js

@@ -10,10 +10,9 @@ import { visitOptions } from '../support';
 
 describe('Topic menu', () => {
   beforeEach(() => {
-    cy.server();
     cy.visit('/?disableSSR=true', visitOptions);
 
-    cy.apiroute('POST', '**/graphql', 'subjectpageGraphQL');
+    cy.apiIntercept('POST', '**/graphql', 'subjectpageGraphQL');
     cy.get('[data-testid="category-list"]  button:contains("Alle fag"):visible')
       .click()
       .get('a:contains("Markedsføring og ledelse 1")')

e2e/integration/topic_page_spec.js

@@ -10,24 +10,27 @@ import { visitOptions } from '../support';
 
 describe('Topic page', () => {
   beforeEach(() => {
-    cy.server();
     cy.visit('/?disableSSR=true', visitOptions);
 
-    cy.apiroute('POST', '**/graphql', 'subjectpageGraphQL');
+    cy.apiIntercept(
+      'POST',
+      '**/graphql',
+      ['subjectpageGraphQL', 'topicpageGraphQL'],
+      ['subjectPageQuery', 'topicQuery'],
+    );
     cy.get('[data-testid="category-list"]  button:contains("Alle fag"):visible')
       .click()
       .get('a:contains("Medieuttrykk og mediesamfunnet")')
       .last()
       .click({ force: true });
     cy.apiwait('@subjectpageGraphQL');
 
-    cy.apiroute('POST', '**/graphql', 'topicpageGraphQL');
     cy.get(
       '[data-testid="nav-box-list"] li a:contains("Idéskaping og mediedesign")',
     ).click({
       force: true,
     });
-    cy.apiwait(['@topicpageGraphQL']);
+    cy.apiwait('@topicpageGraphQL');
   });
 
   it('contains article header and introduction', () => {

e2e/support/commands.js

@@ -24,12 +24,26 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-Cypress.Commands.add('apiroute', (method, url, alias) => {
-  if (Cypress.env('USE_FIXTURES')) {
-    return cy.route(method, url, `fixture:${alias}`).as(alias);
-  }
-  return cy.route(method, url).as(alias);
-});
+// alias can be a a string for single requests or an array of strings for multiple requests
+// Multiple requests also needs an array of GraphQL operation names to distinguish different requests
+Cypress.Commands.add(
+  'apiIntercept',
+  (method, url, alias, operationNames = []) => {
+    cy.intercept(method, url, req => {
+      const reqOperationName = req.body[0].operationName;
+      if (!operationNames.length) {
+        req.alias = alias;
+      } else if (operationNames.includes(reqOperationName)) {
+        req.alias = alias[operationNames.indexOf(reqOperationName)];
+      }
+      if (Cypress.env('USE_FIXTURES')) {
+        req.reply({
+          fixture: req.alias,
+        });
+      }
+    });
+  },
+);
 
 const readResponseBody = body => {
   const fr = new FileReader();
@@ -43,7 +57,8 @@ const readResponseBody = body => {
     fr.onload = () => {
       resolve(fr.result);
     };
-    fr.readAsText(body);
+    const blob = new Blob([JSON.stringify(body)], { type: 'application/json' });
+    fr.readAsText(blob);
   });
 };
 

package.json

@@ -19,11 +19,11 @@
     "start-with-local-graphql-and-article-converter": "cross-env LOCAL_GRAPHQL_API=true RAZZLE_LOCAL_ARTICLE_CONVERTER=true razzle start",
     "start-with-local-article-converter": "cross-env RAZZLE_LOCAL_ARTICLE_CONVERTER=true yarn start",
     "start-prod": "cross-env NODE_ENV=production node build/server | bunyan",
-    "e2e": "cypress open",
-    "e2e-use-fixtures": "cross-env CYPRESS_USE_FIXTURES=true cypress open",
-    "e2e-record-fixtures": "cross-env CYPRESS_RECORD_FIXTURES=true cypress run",
+    "e2e": "cross-env BABEL_ENV=test cypress open",
+    "e2e-use-fixtures": "cross-env BABEL_ENV=test CYPRESS_USE_FIXTURES=true cypress open",
+    "e2e-record-fixtures": "cross-env BABEL_ENV=test CYPRESS_RECORD_FIXTURES=true cypress run",
     "pree2e-ci": "cross-env NDLA_ENVIRONMENT=mock NODE_ENV=production node build/server &",
-    "e2e-ci": "cross-env CYPRESS_USE_FIXTURES=true cypress run --record --parallel",
+    "e2e-ci": "cross-env BABEL_ENV=test CYPRESS_USE_FIXTURES=true cypress run --record --parallel",
     "now-build": "npm run build",
     "now-start": "cross-env NODE_ENV=production NOW=true node build/server | bunyan",
     "get-gql-schema-local": "apollo schema:download --endpoint=http://localhost:4000/graphql-api/graphql src/gqlSchema.json"
@@ -36,7 +36,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.8.3",
     "@ndla/scripts": "^0.7.4",
     "chalk": "^2.4.2",
-    "cypress": "4.4.1",
+    "cypress": "6.3.0",
     "eslint": "^5.14.1",
     "eslint-config-ndla": "^1.2.1",
     "eslint-plugin-graphql": "^3.0.3",