Monday, 25 December 2023

Testing with Laravel Dusk

Example

<?php

namespace Tests\Browser;

use App\Models\User;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class PageListRonzanNotRecordedTest extends DuskTestCase
{
    /**
     * test_after_login_goto_list_ronzan_not_recorded
     */
    public function test_after_login_goto_list_ronzan_not_recorded(): void
    {
        $user = User::factory()->create();

        $this->browse(function (Browser $browser) use ($user) {
            $browser
                ->loginAs($user)
                ->visit('/ronzan-contract/list-not-record')
                ->assertSee('ロンザン 未計上一覧')
                ->assertSee('お選びください')
                ->assertSee('オプション');
        });
    }

     /**
     * test_click_menu_and_show_menus
     */
    public function test_click_menu_and_show_menus(): void
    {
        $user = User::factory()->create();

        $this->browse(function (Browser $browser) use ($user) {
            $browser
                ->loginAs($user)
                ->visit('/ronzan-contract/list-not-record')
                ->click('#app > div > nav > div.space-y-6.div-main > div > div:nth-child(1) > div > i')
                ->assertSee('社員マスタ');
        });
    }

    /**
     * test_click_menu_and_show_menus
     */
    public function test_click_select_action(): void
    {
        $user = User::factory()->create();

        $this->browse(function (Browser $browser) use ($user) {
            $browser
                ->loginAs($user)
                ->visit('/ronzan-contract/list-not-record')
                ->waitFor('main > div > div > div.bg-dropDownOption > div > select')
                ->click('main > div > div > div.bg-dropDownOption > div > select')
                ->assertSee('お選びください')
                ->assertSee('CSVデータインポート')
                ->assertSee('新規案件を取得する')
                ->assertSee('再度吸い上げて編集する')
                ->assertSee('吸い上げずに編集する')
                ->assertSee('仮計上する')
                ->assertSee('本計上する')
                ->assertSee('削除する')
                ->assertSee('CSVデータインポート');
        });
    }

    /**
     * test_click_menu_and_show_menus
     */
    public function test_click_select_load_new_contract(): void
    {
        $user = User::factory()->create();

        $this->browse(function (Browser $browser) use ($user) {
            $browser
                ->loginAs($user)
                ->visit('/ronzan-contract/list-not-record')
                ->waitFor('main > div > div > div.bg-dropDownOption > div > select')
                ->click('main > div > div > div.bg-dropDownOption > div > select')
                ->waitFor('main > div > div > div.bg-dropDownOption > div > select > option:nth-child(3)')
                ->click('main > div > div > div.bg-dropDownOption > div > select > option:nth-child(3)')
                ->waitForText('新規案件を取得しますか?')
                ->waitForText('はい')
                ->waitFor('#headlessui-portal-root > div > div > div > div > div > div > div > button:nth-child(1)')
                ->click('#headlessui-portal-root > div > div > div > div > div > div > div > button:nth-child(1)')
                ->waitForText('新規案件を取得するのが成功しました');
        });
    }
}

 Thank you

Thursday, 21 December 2023

Laravel + Inertia + Vue3 + Typescript add plugin multi languages vue-i18n

1. Install package i18n

npm install vue-i18n

2. Add files languages

 resources\lang\en.json

{
    "world": "HELLO EN"
}

 resources\lang\vi.json

{
    "world": "HELLO VI"
}

3. Add plugin resources\js\plugins\langPlugin.ts

import { App } from 'vue';
import { createI18n, type I18nOptions } from 'vue-i18n';
import en from '../../lang/en.json';
import vi from '../../lang/vi.json';

const langPlugin = {
install(app: App, pluginOptions: any) {
const langOptions: I18nOptions = {
legacy: false,
locale: pluginOptions.locale ? pluginOptions.locale : 'en',
messages: {
en: en,
vi: vi,
},
};
const i18n = createI18n(langOptions);
app.use(i18n);
console.log(app);
},
};

export default langPlugin;

* need: legacy: false, see more >>

4. Update resources\js\app.ts

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(langPlugin, {})
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

5. Using I18n

- In template

   {{ $t('world') }}

- in <script setup>

import { useI18n } from 'vue-i18n';
const { t } = useI18n();
console.log(t('hello'));

Thank you

Golang Advanced Interview Q&A