SchoolTask/cypress-components
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

smart-tag

Browse source
This commit is contained in:
ExostFlash 2025-07-10 14:10:13 +02:00
parent 399a222633
commit 2b4c5895e7
2 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
cypress/e2e/smart.cy.js Normal file
View file

@ -0,0 +1,18 @@
describe('template spec', () => {
beforeEach(() => {
cy.visit('./../smart-tag.html')
})
it('Affiche le tag au survol du bouton See more', () => {
cy.contains('See more').trigger('mouseover')
cy.get('div.absolute').should('not.have.attr', 'style')
})
it('Le tag disparaît à la sortie du survol du bouton See more', () => {
cy.contains('See more').trigger('mouseover')
cy.get('div.absolute').should('not.have.attr', 'style')
cy.get('body').trigger('mousemove', 0, 0)
cy.get('div.absolute').should('have.attr', 'style')
})
})

61
smart-tag.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart tag 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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;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 class="antialiased bg-gray-100 min-h-screen" style="font-family: 'Poppins';">
<div class="flex flex-col h-screen justify-center items-center">
<div class="bg-white p-8 shadow-md">
<!-- Title -->
<h1 class="text-lg font-extrabold">Smart tag</h1>
<h2 class="text-sm text-gray-400 mb-8">Alpine JS & Tailwind CSS</h1>
<!-- Tag -->
<div class="flex">
<div class="flex-1">
<div x-data="{ isActive: false }" class="relative">
<div class="bg-yellow-100 text-yellow-500 text-sm p-2 rounded-sm text-center cursor-help"
@mouseover="isActive = true"
@mouseover.away="isActive = false">
See more
</div>
<div x-show="isActive"
class="absolute top-11 w-64 text-xs rounded-sm bg-white shadow-md py-2 px-4"
x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-16 rotate-12"
x-transition:enter-end="opacity-100 translate-y-0 rotate-0"
x-transition:leave="transition transform ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 rotate-0"
x-transition:leave-end="opacity-0 translate-y-16 rotate-12"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident laboriosam magnam quod. In ipsum eius voluptatibus consequatur fugit? Fugit animi eos voluptatibus enim aspernatur culpa illo. Quidem ipsum hic eaque.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>