React.ssr/ssg

.eslintrc.json

@@ -5,7 +5,8 @@
     "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:cypress/recommended"
   ],
   "env": {
     "browser": true,

.gitignore

@@ -8,8 +8,13 @@
 # testing
 /coverage
 
+# nyc
+.nyc_output
+
 # production
 /build
+/dist
+/dist-ssr
 
 # misc
 .DS_Store
@@ -21,3 +26,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# myNotes
+/src/testData/testInfo.tsx
+/src/store/tests/thunk.tsx

.nycrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "all": true,
+  "check-coverage": true,
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["**/**/types.tsx", "src/setupTests.ts", "cypress/**/*.*", "**/*.d.ts", "**/*.cy.tsx", "**/*.cy.ts"]
+}

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress';
+import codeCoverageTask from '@cypress/code-coverage/task';
+import vitePreprocessor from 'cypress-vite';
+
+export default defineConfig({
+  e2e: {
+    video: false,
+    baseUrl: 'http://localhost:3001',
+    setupNodeEvents(on, config) {
+      on('file:preprocessor', vitePreprocessor());
+      codeCoverageTask(on, config);
+      return config;
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/about-page.cy.ts

@@ -0,0 +1,7 @@
+describe('The About Page  e2e test', () => {
+  it('successfully loads', () => {
+    cy.visit('/about');
+
+    cy.get('.page__title').should('have.text', 'About us');
+  });
+});

cypress/e2e/error-page.cy.ts

@@ -0,0 +1,8 @@
+describe('The Error Page  e2e test', () => {
+  it('successfully loads when pathname is invalid or error', () => {
+    const errorPathName = 'ggg';
+    cy.visit(`/${errorPathName}`);
+
+    cy.get('.page-404__title').should('have.text', 'Page not found!');
+  });
+});

cypress/e2e/form_page.cy.ts

@@ -0,0 +1,70 @@
+describe('The Form Page e2e test', () => {
+  it('successfully loads', () => {
+    cy.visit('/form');
+    cy.get('.page__title').should('have.text', 'Form page');
+
+    //'should have a form'
+    cy.get('#add-card-form');
+
+    cy.get('input.user-name').should('have.value', '');
+    cy.get('button[type=submit]').should('have.text', 'Submit');
+  });
+
+  it('should show an error, if type only one input and the other fields are empty', () => {
+    cy.visit('/form');
+
+    cy.get('input.user-name').type('Anna Shir');
+    cy.get('input.user-name').should('have.value', 'Anna Shir');
+
+    cy.contains('Submit').click();
+    //todo
+    // cy.get('span:nth-of-type(2)').should('have.text', 'Enter date of your birthday');
+  });
+
+  it('should the form is cleared after the reset button is pressed', () => {
+    cy.visit('/form');
+
+    cy.get('input.user-name').type('Anna Shir');
+    cy.get('input.user-name').should('have.value', 'Anna Shir');
+
+    cy.contains('Reset').click();
+    cy.get('input.user-name').should('have.value', '');
+  });
+
+  it('should the form is filled out and the card is created after submit form and the form is cleared', () => {
+    cy.visit('/form');
+
+    cy.get('input.user-name').type('Anna Shir');
+    cy.get('input.user-name').should('have.value', 'Anna Shir');
+
+    cy.get('input[type="date"]').type('2022-01-01');
+    cy.get('input[type="date"]').should('have.value', '2022-01-01');
+
+    cy.get('select').select('Poland');
+    cy.get('select').should('have.value', 'Poland');
+
+    cy.get('input[type="radio"]').check('male');
+    cy.get('input[type="radio"][value="male"]').should('be.checked');
+    cy.get('input[type="radio"][value="female"]').should('not.be.checked');
+
+    cy.get('textarea').type('My feedback here');
+    cy.get('textarea').should('have.value', 'My feedback here');
+
+    cy.get('input[type="checkbox"]').check();
+    cy.get('input[type="checkbox"]').should('be.checked');
+
+    cy.get('input[type=file]').selectFile({
+      contents: Cypress.Buffer.from('file contents'),
+      fileName: 'file.jpg',
+      lastModified: Date.now(),
+    });
+
+    cy.contains('Submit').click();
+    // check the form is cleared
+    cy.get('input.user-name').should('have.value', '');
+
+    //create the card
+    cy.get('.card__title').should('have.text', 'Anna Shir');
+    cy.get('.card__country').should('have.text', 'Poland');
+  });
+});

cypress/e2e/home_page.cy.ts

@@ -0,0 +1,57 @@
+describe('The Home Page e2e test', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('successfully loads', () => {
+    // cy.visit('http://localhost:3000'); // change URL to match your dev URL
+    cy.visit('/');
+    cy.get('.page__title').should('have.text', 'HomePage');
+  });
+
+  it('should have a search panel with empty value', () => {
+    cy.get('input.search-panel').should('have.value', '');
+  });
+
+  it('should show 20 trending movies with empty value in search-panel', () => {
+    cy.get('input.search-panel').should('have.value', '');
+    cy.get('.cards-list__item').should('have.length', 20);
+  });
+
+  it('should type in search-panel word "ava", press "Enter" and will search 20 films with this word in title', () => {
+    cy.get('input.search-panel').type('ava{enter}');
+
+    cy.get('input.search-panel').should('have.value', 'ava');
+    cy.get('.cards-list__item').should('have.length', 20);
+    cy.get('li:first-of-type.cards-list__item ').should('be.visible');
+  });
+
+  it('should open modal window for the first card and close modal window', () => {
+    const filmTitle = 'Lupin The 3rd vs. Cat’s Eye';
+
+    cy.get('input.search-panel').type('cat{enter}');
+    cy.get('input.search-panel').should('have.value', 'cat');
+
+    cy.get('ul[data-testid="cards-list"]').should('be.visible');
+
+    cy.get('li:first-of-type .card-item__button').click();
+    cy.get('div[data-testid="modal"]').should('be.visible');
+    cy.get('div[data-testid="modal"] .detail-info__title').should('have.text', filmTitle);
+
+    cy.get('[data-testid="close-modal"]').click();
+    cy.get('div[data-testid="modal"]').should('not.exist');
+  });
+
+  it('should save search cards when routing to another page and back to the homePage ', () => {
+    cy.get('input.search-panel').type('dog{enter}');
+    cy.get('input.search-panel').should('have.value', 'dog');
+
+    cy.get('li:first-of-type.cards-list__item ').should('be.visible');
+
+    cy.get('a[href="/form"]').click();
+    cy.get('a[href="/"]').click();
+
+    cy.get('input.search-panel').should('have.value', 'dog');
+    cy.get('li:first-of-type.cards-list__item ').should('be.visible');
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,26 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+import '@cypress/code-coverage/support';
+import 'cypress/react';
+
+afterEach(() => {
+  cy.window().trigger('unload');
+});

public/index.html → index.html

@@ -2,11 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Rss-react App</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">not rendered</div>
+    <script type="module" src="/src/entry-client.tsx"></script>
   </body>
 </html>