feat(e2e-tests): configured cypress for e2e tests

Added cypress library. Added example tests. Installed dependencies: ``` yarn add cypress start-server-and-test @testing-library/cypress --dev ```

Author: rbiedrawa

.gitignore

@@ -13,6 +13,8 @@ TODO.md
 
 # testing
 /coverage
+/cypress/videos
+/cypress/screenshots
 
 # production
 /build

cypress.json

@@ -0,0 +1,6 @@
+{
+ "baseUrl": "http://localhost:3000",
+ "env": {
+ "HELLO_FROM_ENV_FILE": "Hello from Cypress Env file!!!"
+ }
+}

cypress/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+ root: true,
+ plugins: ['eslint-plugin-cypress'],
+ parser: '@typescript-eslint/parser',
+ env: { 'cypress/globals': true },
+};

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/about/about-page.spec.ts

@@ -0,0 +1,14 @@
+describe('About Page', () => {
+ it('should open about page when user clicks about navigation item', () => {
+ cy.visit('/')
+
+ cy.findByRole('link', { name: /about/i }).click()
+
+ cy.findByRole('heading', { name: /about page/i }).should('exist')
+ })
+
+ it('should display title when user use direct path (/about)', () => {
+ cy.visit('/about')
+ cy.findByRole('heading', { name: /about page/i }).should('exist')
+ })
+})

cypress/integration/env/env.spec.ts

@@ -0,0 +1,5 @@
+describe('Env', () => {
+ it('should inject custom env from cypress.json file', () => {
+ expect(Cypress.env('HELLO_FROM_ENV_FILE')).to.equal('Hello from Cypress Env file!!!')
+ })
+})

cypress/integration/i18n/i18n.spec.ts

@@ -0,0 +1,21 @@
+describe('i18n', () => {
+ it('should translate site to Polish', () => {
+ cy.visit('/')
+
+ cy.findByRole('button', { name: /🇵🇱/i }).click()
+
+ cy.findByRole('heading', { name: /nazwa firmy/i }).should('exist')
+ })
+
+ it('should translate site to English', () => {
+ cy.visit('/')
+
+ cy.findByRole('button', { name: /🇵🇱/i }).click()
+
+ cy.findByRole('heading', { name: /nazwa firmy/i }).should('exist')
+
+ cy.findByRole('button', { name: /🇺🇸/i }).click()
+
+ cy.findByRole('heading', { name: /company name/i }).should('exist')
+ })
+})

cypress/integration/posts/posts.spec.ts

@@ -0,0 +1,12 @@
+describe('Feature - Posts', () => {
+ it('should add new post', () => {
+ cy.visit('/')
+
+ cy.findByRole('textbox', { name: /title/i }).type('Hello from Cypress!')
+ cy.findByRole('textbox', { name: /body/i }).type('This is our first Cypress test😊')
+
+ cy.findByRole('button', { name: /add new post/i }).click()
+
+ cy.findByRole('heading', { name: /hello from cypress!/i }).should('exist')
+ })
+})

cypress/integration/theme/theme.spec.ts

@@ -0,0 +1,23 @@
+describe('i18n - feature', () => {
+ it('should change theme to dark mode', () => {
+ cy.visit('/')
+
+ cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)')
+
+ cy.findByTestId('Brightness4Icon').click()
+
+ cy.get('body').should('have.css', 'background-color', 'rgb(18, 18, 18)')
+ })
+
+ it('should change back theme to light mode', () => {
+ cy.visit('/')
+
+ cy.findByTestId('Brightness4Icon').click()
+
+ cy.get('body').should('have.css', 'background-color', 'rgb(18, 18, 18)')
+
+ cy.findByTestId('Brightness7Icon').click()
+
+ cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)')
+ })
+})

cypress/plugins/index.ts

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.ts can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+ // `on` is used to hook into various events Cypress emits
+ // `config` is the resolved Cypress config
+}