Modal commit
This commit is contained in:
ExostFlash
parent
7bece6d5a3
commit
c339a740eb
10 changed files with 2894 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
./node_modules
|
||||
9
cypress.config.js
Normal file
9
cypress.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const { defineConfig } = require("cypress");
|
||||
|
||||
module.exports = defineConfig({
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
},
|
||||
},
|
||||
});
|
||||
24
cypress/e2e/modal.cy.js
Normal file
24
cypress/e2e/modal.cy.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
describe('template spec', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('./../modal.html')
|
||||
})
|
||||
|
||||
it('Affiche le titre de la page', () => {
|
||||
cy.get('h1').should('contain.text', 'Modal')
|
||||
})
|
||||
|
||||
it('Ouvre la modal', () => {
|
||||
cy.get('button').click()
|
||||
cy.get('div[x-show="isModalVisible"]').should('not.have.attr', 'style')
|
||||
})
|
||||
|
||||
it('Ferme la modal', () => {
|
||||
cy.get('body').click(0, 0)
|
||||
})
|
||||
|
||||
it('Regarde si la modal a un h2', () => {
|
||||
cy.get('button').click()
|
||||
cy.get('div[x-show="isModalVisible"]').should('not.have.attr', 'style')
|
||||
cy.get('h2').should('contain.text', 'Lorem Ipsum')
|
||||
})
|
||||
})
|
||||
5
cypress/fixtures/example.json
Normal file
5
cypress/fixtures/example.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
25
cypress/support/commands.js
Normal file
25
cypress/support/commands.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// ***********************************************
|
||||
// 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) => { ... })
|
||||
17
cypress/support/e2e.js
Normal file
17
cypress/support/e2e.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// ***********************************************************
|
||||
// This example support/e2e.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
1
index.js
Normal file
1
index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
console.log("Runnning Cypress Components Tests");
|
||||
84
modal.html
Normal file
84
modal.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modal, with Tailwind CSS & AlpineJS</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="../img/favicon.png" />
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Alpine JS -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body x-data="{ isModalVisible: false }" class="antialiased bg-gray-200 min-h-screen" style="font-family: 'Montserrat';">
|
||||
<div class="flex flex-col h-screen items-center justify-center">
|
||||
<div class="bg-white p-8 shadow-md rounded-sm">
|
||||
<!-- Title -->
|
||||
<h1 class="text-lg font-extrabold">Modal</h1>
|
||||
<h2 class="text-sm text-gray-400 mb-8">Alpine JS & Tailwind CSS</h2>
|
||||
|
||||
<!-- Button displaying the modal -->
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<button
|
||||
class="bg-blue-600 focus:outline-none text-white p-8 rounded-sm w-full hover:bg-blue-900 transition duration-300 ease-in-out"
|
||||
@click="isModalVisible = ! isModalVisible"
|
||||
>
|
||||
Display
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-0 left-0 w-full h-screen flex justify-center items-center bg-black bg-opacity-40 z-50"
|
||||
x-show="isModalVisible"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="transform -translate-y-48 md:-translate-y-16 opacity-0"
|
||||
x-transition:enter-end="transform translate-y-0 opacity-1"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="transform translate-y-0 opacity-1"
|
||||
x-transition:leave-end="transform -translate-y-48 md:-translate-y-16 opacity-0"
|
||||
>
|
||||
|
||||
<div class="bg-white rounded-sm shadow-md overflow-hidden max-w-3xl"
|
||||
@click.away="isModalVisible = false"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-1 p-8">
|
||||
<h2 class="font-extrabold text-4xl mb-4">Lorem Ipsum</h2>
|
||||
<p class="text-sm text-gray-600 text-justify">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Donec quis tortor sodales, sodales neque placerat, gravida orci.
|
||||
Integer et lectus feugiat, varius augue non, luctus augue.
|
||||
Suspendisse potenti.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="16"
|
||||
class="fill-current cursor-pointer text-black hover:text-gray-600 transition duration-300 ease-out"
|
||||
@click="isModalVisible = false"
|
||||
>
|
||||
<!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
|
||||
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
2708
package-lock.json
generated
Normal file
2708
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
20
package.json
Normal file
20
package.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "cypress-components",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "ssh://git@git.lehub.tf:2222/SchoolTask/cypress-components.git"
|
||||
},
|
||||
"license": "ISC",
|
||||
"author": "",
|
||||
"type": "commonjs",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cypress": "^14.5.1",
|
||||
"mocha": "^11.7.1"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue