feat: add cypress and first e2e tests

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
+        baseUrl: 'http://localhost:3000/',
+    },
+});

cypress/e2e/1-getting-started/todo.cy.js

@@ -0,0 +1,75 @@
+describe('example to-do app', () => {
+    beforeEach(() => {
+        cy.visit('https://example.cypress.io/todo');
+    });
+
+    it('displays two todo items by default', () => {
+        cy.get('.todo-list li').should('have.length', 2);
+
+        cy.get('.todo-list li').first().should('have.text', 'Pay electric bill');
+        cy.get('.todo-list li').last().should('have.text', 'Walk the dog');
+    });
+
+    it('can add new todo items', () => {
+        const newItem = 'Feed the cat';
+
+        cy.get('[data-test=new-todo]').type(`${newItem}{enter}`);
+
+        cy.get('.todo-list li')
+            .should('have.length', 3)
+            .last()
+            .should('have.text', newItem);
+    });
+
+    it('can check off an item as completed', () => {
+        cy.contains('Pay electric bill')
+            .parent()
+            .find('input[type=checkbox]')
+            .check();
+
+        cy.contains('Pay electric bill')
+            .parents('li')
+            .should('have.class', 'completed');
+    });
+
+    context('with a checked task', () => {
+        beforeEach(() => {
+            cy.contains('Pay electric bill')
+                .parent()
+                .find('input[type=checkbox]')
+                .check();
+        });
+
+        it('can filter for uncompleted tasks', () => {
+            cy.contains('Active').click();
+
+            cy.get('.todo-list li')
+                .should('have.length', 1)
+                .first()
+                .should('have.text', 'Walk the dog');
+
+            cy.contains('Pay electric bill').should('not.exist');
+        });
+
+        it('can filter for completed tasks', () => {
+            cy.contains('Completed').click();
+
+            cy.get('.todo-list li')
+                .should('have.length', 1)
+                .first()
+                .should('have.text', 'Pay electric bill');
+
+            cy.contains('Walk the dog').should('not.exist');
+        });
+
+        it('can delete all completed tasks', () => {
+            cy.contains('Clear completed').click();
+
+            cy.get('.todo-list li')
+                .should('have.length', 1)
+                .should('not.have.text', 'Pay electric bill');
+
+            cy.contains('Clear completed').should('not.exist');
+        });
+    });
+});

cypress/e2e/common/routing.cy.ts

@@ -0,0 +1,32 @@
+import { selectByTestId } from '../../helpers/selectByTestId';
+
+describe('Routing', () => {
+    describe('User not authorized', () => {
+        it('Access to main page', () => {
+            cy.visit('/');
+            cy.get(selectByTestId('MainPage')).should('exist');
+        });
+        it('To main page', () => {
+            cy.visit('/profile/1');
+            cy.get(selectByTestId('MainPage')).should('exist');
+        });
+        it('To not found page', () => {
+            cy.visit('/fasfasfasf');
+            cy.get(selectByTestId('NotFoundPage')).should('exist');
+        });
+    });
+    describe('User is authorized', () => {
+        beforeEach(() => {
+            cy.login();
+        });
+        it('To profile page', () => {
+            cy.visit('/profile/1');
+            cy.get(selectByTestId('ProfilePage')).should('exist');
+        });
+
+        it('To articles page', () => {
+            cy.visit('/articles');
+            cy.get(selectByTestId('ArticlesPage')).should('exist');
+        });
+    });
+});

cypress/fixtures/example.json

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

cypress/helpers/selectByTestId.ts

@@ -0,0 +1,3 @@
+export function selectByTestId(testId: string) {
+    return `[data-testid=${testId}]`;
+}

cypress/support/commands.ts

@@ -0,0 +1,11 @@
+import { login } from './commands/login';
+
+Cypress.Commands.add('login', login);
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(email?: string, password?: string): Chainable<void>
+    }
+  }
+}

cypress/support/commands/login.ts

@@ -0,0 +1,14 @@
+import { USER_LOCALSTORAGE_KEY } from '../../../src/shared/const/localstorage';
+
+export const login = (username: string = 'testuser', password: string = '123') => {
+    cy.request({
+        method: 'POST',
+        url: 'http://localhost:8000/login',
+        body: {
+            username,
+            password,
+        },
+    }).then(({ body }) => {
+        window.localStorage.setItem(USER_LOCALSTORAGE_KEY, JSON.stringify(body));
+    });
+};

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands';

cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"],
+    "allowJs": true,
+    "isolatedModules": false
+  },
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"]
+}

json-server/db.json

@@ -724,6 +724,15 @@
         "MANAGER"
       ],
       "avatar": "https://xakep.ru/wp-content/uploads/2018/05/171485/KuroiSH-hacker.jpg"
+    },
+    {
+      "id": "4",
+      "username": "testuser",
+      "password": "123",
+      "roles": [
+        "ADMIN"
+      ],
+      "avatar": "https://xakep.ru/wp-content/uploads/2018/05/171485/KuroiSH-hacker.jpg"
     }
   ],
   "profile": [
@@ -792,19 +801,6 @@
       "rate": 3,
       "feedback": "",
       "id": "bcPnbbZ"
-    },
-    {
-      "userId": "1",
-      "articleId": "4",
-      "rate": 3,
-      "id": "Jh9k67H"
-    },
-    {
-      "userId": "1",
-      "articleId": "5",
-      "rate": 4,
-      "feedback": "123",
-      "id": "QZWoJpm"
     }
   ],
   "profile-ratings": [
@@ -823,4 +819,5 @@
       "profileId": "2"
     }
   ]
-}
+}
+