feat: add blog (#320)

cypress/integration/common/Header.spec.ts

@@ -1,6 +1,13 @@
 describe('Common > Header', () => {
   beforeEach(() => cy.visit('/'))
 
+  it('should redirect to /blog on click of the blog link', () => {
+    cy.get('[data-cy=header-blog-link]')
+      .click()
+      .location('pathname')
+      .should('eq', '/blog')
+  })
+
   describe('Switch theme color (dark/light)', () => {
     it('should switch theme from `dark` (default) to `light`', () => {
       cy.get('[data-cy=switch-theme-dark]').should('be.visible')

cypress/integration/pages/blog/[slug].spec.ts

@@ -0,0 +1,14 @@
+describe('Page /blog/[slug]', () => {
+  it('should displays the first blog post (`hello-world`)', () => {
+    cy.visit('/blog/hello-world')
+    cy.get('[data-cy=language-flag-text]').should('not.exist')
+    cy.get('h1').should('have.text', 'Hello, world! 👋')
+    cy.get('[data-cy=blog-post-date]').should('have.text', '06/11/2021')
+    cy.get('.prose a').should('have.attr', 'target', '_blank')
+  })
+
+  it("should redirect to /404 if the blog post doesn't exist", () => {
+    cy.visit('/blog/random-blog-post-not-found', { failOnStatusCode: false })
+    cy.get('[data-cy=status-code]').contains('404')
+  })
+})

cypress/integration/pages/blog/index.spec.ts

@@ -0,0 +1,27 @@
+describe('Page /blog', () => {
+  it('should displays the blog posts sorted from newest to oldest', () => {
+    cy.visit('/blog')
+    cy.get('[data-cy=blog-posts]:last-child [data-cy=blog-post-title]').should(
+      'have.text',
+      'Hello, world! 👋'
+    )
+    cy.get(
+      '[data-cy=blog-posts]:last-child [data-cy=blog-post-description]'
+    ).should(
+      'have.text',
+      'First post of the blog, introduction and explanation of how this blog is made.'
+    )
+    cy.get('[data-cy=blog-posts]:last-child [data-cy=blog-post-date]').should(
+      'have.text',
+      '06/11/2021'
+    )
+  })
+
+  it('should redirect the user to the right blog post', () => {
+    cy.visit('/blog')
+    cy.get('[data-cy=blog-posts]:last-child')
+      .click()
+      .location('pathname')
+      .should('eq', '/blog/hello-world')
+  })
+})