diff --git a/src/components/details/details.test.ts b/src/components/details/details.test.ts
new file mode 100644
index 000000000..7f2773299
--- /dev/null
+++ b/src/components/details/details.test.ts
@@ -0,0 +1,152 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlDetails from './details';
+
+describe('<sl-details>', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture(html`
+      <sl-details open>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+
+    expect(body.hidden).to.be.false;
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture(html`
+      <sl-details>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+
+    expect(body.hidden).to.be.true;
+  });
+
+  it('should emit sl-show and sl-after-show when calling show()', async () => {
+    const el = (await fixture(html`
+      <sl-details>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `)) as SlDetails;
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('sl-show', showHandler);
+    el.addEventListener('sl-after-show', afterShowHandler);
+    el.show();
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(body.hidden).to.be.false;
+  });
+
+  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
+    const el = (await fixture(html`
+      <sl-details open>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `)) as SlDetails;
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sl-hide', hideHandler);
+    el.addEventListener('sl-after-hide', afterHideHandler);
+    el.hide();
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(body.hidden).to.be.true;
+  });
+
+  it('should emit sl-show and sl-after-show when adding the open attribute', async () => {
+    const el = (await fixture(html`
+      <sl-details>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `)) as SlDetails;
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('sl-show', showHandler);
+    el.addEventListener('sl-after-show', afterShowHandler);
+    el.open = true;
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(body.hidden).to.be.false;
+  });
+
+  it('should emit sl-hide and sl-after-hide when removing the open attribute', async () => {
+    const el = (await fixture(html`
+      <sl-details open>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `)) as SlDetails;
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sl-hide', hideHandler);
+    el.addEventListener('sl-after-hide', afterHideHandler);
+    el.open = false;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(body.hidden).to.be.true;
+  });
+
+  it('should be the correct size after opening more than one instance', async () => {
+    const el = await fixture(html`
+      <div>
+        <sl-details>
+          <div style="height: 200px;"></div>
+        </sl-details>
+        <sl-details>
+          <div style="height: 400px;"></div>
+        </sl-details>
+      </div>
+    `);
+    const first = el.querySelectorAll('sl-details')[0];
+    const second = el.querySelectorAll('sl-details')[1];
+    const firstBody = first.shadowRoot?.querySelector('.details__body');
+    const secondBody = second.shadowRoot?.querySelector('.details__body');
+
+    await first.show();
+    await second.show();
+
+    expect(firstBody!.clientHeight).to.equal(200);
+    expect(secondBody!.clientHeight).to.equal(400);
+  });
+});