diff --git a/.eslintrc b/.eslintrc index 4fcf2b5..875386a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -29,6 +29,7 @@ "react/no-children-prop": "off", "react/no-find-dom-node": "off", "react/prop-types": "off", + "react/react-in-jsx-scope": "off", "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": ["warn"] }, diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 451f553..a0676d7 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -8,7 +8,7 @@ jobs: strategy: matrix: - node-version: [14.x, 16.x] + node-version: [lts/*] steps: - uses: actions/checkout@v3 diff --git a/.npmignore b/.npmignore index e9f3cba..8b9311e 100644 --- a/.npmignore +++ b/.npmignore @@ -27,13 +27,13 @@ _.config.yml .gitattributes .gitignore .nvmrc +.postcssrc.json .prettierignore .prettierrc .stylelintignore .stylelintrc .travis.yml .whitesource -postcss.config.js renovate.json tsconfig.json tsconfig-lint.json diff --git a/.postcssrc.json b/.postcssrc.json new file mode 100644 index 0000000..8f9fff7 --- /dev/null +++ b/.postcssrc.json @@ -0,0 +1,5 @@ +{ + "plugins": { + "autoprefixer": {} + } +} diff --git a/.prettierrc b/.prettierrc index 7dcc74d..63930c0 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "printWidth": 120, + "printWidth": 80, "tabWidth": 4, "useTabs": true, "semi": true, diff --git a/__tests__/__snapshots__/index.tsx.snap b/__tests__/__snapshots__/index.tsx.snap index a329135..f722b8d 100644 --- a/__tests__/__snapshots__/index.tsx.snap +++ b/__tests__/__snapshots__/index.tsx.snap @@ -1,595 +1,281 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Accordion should render properly with default props 1`] = ` -[ +exports[`Accordion should render properly with ref prop 1`] = ` +
A random Unsplash photo
Round Carousel - Slide number - 1 + Slide number 1
A random Unsplash photo
Round Carousel - Slide number - 2 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 3 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 4 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 5 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 6 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 7 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 8 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 9 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 10 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 11 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 12 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 13 - -
-
-
-
- A random Unsplash photo -
-
- - Round Carousel - - - Slide number - 14 + Slide number 2
+
+
+
+ + +
+ +`; + +exports[`Accordion should render properly with ref prop 2`] = ` + +
+
A random Unsplash photo
Round Carousel - Slide number - 15 + Slide number 1
A random Unsplash photo
Round Carousel - Slide number - 16 + Slide number 2
+
+
+
+ + +
+ +`; + +exports[`Accordion should render properly with ref prop 3`] = ` + +
+
A random Unsplash photo
Round Carousel - Slide number - 17 + Slide number 1
A random Unsplash photo
Round Carousel - Slide number - 18 + Slide number 2
+
+
+
+ + +
+ +`; + +exports[`Accordion should render properly without ref props 1`] = ` + +
+
A random Unsplash photo
Round Carousel - Slide number - 19 + Slide number 1
A random Unsplash photo
Round Carousel - Slide number - 20 + Slide number 2
-
, +
-
, -] + + `; diff --git a/__tests__/index.tsx b/__tests__/index.tsx index 94d5fa5..dc7983f 100644 --- a/__tests__/index.tsx +++ b/__tests__/index.tsx @@ -1,22 +1,51 @@ -import * as React from 'react'; -import * as renderer from 'react-test-renderer'; +import React, { createRef } from 'react'; +import { render, waitFor, fireEvent } from '@testing-library/react'; import { items } from '../demo/mocks'; -import { Carousel } from '../src'; +import { Carousel, CarouselRef } from '../src'; + +const carouselItems = items + .map(item => ({ + ...item, + image: item.image.replace(/\?.*$/gm, '') + })) + .slice(0, 2); describe('Accordion', () => { - it('should render properly with default props', () => { - const tree = renderer - .create( - ({ - ...item, - image: item.image.replace(/\?.*$/gm, '') - }))} - /> - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + it('should render properly with ref prop', async () => { + const ref = createRef(); + const { asFragment, getAllByRole } = await waitFor(() => + render() + ); + + expect(asFragment()).toMatchSnapshot(); + + const carousel = ref.current; + + expect(carousel).toBeDefined(); + expect(carousel?.next).toBeInstanceOf(Function); + expect(carousel?.prev).toBeInstanceOf(Function); + expect(carousel?.getItems).toBeInstanceOf(Function); + expect(carousel?.getSelectedIndex).toBeInstanceOf(Function); + expect(carousel?.setSelectedIndex).toBeInstanceOf(Function); + + expect(carousel?.getItems().length).toEqual(2); + expect(carousel?.getSelectedIndex()).toEqual(0); + + const [prev, next] = getAllByRole('button'); + + await waitFor(() => fireEvent(next, new Event('click'))); + + expect(asFragment()).toMatchSnapshot(); + + await waitFor(() => fireEvent(prev, new Event('click'))); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render properly without ref props', () => { + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/demo/custom.d.ts b/demo/custom.d.ts deleted file mode 100644 index 692feff..0000000 --- a/demo/custom.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare namespace JSX { - interface IntrinsicElements { - 'social-links': any; - } -} diff --git a/demo/index.html b/demo/index.html index f9eae5b..b6782b9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,7 +14,11 @@ href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" /> - +