Add Input Test (#366)

massalabs · Oct 23, 2023 · 3feee84 · 3feee84
1 parent 139ab8d
commit 3feee84
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 0 deletions.
diff --git a/...sual-screenshots/baseline/Input.cy.tsx-regular-input-with-content-and-error.png b/...sual-screenshots/baseline/Input.cy.tsx-regular-input-with-content-and-error.png
diff --git a/...-screenshots/baseline/Input.cy.tsx-regular-input-with-placeholder-and-error.png b/...-screenshots/baseline/Input.cy.tsx-regular-input-with-placeholder-and-error.png
diff --git a/...creenshots/baseline/Input.cy.tsx-regular-input-with-placeholder-and-warning.png b/...creenshots/baseline/Input.cy.tsx-regular-input-with-placeholder-and-warning.png
diff --git a/...ess-visual-screenshots/baseline/Input.cy.tsx-regular-input-with-placeholder.png b/...ess-visual-screenshots/baseline/Input.cy.tsx-regular-input-with-placeholder.png
diff --git a/cypress/component/integration/Input.cy.tsx b/cypress/component/integration/Input.cy.tsx
@@ -0,0 +1,133 @@
+import '../../../src/global.css';
+import React from 'react';
+import { Input } from '../../../src/components';
+import { compareSnapshot } from '../../compareSnapshot';
+
+describe('Component | Integration | Input', function () {
+  describe('Input', () => {
+    describe('regular input with placeholder', () => {
+      beforeEach(() => {
+        cy.mount(
+          <div className="theme-dark">
+            <Input placeholder={'placeholder'} />
+          </div>,
+        );
+      });
+
+      it('should render and have placeholder', () => {
+        cy.get('[data-testid="input-field"]')
+          .should('exist')
+          .and('have.attr', 'placeholder');
+      });
+
+      it('should focus on click', () => {
+        cy.get('[data-testid="input-field"]').click().should('be.focused');
+      });
+
+      it('should receive typed input', () => {
+        cy.get('[data-testid="input-field"]')
+          .type('typed content')
+          .should('have.value', 'typed content')
+          .clear()
+          .should('have.attr', 'placeholder');
+      });
+
+      it('should match snapshot', () => {
+        compareSnapshot(cy, 'regular-input-with-placeholder');
+      });
+    });
+
+    describe('regular input with placeholder and error', () => {
+      beforeEach(() => {
+        cy.mount(
+          <div className="theme-dark">
+            <Input placeholder={'placeholder'} error={'error'} />
+          </div>,
+        );
+      });
+
+      it('should render and have placeholder', () => {
+        cy.get('[data-testid="input-field"]')
+          .should('exist')
+          .and('have.attr', 'placeholder');
+      });
+
+      it('should display error message', () => {
+        cy.get('[data-testid="input-field-message"]').contains('error');
+      });
+
+      it('should match snapshot', () => {
+        compareSnapshot(cy, 'regular-input-with-placeholder-and-error');
+      });
+    });
+
+    describe('regular input with content and error', () => {
+      beforeEach(() => {
+        cy.mount(
+          <div className="theme-dark">
+            <Input
+              placeholder={'placeholder'}
+              value={'wrong content'}
+              error={'error'}
+            />
+          </div>,
+        );
+      });
+
+      it('should render and have placeholder', () => {
+        cy.get('[data-testid="input-field"]')
+          .should('exist')
+          .and('have.attr', 'placeholder');
+      });
+
+      it('should wrong content displayed', () => {
+        cy.get('[data-testid="input-field"]')
+          .should('exist')
+          .and('have.value', 'wrong content');
+      });
+
+      it('should display error message', () => {
+        cy.get('[data-testid="input-field-message"]').contains('error');
+      });
+
+      it('should match snapshot', () => {
+        compareSnapshot(cy, 'regular-input-with-content-and-error');
+      });
+    });
+
+    describe('regular input with placeholder and warning', () => {
+      beforeEach(() => {
+        cy.mount(
+          <div className="theme-dark">
+            <Input placeholder={'placeholder'} warning={'warning'} />
+          </div>,
+        );
+      });
+
+      it('should render placeholder and warning', () => {
+        cy.get('[data-testid="input-field"]')
+          .should('exist')
+          .and('have.attr', 'placeholder');
+        cy.get('[data-testid="input-field-message"]').contains('warning');
+      });
+
+      it('should receive typed input and render warning', () => {
+        cy.get('[data-testid="input-field"]')
+          .type('typed content')
+          .should('have.value', 'typed content');
+        cy.get('[data-testid="input-field-message"]').contains('warning');
+      });
+
+      it('should render warning with no content', () => {
+        cy.get('[data-testid="input-field"]')
+          .clear()
+          .should('have.attr', 'placeholder');
+
+        cy.get('[data-testid="input-field-message"]').should('exist');
+      });
+      it('should match snapshot', () => {
+        compareSnapshot(cy, 'regular-input-with-placeholder-and-warning');
+      });
+    });
+  });
+});