diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..449e60d
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,10 @@
+
+# v1.0.1
+
+  - tsante-mqtt : reinitialize client when modifying host or clientID
+  - tsante-mqtt : on disconnect set connected to false
+  - tsante-mqtt-subscriber : when tsante-mqtt disconnect, unsubscribe the topic.
+
+# v1.0.0
+
+First public release
diff --git a/bower.json b/bower.json
index 18a9e81..e5065d3 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tsante-mqtt",
-  "version":"1.0.0",
+  "version":"1.0.1",
   "description": "A MQTT component",
   "license": "LICENSE.md",
   "main": "tsante-mqtt.html",
diff --git a/demo/index.html b/demo/index.html
index bb15621..921e2c1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,9 +16,37 @@
       .vertical-section-container {
         max-width:80%;
       }
+      .note {
+        max-width:80%;
+        margin:auto;
+        background: rgb(251, 243, 178);
+        border:1px solid black;
+        padding: 10px;
+        text-align: justify;
+      }
+      .note button {
+        font: inherit;
+        font-size: 16px;
+        padding: 10px 20px;
+        color: white;
+        background: dodgerblue;
+        border: none;
+        border-radius: 5px;
+        margin:auto;
+      }
     </style>
   </head>
   <body>
+    <div class="note">
+      <p>The demo uses the test mqtt server provided by mosquitto.org.</p>
+      <p>This server uses self-signed certificates, you must accept the
+        certificate to run the demo. To do so, go to
+        <a href="https://test.mosquitto.org:8081/" target="blank">https://test.mosquitto.org:8081/</a>
+        and accept the certificate. Then reload the demo page.</p>
+        <div style="text-align: center">
+          <button onclick="window.location.reload();">refresh</button>
+        </div>
+    </div>
     <div class="vertical-section-container centered">
       <h3>Subscribe demo</h3>
       <demo-snippet>
diff --git a/test/tsante-mqtt_test.html b/test/tsante-mqtt_test.html
index 1937337..53abb52 100644
--- a/test/tsante-mqtt_test.html
+++ b/test/tsante-mqtt_test.html
@@ -14,16 +14,157 @@
   <body>
     <test-fixture id="basic">
       <template>
-        <tsante-mqtt></tsante-mqtt>
+        <tsante-mqtt>
+          <tsante-mqtt-subscriber topic="terminal/#"></tsante-mqtt-subscriber>
+          <tsante-mqtt-publisher topic="terminal/hello"></tsante-mqtt-publisher>
+        </tsante-mqtt>
       </template>
     </test-fixture>
-
+    <div id="mocha"></div>
     <script>
+
       suite('tsante-mqtt', function() {
         test('instantiating the element works', function() {
           var element = fixture('basic');
           assert.equal(element.is, 'tsante-mqtt');
         });
+
+        test('the component is not connected', () => {
+          const element = fixture('basic');
+          const subscriber = element.querySelector('tsante-mqtt-subscriber');
+          expect(element.connected).to.be.false;
+          expect(subscriber.subscribed).to.be.false;
+        });
+
+        test('connect to ws://test.mosquitto.org:8080/', (done) => {
+          const element = fixture('basic');
+          element.addEventListener('tsante-mqtt-connect', (evt) => {
+            expect(evt.detail.status).to.be.true;
+            done();
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('if already connected, on connect the component should throw an error', (done) => {
+          const element = fixture('basic');
+          let count = 0;
+          element.addEventListener('tsante-mqtt-connect', (evt) => {
+            if(!count) {
+              expect(evt.detail.status).to.be.true;
+              element.connect();
+            }
+          });
+          element.addEventListener('tsante-mqtt-error', (evt) => {
+            expect(evt.detail).to.be.equal('AMQJS0011E Invalid state already connected.');
+            done();
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('disconnect', (done) => {
+          const element = fixture('basic');
+          const subscriber = element.querySelector('tsante-mqtt-subscriber');
+          let count = 0;
+          element.addEventListener('tsante-mqtt-connect', (evt) => {
+            if(!count) {
+              count++;
+              expect(evt.detail.status).to.be.true;
+              element.disconnect();
+            } else {
+              expect(evt.detail.status).to.be.false;
+              expect(element.connected).to.be.false;
+              done();
+            }
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('if already disconnected, on disconnect the component should throw an error', (done) => {
+          const element = fixture('basic');
+          let count = 0;
+          element.addEventListener('tsante-mqtt-connect', (evt) => {
+            if(!count) {
+              count++;
+              expect(evt.detail.status).to.be.true;
+              element.disconnect();
+            } else {
+              element.disconnect();
+            }
+          });
+          element.addEventListener('tsante-mqtt-error', (evt) => {
+            expect(evt.detail).to.be.equal('AMQJS0011E Invalid state not connecting or connected.');
+            done();
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('subscriber should automatically subscribe on connect', (done) => {
+          const element = fixture('basic');
+          const subscriber = element.querySelector('tsante-mqtt-subscriber');
+          subscriber.addEventListener('tsante-mqtt-subscribed', (evt) => {
+            expect(evt.detail.status).to.be.true;
+            expect(evt.detail.topic).to.be.equal('terminal/#');
+            expect(subscriber.subscribed).to.be.true;
+            done();
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('subscriber should automatically be unsubscribed on disconnect', (done) => {
+          const element = fixture('basic');
+          const subscriber = element.querySelector('tsante-mqtt-subscriber');
+          let count = 0;
+          subscriber.addEventListener('tsante-mqtt-subscribed', (evt) => {
+            if(!count) {
+              count++;
+              expect(evt.detail.status).to.be.true;
+              setTimeout(element.disconnect(), 200);
+            } else {
+              expect(evt.detail.status).to.be.false;
+              expect(evt.detail.topic).to.be.equal('terminal/#');
+              expect(subscriber.subscribed).to.be.false;
+              done();
+            }
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('publisher should automatically on connect', (done) => {
+          const element = fixture('basic');
+          const subscriber = element.querySelector('tsante-mqtt-subscriber');
+          const publisher = element.querySelector('tsante-mqtt-publisher');
+          publisher.payload = 'world';
+          element.addEventListener('tsante-mqtt-delivered', (evt) => {
+            expect(evt.detail.payload).to.be.equal('world');
+            expect(evt.detail.topic).to.be.equal('terminal/hello');
+            done();
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('subscriber should receive the published message', (done) => {
+          const element = fixture('basic');
+          const subscriber = element.querySelector('tsante-mqtt-subscriber');
+          const publisher = element.querySelector('tsante-mqtt-publisher');
+          let count = 0;
+          publisher.payload = 'world';
+          element.addEventListener('tsante-mqtt-received', (evt) => {
+            console.log(count++);
+            expect(evt.detail.payload).to.be.equal('world');
+            expect(evt.detail.topic).to.be.equal('terminal/hello');
+            done();
+          });
+          element.host = 'ws://test.mosquitto.org:8080/';
+        });
+
+        test('connection to wss://test.mosquitto.org:8081/', (done) => {
+          const element = fixture('basic');
+          element.addEventListener('tsante-mqtt-connect', (evt) => {
+            expect(evt.detail.status).to.be.true;
+            done();
+          });
+          element.host = 'wss://test.mosquitto.org:8081/';
+        });
       });
     </script>
   </body>
diff --git a/tsante-mqtt-subscriber.html b/tsante-mqtt-subscriber.html
index d2ad8b6..61ab950 100644
--- a/tsante-mqtt-subscriber.html
+++ b/tsante-mqtt-subscriber.html
@@ -54,6 +54,7 @@
             this._subscribe();
           } else if(this.subscribed) {
             this._setSubscribed(false);
+            this.fire('tsante-mqtt-subscribed', { topic: this.topic, status: false });
           }
         });
       },
diff --git a/tsante-mqtt.html b/tsante-mqtt.html
index 57c9207..c60faff 100644
--- a/tsante-mqtt.html
+++ b/tsante-mqtt.html
@@ -127,7 +127,7 @@
       ],
 
       _initializeClient: function(host,clientID) {
-        if(this.connected && this.client) { this.disconnect(); } 
+        if(this.connected && this.client) { this.disconnect(); }
         this.client = new Paho.MQTT.Client(this.host, this.clientID);
         this.client.onConnectionLost = this._onConnectionLost.bind(this);
         this.client.onMessageArrived = this._onMessageArrived.bind(this);
@@ -239,6 +239,7 @@
       disconnect: function() {
         try {
           this.client.disconnect();
+          this._setConnected(false);
         } catch(err) {
           this._onError(err.message);
         }
