test(communities): add tests for communities layout and refactor

Author: mydearxym

components/Navigator/MainEntries.js

@@ -12,11 +12,16 @@ const splitMargin = '8px'
 const MainEntries = ({ curRoute: { mainPath } }) => (
   <Wrapper>
     <Link href="/home/posts" prefetch passHref>
-      <SiteLink>首页</SiteLink>
+      <SiteLink testid="header-home-link">首页</SiteLink>
     </Link>
     <DotDivider space={splitMargin} />
     <Link href="/communities" prefetch passHref>
-      <SiteLink active={mainPath === 'communities'}>社区</SiteLink>
+      <SiteLink
+        active={mainPath === 'communities'}
+        testid="header-communities-link"
+      >
+        社区
+      </SiteLink>
     </Link>
     <DotDivider space={splitMargin} />
     <Popover

components/Navigator/styles/main_entries.js

@@ -13,7 +13,9 @@ export const Wrapper = styled.div`
 export const DotDivider = styled(DotDividerBase)`
   background-color: ${theme('banner.desc')};
 `
-export const SiteLink = styled.a`
+export const SiteLink = styled.a.attrs(props => ({
+  'data-testid': props.testid,
+}))`
   color: ${theme('banner.desc')};
   background: ${({ active }) =>
     active ? theme('banner.numberHoverBg') : 'transparent'};

cypress/integration/communities-page.spec.js

@@ -0,0 +1,25 @@
+//
+describe('communities page layout', () => {
+  // beforeEach(() => {
+  before(() => {
+    cy.visit('/communities')
+  })
+
+  it('basic layout', () => {
+    cy.id('header').should('be.visible')
+
+    cy.id('header-search').should('be.visible')
+    cy.id('header-search-icon').should('be.visible')
+
+    cy.id('sidebar').should('be.visible')
+
+    cy.id('communities-banner').should('be.visible')
+    cy.id('footer').should('be.visible')
+  })
+
+  it('communities link should be highlight', () => {
+    cy.id('header-communities-link')
+      .should('not.have.css', 'background', 'transparent')
+      .and('have.css', 'padding', '5px 3px 3px')
+  })
+})

cypress/integration/layout.spec.js renamed to cypress/integration/home-page.spec.js

@@ -1,11 +1,14 @@
-describe('basic layout', () => {
+describe('home page layout', () => {
   // beforeEach(() => {
   before(() => {
     cy.visit('/home/posts')
   })
 
   it('basic layout shoud be visible', () => {
     cy.id('header').should('be.visible')
+    cy.id('header-search').should('be.visible')
+    cy.id('header-search-icon').should('be.visible')
+
     cy.id('sidebar').should('be.visible')
 
     cy.id('community-banner').should('be.visible')
@@ -14,18 +17,10 @@ describe('basic layout', () => {
     cy.id('footer').should('be.visible')
   })
 
-  it('header content', () => {
-    cy.id('header-search').should('be.visible')
-    cy.id('header-search-icon').should('be.visible')
-  })
-
-  it('communities page', () => {
-    cy.visit('/communities')
-    cy.id('header-search').should('be.visible')
-    cy.id('header-search-icon').should('be.visible')
-
-    cy.id('communities-banner').should('be.visible')
-
-    cy.id('footer').should('be.visible')
+  it('home link should not be highlight', () => {
+    cy.id('header-home-link')
+      // .should('have.css', 'background')
+      // .should('not.have.css', 'border-bottom')
+      .and('not.have.css', 'padding', '5px 3px 3px 3px')
   })
 })