TASK: Add a new e2e test for create tag validation

Author: markusguenther

Resources/Private/JavaScript/media-module/tests/tags.ts

@@ -1,8 +1,11 @@
 import page from './page-model';
-import { SERVER_NAME } from './helpers';
+import {ReactSelector} from 'testcafe-react-selectors';
+import {SERVER_NAME} from './helpers';
 
 fixture('Tags').page(SERVER_NAME);
 
+const subSection = (name) => console.log('\x1b[33m%s\x1b[0m', ' - ' + name);
+
 test('Clicking first tag updates list and only assets should be shown that are assigned to it', async (t) => {
     await t
         // Uncollapse the tag list
@@ -19,3 +22,34 @@ test('Clicking first tag updates list and only assets should be shown that are a
         .expect(page.assetCount.innerText)
         .eql('12 assets');
 });
+
+test('Create a new tag and test validation', async (t) => {
+    subSection('Check existing tag label validation');
+    await t
+        .click(page.assetCollections.withText('All'))
+        .click(page.collectionTree.findReact('AddTagButton'))
+        .typeText(ReactSelector('CreateTagDialog').findReact('TextInput'), 'Example tag 1')
+        .expect(
+            ReactSelector('CreateTagDialog')
+                .findReact('TextInput')
+                .withProps({ validationerrors: ['This input is invalid'] }).exists
+        )
+        .ok('Text input should have validation errors')
+        .expect(ReactSelector('CreateTagDialog').findReact('Button').withProps({ disabled: true }).exists)
+        .ok('Create button should be disabled')
+        .expect(ReactSelector('CreateTagDialog').find('ul li').textContent)
+        .eql('A tag with this label already exists')
+        .typeText(ReactSelector('CreateTagDialog').findReact('TextInput'), '00')
+        .expect(ReactSelector('CreateTagDialog').find('ul li').exists)
+        .notOk('The tooltip should not be visible anymore')
+        .expect(ReactSelector('CreateTagDialog').findReact('Button').withProps({ disabled: false }).exists)
+        .ok('Create button should be enabled');
+
+    subSection('Check emtpy tag label validation');
+    await t
+        .typeText(ReactSelector('CreateTagDialog').findReact('TextInput'), ' ', { replace: true })
+        .expect(ReactSelector('CreateTagDialog').findReact('Button').withProps({ disabled: true }).exists)
+        .ok('Create button should be disabled')
+        .expect(ReactSelector('CreateTagDialog').find('ul li').textContent)
+        .eql('Please provide a tag label');
+});