add Svelte docs & a known issue in testcafe. (#104)

* Create intro.md

* doc: added testcafe-testing-library docs

* doc: cleaned up some little details

* added note for container

* add docs for within

* added svelte & known issue w/ testcafe

* added note about jest-transform-svelte

* removed old example

* added logos to home page

Author: benmonro

docs/svelte-testing-library/intro.md

@@ -0,0 +1,72 @@
+---
+id: intro
+title: Svelte Testing Library
+---
+
+[`svelte-testing-library`][gh] simplifies the use of dom-testing with
+[Svelte](https://svelte.dev/) components & applications.
+
+```
+npm install --save-dev svlt-testing-library
+```
+
+- [svelte-testing-library on GitHub][gh]
+
+## Usage
+
+You will first need to install and configure
+[jest-transform-svelte](https://www.npmjs.com/package/jest-transform-svelte) in
+order to use svelte in jest.
+
+You must add `cleanup` to your test fixture's `beforeEach` hook:
+
+```javascript
+import { render, cleanup } from 'svlt-testing-library'
+
+beforeEach(cleanup) //this is required.
+```
+
+## Examples
+
+App.svelte
+
+```html
+<script>
+  export let name
+</script>
+
+<style>
+  h1 {
+    color: purple;
+  }
+</style>
+
+<h1>Hello {name}!</h1>
+```
+
+App.spec.js
+
+```javascript
+import App from '../src/App.svelte'
+import { render, cleanup } from 'svlt-testing-library'
+beforeEach(cleanup)
+describe('App', () => {
+  test('should render greeting', () => {
+    const { getByText } = render(App, { props: { name: 'world' } })
+
+    expect(getByText('Hello world!'))
+  })
+
+  test('should change button text after click', async () => {
+    const { getByText } = render(App, { props: { name: 'world' } })
+
+    fireEvent.click(getByText('Button Text'))
+
+    const button = await waitForElement(() => getByText('Button Clicked'))
+
+    expect(button).toBeInTheDocument()
+  })
+})
+```
+
+[gh]: https://github.com/testing-library/svelte-testing-library

docs/testcafe-testing-library/intro.md

@@ -86,4 +86,12 @@ test("queryByPlaceholder doesn't find anything", async t => {
 })
 ```
 
+## Known Issues
+
+Whenever a non-client side browser navigation event occurs, you will need to
+make another call to `addTestcafeTestingLibrary`. Testcafe uses a Proxy to
+inject & execute tests/selectors. AFAIK, there's no way to tap into an
+`on("navigate")` event. I have filed an issue with Testcafe to address this so
+feel free to give it a +1. https://github.com/DevExpress/testcafe/issues/3758
+
 [gh]: https://github.com/benmonro/testcafe-testing-library

website/pages/en/index.js

@@ -195,6 +195,17 @@ class Index extends React.Component {
             title:
               '[Cypress Testing Library](./docs/cypress-testing-library/intro)',
           },
+          {
+            image: `${baseUrl}img/testcafe-128x128.jpg`,
+            imageAlign: 'top',
+            title: `[Testcafe Testing Library](./docs/testcafe-testing-library/intro)`,
+          },
+          {
+            image: `${baseUrl}img/svelte-128x128.png`,
+            imageAlign: 'top',
+            title:
+              '[Svelte Testing Library](./docs/svelte-testing-library/intro)',
+          },
           {
             image: `${baseUrl}img/vue-400x400.png`,
             imageAlign: 'top',

website/sidebars.json

@@ -51,6 +51,7 @@
         ]
       },
       "cypress-testing-library/intro",
+      "svelte-testing-library/intro",
       "vue-testing-library/intro",
       "angular-testing-library/intro",
       "pptr-testing-library/intro",