test: add how-to read specs for search and filter

ONEARMY · Dec 18, 2024 · 064739c · 064739c
1 parent c991721
commit 064739c
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 159 deletions.
diff --git a/packages/components/src/Icon/svgs.tsx b/packages/components/src/Icon/svgs.tsx
@@ -77,7 +77,7 @@ export const iconMap = {
   chevronLeft: <ImageIcon src={chevronLeftSVG} />,
   chevronRight: <ImageIcon src={chevronRightSVG} />,
   chevronUp: <ImageIcon src={chevronUpSVG} />,
-  close: <ImageIcon src={closeSVG} data-cy='close' />,
+  close: <ImageIcon src={closeSVG} data-cy="close" />,
   comment: <ImageIcon src={commentSVG} />,
   construction: <ImageIcon src={constructionSVG} />,
   contact: <ImageIcon src={contactSVG} />,

diff --git a/packages/cypress/src/fixtures/howto.ts b/packages/cypress/src/fixtures/howto.ts
@@ -47,9 +47,9 @@ export const howto: IHowtoDB = {
   moderation: IModerationStatus.ACCEPTED,
   tags: {},
   category: {
-    _id: '000',
+    _id: 'categoryNtr9asrGucgt7JKdRpc',
     _created,
     _deleted: false,
-    label: 'product',
+    label: 'Moulds',
   },
 }
diff --git a/packages/cypress/src/integration/howto/read.spec.ts b/packages/cypress/src/integration/howto/read.spec.ts
@@ -5,53 +5,48 @@ import { MOCK_DATA } from '../../data'
 const howtos = Object.values(MOCK_DATA.howtos)
 
 describe('[How To]', () => {
-  // const SKIP_TIMEOUT = { timeout: 300 }
-  // const totalHowTo = Object.values(MOCK_DATA.howtos).filter(
-  //   (howTo) => howTo._deleted === false,
-  // ).length
+  beforeEach(() => {
+    cy.visit('/how-to')
+  })
 
   describe('[List how-tos]', () => {
-    // const howtoSlug = 'make-glass-like-beams'
-    // const howtoUrl = `/how-to/${howtoSlug}`
-    // const coverFileRegex = /howto-beams-glass-0-3.jpg/
-    // it('[By Everyone]', () => {
-    //   cy.step('More How-tos button is hidden')
-    //   cy.get('[data-cy=more-how-tos]', SKIP_TIMEOUT).should('be.hidden')
-    //   cy.step('All how-tos are shown')
-    //   cy.get('[data-cy=card]').its('length').should('be.eq', totalHowTo)
-    //   cy.step('Select a category')
-    //   cy.get('[data-cy=category-select]')
-    //   cy.selectTag('product', '[data-cy=category-select]')
-    //   cy.get('[data-cy=card]').its('length').should('be.eq', 4)
-    //   cy.step('Type and select a category')
-    //   cy.selectTag('injection', '[data-cy=category-select]')
-    //   cy.get('[data-cy=card]').its('length').should('be.eq', 2)
-    //   cy.step('Remove all category filter')
-    //   cy.get('.data-cy__clear-indicator').click()
-    //   cy.get('.data-cy__multi-value__label').should('not.exist')
-    //   cy.get('[data-cy=card]').its('length').should('be.eq', totalHowTo)
-    //   cy.step('How-to cards has basic info')
-    //   cy.get(`[data-cy=card][data-cy-howto-slug=${howtoSlug}]`).within(() => {
-    //     cy.contains('Make glass-like beams').should('be.visible')
-    //     cy.get('img').should('have.attr', 'src').and('match', coverFileRegex)
-    //     cy.contains('howto_creator').should('be.visible')
-    //     cy.contains('product').should('be.visible')
-    //     cy.get('a').should('have.attr', 'href').and('eq', howtoUrl)
-    //   })
-    //   cy.step(`Open how-to details when click on a how-to ${howtoUrl}`)
-    //   cy.get(`[data-cy=card] a[href="${howtoUrl}"]:first`, SKIP_TIMEOUT).click()
-    //   cy.url().should('include', howtoUrl)
-    // })
+    it('[By Everyone]', () => {
+      cy.step('Can search for items')
+      cy.get('[data-cy=howtos-search-box]').click().type('beams')
+      cy.get('[data-cy=card]').its('length').should('be.eq', 1)
+
+      cy.step('All basic info displayed on each card')
+      const howtoSlug = 'make-glass-like-beams'
+      const howtoUrl = `/how-to/${howtoSlug}`
+      const coverFileRegex = /howto-beams-glass-0-3.jpg/
+
+      cy.get('[data-cy=card]').within(() => {
+        cy.contains('Make glass-like beams').should('be.visible')
+        cy.get('img').should('have.attr', 'src').and('match', coverFileRegex)
+        cy.get('[data-cy=Username]').contains('howto_creator')
+        cy.get('[data-cy=category]').contains('Guides')
+        cy.get('a').should('have.attr', 'href').and('eq', howtoUrl)
+      })
+
+      cy.step('Can clear search')
+      cy.get('[data-cy=close]').click()
+      cy.get('[data-cy=card]').its('length').should('be.above', 1)
+
+      cy.step('Can select a category to limit items displayed')
+      cy.get('[data-cy=category]').contains('Moulds')
+      cy.get('[data-cy=CategoryVerticalList]').within(() => {
+        cy.contains('Guides').click()
+      })
+      cy.get('[data-cy=CategoryVerticalList-Item-active]')
+      cy.get('[data-cy=category]').contains('Guides')
+      cy.get('[data-cy=category]').contains('Moulds').should('not.exist')
+    })
   })
 
   describe('[Read a How-to]', () => {
     const specificHowtoUrl = '/how-to/make-an-interlocking-brick'
     const coverFileRegex = /brick-12-1.jpg/
 
-    beforeEach(() => {
-      cy.visit('/how-to')
-    })
-
     describe('[By Everyone]', () => {
       it('[See all info]', () => {
         const howto = howtos[0]

diff --git a/packages/cypress/src/integration/howto/search.spec.ts b/packages/cypress/src/integration/howto/search.spec.ts
diff --git a/shared/mocks/data/categories.ts b/shared/mocks/data/categories.ts
@@ -3,36 +3,15 @@ export const categories = {
     _modified: '2012-10-27T01:47:57.948Z',
     _created: '2012-08-02T07:27:04.609Z',
     _id: 'category6hWyk3OckrLSH1ehdIE',
-    label: 'product',
-    _deleted: false,
-  },
-  '5UJh0M8BxSTP3uILmj5B': {
-    _modified: '2018-07-29T04:34:49.982Z',
-    _created: '2017-11-20T05:58:20.458Z',
-    _id: 'categoryUJh0M8BxSTP3uILmj5B',
-    label: 'exhibition',
-    _deleted: false,
-  },
-  EOVeOZaKKw1UJkDIf3c3: {
-    _modified: '2018-02-02T03:18:16.937Z',
-    _created: '2015-05-06T23:21:18.386Z',
-    _id: 'categoryOVeOZaKKw1UJkDIf3c3',
-    label: 'howto_testing',
-    _deleted: false,
-  },
-  KP3McutTpuEWz06G5EY1: {
-    _modified: '2019-05-25T06:26:54.068Z',
-    _created: '2014-01-30T01:24:05.344Z',
-    _id: 'categoryP3McutTpuEWz06G5EY1',
-    label: 'brainstorm',
+    label: 'Product',
     _deleted: false,
   },
   P1ytOfdDQoN1tULWYIN9: {
     _deleted: false,
     _modified: '2018-05-19T04:57:18.471Z',
     _created: '2017-10-29T07:29:17.905Z',
     _id: 'category1ytOfdDQoN1tULWYIN9',
-    label: 'compression',
+    label: 'Guides',
   },
   PNtr9asrGucgt7JKdRpc: {
     label: 'Moulds',
@@ -41,39 +20,11 @@ export const categories = {
     _created: '2018-11-29T12:56:47.901Z',
     _id: 'categoryNtr9asrGucgt7JKdRpc',
   },
-  Wk6RnHHFfKSiI71BlM8r: {
-    _created: '2013-02-19T08:22:56.462Z',
-    _id: 'categoryk6RnHHFfKSiI71BlM8r',
-    label: 'injection',
-    _deleted: false,
-    _modified: '2017-10-27T07:01:42.612Z',
-  },
   dibcwRYbQVzfQfmSkg5x: {
     _id: 'categoryibcwRYbQVzfQfmSkg5x',
     label: 'workshop',
     _deleted: false,
     _modified: '2018-02-09T17:07:11.943Z',
     _created: '2012-05-17T17:08:03.110Z',
   },
-  g2rhzzwstNhU62CUs9ak: {
-    _modified: '2019-05-12T08:42:09.539Z',
-    _created: '2016-03-26T21:06:51.974Z',
-    _id: 'category2rhzzwstNhU62CUs9ak',
-    label: 'extrusion',
-    _deleted: false,
-  },
-  nSyOlKXPaBgWMsnCFPrc: {
-    _modified: '2019-03-17T18:52:50.469Z',
-    _created: '2018-09-12T19:13:01.768Z',
-    _id: 'categorySyOlKXPaBgWMsnCFPrc',
-    label: 'event_testing',
-    _deleted: false,
-  },
-  q1mMA0Xz3K5oix4r6grC: {
-    _modified: '2017-01-19T07:07:12.730Z',
-    _created: '2015-02-23T23:04:03.609Z',
-    _id: 'category1mMA0Xz3K5oix4r6grC',
-    label: 'screening',
-    _deleted: false,
-  },
 }
diff --git a/shared/mocks/data/howtos.ts b/shared/mocks/data/howtos.ts
@@ -14,7 +14,7 @@ export const howtos = {
       _deleted: false,
       _modified: '2019-04-15T18:51:56.479Z',
       _created: '2018-11-29T12:56:47.901Z',
-      _id: 'gPpPDEvfNT9a6w5FWzaj',
+      _id: 'categoryNtr9asrGucgt7JKdRpc',
     },
     title: 'Make an interlocking brick',
     steps: [

diff --git a/shared/mocks/data/tags.ts b/shared/mocks/data/tags.ts
@@ -80,15 +80,6 @@ export const tags = {
     image: '',
     _deleted: false,
   },
-  nSyOlKXPaBgWMsnCFPrc: {
-    _createdBy: 'tag_creator',
-    _modified: '2019-03-17T18:52:50.469Z',
-    _created: '2018-09-12T19:13:01.768Z',
-    _id: 'nSyOlKXPaBgWMsnCFPrc',
-    label: 'event_testing',
-    image: '',
-    _deleted: false,
-  },
   q1mMA0Xz3K5oix4r6grC: {
     _createdBy: 'tag_creator',
     _modified: '2017-01-19T07:07:12.730Z',