From 516f48158f934674dbf4ba0c38ef67e12fcd98d4 Mon Sep 17 00:00:00 2001
From: Jesse Chan <jc@linux.com>
Date: Thu, 3 Dec 2020 23:16:10 +0800
Subject: [PATCH] client: tests: initial tests for form elements

---
 cypress/integration/form-elements.spec.ts | 128 ++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 cypress/integration/form-elements.spec.ts

diff --git a/cypress/integration/form-elements.spec.ts b/cypress/integration/form-elements.spec.ts
new file mode 100644
index 00000000..b64663bb
--- /dev/null
+++ b/cypress/integration/form-elements.spec.ts
@@ -0,0 +1,128 @@
+context('Form elements', () => {
+  beforeEach(() => {
+    cy.visit('http://127.0.0.1:4200/overview');
+    cy.url().should('include', 'overview');
+    cy.get('.application__loading-overlay').should('not.exist');
+
+    // Add torrents modal
+    cy.get('.action--add-torrent').should('be.visible');
+    cy.get('.action--add-torrent').click();
+    cy.get('.modal__header').contains('Add Torrents').should('be.visible');
+  });
+
+  afterEach(() => {
+    cy.get('.button__content').contains('Cancel').should('be.visible');
+    cy.get('.button__content').contains('Cancel').click();
+    cy.get('.modal__header').should('not.be.visible');
+  });
+
+  it('Textboxes', () => {
+    cy.get('input[name="urls-0"]').should('be.visible');
+    cy.get('input[name="urls-0"]').parents('.form__row--group').as('textboxesGroup');
+    cy.get('input[name="urls-0"]').type('test');
+
+    // Add textboxes with foo and bar
+    cy.get('input[name="urls-0"]').siblings().first().click();
+    cy.get('input[name="urls-1"]').should('be.visible');
+    cy.get('input[name="urls-1"]').type('foo');
+
+    cy.get('input[name="urls-1"]').siblings().first().click();
+    cy.get('input[name="urls-2"]').should('be.visible');
+    cy.get('input[name="urls-2"]').type('bar');
+
+    // Insert test2
+    cy.get('input[name="urls-0"]').siblings().first().click();
+    cy.get('input[name="urls-3"]').should('be.visible');
+    cy.get('input[name="urls-3"]').type('test2');
+
+    // Assert order: test, test2, foo, bar
+    cy.get('@textboxesGroup').children().eq(0).find('input').should('have.value', 'test');
+    cy.get('@textboxesGroup').children().eq(1).find('input').should('have.value', 'test2');
+    cy.get('@textboxesGroup').children().eq(2).find('input').should('have.value', 'foo');
+    cy.get('@textboxesGroup').children().eq(3).find('input').should('have.value', 'bar');
+
+    // Deletes test2
+    cy.get('input[name="urls-3"]').siblings().last().click();
+
+    // Assert order: test, foo, bar
+    cy.get('@textboxesGroup').children().eq(0).find('input').should('have.value', 'test');
+    cy.get('@textboxesGroup').children().eq(1).find('input').should('have.value', 'foo');
+    cy.get('@textboxesGroup').children().eq(2).find('input').should('have.value', 'bar');
+
+    // Deletes bar
+    cy.get('input[name="urls-2"]').siblings().last().click();
+
+    // Assert order: test, foo
+    cy.get('@textboxesGroup').children().eq(0).find('input').should('have.value', 'test');
+    cy.get('@textboxesGroup').children().eq(1).find('input').should('have.value', 'foo');
+  });
+
+  it('Tag selector', () => {
+    // Tag input
+    cy.get('.input[name="tags"]').should('be.visible');
+    cy.get('.input[name="tags"]').type('foo,bar');
+
+    // Open selector
+    cy.get('.input[name="tags"]').siblings().click();
+    cy.get('.context-menu__item').contains('Untagged').should('be.visible');
+
+    // Expect foo and bar selected
+    cy.get('.select__item--is-selected').first().should('contain', 'foo');
+    cy.get('.select__item--is-selected').last().should('contain', 'bar');
+
+    // Unselect foo
+    cy.get('.select__item--is-selected').first().click();
+    cy.get('.input[name="tags"]').should('have.value', 'bar');
+
+    // Click "Untagged"
+    cy.get('.context-menu__item').contains('Untagged').click();
+    cy.get('.input[name="tags"]').should('have.value', '');
+
+    // Close
+    cy.get('.input[name="tags"]').siblings().click();
+    cy.get('.context-menu__item').should('not.exist');
+  });
+
+  it('Filesystem browser', () => {
+    // Filesystem browser
+    cy.get('.input[name="destination"]').then((destinationElem) => {
+      const destination = Cypress.$(destinationElem).val();
+
+      // Open fs browser
+      cy.get('.form__element__addon .icon--search').parent().click();
+      cy.get('.filesystem__directory-list').should('be.visible');
+
+      // Go into the first directory
+      cy.get('.filesystem__directory-list__item--selectable').first().click();
+
+      // Expect destination to change
+      cy.get('.input[name="destination"]').should('not.have.value', destination);
+
+      // Go back
+      cy.get('.filesystem__directory-list__item--parent').click();
+
+      // Expect destination to match stored value
+      cy.get('.input[name="destination"]').should('have.value', destination);
+
+      // Close
+      cy.get('.form__element__addon .icon--search').parent().click();
+      cy.get('.filesystem__directory-list').should('not.exist');
+    });
+  });
+
+  it('Toggle', () => {
+    cy.get('input[name="start"]').then((startToggleElem) => {
+      const start = Cypress.$(startToggleElem).attr('checked') != null ? true : false;
+
+      // Click toggle
+      cy.get('input[name="start"]').siblings().find('.icon--checkmark').click();
+
+      // Expect change of state
+      if (start) {
+        cy.get('input[name="start"]').siblings().find('.icon--checkmark').should('not.be.visible');
+      } else {
+        cy.get('input[name="start"]').siblings().find('.icon--checkmark').should('be.visible');
+      }
+    });
+  });
+});