Merge branch 'better-navigation-component' into 'master'

Better navigation component

See merge request editoria/ucp!22

config/default.js

@@ -128,6 +128,9 @@ module.exports = {
           overlay: 'ucpOverlay',
         },
       },
+      component: {
+        menus: {},
+      },
     },
     backmatter: {
       component: {

cypress/integration/waxPubsweet_spec.js

+import { flattenDeep, map, concat } from 'lodash'
+
+const visitAndCheck = (currentId, orderedComponent, order) => {
+  const current = orderedComponent.findIndex(comp => comp.id === currentId)
+  const next = orderedComponent[current + 1]
+  const prev = orderedComponent[current - 1]
+
+  cy.get('[data-testid="current-component"]')
+    .contains(`Author Book - title-${currentId}`)
+    .should('be.visible')
+
+  if (prev) {
+    cy.get('[data-testid="previous-component"]')
+      .contains(`title-${prev.id}`)
+      .should('be.visible')
+  } else {
+    cy.get('[data-testid="previous-component"]').should('not.be.visible')
+  }
+  if (next) {
+    cy.get('[data-testid="next-component"]')
+      .contains(`title-${next.id}`)
+      .should('be.visible')
+  } else {
+    cy.get('[data-testid="next-component"]').should('not.be.visible')
+  }
+
+  if (order === 'next' && next) {
+    cy.get(`a:contains("title-${next.id}")`)
+      .should('be.visible')
+      .click()
+    /* eslint-disable */
+    cy.wait(500)
+    /* eslint-enable */
+    visitAndCheck(next.id, orderedComponent, order)
+  }
+
+  if (order === 'previous' && prev) {
+    cy.get(`a:contains("title-${prev.id}")`)
+      .should('be.visible')
+      .click()
+    /* eslint-disable */
+    cy.wait(500)
+    /* eslint-enable */
+    visitAndCheck(prev.id, orderedComponent, order)
+  }
+
+  return true
+}
+
+describe('WaxPubsweet', () => {
+  before(() => {
+    cy.exec('node ./scripts/truncateDB.js')
+    cy.exec('node ./scripts/createBooksWithUsersAndTeams.js')
+    cy.exec('node ./scripts/createBookComponents.js')
+  })
+  it('navigate within wax from the first to the last bookComponent', async () => {
+    cy.login('admin')
+    cy.getCollections().then(res => {
+      const {
+        body: {
+          data: { getBookCollections },
+        },
+      } = res
+
+      const bookId = getBookCollections[0].books[0].id
+      cy.getBookComponents(bookId).then(result => {
+        const {
+          body: {
+            data: { getBook },
+          },
+        } = result
+
+        const orderedComponent = flattenDeep(
+          concat([
+            ...map(getBook.divisions, division => division.bookComponents),
+          ]),
+        )
+
+        const currentId = orderedComponent[0].id
+        cy.visit(`/books/${getBook.id}/bookComponents/${currentId}`)
+        visitAndCheck(currentId, orderedComponent, 'next')
+      })
+    })
+  })
+
+  it('navigate within wax from the last to the first bookComponent', async () => {
+    cy.login('admin')
+    cy.getCollections().then(res => {
+      const {
+        body: {
+          data: { getBookCollections },
+        },
+      } = res
+      const bookId = getBookCollections[0].books[0].id
+      cy.getBookComponents(bookId).then(result => {
+        const {
+          body: {
+            data: { getBook },
+          },
+        } = result
+
+        const orderedComponent = flattenDeep(
+          concat([
+            ...map(getBook.divisions, division => division.bookComponents),
+          ]),
+        )
+        const lastIndex = orderedComponent.length
+        const currentId = orderedComponent[lastIndex - 1].id
+        cy.visit(`/books/${getBook.id}/bookComponents/${currentId}`)
+        visitAndCheck(currentId, orderedComponent, 'previous')
+      })
+    })
+  })
+})

cypress/support/commands.js

@@ -91,3 +91,34 @@ Cypress.Commands.add('getCollections', () => {
     body: { query: getCollectionsQuery },
   })
 })
+
+Cypress.Commands.add('getBookComponents', id => {
+  const token = window.localStorage.getItem('token')
+  const getBookQuery = `query($id: ID! = "${id}") {
+    getBook(id: $id) {
+      id
+      title
+      divisions {
+        id
+        label
+        bookComponents {
+          id
+          divisionId
+          title
+        }
+      }
+    }
+  }
+`
+
+  return cy.request({
+    method: 'POST',
+    url: '/graphql',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      authorization: token ? `Bearer ${token}` : '',
+    },
+    body: { query: getBookQuery },
+  })
+})

scripts/createBookComponents.js

+const { editoriaDataModel } = require('editoria-data-model')
+const map = require('lodash/map')
+const get = require('lodash/get')
+const assign = require('lodash/assign')
+
+const { models } = editoriaDataModel
+const config = require('config')
+
+const {
+  Book,
+  BookComponent,
+  BookComponentTranslation,
+  Division,
+  BookComponentState,
+} = models
+
+const createBookComponents = async () => {
+  try {
+    const books = await Book.all()
+    const bookId = books[0].id
+    const componentType = 'component'
+    const bookBuilder = get(config, 'bookBuilder')
+    const workflowStages = get(bookBuilder, 'stages')
+
+    await Promise.all(
+      map(books[0].divisions, async divisionId => {
+        const newBookComponent = {
+          bookId,
+          componentType,
+          divisionId,
+          archived: false,
+          deleted: false,
+        }
+        const createdBookComponent = await new BookComponent(
+          newBookComponent,
+        ).save()
+
+        await new BookComponentTranslation({
+          bookComponentId: createdBookComponent.id,
+          languageIso: 'en',
+          title: `title-${createdBookComponent.id}`,
+        }).save()
+
+        await Division.query().patchAndFetchById(divisionId, {
+          bookComponents: [createdBookComponent.id],
+        })
+
+        const bookComponentWorkflowStages = {
+          workflowStages: map(workflowStages, stage => ({
+            type: stage.type,
+            label: stage.title,
+            value: -1,
+          })),
+        }
+
+        await new BookComponentState(
+          assign(
+            {},
+            {
+              bookComponentId: createdBookComponent.id,
+              trackChangesEnabled: false,
+              uploading: false,
+            },
+            bookComponentWorkflowStages,
+          ),
+        ).save()
+      }),
+    )
+  } catch (e) {
+    throw new Error(e)
+  }
+}
+module.exports = createBookComponents
+
+createBookComponents()