Merge pull request #243 from vaadin/feature/file-state

Expose state attributes on <vaadin-upload-file> host
vaadin · May 31, 2018 · 047831e · 047831e
2 parents 8ea5933 + ed1118b
commit 047831e
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 6 deletions.
diff --git a/src/vaadin-upload-file.html b/src/vaadin-upload-file.html
@@ -80,10 +80,10 @@
        *
        * Attribute | Description | Part name
        * ---|---|---
-       * `error` | An error has happened during uploading | `progress`
-       * `indeterminate` | Uploading is in progress, but the progress value is unknown | `progress`
-       * `uploading` | Uploading is in progress | `progress`
-       * `complete` | Uploading has finished successfully | `progress`
+       * `error` | An error has happened during uploading | `:host`
+       * `indeterminate` | Uploading is in progress, but the progress value is unknown | `:host`
+       * `uploading` | Uploading is in progress | `:host`
+       * `complete` | Uploading has finished successfully | `:host`
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
        *
@@ -104,7 +104,11 @@
 
         static get observers() {
           return [
-            '_fileAborted(file.abort)'
+            '_fileAborted(file.abort)',
+            '_toggleHostAttribute(file.error, "error")',
+            '_toggleHostAttribute(file.indeterminate, "indeterminate")',
+            '_toggleHostAttribute(file.uploading, "uploading")',
+            '_toggleHostAttribute(file.complete, "complete")',
           ];
         }
 
@@ -139,6 +143,18 @@
           );
         }
 
+        _toggleHostAttribute(value, attributeName) {
+          const shouldHave = Boolean(value);
+          const has = this.hasAttribute(attributeName);
+          if (has !== shouldHave) {
+            if (shouldHave) {
+              this.setAttribute(attributeName, '');
+            } else {
+              this.removeAttribute(attributeName);
+            }
+          }
+        }
+
         /**
         * Fired when the retry button is pressed. It is listened by `vaadin-upload`
         * which will start a new upload process of this file.

diff --git a/test/file.html b/test/file.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-upload tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="common.html">
+</head>
+
+<body>
+  <test-fixture id="upload-file">
+    <template>
+      <vaadin-upload-file></vaadin-upload-file>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('<vaadin-upload-file> element', () => {
+      let fileElement, fileObject;
+      beforeEach(() => {
+        fileElement = fixture('upload-file');
+        fileObject = createFile(100000, 'application/unknown');
+        fileElement.file = fileObject;
+      });
+
+      describe('state attributes', () => {
+        it('should not be uploading by default', () => {
+          expect(fileElement.hasAttribute('uploading')).to.be.false;
+        });
+
+        it('should reflect uploading', () => {
+          fileElement.set('file.uploading', true);
+          expect(fileElement.hasAttribute('uploading')).to.be.true;
+        });
+
+        it('should not be indeterminate by default', () => {
+          expect(fileElement.hasAttribute('indeterminate')).to.be.false;
+        });
+
+        it('should reflect indeterminate', () => {
+          fileElement.set('file.indeterminate', true);
+          expect(fileElement.hasAttribute('indeterminate')).to.be.true;
+        });
+
+        it('should not be complete by default', () => {
+          expect(fileElement.hasAttribute('complete')).to.be.false;
+        });
+
+        it('should reflect complete', () => {
+          fileElement.set('file.complete', true);
+          expect(fileElement.hasAttribute('complete')).to.be.true;
+        });
+
+        it('should not be error by default', () => {
+          expect(fileElement.hasAttribute('error')).to.be.false;
+        });
+
+        it('should reflect error', () => {
+          fileElement.set('file.error', true);
+          expect(fileElement.hasAttribute('error')).to.be.true;
+        });
+      });
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -1,5 +1,6 @@
 window.VaadinUploadSuites = [
   'upload.html',
   'adding-files.html',
-  'file-list.html'
+  'file-list.html',
+  'file.html'
 ];