🚀 ساخت Task List با Vue 3 + TypeScript و تست آن با Cypress

Summarize this content to 400 words in Persian Lang
در این مقاله، با استفاده از یک برنامه لیست وظایف ساده ایجاد می کنیم Vue 3 و TypeScript. سپس، ما می نویسیم انتها به انتها (E2E) تست ها با استفاده از سرو برای اطمینان از عملکرد برنامه همانطور که انتظار می رود.

🛠️ مرحله 1: پروژه Vue 3 خود را راه اندازی کنید

اگر قبلاً پروژه Vue 3 ندارید، با Vite شروع کنید:

npm create vue@latest

در حین تنظیم، گزینه های زیر را انتخاب کنید:

TypeScript: بله

آناناس: خیر (اختیاری برای این پروژه)

ESLint + زیباتر: بله

سپس، وابستگی ها را نصب کنید:

cd your-project
npm install

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سرور توسعه خود را راه اندازی کنید:

npm run dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

✨ مرحله 2: با Vue 3 و TypeScript یک لیست کار ایجاد کنید

ایجاد یک TaskList.vue مؤلفه ای که لیستی از وظایف را نمایش می دهد و به کاربران امکان می دهد وظایف را اضافه یا حذف کنند.

این هم کد کامل:

([
{id: 1, name: “Buying milk”}
])
const newTask = ref(“”)

const addTask = () => {
if (newTask.value.trim()) {
tasks.value.push({id: Date.now(), name: newTask.value})
newTask.value = “”
}
}

const removeTask = (id: string|number) => {
tasks.value = tasks.value.filter(item => item.id !== id)
}
]]>

No tasks available

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🧪 مرحله 3: Cypress را برای تست E2E نصب کنید

اضافه کنید سرو به پروژه شما:

npm install cypress –save-dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Cypress را باز کنید تا فایل های پیکربندی لازم را ایجاد کنید:

npx cypress open

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در cypress/e2e پوشه، یک فایل به نام ایجاد کنید task-list.cy.js برای نوشتن تست های خود

🔍 مرحله 4: نوشتن تست های E2E با Cypress

در اینجا فایل کامل تست Cypress آمده است:

describe(‘Task lists’, () => {
beforeEach(() => {
cy.visit(‘http://localhost:5173/’)
})

it(‘should “display list of existing tasks”‘, () => {
cy.contains(‘Buying milk’).should(‘exist’)
});

it(‘should “Adds a new task”‘, () => {
cy.get(‘input[placeholder=”New task”]’).type(‘Learn Cypress’)

cy.get(‘form’).submit()

cy.contains(‘Learn Cypress’).should(‘exist’)
cy.get(‘ul li’).last().should(‘contain’, ‘Learn Cypress’);
});

it(‘should “Don\’t add empty tasks”‘, () => {
cy.get(‘form’).submit()

cy.get(‘ul li’).should(‘have.length’, 1)
});

it(‘should “To delete a task”‘, () => {
cy.get(‘ul li > button’).first().click()

cy.get(‘ul li’).should(‘have.length’, 0)
});

it(‘should display “No tasks available” when the list is empty’, () => {
cy.get(‘ul li > button’).click();
cy.contains(‘No tasks available’).should(‘exist’);
});
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

✅ شکستن تست های سرو

نمایش وظایف موجود: اطمینان حاصل می کند که کار اولیه (“خرید شیر”) قابل مشاهده است.
یک کار جدید اضافه کنید: آزمایش می کند که یک کار جدید می تواند اضافه شود و در لیست نمایش داده شود.
از اضافه کردن کارهای خالی جلوگیری کنید: ارسال فرم بدون وارد کردن متن نباید کار خالی اضافه کند.
یک کار را حذف کنید: با کلیک بر روی دکمه حذف باید کار از لیست حذف شود.
افزودن نمایشگر “هیچ کار موجود نیست”: هنگامی که لیست خالی است، نمایش “بدون کار در دسترس نیست” را نشان دهید.

🚀 مرحله 5: اجرای تست سرو

تست های خود را با موارد زیر اجرا کنید:

npx cypress run

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🎉 نتیجه گیری

ما یک لیست وظایف Vue 3 را با TypeScript ایجاد کرده‌ایم، سپس عملکرد آن را با Cypress تأیید کردیم. این رویکرد تضمین می کند که برنامه شما همانطور که در نظر گرفته شده است کار می کند.

🌟 مراحل بعدی:

اعتبارسنجی برای حداقل طول کار اضافه کنید.
موارد لبه را تست کنید (به عنوان مثال، حذف یک کار غیر موجود).
تبر Cypress را برای تست دسترسی ادغام کنید.

شما می توانید کد کامل را در github پیدا کنید

cd your-project
npm install

npm run dev

npm install cypress --save-dev

npx cypress open

describe('Task lists', () => {
    beforeEach(() => {
        cy.visit('http://localhost:5173/')
    })

    it('should "display list of existing tasks"', () => {
        cy.contains('Buying milk').should('exist')
    });

    it('should "Adds a new task"', () => {
        cy.get('input[placeholder="New task"]').type('Learn Cypress')

        cy.get('form').submit()

        cy.contains('Learn Cypress').should('exist')
        cy.get('ul li').last().should('contain', 'Learn Cypress');
    });

    it('should "Don\'t add empty tasks"', () => {
        cy.get('form').submit()

        cy.get('ul li').should('have.length', 1)
    });

    it('should "To delete a task"', () => {
        cy.get('ul li > button').first().click()

        cy.get('ul li').should('have.length', 0)
    });

    it('should display "No tasks available" when the list is empty', () => {
        cy.get('ul li > button').click();
        cy.contains('No tasks available').should('exist');
    });
})

npx cypress run