From 064739c789f2262fb0161a9b92a25c2dbb822e34 Mon Sep 17 00:00:00 2001 From: Ben Furber Date: Tue, 17 Dec 2024 15:34:38 +0000 Subject: [PATCH] test: add how-to read specs for search and filter --- packages/components/src/Icon/svgs.tsx | 2 +- packages/cypress/src/fixtures/howto.ts | 4 +- .../src/integration/howto/read.spec.ts | 73 +++++++++---------- .../src/integration/howto/search.spec.ts | 56 -------------- shared/mocks/data/categories.ts | 53 +------------- shared/mocks/data/howtos.ts | 2 +- shared/mocks/data/tags.ts | 9 --- 7 files changed, 40 insertions(+), 159 deletions(-) delete mode 100644 packages/cypress/src/integration/howto/search.spec.ts diff --git a/packages/components/src/Icon/svgs.tsx b/packages/components/src/Icon/svgs.tsx index 41edc98bc8..589f94845c 100644 --- a/packages/components/src/Icon/svgs.tsx +++ b/packages/components/src/Icon/svgs.tsx @@ -77,7 +77,7 @@ export const iconMap = { chevronLeft: , chevronRight: , chevronUp: , - close: , + close: , comment: , construction: , contact: , diff --git a/packages/cypress/src/fixtures/howto.ts b/packages/cypress/src/fixtures/howto.ts index f223c22764..19df9d8622 100644 --- 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 index 4f81e42631..eab36a9b67 100644 --- 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 deleted file mode 100644 index 913a8fbcbb..0000000000 --- a/packages/cypress/src/integration/howto/search.spec.ts +++ /dev/null @@ -1,56 +0,0 @@ -// describe('[How To]', () => { -// beforeEach(() => { -// cy.visit('/how-to') -// }) - -// describe('[By Everyone]', () => { -// it('should clear filters after navigation', () => { -// cy.get('[data-cy=how-to-search-box]').clear().type(`raincoat`) -// cy.get('[data-cy=category-select]').click() -// cy.get('[id^="react-select-"]').contains('howto_testing').click() - -// cy.url().should('include', 'search=raincoat') -// cy.url().should('include', 'category=howto_testing') - -// cy.get('[data-cy=page-link]').contains('How-to').click() - -// cy.get('[data-cy=how-to-search-box]') -// .invoke('val') -// .then((searchText) => expect(searchText).to.equal('')) -// cy.get('[data-cy=category-select]').should('have.value', '') -// }) - -// it('should remove category filter after back navigation', () => { -// cy.get('[data-cy=category-select]').click() -// cy.get('[id^="react-select-"]').contains('howto_testing').click() - -// cy.url().should('include', 'category=howto_testing') - -// cy.go('back') - -// cy.get('[data-cy=category-select]').should('have.value', '') -// cy.url().should('not.include', 'category=howto_testing') -// }) - -// it('should remove category filter after back navigation', () => { -// cy.get('[data-cy=how-to-search-box]').clear().type(`h`) - -// cy.url().should('include', 'search=h') - -// cy.go('back') - -// cy.get('[data-cy=how-to-search-box]') -// .invoke('val') -// .then((searchText) => expect(searchText).to.equal('')) -// cy.url().should('not.include', 'search=h') -// }) - -// it('should show how-to list items after visit a how-to', () => { -// cy.get('[data-cy=card]:eq(0)').click() - -// cy.go('back') - -// cy.get('[data-cy=card]').should('be.visible') -// }) -// }) -// }) diff --git a/shared/mocks/data/categories.ts b/shared/mocks/data/categories.ts index c5cb4268b1..e3a79efbce 100644 --- a/shared/mocks/data/categories.ts +++ b/shared/mocks/data/categories.ts @@ -3,28 +3,7 @@ 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: { @@ -32,7 +11,7 @@ export const categories = { _modified: '2018-05-19T04:57:18.471Z', _created: '2017-10-29T07:29:17.905Z', _id: 'category1ytOfdDQoN1tULWYIN9', - label: 'compression', + label: 'Guides', }, PNtr9asrGucgt7JKdRpc: { label: 'Moulds', @@ -41,13 +20,6 @@ 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', @@ -55,25 +27,4 @@ export const categories = { _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 index 9fa8434478..ff42cba5ce 100644 --- 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 index 9292788871..498c87a8fb 100644 --- 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',