Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(build): Add cypress for end-to-end (integration) testing #85

Merged
merged 6 commits into from
May 6, 2022
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

# testing
/coverage
cypress/screenshots
cypress/videos

# production
/build
Expand Down
9 changes: 9 additions & 0 deletions cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"baseUrl": "http://localhost:3000",
"experimentalStudio": true,
"fixturesFolder": "cypress/fixtures",
"integrationFolder": "cypress/integration",
"pluginsFile": "cypress/plugins/index.ts",
"screenshotsFolder": "cypress/screenshots",
"supportFile": "cypress/support/index.ts"
}
86 changes: 86 additions & 0 deletions cypress/integration/docs/pages/CarouselPage.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
describe('Docs / Carousel', function () {
beforeEach(function () {
tulup-conner marked this conversation as resolved.
Show resolved Hide resolved
cy.visit('/carousel');
cy.injectAxe();
});

describe('The page', function () {
it("shouldn't have any detectable a11y violations", function () {
cy.checkA11y();
});
});

describe('Default', function () {
beforeEach(function () {
cy.get('[data-testid=carousel').first().as('carousel');
cy.get('@carousel').find('[data-testid=carousel-item]').as('items');
cy.get('@carousel').find('[data-testid=carousel-indicator]').as('indicators');
});

it('should render first slide on page load', function () {
cy.get('@items').first().should('have.attr', 'data-active', 'true');
cy.get('@carousel').find('[data-active="true"]').should('have.length', 1);
});

it('should navigate forward via right control', function () {
cy.get('@carousel').find('[data-testid=carousel-right-control]').click();
cy.get('@items').eq(1).should('have.attr', 'data-active', 'true');
});

it('should navigate backward via left control', function () {
cy.get('@carousel').find('[data-testid=carousel-left-control]').click();
cy.get('@items').eq(4).should('have.attr', 'data-active', 'true');
});

it('should navigate slides via buttons', function () {
cy.get('@indicators').eq(3).click();
cy.get('@items').eq(3).should('have.attr', 'data-active', 'true');
});

it('should change slide every 3 s', function () {
cy.wait(3000).get('@items').eq(1).should('have.attr', 'data-active', 'true');
});
});

describe('Sliding interval', function () {
it('should change slide every 5 s', function () {
cy.get('[data-testid=carousel]').eq(1).find('[data-testid=carousel-item]').as('items');
cy.wait(5000).get('@items').eq(1).should('have.attr', 'data-active', 'true');
});
});

describe('Static', function () {
it('should not automatically change slides', function () {
cy.get('[data-testid=carousel]').eq(2).find('[data-testid=carousel-item]').as('items');
cy.wait(3000).get('@items').first().should('have.attr', 'data-active', 'true');
});
});

describe('Custom controls', function () {
it('should display custom controls rather than defaults', function () {
cy.get('[data-testid=carousel]').eq(3).as('carousel');
cy.get('@carousel').find('[data-testid=carousel-left-control]').contains('left');
cy.get('@carousel').find('[data-testid=carousel-right-control]').contains('right');
});
});

describe('Indicators', function () {
it('should display two carousels, where the second has no indicators', function () {
cy.get('[data-testid=carousel]').eq(4).find('[data-testid=carousel-indicator]').should('have.length', 5);
cy.get('[data-testid=carousel]').eq(5).find('[data-testid=carousel-indicator]').should('not.exist');
});
});

describe('Slide as anything', function () {
it('should display a carousel with itemes containing just text (no images)', function () {
cy.get('[data-testid=carousel]')
.eq(6)
.find('[data-testid=carousel-item]')
.each((item, i) => {
cy.wrap(item).contains(`Slide ${i + 1}`);
});
});
});
});

export {};
22 changes: 22 additions & 0 deletions cypress/plugins/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
* @type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
};
25 changes: 25 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// ***********************************************
tulup-conner marked this conversation as resolved.
Show resolved Hide resolved
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
2 changes: 2 additions & 0 deletions cypress/support/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import 'cypress-axe';
import './commands';
10 changes: 10 additions & 0 deletions cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"strict": true,
"baseUrl": "../node_modules",
"target": "es5",
"lib": ["es5", "dom"],
"types": ["node", "cypress", "cypress-axe"]
},
"include": ["**/*.ts", "support/index.js"]
}
22 changes: 15 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,27 @@
"private": false,
"homepage": "https://flowbite-react.com",
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build --profile",
"test": "react-app-rewired test --color",
"test:coverage": "CI=true react-app-rewired test --coverage --collectCoverageFrom='[\"src/lib/**/*.{ts,tsx}\",\"!src/lib/**/*.stories.{ts,tsx}\"]' --color",
"eject": "react-app-rewired eject",
"build:lib": "rimraf lib && yarn build:lib:esm && yarn build:lib:cjs",
"build:lib:cjs": "tsc -p tsconfig.lib.json",
"build:lib:esm": "tsc -p tsconfig.lib.json --module esnext --declaration --outDir lib/esm",
"build:storybook": "build-storybook -o build/storybook",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"eject": "react-app-rewired eject",
"lint": "eslint --color",
"lint:staged": "lint-staged --config lint-staged.js",
"prettier": "prettier --check {src,test,.storybook}/**/*.{js,jsx,ts,tsx,json,css,scss}",
"prettier:fix": "prettier --write {src,test,.storybook}/**/*.{js,jsx,ts,tsx,json,css,scss}",
"release": "standard-version -a",
"prepare": "husky install",
"prepublishOnly": "yarn build:lib",
"release": "standard-version -a",
"start": "react-app-rewired start",
"start:storybook": "start-storybook -p 6006",
"build:storybook": "build-storybook -o build/storybook",
"prepare": "husky install"
"test": "react-app-rewired test --color",
"test:coverage": "CI=true react-app-rewired test --coverage --collectCoverageFrom='[\"src/lib/**/*.{ts,tsx}\",\"!src/lib/**/*.stories.{ts,tsx}\"]' --color",
"test:e2e": "start-test 3000 cypress:run",
"test:e2e:open": "start-test 3000 cypress:open"
},
"dependencies": {
"@floating-ui/react-dom": "^0.6.3",
Expand Down Expand Up @@ -80,7 +84,10 @@
"@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1",
"autoprefixer": "^10.4.4",
"axe-core": "^4.4.1",
"babel-loader": "^8.2.4",
"cypress": "^9.6.0",
"cypress-axe": "^0.14.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.1",
Expand All @@ -101,6 +108,7 @@
"react-scripts": "^5.0.0",
"react-syntax-highlighter": "^15.5.0",
"standard-version": "^9.3.2",
"start-server-and-test": "^1.14.0",
"storybook-dark-mode": "^1.0.9",
"tailwindcss": "^3.0.24",
"typescript": "^4.6.3",
Expand Down
24 changes: 20 additions & 4 deletions src/lib/components/Carousel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const Carousel: FC<CarouselProps> = ({
const handleDragging = (dragging: boolean) => () => setIsDragging(dragging);

return (
<div className="relative">
<div className="relative" data-testid="carousel">
<ScrollContainer
className={classNames(
'flex h-56 snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg sm:h-64 xl:h-80 2xl:h-96',
Expand All @@ -91,7 +91,12 @@ export const Carousel: FC<CarouselProps> = ({
vertical={false}
>
{items?.map((item, index) => (
<div key={index} className="w-full flex-shrink-0 transform snap-center">
<div
key={index}
className="w-full flex-shrink-0 transform snap-center"
data-active={activeItem === index}
data-testid="carousel-item"
>
{item}
</div>
))}
Expand All @@ -107,18 +112,29 @@ export const Carousel: FC<CarouselProps> = ({
'bg-white/50 hover:bg-white dark:bg-gray-800/50 dark:hover:bg-gray-800': index !== activeItem,
})}
onClick={navigateTo(index)}
data-testid="carousel-indicator"
/>
))}
</div>
)}

<div className="absolute top-0 left-0 flex h-full items-center justify-center px-4 focus:outline-none">
<button className="group" onClick={navigateTo(activeItem - 1)} type="button">
<button
className="group"
data-testid="carousel-left-control"
onClick={navigateTo(activeItem - 1)}
type="button"
>
{leftControl ? leftControl : <DefaultLeftControl />}
</button>
</div>
<div className="absolute top-0 right-0 flex h-full items-center justify-center px-4 focus:outline-none">
<button className="group" onClick={navigateTo(activeItem + 1)} type="button">
<button
className="group"
data-testid="carousel-right-control"
onClick={navigateTo(activeItem + 1)}
type="button"
>
{rightControl ? rightControl : <DefaultRightControl />}
</button>
</div>
Expand Down
Loading